Vue下拉选择框Select组件使用详解(二) Vue下拉选择框Select组件使用详

本文实例为大家分享了Vue下拉选择框Select组件的使用方法，供大家参考，具体内容如下
效果图如下：

文章图片

下拉组件宽度可自定义设置以下属性：
①下拉组件宽度width属性，默认宽度290
②placeholder属性
【Vue下拉选择框Select组件使用详解(二)】③是否禁用下拉的disabled属性
已预设下拉列表最多8条，超过时滚动显示，具体可自定义调整，如果下拉选项过长省略号显示，鼠标悬浮显示全称，由于业务需求，设置mode属性，区别默认name和value与dictKey和dictVal
①创建组件Select.vue

.m-select-wrap {display: inline-block; width: 290px; height: 40px; line-height: 40px; position: relative; font-weight: 400; color: #444444; .u-select-input {padding-left: 10px; width: 258px; height: 38px; border: 1px solid #d7d7d7; cursor: pointer; padding-right: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; &:focus {border: 1px solid @mainColor; }}.triangle-down { // 下三角width: 12px; height: 7px; font-size: 0; background: url('~@/assets/images/triangle.png') no-repeat center top; position: absolute; top: 17px; right: 10px; transition: all 0.3s ease-in-out; cursor: pointer; }.rotate {transform: rotate(180deg); -webkit-transform: rotate(180deg); }.disabled {cursor: default; pointer-events: none; }.m-options-panel {position: absolute; overflow-y: auto; background: #FFFFFF; width: 288px; border: 1px solid @mainColor; top: 40px; left: 0; color: #444; .u-option {padding: 0 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; // 溢出显示省略号cursor: pointer; }.u-option:hover {background: #EEEEEE; }}.show {display: block; }.hidden {display: none; }}

②在要使用的页面中引用

import Select from '@/components/Select'components: {Select},data () {return {provinceData: [],address: {province: ''}}}methods: {getProvinceCode (name, code) {console.log('province:', name, code)this.address.province = code}}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。