详解Vant组件的使用

- 日理万妓 2023-02-10 05:17 48阅读 0赞

> 官方文档地址： [https://youzan.github.io/vant/\#/zh-CN/][https_youzan.github.io_vant_zh-CN]

**目录**

1. 全局注册

2.局部注册

3.往组件里注入数据 Props 和监听事件

4.Events

4. 有两个特别的组件，弹出框Dialog 和轻提示Toast 、 Notify 消息提示

5.内置样式

--------------------

### 1. 全局注册 ###

在main.js中引入组件

import Vue from 'vue';
    import { Button } from 'vant';
    Vue.use(Button);

引入后可以直接使用 不用注册  home.vue组件

<template>
      <div class="home">
        <van-button type="info">信息按钮</van-button>
        <img alt="Vue logo" src="../assets/logo.png">
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import { getHome } from '@/api/api'
    export default {
      name: 'Home',
      created() {
        this.init()
      },
      methods: {
        init() {}
      }
    }
    </script>

### 2.局部注册 ###

全部操作在组件内

<template>
      <div class="home">
        <van-button type="info">信息按钮</van-button>
        <img alt="Vue logo" src="../assets/logo.png">
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import { Button } from 'vant'
    export default {
      name: 'Home',
      components: {
        [Button.name]: Button
      },
      created() {
        this.init()
      },
      methods: {
        init() {
          
        }
      }
    }
    </script>

### 3.往组件里注入数据 Props 和监听事件 ###

组件内部有自定义的方案， 有默认值。也就说你不传参数

组件的设计原理类似于 HTML里的标签，比如

type 属性有 text  、 button  、 number等等 可以监听输入事件。

组件也是同样道理

例如**Button**组件

属性有这些

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>type</td> 
   <td>类型，可选值为&nbsp;<code>primary</code>&nbsp;<code>info</code>&nbsp;<code>warning</code>&nbsp;<code>danger</code></td> 
   <td><em>string</em></td> 
   <td><code>default</code></td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>尺寸，可选值为&nbsp;<code>large</code>&nbsp;<code>small</code>&nbsp;<code>mini</code></td> 
   <td><em>string</em></td> 
   <td><code>normal</code></td> 
  </tr> 
  <tr> 
   <td>text</td> 
   <td>按钮文字</td> 
   <td><em>string</em></td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>color&nbsp;<code>v2.1.8</code></td> 
   <td>按钮颜色，支持传入<code>linear-gradient</code>渐变色</td> 
   <td><em>string</em></td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>icon</td> 
   <td>左侧<a href="https://youzan.github.io/vant/#/zh-CN/icon" rel="nofollow">图标名称</a>或图片链接</td> 
   <td><em>string</em></td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>icon-prefix&nbsp;<code>v2.6.0</code></td> 
   <td>图标类名前缀，同 Icon 组件的&nbsp;<a href="https://youzan.github.io/vant/#/zh-CN/icon%23props" rel="nofollow">class-prefix 属性</a></td> 
   <td><em>string</em></td> 
   <td><code>van-icon</code></td> 
  </tr> 
  <tr> 
   <td>tag</td> 
   <td>根节点的 HTML 标签</td> 
   <td><em>string</em></td> 
   <td><code>button</code></td> 
  </tr> 
  <tr> 
   <td>native-type</td> 
   <td>原生 button 标签的 type 属性</td> 
   <td><em>string</em></td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>block</td> 
   <td>是否为块级元素</td> 
   <td><em>boolean</em></td> 
   <td><code>false</code></td> 
  </tr> 
  <tr> 
   <td>plain</td> 
   <td>是否为朴素按钮</td> 
   <td><em>boolean</em></td> 
   <td><code>false</code></td> 
  </tr> 
  <tr> 
   <td>square</td> 
   <td>是否为方形按钮</td> 
   <td><em>boolean</em></td> 
   <td><code>false</code></td> 
  </tr> 
  <tr> 
   <td>round</td> 
   <td>是否为圆形按钮</td> 
   <td><em>boolean</em></td> 
   <td><code>false</code></td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>是否禁用按钮</td> 
   <td><em>boolean</em></td> 
   <td><code>false</code></td> 
  </tr> 
  <tr> 
   <td>hairline</td> 
   <td>是否使用 0.5px 边框</td> 
   <td><em>boolean</em></td> 
   <td><code>false</code></td> 
  </tr> 
  <tr> 
   <td>loading</td> 
   <td>是否显示为加载状态</td> 
   <td><em>boolean</em></td> 
   <td><code>false</code></td> 
  </tr> 
  <tr> 
   <td>loading-text</td> 
   <td>加载状态提示文字</td> 
   <td><em>string</em></td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>loading-type</td> 
   <td><a href="https://youzan.github.io/vant/#/zh-CN/loading" rel="nofollow">加载图标类型</a>，可选值为<code>spinner</code></td> 
   <td><em>string</em></td> 
   <td><code>circular</code></td> 
  </tr> 
  <tr> 
   <td>loading-size</td> 
   <td>加载图标大小</td> 
   <td><em>string</em></td> 
   <td><code>20px</code></td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>点击后跳转的链接地址</td> 
   <td><em>string</em></td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>to</td> 
   <td>点击后跳转的目标路由对象，同 vue-router 的&nbsp;<a href="https://router.vuejs.org/zh/api/#to" rel="nofollow">to 属性</a></td> 
   <td><em>string | object</em></td> 
   <td>-</td> 
  </tr> 
  <tr> 
   <td>replace</td> 
   <td>是否在跳转时替换当前页面历史</td> 
   <td><em>boolean</em></td> 
   <td><code>false</code></td> 
  </tr> 
 </tbody> 
</table>

不同属性有不同展现方式。按照既定方式完成。

也有相应的事件

### 4.Events ###

<table> 
 <thead> 
  <tr> 
   <th>事件名</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>click</td> 
   <td>点击按钮，且按钮状态不为加载或禁用时触发</td> 
   <td><em>event: Event</em></td> 
  </tr> 
  <tr> 
   <td>touchstart</td> 
   <td>开始触摸按钮时触发</td> 
   <td><em>event: TouchEvent</em></td> 
  </tr> 
 </tbody> 
</table>

根据不同的属性拼凑可以展现不同的样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1][]

