vue封装的h5下拉多选select

封装效果：
样式根据自己的设计图更改。

image.png image.png

代码如下：

<template>
<div>
   <div class="h5-select-multiple">
       <div  class="h5-select-multiple-value">{{value.length==0?'请选择':valueLabel}}</div>
       <div  @click.stop="clickShow">
           <img src="./up.png" v-if="show" alt="">
           <img src="./lower.png" v-else alt="">
       </div>
   </div>
   <div class="h5-select-multiple-content" v-show="show" >
       <div @click="getValue(item)" v-for="(item,index) in optionsData" :key="index" class="h5-select-multiple-content-row">
           <span class="h5-select-multiple-content-span">
           {{item.label}}
           </span>
           <img src="./yes.png" v-show="value.includes(item.value)" class="yesImg"/>
       </div>
   </div>
</div>
</template>

<script>
  export default {
  name: 'h5-select-multiple',
  props: {
    value:{ //选中值
        type: Array,
        required: true
    },
    label:{ // 要显示的名称
        default: '',
        required: false
    },
    keyValue:{ // 要绑定的key如：id
        default: '',
        required: false
    },
    options: { // 要显示的集合格式：[{}]
        type: Array,
        required: true
    },
  },
  data(){
    return {
        optionsData:this.options,
        valueLabel:'',
        show:false
    }
  },
   methods:{
       clickShow(){
           this.show = !this.show
       },
        getValue(item){
            if(this.value.includes(item.value)){ // 判断是否选中如果已选中再次点击删除
               if(this.value.length>1){ // 选中数量大于1，对选中名称进行字符串处理
                   if(this.valueLabel.indexOf(item.label)===0){
                       this.valueLabel = this.valueLabel.replace(item.label +"，" ,'')
                   }
                   else{
                       this.valueLabel = this.valueLabel.replace("，" +item.label,'')
                   }
               }
               else{
                   // 使用toString()转成字符串，防止
                  this.valueLabel =  this.valueLabel.toString().replace(item.label,'')
               }
               this.value.splice([this.value.indexOf(item.value)],1);
            }
            else{ // 没有选中时直接添加
                this.value.push(item.value);
                if(this.value.length>1){
                  this.valueLabel = this.valueLabel + "，" + item.label 
                }
               else{
                   this.valueLabel =  item.label
               }
                
            } 
            this.optionsData = [...this.options];
            this.$emit('change',{value:this.value,valueLabel:this.valueLabel})
        }
    },
    mounted(){
        // 对绑定的label，key转换
        this.options.forEach(item=>{
            if(this.label){
                item.label = item[this.label]
            }
            if(this.keyValue){
                item.value = item[this.keyValue]
            }
        })
        // 点击下拉内容以外的隐藏下拉内容
        document.addEventListener('click',e=>{
          // console.log(e.target)
          let className = ['h5-select-multiple-content-row','yesImg','h5-select-multiple-content-span'];
            if(!className.includes(e.target.className)){
                this.show = false
            }
        })
    }
}
</script>

<style>
 .h5-select-multiple{
     display: flex;
    font-size: 1.6rem;
 }
 .h5-select-multiple img,.h5-select-multiple-content img{
    width: 2.4rem;;
    height: 2.4rem;
 }
 .h5-select-multiple-value{
     min-width: 6rem;
 }
 .h5-select-multiple-content{
     font-size: 1.6rem;
     width: 8rem;
     max-height: 11rem;
     overflow-y: auto;
     border: 1px solid #ccc;
 }
 .h5-select-multiple-content-row{
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0.4rem 0;
 }
 .h5-select-multiple-content-row span{
     padding-left: 2px;
 }
</style>

源码查看： npm i h5-select-multiple

image.png

想知道npm怎么发插件的查看我的npm发布自己的vue包文章。
喜欢的点赞关注，小编不定时分享更多精彩内容。