模拟select下拉输入

先贴效果图

html

<template>
	<div>
		<div class="ck_drop" @click="arrowDown()">
          <p title="请选择">{{unitName}}</p>
          <input type="hidden" name="unit" v-model="unitModel">
        </div>

        <ul class="lll_l" v-show="isShowSelect">
          <li v-for="(item,index) in llist"  @click.stop="select(item, index)">{{item.name}}</li>
        </ul>
	</div>
</template>

css 只是大致的样式

.ck_drop{
    width: 4rem;
    height: 1.2rem;
    float: right;
    background: #fff;
  }
  .ck_drop  p{
    font-size: 20px;
    color: #000;
    width: 4rem;
  }

js

<script>
	data(){
    	return{
    			unitModel :'',
    			 isShowSelect:false,
     			 unitName:'请选择',
			     llist:[
			        {key: 0, name: "苹果"},
			        {key: 1, name: "苹果2"},
			        {key: 2, name: "苹果3"},
			      ],
		},
		methods:{
		//   下拉框
		    arrowDown() {
		      this.isShowSelect = !this.isShowSelect;
		    },
		    select(item, index) {
		      this.isShowSelect = false;
		      // console.log(item);
		      // console.log(index);
		      this.unitModel = index;
		      this.unitName = item.name;
		    },
		}
    }
</script>

新手上路 写的不好多多包涵~