更新记录

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

可配置下拉选择器自定义样式可以自定义options

平台兼容性

cus-drop-selects 自定义下拉选择框

属性说明

|事件| | @change 选中的值 |

使用示例

    //基础用法
    <view class="select_option">
        <cus-drop-selects :option="cusList" showType='color' v-model="cusValue"></cus-drop-selects>
    </view>
    //自定义数据项用法
    <view class="select_option">
        <cus-drop-selects :showOption:sync='showOption' :option="cusList" showType='color' :cus-option="true"  v-model="cusValue">
            <template #option>
                <view class="" v-for="(item, index) in cusList" :key='item.value' @click='selectOption(item)'>
                    插入的数据
                </view>
            </template>
        </cus-drop-selects>
    </view>
    //自定义头部用法
    <view class="select_option">
        <cus-drop-selects :option="cusList" :cus-title="true" showType='color'  v-model="cusValue">
            <template #title>
                <view class="">
                    title数据
                </view>
            </template>
        </cus-drop-selects>
    </view>

import cusDropSelects from '@/components/cus-drop-selects/index.vue'
export default {
  components: {
    cusDropSelects
  },
  data() {
    return {
      cusValue:'',
      showOption:false, //当自定义选择项区域时(cus-option="true" )该属性生效
      cusList:[
        {
            label: '全部',
            value: 0,
            color:'#c6cad0',
            disable:false
        },
        {
            label: '在线',
            value: 1,
            color:'#13ce88',
            disable:false
        },
        {
            label: '离线',
            value: 2,
            color:'#e21e24',
            disable:false
        },
        {
            label: '异常',
            value: 3,
            color:'#ed7a17',
            disable:false
        },

      ],
        alias:{ //别名来代指一下
            label:'label',
            value:'value',
            color:'color',
            disable:'disable'
          },
        }
  },
  methods: {
    change(e) {
      console.log(e) //这里返回的是选择的数据，当自定义选择项区域时该方法无效
    },
    selectOption(e){//当自定义选择项区域时该方法生效
        this.cusValue = e.value
        this.showOption = false
    }
  },
}

    .select_option{
        width: 300rpx;
        min-height: 80rpx;
        background-color: #f4f4f4;
        border-radius: 12px;
        margin-left: 100px;
    }