首页 > 其他分享 >vue3 + vant4 :form表单中,搭配 Popup 和 Field 实现vant-picker组件,设置默认值及默认选中--踏坑

vue3 + vant4 :form表单中,搭配 Popup 和 Field 实现vant-picker组件,设置默认值及默认选中--踏坑

时间:2023-12-21 19:56:47浏览次数:30  
标签:picker Popup const text value vant4 默认值 ref

环境:vue3,vant4

背景:Picker 作为用于辅助表单填写,搭配 Popup 和 Field 。页面需要给picker设置默认值,city为温州,但是在popup弹出时,picker没有选中温州这个选项,还时停留在杭州。

解决方案:

看了很多解决方案,设置default-indexset ,ColumnIndex。都尝试了,还是不行。而且这些方法,其实在vant4文档中,根本没有写。

很奇怪,后来想到了解决方案。

我设置了van-field的v-model,其实只改变了外部的值。

let formData = reactive({city:'温州'});

popup弹出时,picker的值其实没有改变,需要在van-picker上绑定v-model,设置初始值即可。van-data-picker, 也可以通过这种方式设置(亲测)

<van-popup v-model:show="showPicker" round position="bottom">
        <van-picker
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
          v-model="defaultCity"
        />
      </van-popup>

const defaultCity = ref(['Wenzhou'])

具体完整代码如下:

<template>
    <van-cell-group>
      <van-field
        v-model="formData.city"
        is-link
        readonly
        label="城市"
        placeholder="选择城市"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
          v-model="defaultCity"
        />
      </van-popup>
    </van-cell-group>
  </template>

 

<script setup>
import { ref } from 'vue';

    const columns = [
      { text: '杭州', value: 'Hangzhou' },
      { text: '宁波', value: 'Ningbo' },
      { text: '温州', value: 'Wenzhou' },
      { text: '绍兴', value: 'Shaoxing' },
      { text: '湖州', value: 'Huzhou' },
    ];
    let formData = reactive({city:'温州'});
    const defaultCity = ref(['Wenzhou']);
    const showPicker = ref(false);

    const onConfirm = ({ selectedOptions }) => {
      showPicker.value = false;
      formData.city = selectedOptions[0].text;
    };

</script>

 

标签:picker,Popup,const,text,value,vant4,默认值,ref
From: https://www.cnblogs.com/Super-scarlett/p/17919981.html

相关文章

  • 日期选择器(date-picker)组件
    在工作中,经常需要使用日期选择器来让用户方便地选择日期。实现一个日期选择器组件。先来看看今天要实现的效果基础布局popper和日期选择器对应的元素触发器:也就是输入框弹出层:日期面板看看下面的基础布局,为了简化对时间的操作,这里使用dayjsdate-picker.ts//date-pi......
  • el-date-picker 限制时间范围 picker-options 传参
    需求el-date-picker限制时间范围的选取,不能超过某个区间[startDate,endDate]。问题在于,disabledDate函数的参数默认是time,无法传递自定义参数[startDate,endDate]。分析传递给picker-options的值只能是对象。无法传递单个对象,但是可以传递一个返回对象的函数。解......
  • [-007-]-Python3+Unittest+Selenium Web UI自动化测试之@property装饰器默认值设置
    看示例:#!/usr/bin/python3#coding:utf-8__author__='csjin'#定义@property装饰器classPPTListModels(object):def__init__(self):self._tab_name="PPT模板"@propertydefhandle(self):returnself.__handle......
  • 无涯教程-MFC - Date & Time Picker函数
    日期和时间选择控件(CDateTimeCtrl)实现了一种直观且可识别的输入或选择特定日期的方法,选择日期后,月份日历控件将自动消失。让无涯教程通过创建一个新的MFC应用程序来研究一个简单的示例。步骤1-删除标题并将其ID设置为IDC_STATIC_TXT。步骤2-为文本控件添加value变量。......
  • js解构赋值如何定义默认值?
    在JavaScript中,我们可以在解构赋值语句中定义默认值。这就意味着,如果我们试图解构一个不存在的属性,或者属性值为undefined,那么我们可以为这个属性定义一个默认值。这在处理JavaScript对象或数组时特别有用,因为我们可能会遇到这样的情况,即某些属性在某些情况下可能不存在或值为und......
  • VSCode 自定义 “Go to File”workbench.action.quickOpenNavigateNextInFilePicker
    默认情况下,是使用Ctrl+p也只能向下进行选择,如果用down或者up手则需要离开主键盘区域,非常的不方便。放到vscode配置快捷键的json文件中{"key":"ctrl+n","command":"workbench.action.quickOpenNavigateNext","when":"inFile......
  • 接口参数默认值的坑
    先看接口@GetMapping("/queryByPage/{pageNum}/{pageSize}")@ApiOperation("分页查询学生")publicResult<Page<Student>>queryByPage(@RequestParam(required=true,defaultValue="1")@PathVariableIntegerpageNum,......
  • python 对象 初始化并设置默认值
    Python对象初始化并设置默认值的实现步骤在Python中,我们经常需要为对象设置默认值。这些默认值可以在对象初始化时被设置,并在对象的方法中使用。本文将介绍如何使用Python的类和对象来实现对象初始化并设置默认值的功能。我们将根据以下步骤来完成这个任务:创建一个类定义初始......
  • 前端学习笔记202307学习笔记第六十七天-前端面试-对象解构默认值1
       ......
  • 前端学习笔记202307学习笔记第六十七天-前端面试-对象解构默认值2
       ......