vue3+vant实现解决van-field在手机中运行默认弹出系统软键盘问题

最新推荐文章于 2025-02-26 16:05:59 发布

行咘行啊细狗

最新推荐文章于 2025-02-26 16:05:59 发布

阅读量848

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_62626838/article/details/143912632

版权

1、

<div>
   <van-field
   class="span_text"
   :center="true"
   v-model="productLineText"
   is-link
   label="产品线"
   autocomplete="off"
   @click="showPicker = true"
   @focus="handleFocus"
/>
   <van-popup v-model:show="showPicker" round position="bottom">
        <Picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
   </van-popup>
</div>

const productLineText = ref('')
const showPicker = ref(false)
const columns = ref([])
const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false
  productLineText.value = selectedOptions[0].text
}

//解决手机中选择器弹出键盘
const handleFocus = () => {
  const activeElement = document.activeElement
  if (activeElement) {
    activeElement.blur()
  }
}