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;
}

 

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue + TypeScript ,可以使用 `van-field` 的 `input` 事件来监听输入框的输入事件。当输入框获取焦点时,可以通过代码将焦点移动到其他元素,从而防止键盘弹出。 请参考以下代码: ```vue <template> <van-field ref="yourFieldRefName" v-model="value" label="Label" placeholder="Placeholder" @input="handleInput" /> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; @Component export default class YourComponent extends Vue { $refs!: { yourFieldRefName: HTMLInputElement; }; value = ''; handleInput() { // 判断输入框是否获取焦点 if (document.activeElement === this.$refs.yourFieldRefName) { // 使用 setTimeout 将焦点移动到其他元素,从而防止键盘弹出 setTimeout(() => { const otherElement = document.getElementById('otherElementId'); if (otherElement) { otherElement.focus(); } }, 0); } } } </script> ``` 在上面的代码,我们使用了 `van-field` 创建了一个输入框,并在 `input` 事件监听输入框的输入事件。当输入框获取焦点时,我们将通过代码将焦点移动到其他元素,从而防止键盘弹出。 需要注意的是,我们使用了 `setTimeout` 将焦点移动到其他元素。这是因为在 `input` 事件,当输入框获取焦点时,键盘可能已经弹出。通过使用 `setTimeout`,我们可以将焦点移动到其他元素,并等待一段时间,以确保键盘已经关闭。 上面的代码只是示例,请根据您的具体情况进行调整。希望这可以帮助您解决问题!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值