vue 自定义内置组件 select

最新推荐文章于 2024-06-18 22:29:23 发布

面条请不要欺负汉堡

最新推荐文章于 2024-06-18 22:29:23 发布

阅读量3k

点赞数 1

分类专栏： Vue+Element+axios+store(vuex) 文章标签： vue 自定义内置组件 select vue elementui中el-select

本文链接：https://blog.csdn.net/gao_xu_520/article/details/79862974

版权

Vue+Element+axios+store(vuex) 专栏收录该内容

70 篇文章 29 订阅

订阅专栏

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>

3.vue+elementui中el-select

<el-form-item label="性别" prop="sex">
	<el-select v-model="filters.sex" filterable placeholder="请选择" prop="sex">
		<el-option v-for="item in sexOptions" :key="item.value"  :label="item.label" :value="item.value">
		</el-option>
	</el-select>
</el-form-item>

export default {
	data() {
		return {
			filters: {
				sex:''
			},
			sexOptions:[
				{value: '1',label: '男'}, 
				{value: '2',label: '女'}
			]
	    }
	}
}

4.vue2 +select2

<template>
    <select id="addressJs" class="select2">  
	    <option value="" selected="selected">请选择地区</option>  
	    <option v-for="item in addrOptions" :key="item.value":value="item.value">{{item.label}}</option>
	</select> 
</template>
<script>
export default {
	data() {
		return {
	        addrOptions: [  
	            {value: '0',label: '上海'}, 
				{value: '1',label: '福州'},
				{value: '2',label: '南平'}, 
				{value: '3',label: '浙江'},
				{value: '4',label: '泉州'}, 
				{value: '5',label: '厦门'},
	        ]  
	    }
	},
	mounted:function(){
		$('#addressJs').select2({ data: this.addrOptions}).val(this.value).trigger('change').on('change', function () {  
            console.log(this.value)
        }); 
	}
}
</script>

参考：

1.内置组件

面条请不要欺负汉堡

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
vue 自定义内置组件 select

1.整合了第三方 jQuery 插件 (select2)&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" href="js/select2/
复制链接

扫一扫