【IMWeb训练营作业】 Vue2 Select demo

最新推荐文章于 2024-09-13 21:44:02 发布

原创最新推荐文章于 2024-09-13 21:44:02 发布 · 282 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IMWeb训练营作业 #vue2 #select

vue2 同时被 2 个专栏收录

2 篇文章

订阅专栏

前端

2 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的自定义下拉选择组件。该组件包括两个子组件：custom-select 和 custom-list。custom-select 负责展示输入框及按钮，并控制下拉列表的显示与隐藏；custom-list 则负责渲染并处理列表项的点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做的有点仓促,, 样式没整..
样子如下:
关键代码: 
Vue.component('custom-select', {
		data() {
			return {
				selectShow: false,
				value: ''
			}
		},
		props: ['btnValue', 'list'],
		template: `
		<div>
			<div>
				<input type="text" v-bind:value="value" @click="selectShow=!selectShow">
				<input type="submit" v-bind:value="btnValue">
			</div>
			<div>
			<custom-list v-show="selectShow" v-bind:list="list" v-on:selectChange="change"></custom-list>
			</div>
		</div>
		`,
		methods: {
			change(val) {
				this.value = val;
			}
		}
	});

	Vue.component('custom-list', {
		props: ['list'],
		template: `
		<ul>
			<li v-for="item in list" v-on:click="handler(item)">{{item}}</li>
		</ul>
		`,
		methods: {
			handler(item) {
				this.$emit('selectChange', item);
			}
		}
	});

	new Vue({
		el: '#app',
		data: {
			list1: ['哇哈哈', '呵呵']
		}
	})