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

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

文章图片

展开图如下：

文章图片

①创建组件Select.vue：预设两种主题色，亦可视情况进行自定义修改样式：

.m-select-wrap {width: 135px; height: 40px; line-height: 40px; position: relative; .u-select-input {width: 105px; background: #3A79EE; color: #FFFFFF; box-shadow: 0px 10px 20px 0px rgba(144, 119, 222, 0.2); border-radius: 20px; height: 40px; line-height: 40px; padding: 0 15px; cursor: pointer; border: none; }.white-color {background: #FFFFFF; color: #3A79EE; }.triangle-down { // 下三角样式width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid #333; position: absolute; top: 18px; right: 15px; transition: transform 0.3s ease-in-out; }.rotate {transform: rotate(180deg); }.m-options-panel {position: absolute; background: #FFFFFF; border-radius: 8px; width: 133px; border: 1px solid #E3E3E3; top: 46px; left: 0; color: #706F94; .u-option {padding: 0 15px; cursor: pointer; }.u-option:hover {color: #3A79EE; background: #EEF1FA; }}.show {display: block; }.hidden {display: none; }}

②在要使用的页面引入：

import Select from '@/components/Select'components: {Select}data () {return {selectData: [{name: '十一五',value: 11},{name: '十二五',value: 12},{name: '十三五',value: 13},],selValue: ''}}created () {// 初始化下拉框this.selValue = https://www.it610.com/article/this.selectData[0].value}methods: {getValue (name, value, index) {console.log('item:', name, value, index)}}

【Vue下拉选择框Select组件使用详解(一)】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。