html 布局
<div class="select dowebok">
    <span class="placeholder">请选择</span>
    <ul>
        <li>医疗</li>
        <li>保险</li>
        <li>媒体</li>
        <li>银行</li>
    </ul>
</div>

css code
.select {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 325px;
    color: #cccccc;
    vertical-align: middle;
    text-align: left;
    user-select: none;
    -webkit-touch-callout: none;
}
.select .placeholder {
    position: relative;
    display: block;
    background-color: #393d41;
    z-index: 1;
    padding: 1em;
    border-radius: 2px;
    cursor: pointer;
}
.select .placeholder:hover {
    background: #34383c;
}
.select .placeholder:after {
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'FontAwesome';
    content: '\f078';
    z-index: 10;
}
.select.is-open .placeholder:after {
    content: '\f077';
}
.select.is-open ul {
    display: block;
}
.select.select--white .placeholder {
    background: #fff;
    color: #999;
}
.select.select--white .placeholder:hover {
    background: #fafafa;
}
.select ul {
    display: none;
    position: absolute;
    overflow: hidden;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 5px 0 0 0;
    padding: 0;
    z-index: 100;
}
.select ul li {
    display: block;
    text-align: left;
    padding: 0.8em 1em 0.8em 1em;
    color: #999;
    cursor: pointer;
}
.select ul li:hover {
    background: #4ebbf0;
    color: #fff;
}

JS code
$('.cooperation-topic .select').on('click', '.placeholder', function(e) {
    var parent = $(this).closest('.select');
    if (!parent.hasClass('is-open')) {
        parent.addClass('is-open');
        $('.cooperation-topic .select.is-open').not(parent).removeClass('is-open');
    } else {
        parent.removeClass('is-open');
    }
    e.stopPropagation();}).on('click', 'ul>li', function() {
    var parent = $(this).closest('.select');
    parent.removeClass('is-open').find('.placeholder').text($(this).text());
    parent.find('input[type="hidden"]').val($(this).attr('date-value'));
});
 
$('body').on('click', function() {
    $('.cooperation-topic .select.is-open').removeClass('is-open');
});

们在开发项目时候经常会遇到这样的需求，提供一个可选择的下拉框，下拉列表中提供了常见的选项。当所提供选项选项无法满足用户需求时用户可以自行输入所需参数。为了满足大部分的用户需求我们可以封装一个通用组件来满足多种需求，当调用的组件的时候配置好参数就可以快速实现所需功能了。

​组件实现的功能：

1，可定义组件宽度，下拉宽度与组件宽度一致；类型number，默认值100；

2，可定义后缀，默认为空；

3，可定义是否只读，默认为false；

4，可定义下拉列表选项，类型数组，默认为空；

5，可定义输入框中值显示位置，分别为居左、居中、居右；分队对应的可输入值为left、center、right，默认居中即center。

6，可定义下拉按钮显示，类型布尔值，默认为true（显示）。

定义模板

这里利用了element中的popover弹出框组件中嵌套下拉列表来实现下拉选项，当选择下拉选项中的值时将该值赋值给input框中的绑定值。而input框主要使用了些动态样式并监听了鼠标获取焦点、键盘输入、键盘删除、鼠标失去焦点等触发事件 ，来实时改变输入框中显示的值。

定义CSS样式

这里我用的是scss预处理器，在修改popover组件样式时我们用到了深度作用选择器::v-deep，具体的可以参考文章Vue实战072：CSS样式中的各种深度作用选择器的使用，这里需要注意的是控制弹出框与input框的宽度一致，在popover组件上添加一个样式获取上级组件的宽度以达到控制弹出窗父级组件的宽度，这样popover中就可以获取到父级组件的宽度，再通过深度作用选择器来定位组件中的DOM元素并进行修改即可。

定义功能逻辑

props中是留给用户调用组件时配置的参数值，前面文章Vue实战071：Element实现WEB颜色选择器功能中有提到过prop传递过来的值都是单向下行绑定，子组件不能修改由父组件传递过来的值。所以这里我们同样定义一个变量来接受父级传递过来的值，然后通过计算属性拼接后缀显示。当选择下拉选项中的值时将该值在复制给变量,同时监听显示值的变化并通过this.$emit将该值传递给父级组件。

组件调用

组件中只有下拉列表必须提供数据的，其他参数都定义了默认值所以可选填。这样用户就可以非常灵活的使用该组件了，也大大提高了组件的可使用范围。这里没看到组件引入是因为我对组件进行了全局自动化注册，可以参考文章Vue实战070：组件的局部注册和全局注册（含自动化注册）功能实现。

总结：

以上内容是小编给大家分享的Vue实战073：可输入的下拉框组件功能实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考专栏：Vue实战系列，在此也非常感谢大家对小编的支持！