Vant3——复选框点击其他后格外出现一个输入框

Southern Wind

已于 2022-08-29 16:06:53 修改

阅读量1k

点赞数 1

分类专栏： Vue3 TS vant 文章标签： vue.js

于 2022-08-05 15:01:08 首次发布

本文链接：https://blog.csdn.net/nanchen_J/article/details/126177365

版权

Vue3 同时被 3 个专栏收录

44 篇文章 9 订阅

订阅专栏

vant

40 篇文章 6 订阅

订阅专栏

23 篇文章 2 订阅

订阅专栏

这篇博客介绍了如何在Vue.js中利用复选框（van-checkbox）实现动态显示和隐藏输入框的效果。通过监听复选框组的变化，当用户选中'其他'选项时，显示一个额外的输入框供用户填写具体内容。核心代码包括van-checkbox-group、van-checkbox的使用，以及利用map方法检查选中项来控制输入框的显示状态。

摘要由CSDN通过智能技术生成

想要实现这样的效果：
在这里插入图片描述

方法如下：
因为复选框选出来的值为数组形式所以直接通过map进行循环遍历即可

<van-field :name="'checkbox_ZL_'+i" label="接受过的治疗">
	<template #input>
		<van-checkbox-group v-model="checkboxZL" direction="horizontal" @click="btnCheckbox">
			<van-checkbox name="骨科手术" shape="square">骨科手术</van-checkbox>
			<van-checkbox name="物理治疗" shape="square">物理治疗</van-checkbox>
			<van-checkbox name="手法治疗" shape="square">手法治疗</van-checkbox>
			<van-checkbox name="关节内注射治疗" shape="square">关节内注射治疗</van-checkbox>
			<van-checkbox name="其他" shape="square">其他</van-checkbox>
		</van-checkbox-group>
	</template>
</van-field>
<!-- 接受过的治疗(其他) -->
<div v-if="arrs == true">
 <van-field required label="其他" v-model="others" name="others" placeholder="请填写具体内容" />
</div>

const listData = reactive({
	checkboxZL:[],
	others:"",
	arrs:false
})
const btnCheckbox= () => {
	/* 把listData.checkboxZL数组定义出来 */
      let arr:any = listData.checkboxZL;
      console.log(arr);
      /* 防止默认没长度的时候会出错，默认就让他不出现 */
      if (arr.length == 0) {
        arrs.value = false;
      }
      /* 通过map遍历出arr的新数组 */
      arr.map((item: any) => {
        console.log(arr);
	/* 查找勾选的选项是否有存在其他？如果存在则让他显示出文本框，否则就隐藏 */
        if (arr.indexOf("其他") !== -1) {
          arrs.value = true;
        } else {
          arrs.value = false;
        }
      });
    };
    return{
    ...toRefs(listData),
    arrs,
    btnCheckbox,
    }