vue實作Dropdown下拉菜單

1、需求

點選按鈕出現下拉菜單

2、思路

1. 為按鈕綁定點選事件showPicker()
2. 在按鈕下另起一個div标簽，用v-show綁定一個屬性值isShowDropdown
3. 在methods裡定義showPicker這個方法，來控制isShowDropdown的值為true或者false，來控制下拉菜單是否展示

3、主要代碼

<div>
	<button @click="showPicker"/>
	
	<div v-show="isShowRouteDropdown" class="dropdown">
		<ul class="dropdown-data-style">
			<li v-for="(item,index) in data" :key="index" >
				{{item.text}}
			</li>
		</ul>
	</div>
</div>

           

export default {
	data(){
		return{
			isShowRouteDropdown: false,  //控制選擇下拉框是否顯示
		}
	},
	methods:{
		/* 按鈕綁定的方法 */
		showPicker() {
			this.isShowRouteDropdown = !this.isShowRouteDropdown;
		},
	}
}
           

<style token string">"stylus" rel="stylesheet/stylus" scoped>
	.dropdown
		position: absolute
		display: block
		right: 144px
		margin-right: 16px
		
	.dropdown-data-style
		display: flex
		flex-direction: column
		position: absolute
		background-color: #f9f9f9
		min-width: 160px
		box-shadow: 0px 8px 16px 0px  rgba(0,0,0,0.16)
		overflow: scroll
		height: 320px
		margin-top: 33px
	.dropdown-data-style
		li
			color: black
			padding: 12px 6px
			text-decoration: none
			border-bottom: 1px solid #eaeaea;
</style>