本篇文章教大家写一个非常简单的Select组件，想必很多人都写过Select，毕竟它太常用了，但是本篇文章的示例使用到了Vue的自定义指令，如果你对Vue自定义指令不怎么熟悉的话，本篇文章或许会让您有所收获！
完成的效果图如下：
一、首先，我们简单布局一下：
<template>
<div class="select">
<div class="inner">
<div class="inputWrapper">
<input type="text" readonly placeholder="请选择菜品">
<span class="iconfont icon-zhankaishangxia"></span>
</div>
<ul class="options">
<li v-for="(item, index) in options" :key="index">{{item.value}}</li>
</ul>
</div>
</div>
</template>
......
data() {
return {
options: [
{
value: '西红柿鸡蛋'
},
{
value: '青椒抱鸡蛋'
},
{
value: '回锅肉'
},
{
value: '宫保鸡丁'
},
{
value: '地三鲜'
}
],
}
}效果是这样：
下面可供选择的options用的是绝对定位；同时input设置了readonly，使input变的不可输入，整体布局很简单。
二、开始添加功能
接下来，我们要添加两个功能：
点击上面的input框，可以切换显示下面的options
选择options里的某个选项后让它展示在input里，同时让选项部分消失
这两项目功能都挺简单，先来完成第一个，点击input框切换显示options，借助v-show就好。
<div class="inputWrapper" @click="showOptions = !showOptions">
<input type="text" readonly placeholder="请选择菜品">
<span class="iconfont icon-zhankaishangxia"></span>
</div>
<ul class="options" v-show="showOptions" v-show="showOptions"> //添加v-show
<li v-for="(item, index) in options" :key="index">{{item.value}}</li>
</ul>
......
data() {
showOptions: false
}如上所示，在选项里添加
v-show="showOptions" 并将 showOptions 初始化为 false 。同时，在包裹 input 的 div 上添加 click 事件来回切换 showOptions 的布尔值。效果如下：
第二个，点击下面的选项，将被选择的展示到input里，同时让options消失，也不难。
