html5 select vue,vue 自定义 select内置组件

这篇文章主要介绍了vue 自定义内置组件 select的相关知识，现在分享给大家,具体实例代码大家参考下本文

1.整合了第三方 jQuery 插件 (select2)

html, body {

font: 13px/18px sans-serif;

}

select {

min-width: 300px;

}

选中的: {{ selected }}

Vue.component('select2', {

props: ['options', 'value'],

template: '',

mounted: function () {

var vm = this;// init select2

$(this.$el).select2({ data: this.options }).val(this.value).trigger('change').on('change', function () {

// emit event on change.

vm.$emit('input', this.value)

})

},

watch: {

value: function (value) {

// update value

$(this.$el).val(value).trigger('change')

},

options: function (options) {

// update options

$(this.$el).empty().select2({ data: options })

}

},

destroyed: function () {

$(this.$el).off().select2('destroy')

}

})

var vm = new Vue({

el: '#el',

data: {

selected: 2,

options: [

{ id: 0, text: '苹果' },

{ id: 1, text: '香蕉' },

{ id: 2, text: '香梨' },

{ id: 3, text: '榴莲' },

{ id: 4, text: '西瓜' }

]

}

})

2.简单select

*{

padding: 0;

margin: 0;

}

ul,li {

list-style: none;

}

li {

line-height: 2em;

}

li:hover {

background-color: #f9f9f9;

border-radius:5px;

cursor: pointer;

}

input{

cursor:pointer;

outline:none;

}

#app {

margin-top: 20px;

}

#app h2 {

text-align: center;

}

.wrap {

background-color: rgba(56, 170, 214, 0.45);

border-radius: 20px;

width: 300px;

margin: 40px;

padding: 20px;

}

input[type="button"] {

font-size:14px;

margin-left:2px;

padding:2px 5px;

background-color:rgb(228, 33, 33);

color:white;

border:1px solid rgb(228, 33, 33);

border-radius:5px;

}

.clearFix {

padding-left:

}

input.keyWord {

border: 1px solid #777777;

border-radius: 10px;

height: 30px;

width: 80%;

padding-left: 10px;

font-size: 16px;

}

ul.list {

margin: 20px 0;

}

ul.list li {

padding: 10px 0 0 10px;

}

自定义下拉框

自定义下拉框2

Vue.component("custom-select",{

data(){

return {

selectShow:false,

val:""

}

},

props:["btnValue","list"],

template:`

v-show="selectShow"

:list="list"

v-on:receive="changeValueHandle"

>

`,

methods:{

changeValueHandle(value){

this.val = value;

}

}

});

Vue.component("custom-list",{

props:["list"],

template:`

• {{item}}

`,

methods:{

selectValueHandle:function(item){

this.$emit("receive",item)

}

}

})

new Vue({

el:"#app",

data:{

list1:['北京','上海','广州','杭州'],

list2:['17-01-11','17-02-11','17-03-11','17-04-11'],

}

})

参考：

1.内置组件

相关推荐：