Vue自定义组件——自定义下拉框

组件自定义

props

props传入数据。

$emit

this.$emit(“input”,param);调用组件外部的监听。

v-model

自定义组件要使用v-model实现双向绑定,会使用名称为value的props,和名称为input的事件。下面有实现。

下拉框实现代码

/* 自定义下拉列表组件样式 */
.custom-select-box{
    min-height: 30px;
    width: 100%;
    position: relative;
}
.custom-select-box .show-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    width: 100%;
    border: 1px solid #ffffff30;
    border-radius: 5px;
    background: #4A5564;
    padding:0 8px;
    cursor: pointer;
}
.custom-select-box .show-box.selecting{
    border: 1px solid #00D9FFFF;
}
.custom-select-box .show-box .arrow-down{
    width: 14px;
    height: 17px;
    transform:rotate(90deg);
    background-image: url("../images/right-arrow.png");
}
.custom-select-box .show-box .arrow-right{
    width: 14px;
    height: 17px;
    background-image: url("../images/right-arrow.png");
}
.custom-select-box .dropdown-box{
    position: absolute;
    border-radius: 5px;
    top: 32px;
    width: 100%;
    height: auto;
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fdfdfd;
}
.custom-select-box .dropdown-box::-webkit-scrollbar {
    width: 3px;
}

.custom-select-box .dropdown-box::-webkit-scrollbar-thumb {
    background: rgba(0, 213, 255 , 0.7);
}

.custom-select-box .dropdown-box::-webkit-scrollbar-track {
    background: rgba(0, 213, 255, 0.1);
}
.custom-select-box .dropdown-box .dropdown-item{
    position: relative;
    height: 30px;
    width: 100%;
    color: #0C0C0C;
    padding: 0 8px;
    line-height: 30px;
}
.custom-select-box .dropdown-box .dropdown-item:hover{
    color: #0C0C0C;
    background: rgba(0, 213, 255, 0.4);
    cursor: pointer;
}
Vue.component("custom-select-box", {
    props: {
        list: Array,
        value: String,
        tabindex: Number
    },
    template: `
        <div class="custom-select-box" :tabindex="tabindex?tabindex:1000" @blur="selecting = false">
            <div @click="selecting=!selecting" :class="['show-box',selecting?'selecting':'']" >
                <div>{{label}}</div>
                <div class="arrow-down"></div>
            </div>
            <ul v-show="selecting" class="dropdown-box" >
                <li class="dropdown-item" v-for="item in listItems"
                    @click="searchValueHandle(item)">{{item.label}}</li>
            </ul>
        </div>`,
    methods: {
        searchValueHandle(item) {
            this.$emit("input", item.value);
            this.selecting = false;
        }
    },
    data:function(){
        return {
            selecting:false
        }
    },
    computed:{
        currentItem:function(){
            return this.list ? this.list.find(x=>x.value===this.value):null;
        },
        label:function(){
            return this.currentItem ? this.currentItem.label : "未选择";
        },
        listItems:function(){
            if(this.list && this.list.length>0){
                //做传入参数转换
                return this.list.map(function(item){
                    if(typeof item ==='string'){
                        return {
                            value:item,
                            label:item
                        }
                    }else{
                        return item;
                    }
                });
            }
            return [];
        }
    }
});
组件使用
<custom-select-box style="z-index: 5"  v-model="testvalue" :list="[]" ></custom-select-box>

注意点

  1. tabindex 使得div元素可以触发blur事件。
  2. 有多个下拉框在同一个页面时,需要添加z-index,不然,先加的组件的下拉框会被后加的遮挡。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用以下步骤来自定义Vue下拉框的样式: 1.创建一个Vue组件来显示下拉框。可以使用v-model指令来绑定选中的值。 2.使用CSS样式来自定义下拉框的外观。可以使用伪元素和CSS属性来实现下拉框的箭头和选项列表的样式。 3.为下拉框组件添加事件监听器,以便在用户选择选项时更新选中的值。 下面是一个简单的Vue下拉框组件示例,你可以参考它来进行自定义样式: ``` <template> <div class="custom-select" :class="{ open: isOpen }"> <div class="selected" @click="toggleDropdown">{{ selected }}</div> <ul class="options" v-show="isOpen"> <li v-for="option in options" :key="option.value" @click="selectOption(option)">{{ option.label }}</li> </ul> </div> </template> <script> export default { props: { options: { type: Array, required: true }, value: { type: String, required: true } }, data() { return { isOpen: false, selected: '' } }, computed: { selectedOption() { return this.options.find(option => option.value === this.value) } }, mounted() { this.selected = this.selectedOption.label }, methods: { toggleDropdown() { this.isOpen = !this.isOpen }, selectOption(option) { this.selected = option.label this.$emit('input', option.value) this.isOpen = false } } } </script> <style> .custom-select { position: relative; width: 200px; } .selected { padding: 10px; background-color: #fff; border: 1px solid #ccc; cursor: pointer; } .selected::after { content: ''; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); border: 6px solid transparent; border-top-color: #000; } .options { position: absolute; top: 100%; left: 0; width: 100%; max-height: 200px; overflow-y: auto; background-color: #fff; border: 1px solid #ccc; z-index: 1; } .options li { padding: 10px; cursor: pointer; } .options li:hover { background-color: #f2f2f2; } .open .selected::after { border-top-color: #fff; } </style> ``` 在上面的示例中,我们使用CSS样式来创建自定义下拉框的外观。箭头使用伪元素和CSS属性来实现,选项列表使用CSS属性来设置最大高度和滚动。 在Vue组件中,我们使用v-for指令来循环渲染选项列表,并使用v-show指令来控制选项列表的显示和隐藏。在事件处理程序中,我们使用$emit方法来触发input事件,以便父组件可以获取选中的值。 希望这能帮助到你!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值