更新记录

1.0.5（2022-04-19）

1

1.0.4（2022-03-17）

更新bug

1.0.3（2022-03-14）

更新说明

平台兼容性

zq-subfield

组件使用说明

• 该组件兼容微信小程序、app

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

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

• template代码：

    <zq-subfield v-model="subfieldIndex1" :list="[{name:'测试一'},{name:'测试一'},{name:'测试一'},{name:'测试一'}]"></zq-subfield>
    <zq-subfield v-model="subfieldIndex2" :list="[{name:'测试一',dotText:'test'},{name:'测试一'},{name:'测试一',dotText:'20'},{name:'测试一'}]"></zq-subfield>
    <zq-subfield v-model="subfieldIndex3" :list="[{name:'测试一',dotText:'test'},{name:'测试一',dotIamge:'/static/images/banner.png',dotIamgeWidth:30,dotIamgeHeight:30},{name:'测试一',dotText:'20'},{name:'测试一',dotIamge:'/static/images/banner.png',dotIamgeWidth:50,dotIamgeHeight:50,dotRight:0,dotTop:25}]"></zq-subfield>

    data(){
        return{
            subfieldIndex1:0,
            subfieldIndex2:2,
            subfieldIndex3:3,
        }
    }

组件属性的全局配置

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

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

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

    const store = new Vuex.Store({
        state: {
            zqSubfieldSetting:{
                background:"#FFFFFF",//分栏背景色
                position:"",//分栏定位
                borderBottom:"2rpx solid #F8F8F8",//底部边框
                width:750,//分栏宽度
                height:100,//分栏高度
                top:0,//顶部边距
                left:0,//左边距
                zIndex:999,//层级
                fontSize:24,//分栏文字大小rpx
                color:"#333333",//分栏文字颜色
                activeColor:"#FA8743",//激活文字颜色
                activeFontSize:30,//激活文字大小
                padding:60,//分栏文字间距
                sliderWidth:60,//滑块宽度
                sliderHeight:4,//滑块高度
                sliderBackground:"linear-gradient(to right,#FA8743,#FA8743)",//滑块背景色
                dotFontSize:18,//提示字号大小
                dotBackground:"#DD524D",//提示背景颜色
                dotColor:"#ffffff",//提示文字的颜色
                dotRadius:20//数字提示背景半径
            }
        }
    })

组件基本API参数

props的参数

list的参数

• name为必传属性，如果不传其他属性默认使用内置属性
• initBtn长度大于2的时候，全部通过...隐藏，可点击...展开查看

组件事件