vant-ui 使用(2)

记录近期所使用vantui组件的过程

使用过程中用到的vant文档

https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#tong-guo-npm-an-zhuang

简述

组件名称	组件功能概述
Toast	轻提示
Icon	字体图标
Uploader	文件上传
Dialog	弹出框
Field	输入框
ActionSheet	动作面板
Tab ,Tabs	标签页
List	列表
PullRefresh	下拉刷新
SwipeCell	滑动单元格
Button	按钮

1.Toast 轻提示

使用了toast的页面效果就是会弹出一个黑色半透明的提示

使用

1. 简单使用

   Toast('提示内容');

2. 全局方法:引入

   Toast

   组件后，会自动在 Vue 的 prototype 上挂载

   $toast

   方法，便于在组件内调用。
3. 成功

   Toast.success()

4. 失败

   Toast.fail()

5. 加载

   Toast.loading()

2.Icon 字体图标

基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。

使用

1. 点击网站右侧实例 复制字体组件

2. color

   设置字体图标颜色 例:

   <van-icon name="cart-o" color="#1989fa" />

3. size

   设置字体图标大小 例:

   <van-icon name="chat-o" size="40" />

4. dot

   图标右上角小红点

3.Uploader文件上传

用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。

使用

1. 组件

   <van-uploader :after-read="afterRead" />

2. 文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。
3. 在methods中 编写方法

export default {
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  },
};

           

4.Dialog弹出框

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。

弹出框组件支持函数调用和组件调用两种方式。

使用

记录使用组件调用dialog弹出框

1. 组件

<van-dialog v-model="show" title="标题" show-cancel-button>
    //弹出框自定义的内容..
</van-dialog>
           

1. 使用中用到了dialog弹出框的配置项

   beforeClose

2. 关闭前的回调函数，调用 done() 后关闭弹窗，调用 done(false) 阻止弹窗关闭
3. 因为是配置项 使用

   v-bind

   为他绑定一个函数 在

   methods

   中书写方法
4. 完成业务: 修改密码时,输入原密码错误,点击确认后,阻止弹出框关闭

5.Field 输入框

表单中的输入框组件。

使用

<!-- Field 是基于 Cell 实现的，可以使用 CellGroup 作为容器来提供外边框。 -->
<van-cell-group>
  <van-field v-model="value" label="文本" placeholder="请输入用户名" />
</van-cell-group>
           

1. label

   输入框左侧文本

2. v-model

   双向绑定输入框的值

3. placeholder

   占位符 输入框内容为空时显示的内容

4. required

   必填项

5. type

   定义输入框类型
   1. 调起手机号键盘

      tel

   2. 允许输入正整数

      digit

   3. 输入数字 支持小数

      number

   4. 密码

      password

6.ActionSheet 动作面板

底部弹起的模态面板，包含与当前情境相关的多个选项。

使用

1. v-model

   双向绑定一个bool值 控制显示隐藏

2. actions

   定义选项

3. close-on-click-action

   自动收起

4. cancel-text

   底部展示取消按钮,关闭触发 cancel 事件

5. loading

   加载状态

6. disabled

   禁用状态

7. select事件

   点击选项时触发

8. cancel事件

   点击取消按钮时触发