更新记录

1.0.2（2022-03-14）

更新内置跳转

1.0.1（2022-03-14）

更新文档说明

1.0.0（2022-03-11）

更新组件

平台兼容性

zq-sudoku

组件使用说明

• 兼容微信小程序、安卓(ios没测试)、h5

• 该组件全部使用的rpx单位

• 劳烦各位大佬点个收藏 git地址

• template代码：

    <zq-sudoku :list="sudokuList">
        <template v-slot:item="{item}">全部自定义</template>
        <template v-slot:custom="{item}">指定自定义</template>
        <template v-slot:dot="{item}">全部dot自定义</template>
        <template v-slot:dotCustom="{item}">部分dot自定义</template>
    </zq-sudoku>

    data(){
        return{
            sudokuList:[
                {name:"气泡按钮",icon:"/static/images/icon/button.png",custom:true},
                {name:"分栏导航栏",icon:"/static/images/icon/subfield.png",dot:500},
                {name:"加载动画",icon:"/static/images/icon/load.png",dotCustom:true,dot:500},
                {name:"弹窗",icon:"/static/images/icon/pop.png"},
                {name:"九宫格",icon:"/static/images/icon/sudoku.png"},
                {name:"导航栏",icon:"/static/images/icon/navbar.png"},
                {name:"view盒子",icon:"/static/images/icon/box.png"},
            ]
        }
    }

组件属性的全局配置

• 在main.js文件中定义$store

import store from './store';
Vue.prototype.$store = store;

• 在store的文件中添加以下内容，不使用的属性可不配置,单页面可通过:props设置

    const store = new Vuex.Store({
        state: {
            zqSudokuSettings:{
                width:750,//盒子的宽度
                margin:"",//盒子外边距
                background:'#ffffff',//盒子的背景颜色
                column:3,//格子的数量
                borderWidth:6,//边框的宽度
                borderColor:"#dddddd",//边框颜色
                interval:20,//格子的间距
                itemWidth:0,//格子的宽度
                itemHeight:200,//格子高度
                fontSize:24,//字号大小
                color:"#333333",//字号颜色
                imgMode:'aspectFit',//图片展示方式
                imgWidth:100,//图片大小
                imgHeight:100,//图片高度
                imgInterval:20,//图片和文字的间距
                delay:0.2,//动画延时
                isMove:true,//是否有动画
                isActive:true,//是否有点击效果
                activeColor:"#eeeeee",//点击颜色

                dotFontSize:24,//提示点的字号大小
                dotHeight:40,//提示点的高度
                dotBackground:"#ff414d",//提示点的背景色
                dotColor:"#ffffff",//提示点的字体颜色
                dotTop:15,//提示点的top
                dotRight:50//提示点的right
            }
        }
    })

组件基本API参数

props的参数

list的参数

组件事件