【Vant】Vant 开发笔记

标签：Vant parent vant 笔记 开发 values form 组件 val

 

 

Van-Form 表单组件：

文档地址：

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/form

1、提交方法

官方文档默认的方式是使用nativeType，非常不理解

可以改用按照elmentui的方式使用refs手动调用校验方法

标签设置ref值

<van-form :ref="vanFormRef">
  <van-field v-model="form.ivVisitor" :label-width="labelWidth" name="访问人" label="访问人" placeholder="访问人" required :rules="rules.ivVisitor" />
  <van-field readonly clickable :label-width="labelWidth" label="项目名称" :value="inName" placeholder="项目名称" :rules="rules.salPrInId" required @click="salPrInIdVisible = true" />
  <van-field v-model="form.ivWay" :label-width="labelWidth" name="访问形式" label="访问形式" placeholder="访问形式" required :rules="rules.ivWay" />
  <van-field readonly clickable :label-width="labelWidth" label="访问时间" :value="form.ivTime" placeholder="访问时间" required @click="ivTimeVisible = true" />
  <van-field readonly clickable :label-width="labelWidth" label="访问成果类型" :value="ivGainTypeName" placeholder="访问成果类型" :rules="rules.ivGainType" @click="ivGainTypeVisible = true" />
  <van-field readonly clickable :label-width="labelWidth" label="拟再次访问日期" :value="form.ivNextTime" placeholder="拟再次访问日期" @click="ivNextTimeVisible = true" />
  <van-field v-model="form.ivItvwName" :label-width="labelWidth" name="被访人姓名" label="被访人姓名" placeholder="被访人姓名" :rules="rules.ivItvwName" />
  <van-field v-model="form.ivItvwPhone" :label-width="labelWidth" name="被访人联系方式" label="被访人联系方式" placeholder="被访人联系方式" :rules="rules.ivItvwPhone" />
  <van-field v-model="form.ivGainDesc" :label-width="labelWidth" name="访问成果" label="访问成果" placeholder="访问成果" type="textarea" rows="1" :rules="rules.ivGainDesc" />
  <van-field v-model="form.ivLocus" :label-width="labelWidth" name="面对面地点" label="面对面地点" placeholder="面对面地点" type="textarea" rows="1" :rules="rules.ivLocus" />
  <van-field v-model="form.ivRemark" :label-width="labelWidth" name="备注" label="备注" placeholder="备注" type="textarea" rows="1" :rules="rules.ivRemark" />
</van-form>

数据属性设置：

vanFormRef: 'vanFormRefKey',

底部栏提交标签：

<!-- 底部栏 -->
<div class="form-tab-bar">
  <van-button class="form-tab-bar-btn" type="info" @click="submit">确定</van-button>
</div>

提交方法：

submit() {
  this.$refs[this.vanFormRef].validate().then(async() => {
    if (this.isUpdate) {
      await updateInvisit(this.form)
      this.$dialog({ message: '更新成功!', confirmButtonColor: '#025BFF' }).then(() => {
        this.$parent.$parent.editVisible = false
        this.$parent.$parent['onRefresh']()
      })
    } else {
      await addInvisit(this.form)
      this.$dialog({ message: '新增成功!', confirmButtonColor: '#025BFF' }).then(() => {
        this.$parent.$parent.editVisible = false
        this.$parent.$parent['onRefresh']()
      })
    }
  })
},

 

2、表单内按钮触发提交操作

表单内的按钮点击事件会冒泡操作

不要触发默认的表单提交，需要追加 [ 阻止 ] 后缀来控制 

<van-form :ref="vanFormRef">
<van-field v-model="empty" center readonly clearable label="用款明细" placeholder="" required>
  <template #button>
    <van-button size="mini" block :color="$ui.color" icon="plus" @click.stop="openEditPopup(null)" />
  </template>
</van-field>
</van-form>

 

Van-Field 输入项组件

文档地址：

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/field

　　

1、做下拉选择组件

vant 没有elementui那种封装好的组建，需要自己独立维护

1、制作下拉选择项

设置输入项只能为【只读】，【可以点击】 ，追加一个【点击事件】

注意这里value值是label标签值，非实际选中的value值,  Visible变量是为了控制下拉列表的弹层展开关闭

<van-field readonly clickable label="所属公司" :value="coName" placeholder="所属公司" :rules="rules.sysArCoId" required @click="coNameVisible = true" />

2、制作下拉列表弹层

弹层绑定Visible变量打开和关闭

picker组件就是实际的el-select组件，

colums属性用来放下拉的数据集合，

value-key就是这个picker组件要展示的label值，

分别设置【取消事件】和【确认事件】

<van-popup v-model="coNameVisible" round position="bottom">
  <van-picker title="请选择所属公司" show-toolbar :columns="corpList" value-key="coName" @cancel="coNameVisible = false" @confirm="sysArCoIdConfirm" />
</van-popup>

3、编写【确认事件】的逻辑：

async sysArCoIdConfirm(val) {
  /* val 返回数据集合选中的元素，元素是什么类型，val就是什么类型 */
  this.form.sysArCoId = val.id
   /* 设置好上面的value值之后，还要回显下拉的label值 */
  this.coName = this.form.coName = val.coName

   /* 然后关闭下拉弹层 */
  this.coNameVisible = false

  /* 下面这些逻辑是联动其它选项的 */
  
  /* 重置所属部门 */
  this.deName = ''
  this.deptList = []
  this.form.sysArDeId = ''

  /* 重新初始化 */
  await this.initialAllocatedDepartmentList(val.id)
}

 

2、做查询条件，时间范围查询组件

1、组件标签

<div style="display: block;">
<span>申请时间</span>
<span style="position: relative;display: block;">
  <van-field v-model="dateRange" style="width: 91vw;" placeholder="请选择申请时间范围" :clearable="true" readonly @click="dateVisible = true" />
  <van-icon name="clear" class="search-clear-icon" @click="clearDateRange" />
</span>
</div>

2、data属性变量：

dateRange: '',
dateVisible: false,
/* 时间范围设置 */
minDate: new Date(2022, 1, 1),
maxDate: new Date(2099, 12, 31)

3、时间范围选择弹层：

<!-- 时间范围筛选 -->
<van-popup v-model="dateVisible" position="bottom">
  <van-calendar v-model="dateVisible" :color="$ui.color" type="range" :min-date="minDate" :max-date="maxDate" :allow-same-day="true" @confirm="addDateRange" />
</van-popup>

4、确认事件的赋值操作：

addDateRange(values) {
  this.dateRange = values[0].getFullYear() + '/' + (values[0].getMonth() + 1) + '/' + values[0].getDate() + ' ~ ' + values[1].getFullYear() + '/' + (values[1].getMonth() + 1) + '/' + values[1].getDate()
  this.dateVisible = false
  this.onRefresh()
}

　　

　

　　

移动端表格组件的解决方案 

Vxe-Table 官方文档地址：

https://vxetable.cn/v3/#/table/start/install

安装教程见文档：

https://blog.csdn.net/qq_40323256/article/details/127717133

　　

 

 

　　

 

 

　　

标签：Vant,parent,vant,笔记,开发,values,form,组件,val
From： https://www.cnblogs.com/mindzone/p/16996704.html