vue 自定义 select内置组件
更新时间：2018年04月10日 11:35:05 作者：面条请不要欺负汉堡
这篇文章主要介绍了vue 自定义内置组件 select的相关知识，整合了第三方jquery 插件select2,具体实例代码大家参考下本文
1.整合了第三方 jQuery 插件 (select2)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="js/select2/select2.min.css" />
<style>
html, body {
font: 13px/18px sans-serif;
}
select {
min-width: 300px;
}
</style>
</head>
<body>
<div id="el">
<p>选中的: {{ selected }}</p>
<select2 :options="options" v-model="selected"></select2>
</div>
<script src="js/jQuery-2.1.4.min.js"></script>
<script src="js/select2/select2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<script>
Vue.component('select2', {
props: ['options', 'value'],
template: '<select><slot></slot></select>',
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: '西瓜' }
]
}
})
</script>
</body>
</html>
2.简单select
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
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;
}
</style>
</head>
<body>
<div id="app">
<div style="float: left;">
<h2>自定义下拉框</h2>
<custom-select btn-value="查询" v-bind:list="list1"></custom-select>
</div>
<div style="float: left;">
<h2>自定义下拉框2</h2>
<custom-select btn-value="搜索" v-bind:list="list2"></custom-select>
</div>
</div>
<div id="app1">
<custom-select></custom-select>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<script>
Vue.component("custom-select",{
data(){
return {
selectShow:false,
val:""
}
},
props:["btnValue","list"],
template:`<section class="wrap">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyWord" :value="val" @click="selectShow = !selectShow" />
<input type="button" :value="btnValue" />
<span></span>
</div>
<custom-list
v-show="selectShow"
:list="list"
v-on:receive="changeValueHandle"
>
</custom-list>
</div>
</section>`,
methods:{
changeValueHandle(value){
this.val = value;
}
}
});
Vue.component("custom-list",{
props:["list"],
template:`<ul class="list">
<li v-for="item in list" @click="selectValueHandle(item)">{{item}}
</li>
</ul>`,
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'],
}
})
</script>
</body>
</html>
参考：
1.内置组件
总结
以上所述是小编给大家介绍vue 自定义 select内置组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
- vue内置组件keep-alive事件动态缓存实例
- vue中keep-alive内置组件缓存的实例代码
- vue.js内置组件之keep-alive组件使用
- vue内置组件component--通过is属性动态渲染组件操作
- vue内置组件transition简单原理图文详解(小结)
- vue keep-alive的简单总结
- vue缓存之keep-alive的理解和应用详解
- 解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
- vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
- vue使用keep-alive实现组件切换时保存原组件数据方法
- Vue 内置组件keep-alive的使用示例
相关文章
这篇文章主要为大家详细介绍了Vue实现数据表格合并列rowspan效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了Ant Design Upload 文件上传功能的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家详细介绍了vue中使用Pinia是五个实用技巧,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下2023-11-11
这篇文章主要为大家详细介绍了vue-awesome-swiper滑块插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家详细介绍了vue项目记录锁定和解锁功能实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了一文学会什么是vue.nextTick()，下面文章围绕主题的相关资料展开详细内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-04-04
最近在项目开发中,就遇到了这个问题,Vue中如何使一个div铺满全屏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-07-07
这篇文章主要介绍了如何去除element-ui中table的hover效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本篇文章主要介绍了vue2.0使用Sortable.js实现的拖拽功能示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-02-02
Vite是一个web开发构建工具,由于其原生 ES 模块导入方法,它允许快速提供代码,下面这篇文章主要给大家介绍了关于如何用Vite构建工具快速创建Vue项目的相关资料,需要的朋友可以参考下2022-05-05
最新评论