数独是一种逻辑解谜游戏，它规则稍复杂，解题过程富有挑战性。
游戏规则：很简单。 游戏棋盘是一个9x9的格网，被划分成3x3个区域，每个区域是一块九宫格。玩家需要在格内填入1到9的数字，其中一些数字在游戏开始时已经给出。 每一行，每一列，以及每一块九宫格区域内的数字必须是唯一的，不允许出现重复。简单的还需要又2*2以满足初级玩家游玩。
首先需要做出棋盘，数据模式来源于接口返回值，大多为字符串格式，我们首先要把他转换为多维数组。
let gameOriginData=1.2.23.4.231.142
for (let i = 0; i < gameOriginData.length; i += 4) {
this.gameData.push([...gameOriginData.slice(i, i + 4)])
}
//输出数据是
//gameData=>
[
['1','.','2','.'],
['2','3','.','4'],
['.','2','3','1'],
['.','1','4','2'],
]此时的数据就如同初级的4*4宫格数独了，但是我们还需要区分常量和变量，点的是可以切换数据的，带数字的则是引导常量。其次，还需要有标记功能在单个宫格内。
const kk = []
for (let i = 0; i < this.gameData.length; i++) {
kk[i] = []
for (let j = 0; j < this.gameData[i].length; j++) {
kk[i].push({
id: this.gameData[i][j] == '.' ? '.' : parseInt(this.gameData[i][j]),
marked: [],
key: this.gameData[i][j] == '.' ? 0 : -1,//0则代表可以更改的值，-1代表定值不能改变
})
}
}
this.userMap = kk
//输出的数据结构是
//userMap =>
[
[
{id:1,key:-1,marked:[]},
{id:'.',key:0,marked:[]},
{id:2,key:-1,marked:[]},
{id:'.',key:0,marked:[]},
],
[
{id:2,key:-1,marked:[]},
{id:3,key:-1,marked:[]},
{id:'.',key:0,marked:[]},
{id:4,key:-1,marked:[]},
],
[
{id:'.',key:0,marked:[]},
{id:2,key:-1,marked:[]},
{id:3,key:-1,marked:[]},
{id:1,key:-1,marked:[]},
],
[
{id:'.',key:0,marked:[]},
{id:1,key:-1,marked:[]},
{id:4,key:-1,marked:[]},
{id:2,key:0,marked:[]},
]
]此时则可以渲染棋盘了
html部分
<view class="qiPan">
<view class="noticeView">
<view v-for="(line, i) in userMap" :key="i" class="line">
<view
v-for="(block, j) in line"
:key="j"
:class="{
borderGreen: checkCurrent(i, j),
block9: mapSku > 2,
block4: mapSku == 2,
}"
:style="[getBlockStyle(j, i)]"
>
<view
v-if="block.key == -1"
:style="[getBlockStyleNpc(j, i)]"
:class="{
textWrong: hitSame(i, j),
textGrey: !hitSame(i, j),
}"
>
{{ block.id }}</view
>
<view
v-else-if="block.key > 0"
class="handleAction"
:class="{
textWrong: hitSame(i, j),
textGreen: !hitSame(i, j),
rockStart: hitSame(i, j),
}"
@tap="blockClick(i, j)"
>{{ block.key }}
</view>
<!-- 此处为空白宫格，可以点击 -->
<view v-else class="handleAction" @tap="blockClick(i, j)">
</view>
</view>
</view>
</view>js部分
//this.mapSku为2 则是2*2宫格 3则是3*3宫格
// 点击得当前宫格
checkCurrent(i, j) {
const result = this.touchCurrent[0] == i && this.touchCurrent[1] == j
return result
},
//当前定值的宫格css
getBlockStyleNpc(i, j) {
return {
background: '#fffae1',
width: '100%',
height: '100%',
'border-top-left-radius': i == 0 && j == 0 ? '10rpx' : '0rpx',
'border-top-right-radius': j == 0 && i == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
'border-bottom-left-radius':
i == 0 && j == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
'border-bottom-right-radius':
i == this.mapSku * this.mapSku - 1 && j == this.mapSku * this.mapSku - 1
? '10rpx'
: '0rpx',
}
},
//核心算法：判断是否存在同行同列或同单元格一致的用户填入数据
hitSame(i, j) {
const needNum = this.userMap[i][j].key >= 0 ? this.userMap[i][j].key : this.userMap[i][j].id
// //求左上角的点
const block_x = parseInt(i / this.mapSku) * this.mapSku
const block_y = parseInt(j / this.mapSku) * this.mapSku
if (needNum == 0) return false
for (let k = 0; k < this.mapSku * this.mapSku; k++) {
//行
let theNum = this.userMap[i][k].key >= 0 ? this.userMap[i][k].key : this.userMap[i][k].id
if (theNum == needNum && theNum > 0 && j != k) return true
//列
theNum = this.userMap[k][j].key >= 0 ? this.userMap[k][j].key : this.userMap[k][j].id
if (theNum == needNum && theNum > 0 && i != k) return true
//单元格内
const thex = block_x + parseInt(k % this.mapSku)
const they = block_y + parseInt(k / this.mapSku)
theNum =
this.userMap[thex][they].key >= 0
? this.userMap[thex][they].key
: this.userMap[thex][they].id
if (theNum == needNum && theNum > 0 && !(i == thex && j == they)) {
return true
}
}
return false
},
// 所有宫格宽高
getBlockSize(val) {
let result = 0
if (val) {
result = parseInt((680 + 4) / (this.mapSku * this.mapSku)) - 8
} else {
result = parseInt((680 + 4) / (this.mapSku * this.mapSku))
}
return result
},
// 设置棋盘宫内div的边框
getBlockStyle(i, j) {
return {
width: this.getBlockSize() + 'rpx',
height: this.getBlockSize() + 'rpx',
'over-flow': 'hidden',
'line-height': this.getBlockSize('lh') + 'rpx',
// background: '#f8e7a4',
'border-top-left-radius': i == 0 && j == 0 ? '10rpx' : '0rpx',
'border-top-right-radius': j == 0 && i == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
'border-bottom-left-radius':
i == 0 && j == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
'border-bottom-right-radius':
i == this.mapSku * this.mapSku - 1 && j == this.mapSku * this.mapSku - 1
? '10rpx'
: '0rpx',
borderLeft:
i == 0
? '#ae7a36 4rpx solid'
: i % this.mapSku == 0
? '#ae7a36 2rpx solid'
: '#dab88a 1rpx solid',
borderRight:
i == this.mapSku * this.mapSku - 1
? '#ae7a36 4rpx solid'
: i % this.mapSku == this.mapSku - 1
? '#ae7a36 2rpx solid'
: '#dab88a 1rpx solid',
borderTop:
j == 0
? '#ae7a36 4rpx solid'
: j % this.mapSku == 0
? '#ae7a36 2rpx solid'
: '#dab88a 1rpx solid',
borderBottom:
j == this.mapSku * this.mapSku - 1
? '#ae7a36 4rpx solid'
: j % this.mapSku == this.mapSku - 1
? '#ae7a36 2rpx solid'
: '#dab88a 1rpx solid',
}
},css部分
.qiPan {
padding-top: 20rpx;
.noticeView {
margin: 0 auto;
border-radius: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.line {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.handleAction {
width: 100%;
height: 100%;
position: relative;
}
.block4 {
font-size: 68rpx;
text-align: center;
}
.block9 {
font-size: 50rpx;
text-align: center;
}
}
.textWrong {
background-color: #f14e28 !important;
color: #6c4e27 !important;
}
.textGreen {
color: #519d07;
}
.textGrey {
color: #6c4e27;
}
.borderGreen {
border: 4rpx solid #73d217 !important;
}
.rockStart {
animation: chanDong 1s linear;
}
@keyframes chanDong {
5% {
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
}
6%,
8%,
10%,
12% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
}
7%,
9%,
11% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
}
13% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
}
}此时我们就完成了棋盘的开发。接下来需要底部的数字按钮和操作按钮
<view
class="actionUl"
:style="{ 'justify-content': mapSku * mapSku <= 4 ? 'space-around' : 'start' }"
>
<view
v-for="(item, index) in mapSku * mapSku"
:key="index"
:class="{
actionLi4: mapSku * mapSku <= 4,
actionLi9: mapSku * mapSku > 4,
}"
@click="actionChange(item + 1)"
>
{{ item + 1 }}
</view>
<view
class="bt"
:style="{ 'margin-left': mapSku * mapSku <= 4 ? '' : '36rpx' }"
@click="marked = !marked"
>
//marked为真则是标记模式
<view class="word">{{ marked ? '填字' : '标记' }}</view>
</view>
<view
class="bt"
:style="{ 'margin-left': mapSku * mapSku <= 4 ? '' : '36rpx' }"
@click="deleteSudo()"
>
<view class="word">删除</view>
</view>
</view>.actionUl {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 680rpx;
margin: 0 auto;
padding-top: 50rpx;
position: relative;
z-index: 10;
.actionLi4 {
width: 126rpx;
height: 126rpx;
border-radius: 40rpx;
border: solid 5rpx #fd6f10;
font-size: 61rpx;
text-align: center;
line-height: 126rpx;
font-weight: bold;
cursor: pointer;
margin-bottom: 20rpx;
}
.actionLi9:nth-child(7) {
margin-right: 0;
}
.actionLi9 {
width: 86rpx;
margin-right: (78/6) + rpx;
height: 86rpx;
background-color: #ffab51;
border-radius: 30rpx;
border: solid 4rpx #fd6f10;
font-size: 46rpx;
text-align: center;
line-height: 79rpx;
font-weight: bold;
cursor: pointer;
margin-bottom: 20rpx;
}
.bt {
width: 206rpx;
height: 90rpx;
border-radius: 24rpx;
font-size: 34rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: solid 5rpx #000000;
text-align: center;
line-height: 56rpx;
cursor: pointer;
position: relative;
.icon {
width: 34rpx;
height: 34rpx;
margin-right: 10rpx;
}
.word {
padding-left: 10rpx;
font-size: 34rpx;
font-weight: bold;
}
}
}首先点击数字按钮，将数字action存储到data中，再宫格，获取[i,j]也就是坐标。再对数值的正确度进行判断。
// 方块点击事件
blockClick(i, j) {
this.touchCurrent = [i, j]
},
// 点击下方数字按钮
async actionChange(val) {
const that = this
if (this.touchCurrent.length == 0) {
this.$tips.toast('请先选择方格')
return false
}
const i = this.touchCurrent[0]
const j = this.touchCurrent[1]
this.action = val
if (this.marked) {
//此时为标记模式
const io = this.userMap[i][j].marked.findIndex((value, index, arr) => {
return value == val
})
if (io < 0) {
this.userMap[i][j].marked.push(val)
} else {
this.userMap[i][j].marked.splice(io, 1)
}
this.$forceUpdate()
return false
}
if (this.userMap[i][j].key != -1) {
if (this.userMap[i][j].id != this.action) {
this.userMap[i][j].key = parseInt(this.action)
}
this.$forceUpdate()
}
setTimeout(function () {
if (that.hitSame(i, j)) {
that.userMap[i][j].key = 0
}
}, 3000)
//结果判断
let canPass = true
for (let m = 0; m < this.mapSku * this.mapSku; m++) {
for (let n = 0; n < this.mapSku * this.mapSku; n++) {
if (this.hitSame(m, n) || this.userMap[m][n].key == 0) {
canPass = false
break
}
}
}
if (canPass) {
//游戏闯关成功，调用提交接口
uni.showModal({
content: '成功',
showCancel: false,
})
// 弹窗提示
}
},点击底部的数字，会首先判断是否标记模式，标记模式则会将数字push到该宫格内的marked中。否则则会判断userMap[i][j].key是否不为-1(非定值)，然后再将action赋值给userMap[i][j].key。顶部的textWrong则会判断是否正确，错误则标红并伴有回弹动画。之后actionChange中会重置userMap[i][j].key为0；
下面贴出完整代码
<template>
<view class="allPage">
<view class="page">
<view class="qiPan">
<view class="noticeView">
<view v-for="(line, i) in userMap" :key="i" class="line">
<view
v-for="(block, j) in line"
:key="j"
:class="{
borderGreen: checkCurrent(i, j),
block9: mapSku > 2,
block4: mapSku == 2,
}"
:style="[getBlockStyle(j, i)]"
>
<view
v-if="block.key == -1"
:style="[getBlockStyleNpc(j, i)]"
:class="{
textWrong: hitSame(i, j),
textGrey: !hitSame(i, j),
}"
>
{{ block.id }}</view
>
<view
v-else-if="block.key > 0"
class="handleAction"
:class="{
textWrong: hitSame(i, j),
textGreen: !hitSame(i, j),
rockStart: hitSame(i, j),
}"
@tap="blockClick(i, j)"
>{{ block.key }}
</view>
<!-- 此处为空白宫格，可以点击 -->
<view v-else class="handleAction" @tap="blockClick(i, j)">
<marked
:width="getBlockSize()"
:list="block.marked"
:marked="marked"
:action="action"
:map-sku="mapSku"
/>
</view>
</view>
</view>
</view>
</view>
<view
class="actionUl"
:style="{ 'justify-content': mapSku * mapSku <= 4 ? 'space-around' : 'start' }"
>
<view
v-for="(item, index) in mapSku * mapSku"
:key="index"
:class="{
actionLi4: mapSku * mapSku <= 4,
actionLi9: mapSku * mapSku > 4,
}"
@click="actionChange(item + 1)"
>
{{ item + 1 }}
</view>
<view
class="bt"
:style="{ 'margin-left': mapSku * mapSku <= 4 ? '' : '36rpx' }"
@click="marked = !marked"
>
<view class="word">{{ marked ? '填字' : '标记' }}</view>
</view>
<view
class="bt"
:style="{ 'margin-left': mapSku * mapSku <= 4 ? '' : '36rpx' }"
@click="deleteSudo()"
>
<view class="word">删除</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { mapState } from 'vuex'
import marked from './components/marked.vue' //标记
export default {
name: '',
components: {
marked,
},
data() {
return {
list: '',
gameData: [],
userMap: [],
mapSku: 2,
touchCurrent: [],
action: '',
marked: false,
}
},
onLoad() {
this.initData()
},
methods: {
// 方块点击事件
blockClick(i, j) {
this.touchCurrent = [i, j]
},
// 点击底部删除按钮
deleteSudo() {
const that = this
if (this.touchCurrent.length == 0) {
this.$tips.toast('请先选择方格')
return false
}
const i = this.touchCurrent[0]
const j = this.touchCurrent[1]
if (this.marked) {
//当前标记方格清空
this.userMap[i][j].marked = []
return false
}
// 非标记模式 将当前宫格内的数值置空
this.userMap[i][j].key = 0
this.action = 0
},
// 点击下方数字按钮
async actionChange(val) {
const that = this
if (this.touchCurrent.length == 0) {
this.$tips.toast('请先选择方格')
return false
}
const i = this.touchCurrent[0]
const j = this.touchCurrent[1]
this.action = val
if (this.marked) {
//此时为标记模式
const io = this.userMap[i][j].marked.findIndex((value, index, arr) => {
return value == val
})
if (io < 0) {
this.userMap[i][j].marked.push(val)
} else {
this.userMap[i][j].marked.splice(io, 1)
}
this.$forceUpdate()
return false
}
if (this.userMap[i][j].key != -1) {
if (this.userMap[i][j].id != this.action) {
this.userMap[i][j].key = parseInt(this.action)
}
this.$forceUpdate()
}
setTimeout(function () {
if (that.hitSame(i, j)) {
that.userMap[i][j].key = 0
}
}, 3000)
//结果判断
let canPass = true
for (let m = 0; m < this.mapSku * this.mapSku; m++) {
for (let n = 0; n < this.mapSku * this.mapSku; n++) {
if (this.hitSame(m, n) || this.userMap[m][n].key == 0) {
canPass = false
break
}
}
}
if (canPass) {
//游戏闯关成功，调用提交接口
uni.showModal({
content: '成功',
showCancel: false,
})
// 弹窗提示
}
},
// 初始化游戏
async initData() {
await this.loadData()
},
async loadData() {
const gameOriginData = '1.2.23.4.231.142'
for (let i = 0; i < gameOriginData.length; i += 4) {
this.gameData.push([...gameOriginData.slice(i, i + 4)])
}
const kk = []
for (let i = 0; i < this.gameData.length; i++) {
kk[i] = []
for (let j = 0; j < this.gameData[i].length; j++) {
kk[i].push({
id: this.gameData[i][j] == '.' ? '.' : parseInt(this.gameData[i][j]),
marked: [],
key: this.gameData[i][j] == '.' ? 0 : -1,
})
}
}
this.userMap = kk
},
// 点击得当前宫格
checkCurrent(i, j) {
const result = this.touchCurrent[0] == i && this.touchCurrent[1] == j
return result
},
getBlockStyleNpc(i, j) {
return {
background: '#fffae1',
width: '100%',
height: '100%',
'border-top-left-radius': i == 0 && j == 0 ? '10rpx' : '0rpx',
'border-top-right-radius': j == 0 && i == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
'border-bottom-left-radius':
i == 0 && j == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
'border-bottom-right-radius':
i == this.mapSku * this.mapSku - 1 && j == this.mapSku * this.mapSku - 1
? '10rpx'
: '0rpx',
}
},
hitSame(i, j) {
// // 判断是否存在同行同列或同单元格一致的用户填入数据
const needNum = this.userMap[i][j].key >= 0 ? this.userMap[i][j].key : this.userMap[i][j].id
// //求左上角的点
const block_x = parseInt(i / this.mapSku) * this.mapSku
const block_y = parseInt(j / this.mapSku) * this.mapSku
if (needNum == 0) return false
for (let k = 0; k < this.mapSku * this.mapSku; k++) {
//行
let theNum = this.userMap[i][k].key >= 0 ? this.userMap[i][k].key : this.userMap[i][k].id
if (theNum == needNum && theNum > 0 && j != k) return true
//列
theNum = this.userMap[k][j].key >= 0 ? this.userMap[k][j].key : this.userMap[k][j].id
if (theNum == needNum && theNum > 0 && i != k) return true
//单元格内
const thex = block_x + parseInt(k % this.mapSku)
const they = block_y + parseInt(k / this.mapSku)
theNum =
this.userMap[thex][they].key >= 0
? this.userMap[thex][they].key
: this.userMap[thex][they].id
if (theNum == needNum && theNum > 0 && !(i == thex && j == they)) {
return true
}
}
return false
},
// 宫格宽高
getBlockSize(val) {
let result = 0
if (val) {
result = parseInt((680 + 4) / (this.mapSku * this.mapSku)) - 8
} else {
result = parseInt((680 + 4) / (this.mapSku * this.mapSku))
}
return result
},
// 设置棋盘宫内div的边框
getBlockStyle(i, j) {
return {
width: this.getBlockSize() + 'rpx',
height: this.getBlockSize() + 'rpx',
'over-flow': 'hidden',
'line-height': this.getBlockSize('lh') + 'rpx',
// background: '#f8e7a4',
'border-top-left-radius': i == 0 && j == 0 ? '10rpx' : '0rpx',
'border-top-right-radius': j == 0 && i == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
'border-bottom-left-radius':
i == 0 && j == this.mapSku * this.mapSku - 1 ? '10rpx' : '0rpx',
'border-bottom-right-radius':
i == this.mapSku * this.mapSku - 1 && j == this.mapSku * this.mapSku - 1
? '10rpx'
: '0rpx',
borderLeft:
i == 0
? '#ae7a36 4rpx solid'
: i % this.mapSku == 0
? '#ae7a36 2rpx solid'
: '#dab88a 1rpx solid',
borderRight:
i == this.mapSku * this.mapSku - 1
? '#ae7a36 4rpx solid'
: i % this.mapSku == this.mapSku - 1
? '#ae7a36 2rpx solid'
: '#dab88a 1rpx solid',
borderTop:
j == 0
? '#ae7a36 4rpx solid'
: j % this.mapSku == 0
? '#ae7a36 2rpx solid'
: '#dab88a 1rpx solid',
borderBottom:
j == this.mapSku * this.mapSku - 1
? '#ae7a36 4rpx solid'
: j % this.mapSku == this.mapSku - 1
? '#ae7a36 2rpx solid'
: '#dab88a 1rpx solid',
}
},
},
}
</script>
<style lang="scss" scoped>
.allPage {
background: #ffe97e;
min-height: 100vh;
.page {
position: relative;
width: 100%;
.qiPan {
padding-top: 20rpx;
.noticeView {
margin: 0 auto;
border-radius: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.line {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.handleAction {
width: 100%;
height: 100%;
position: relative;
}
.block4 {
font-size: 68rpx;
text-align: center;
}
.block9 {
font-size: 50rpx;
text-align: center;
}
}
.textWrong {
background-color: #f14e28 !important;
color: #6c4e27 !important;
}
.textGreen {
color: #519d07;
}
.textGrey {
color: #6c4e27;
}
.borderGreen {
border: 4rpx solid #73d217 !important;
}
.rockStart {
animation: chanDong 1s linear;
}
@keyframes chanDong {
5% {
-webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
}
6%,
8%,
10%,
12% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 10deg);
}
7%,
9%,
11% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -10deg);
}
13% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
}
}
.actionUl {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 680rpx;
margin: 0 auto;
padding-top: 50rpx;
position: relative;
z-index: 10;
.actionLi4 {
width: 126rpx;
height: 126rpx;
border-radius: 40rpx;
border: solid 5rpx #fd6f10;
font-size: 61rpx;
text-align: center;
line-height: 126rpx;
font-weight: bold;
cursor: pointer;
margin-bottom: 20rpx;
}
.actionLi9:nth-child(7) {
margin-right: 0;
}
.actionLi9 {
width: 86rpx;
margin-right: (78/6) + rpx;
height: 86rpx;
background-color: #ffab51;
border-radius: 30rpx;
border: solid 4rpx #fd6f10;
font-size: 46rpx;
text-align: center;
line-height: 79rpx;
font-weight: bold;
cursor: pointer;
margin-bottom: 20rpx;
}
.bt {
width: 206rpx;
height: 90rpx;
border-radius: 24rpx;
font-size: 34rpx;
// color: #ffffff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: solid 5rpx #000000;
cursor: pointer;
position: relative;
.icon {
width: 34rpx;
height: 34rpx;
margin-right: 10rpx;
}
.word {
padding-left: 10rpx;
font-size: 34rpx;
font-weight: bold;
}
}
}
}
}
</style>marked组件代码如下
<template>
<view class="marked" :style="{ padding: mapSku > 2 ? '4rpx' : '0rpx' }">
<view class="markedLi" :style="{ 'margin-left': mapSku > 2 ? '6rpx' : '0rpx' }">
<view
v-for="(item, index) in markedList"
:key="index"
class="markedItem"
:style="[getBlockStyleMaked()]"
>
{{ item }}
</view>
</view>
</view>
</template>
<script>
export default {
name: 'Marked',
props: {
mapSku: {
type: Number,
default: 2,
},
list: {
type: Array,
default: () => [],
},
action: {
type: Number,
default: 0,
},
marked: {
type: Boolean,
default: false,
},
width: {
type: [Number, String],
default: 0,
},
},
data() {
return {
markedList: [],
}
},
watch: {
list: function (val) {
this.markedList = val
},
},
created() {
console.log('width是', this.width)
this.markedList = this.list
},
methods: {
getBlockStyleMaked() {
const number4 = parseInt((this.width - 20) / this.mapSku) + 'rpx'
const number9 = parseInt((this.width - 36) / this.mapSku) + 'rpx'
console.log('number4是', number4)
return {
'text-align': 'center',
'font-size': (this.mapSku > 2 ? 20 : 30) + 'rpx',
width: this.mapSku > 2 ? number9 : number4,
height: this.mapSku > 2 ? number9 : number4,
'line-height': this.mapSku > 2 ? number9 : number4,
}
},
},
}
</script>
<style scoped lang="scss">
.marked {
width: 100%;
height: 100%;
display: flex;
background: #f8e7a4;
flex-direction: row;
align-items: center;
position: absolute;
left: 0;
top: 0;
.markedLi {
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
margin: 0 auto;
}
}
</style>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
