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>
input标签placeholder属性
</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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。