vue2自定义组件select-option

1.外层 wzc-select.vue

<template>
    <div class="wzc_select" :style="styleVar" >
        <div class="divSelect" :class="{ 'drop_down': isListShow }" ref="divSelect" >
            <div class="divSelectinput" @click="dropDownSelect">
                <!-- 选中后的内容 -->
                <div class="selectinfos" :title="label" :class="{ 'no_select': label == '请选择' }"> {{ label }} </div>
                <!-- 三角形图标 -->
                <i class="imgthree fa fa-caret-up" :class="{ 'is-reverse': isListShow }"></i>
            </div>
        </div>
        <!-- 下拉框列表 -->
        <transition name="drop-down" >
            <div class="Selectlist" v-show="isListShow" ref="dropDown">
                <div class="select_triangle"></div>
                <ul class="wzc_option_list">
                    <slot name="wzc_option"></slot>
                </ul>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    name:'wzc_select',
    components: {},
    props: {
        placeholder: {
            type: String,
            default: '请选择'
        },
        width: {
            type: Number,
            default: 180
        },
        height: {
            type: Number,
            default: 40
        },
    },
    data() {
        return {
            label: '',
            isListShow: false,
            optionid: ''
        };
    },
    created() {
        this.label = this.placeholder;
    },
    mounted() {
        let _this = this;
        document.addEventListener("click", function( e ){
            if(_this.$refs.divSelect) {
                if ( !!_this.$refs.divSelect.contains(e.target) || !!_this.$refs.dropDown.contains(e.target) ) 
                    return;
                else
                    _this.isListShow = false;
            }   
        })
    },
    computed: {
        styleVar() {
            return {
                '--select-height': this.height + 'px',
                '--select-width': this.width + 'px'
            }
        }
    },
    methods: {
        dropDownSelect() {
            this.isListShow = !this.isListShow;
        },
    },
};
</script>
<style scoped>
    .wzc_select {
        border: 1px solid #E6E6E6;
        border-radius: 5px;
        height: var(--select-height);
        width: var(--select-width);
        line-height: var(--select-height);
    }
    .divSelect {
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    .drop_down {
        box-shadow: 0px 0px 6px #709DF7;
    }
    .divSelectinput {
        width: calc(100% - 20px);
        height: 100%;
        margin: 0 5px 0 15px;
        display: flex;
    }
    .selectinfos {
        width: 87.5%;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .no_select {
        color: #D3DCE6;
    }
    .imgthree {
        width: 12.5%;
        line-height: var(--select-height);
        text-align: center;
        transform: rotate(180deg);
        transition: all 0.3s;
    }
    .imgthree:before {
        cursor: pointer;
        color: #D3DCE6;
    }
    .imgthree.is-reverse {
        transform: rotate(0deg);
    }

    .Selectlist {
        margin-top: 10px;
        z-index: 800;
        position: relative;
        background-color: #fff;
    }
    .wzc_option_list {
        border-radius:5px;
        border:1px solid #E4E7ED;
        width: 100%; 
        padding: 3px 0px;
        box-shadow: 0px 0px 6px #709DF7;
        background-color: #fff;
        margin: 0;
    }
    .select_triangle {
        width: 14px;
        height: 7px;
        position: relative;
        left: 15px;
    }
    .select_triangle::before {
        position: absolute;
        content: "";
        left: 0px;
        width: 0;
        height: 0;
        border-top: 0px solid transparent;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: 8px solid #EBEEF5;
    }
    .select_triangle::after {
        position: absolute;
        left: 2px;
        top: 2px;
        content: "";
        width: 0;
        height: 0;
        border-top: 0px solid transparent;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 8px solid #fff;  
    }
    .drop-down-enter {
        opacity: 0;
        transform:translate(0px, -80px) scaleY(0.2);
    }
    .drop-down-leave-to {
        opacity: 0;
        transform:translate(0px, -80px) scaleY(0.2);
    }
    .drop-down-enter-active {
        transition: all 0.5s ease-in;
    }
    .drop-down-leave-active {
        transition: all 0.5s ease;
    }
</style>

2.内层

<template>
  <li class="wzc_option" :style="styleVar" @click="currentSelect">
    <div class="wzc_option_dropdown_item">{{ label }}</div>
  </li>
</template>

<script>
export default {
  name: "wzc_select",
  components: {},
  props: {
    width: {
      type: Number,
      default: -1,
    },
    height: {
      type: Number,
      default: 34,
    },
    label: {
      type: String,
    },
    optionid: {
      type: String,
    },
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {
    styleVar() {
      return {
        "--option-height": this.height + "px",
        "--option-width": this.width == -1? "100%" : this.width + "px",
      };
    },
  },
  methods: {
    currentSelect() {
      this.$parent.label = this.label;
      this.$parent.optionid = this.optionid;
      this.$parent.isListShow = !this.$parent.isListShow;
      // this.$emit('slot-content', {label: this.label, optionid: this.optionid} );
    }
  },
};
</script>
<style scoped>
.wzc_option {
  list-style: none;
  height: var(--option-height);
  width: var(--option-width);
  
}
.wzc_option:hover {
  color: #409eff;
  font-weight: 700;
  background-color: #f5f7fa;
}
.wzc_option_dropdown_item {
  height: 100%;
  width: calc(100% - 30px);
  line-height: var(--option-height);
  cursor: pointer;
  margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>

3.使用方法

<wzc-select class="wzcs" :width="240" :height="40">
  <template v-slot:wzc_option>
    <wzc_option
      v-for="item in showlist"
      :key="item.item_id"
      :label="item.item_name"
      :optionid="item.item_id"
    ></wzc_option>
  </template>
</wzc-select>

4.测试数据

showlist: [
  {
    item_name: "选项00000000000000000000000000000",
    item_id: "0",
  },
  {
    item_name: "选项11111111111111111111111111111",
    item_id: "1",
  },
  {
    item_name: "选项222222222222222222222222222222",
    item_id: "2",
  },
  {
    item_name: "选项33333333333333333333333333333333",
    item_id: "3",
  },
],

5.效果图

作者：空城机
链接：https://juejin.cn/post/6963638903467147295
来源：稀土掘金