常用的 vant ui 表单组件使用

努力赚钱养猫猫
1,233 阅读3分钟

「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」

大家好，我是 摸鱼小公举，真正的强者，不会怨天尤人，如果想不被别人看轻，你就只有付出比别人多十倍百倍的努力，才能站的比别人更高。上一篇文章是 常用的 element ui 表单组件使用 ；今天我们来学习一下vant ui 表单组件使用,文本输入框，单选框，多选框，下拉框，上传等组件的使用。

文本输入框组件

单行文本输入框

Field组件很实用也很方便，label 文本框的标题；rules还可以规则校验，required是否为必选字段。message错误提示文案。

<van-field
  v-model="content"
  :name="item.name"
  :label="姓名
  :placeholder="请输入您的姓名"
  :rules="[
  {
  required: item.isNeed == 1 ? true : false,
  message: '请输入' + item.title
  }
  ]"
/>

多行文本输入框

多行文本框只是比单行文本框多了 type="textarea"的属性值

<van-field
  v-model="content"
  :name="item.name"
  :label="姓名
  type="textarea"
  :placeholder="请输入您的姓名"
  
/>

单选框组件

direction：排列方向，可选值为 horizontal ,默认值为vertical。这里时通过文案长度来判断是纵向还是横向。这里初始化的值可以默认1，然后就会默认选中第一个选项；这里v-model的值绑定的是van-radio 里面name的值，也是需要传给后台的值。

// 数据结构: items: [
//        { id: 1, name: '篮球' },
//        { id: 2, name: '排球' },
//        { id: 3, name: '羽毛球' },
//        { id: 4, name: '乒乓球' }]  

<van-field name="radio" label="单选框">
  <template #input>
   <van-radio-group
   v-model="chooseType"
   :direction="subItem.filter((obj) => obj.length > 20).length != 0
   ? 'vertical': 'horizontal'">
   <van-radio
   v-for="subItem in items"
   :key="subItem.id"
   :name="subItem">{{ subItem }}</van-radio>
   </van-radio-group>
  </template>
</van-field>

多选框组件

这里的数据结构和单选框的数据结构是一样的；这里初始化值是一个空数组，同样的v-model绑定了van-checkbox 里面name的值；shape可选值为 square，默认值为round。

<van-field name="checkboxGroup" label="多选框">
  <template #input>
    <van-checkbox-group v-model="checked" direction="horizontal">
     <van-checkbox
     v-for="subItem in items"
     :key="subItem.id"
     :name="subItem.id"
     shape="square">{{ subItem.name }}</van-checkbox>
    </van-checkbox-group>
   </template>
</van-field>

下拉框组件

这里的下拉框不是原生的那种下拉框，而是van-popup（弹出层）和 van-picker(选择器)组件结合使用；数据格式同上，根据数据格式是普通数组就不用加value-key，如果是数组里面每一项是对象则需要加上。

这里v-model的值更新是通过 onConfirm 方法的value 来更新的，具体情况要根据后台的需要的值来变化。如果后台需要的值跟显示的值不一样那么要在data声明一个新值在onConfirm 里面重新赋需要值，比如 value.id

HTML代码
<van-field
  v-model="chooseType"
  is-link
  readonly
  name="picker"
  label="选择器"
  placeholder="点击选择城市"
  @click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
  <van-picker
  :columns="items"
  show-toolbar
  value-key="name"
  @confirm="onConfirm"
  @cancel="showPicker = false"
      />
</van-popup>

JS代码 写在methods里的方法
onConfirm(value) {
  this.chooseType = value.name
  this.showPicker = false
},

上传组件 （适合简单的上传功能）

首先来看HTML代码

上传组件用到的参数描述：

参数描述
v-model（fileList）已上传的文件列表
accept允许上传的文件类型
max-count文件上传数量限制
before-read文件读取前的回调函数，返回 false 可终止文件读取，支持返回 Promise
after-read文件读取完成后的回调函数
delete删除文件预览时触发
<van-field :name="uploader" label="文件上传">
  <template #input>
   <van-uploader
   v-model="files"
   :accept="accept"
   :max-count="1"
   :before-read="beforeRead"
   :after-read="afterRead"
   @delete="deleteImage"
   />
  </template>
</van-field>

初始化值如下

data(){
return{
accept: 'image/png,image/jpeg,image/jpg',
FileLimitSize: 5, //文件限制大小5M
files: [],
uploadData: [],
}
}

methods里的方法说明

beforeRead (文件读取前的回调函数)

文件读取前,需要校验一下上传的文件是否符合规则。（上传图片大小不能超过5M，上传的格式只能是JPG JPEG PNG 格式）

beforeRead(file) {
  const type = Object.prototype.toString.call(file)
  if (type == '[object Array]') {
    let g = 1
    for (const i in file) {
      g *= this.checkFile(file[i])
    }
    return g
  } else {
    return this.checkFile(file)
  }
},
checkFile(file) {
  const isJPG = file.type === 'image/jpeg'
  const isPNG = file.type === 'image/png'
  const isLt5M = file.size / 1024 / 1024 < this.FileLimitSize
  if (!isJPG && !isPNG) {
    this.$toast('上传图片只能是 JPG JPEG PNG 格式!')
    return 0
  }
  if (!isLt5M) {
    this.$toast('上传图片大小不能超过' + this.FileLimitSize + 'MB!')
    return 0
  }
  return (isJPG || isPNG) && isLt5M ? 1 : 0
},

after-read （文件读取完成后的回调函数）以及 delete 的描述

upload是我这里文件上传的api接口，调用成功后可以获取需要传给后台的数据this.uploadData；deleteImage（删除上传文件时触发）同时也要清空this.uploadData。

afterRead(file) {
  const type = Object.prototype.toString.call(file)
  if (type == '[object Array]') {
    for (const i in file) {
      this.upload(file[i])
    }
  } else {
    this.upload(file)
  }
},
upload(file) {
  const params = new FormData()
  params.append('file', file.file)
  params.append('path_type', 'activity')
  upload(params).then((res) => {
    if (res.code == 1) {
      this.uploadData.push({ id: res.data.id, url: res.data.src })
    }
  })
},
deleteImage(file, detail) {
  this.uploadData = []
},

我的上传api接口返回数据如下

image.png

结语：

好了文章到此就结束了，欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下。希望这篇文章对大家有帮助,也希望大家多多支持我，今天是我参与2022首次更文挑战的第17天，加油！

avatar
文章
阅读
粉丝