举例

<template>
      <div class="home">
         <van-button 
           type="info" 
           size="large" 
           icon="https://img.yzcdn.cn/vant/logo.png" 
           loading 
           loading-text="加载中"
           @click="clickHandle"
         >
           信息按钮
         </van-button>
        <img alt="Vue logo" src="../assets/logo.png">
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import { Button } from 'vant'
    export default {
      name: 'Home',
      components: {
        [Button.name]: Button
      },
      created() {
        this.init()
      },
      methods: {
        init() {
          
        },
        clickHandle() {
          // 监听事件执行函数
          alert(123);
        }
      }
    }
    </script>

最后样式

![2020052014430868.png][]

其他大部分组件的使用方式基本一致

### 4. 有两个特别的组件，弹出框Dialog 和轻提示Toast 、 Notify 消息提示 ###

弹出框Dialog 和轻提示Toast 基本相同

在main.js中引入 Toast 组件后，会自动在 Vue 的 prototype 上挂载 $toast 方法，便于在组件内调用。

this.$toast('提示文案');
    
    this.$toast({ message: '自定义图标', icon: 'like-o', });
    
    this.$toast.fail('提示文案');
    
    this.$toast.success('提示文案');

组件内引入后

可以直接这么调用

Toast('提示文案');
    
    Toast({ message: '自定义图标', icon: 'like-o', });
    
    Toast.fail('提示文案');
    
    Toast.success('提示文案');

相关配置 [https://youzan.github.io/vant/\#/zh-CN/toast][https_youzan.github.io_vant_zh-CN_toast]

### 5.内置样式 ###

> **文字省略**

当文本内容长度超过容器最大宽度时，自动省略多余的文本。

<div class="van-ellipsis">这是一段最多显示一行的文字，多余的内容会被省略</div>
    
    
    <div class="van-multi-ellipsis--l2">
      这是一段最多显示两行的文字，多余的内容会被省略
    </div>
    
    
    <div class="van-multi-ellipsis--l3">
      这是一段最多显示三行的文字，多余的内容会被省略
    </div>

> **1px 边框**

为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。

<div class="van-hairline--top"></div>
    
    
    <div class="van-hairline--bottom"></div>
    
    
    <div class="van-hairline--left"></div>
    
    
    <div class="van-hairline--right"></div>
    
    
    <div class="van-hairline--top-bottom"></div>
    
    
    <div class="van-hairline--surround"></div>

> **动画**

可以通过 `transition` 组件使用内置的动画

<transition name="van-fade">
      <div v-show="visible">Fade</div>
    </transition>
    
    
    <transition name="van-slide-up">
      <div v-show="visible">Slide Up</div>
    </transition>
    
    
    <transition name="van-slide-down">
      <div v-show="visible">Slide Down</div>
    </transition>
    
    
    <transition name="van-slide-left">
      <div v-show="visible">Slide Left</div>
    </transition>
    
    
    <transition name="van-slide-right">
      <div v-show="visible">Slide Right</div>
    </transition>

[https_youzan.github.io_vant_zh-CN]: https://youzan.github.io/vant/#/zh-CN/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200520143722242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200520143732440.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTIyOTU4OA==,size_16,color_FFFFFF,t_70
[2020052014430868.png]: https://img-blog.csdnimg.cn/2020052014430868.png
[https_youzan.github.io_vant_zh-CN_toast]: https://youzan.github.io/vant/#/zh-CN/toast