更新记录

1.0.0（2023-11-15） 下载此版本

嵌入页面的滚动选择器 对picker-view的二次封装

平台兼容性

cus-picker-view 嵌入页面的滚动选择器

对picker-view的二次封装

属性说明

使用示例

<cus-picker indicatorClass='indicator_cus' v-model="selectShow" :pickerData='hour12' :selValue.sync='current' :indicatorStyle='indicatorStyle' @change='hanlderChange'></cus-picker>

import cusPicker from '@/components/cus-picker-view/index.vue'

export default {
  components: {
    cusPicker
  },
  data() {
    return {
    selectShow: false,
    hour12: [{
            id: 1,
            name: '子时',
        },
        {
            id: 2,
            name: '丑时',
        },
        {
            id: 3,
            name: '寅时',
        },
        {
            id: 4,
            name: '卯时',
        },
        {
            id: 5,
            name: '辰时',
        },
        {
            id: 6,
            name: '巳时',
        },
        {
            id: 7,
            name: '午时',
        },
        {
            id: 8,
            name: '未时',
        },
        {
            id: 9,
            name: '申时',
        },
        {
            id: 10,
            name: '酉时',
        },
        {
            id: 11,
            name: '戌时',
        },
        {
            id: 12,
            name: '亥时',
        }
    ],
    current: 2,
    selText:''
    }
  },
  methods: {
      hanlderChange(value){
        console.log(value,'0-0-0-0-')
        this.selText = this.hour12[value].name
      }
  }
}

        /deep/.indicator_cus{
            background-color: rgba(240, 156, 19, 0.1);
        }
        /deep/.indicator_cus:before{
            border-top: none!important;
        }
        /deep/.indicator_cus:after{
            border-bottom: none!important;
        }
        /deep/.uni-picker-view-indicator:before{
            border-top: none!important;
        }
        /deep/.uni-picker-view-indicator:after{
            border-bottom: none!important;
        }

效果图