vant-ui 使用(2)

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

使用过程中用到的vant文档


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

简述

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>

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

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

   为他绑定一个函数 在
   
methods

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

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 动作面板

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

使用

<van-action-sheet v-model="show" :actions="actions" @select="onSelect" />

1. 
v-model

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

   定义选项
3. 
close-on-click-action

   自动收起
4. 
cancel-text

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

   加载状态
6. 
disabled

   禁用状态
7. 
select事件

   点击选项时触发
8. 
cancel事件

   点击取消按钮时触发