vue+Vant 中van-field实现下拉菜单

在vant表单中没有下拉菜单的控件，

但是在反馈组件中有

 

如何在输入框vant-field 中实现下拉菜单呢 

单独的输入框实现：

import Vue from 'vue';

import { Field } from 'vant';

Vue.use(Field);

<!-- Field 是基于 Cell 实现的，可以使用 CellGroup 作为父元素来提供外边框。 -->

<van-cell-group>

       <van-field v-model="value" placeholder="请输入用户名" />

</van-cell-group>

单独的下拉菜单实现：

<van-dropdown-menu>

         <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />

          <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />

</van-dropdown-menu>

如何结合使用

 在这之前一定要先引入组件，不然展示不出来

// 引入vant
import './vant';
import { DropdownMenu, DropdownItem } from 'vant';

<van-field
  label="下拉框"
  center
  autocomplete="off"
  placeholder="请选择（必填）"
   >
  <template #input>
    <!-- 自定义样式label-flex -->
    <van-dropdown-menu class="" id="rank" active-color="#1989fa">
      <van-dropdown-item v-model="变量" :options ="idList" />
    </van-dropdown-menu>
  </template>
</van-field>

 <script> 

export default {

data () {

return {

 idList: [ { text: 'title', value: 1 }, { text: 'title', value: 2 } ],

</script>

 

如果想让当前下拉框实现input  placeholder属性的话添加如下

/*焦点时内容为空*/
.van-ellipsis:focus:before{
  content:none;
}
.memberGrade .van-ellipsis:empty:before{
  content: '请选择（必填）';   /* element attribute*/
  color: #C8C9CC;
}