vant-ui 使用(2)

  • Post author:
  • Post category:其他




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

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



使用

<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事件

    点击取消按钮时触发



版权声明:本文为qq_43157612原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。