详解Vant组件的使用

官方文档地址： 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里的标签，比如 

<input type="text" max="3"/>

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

组件也是同样道理

例如Button组件 

属性有这些

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

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

也有相应的事件

4.Events

事件名	说明	回调参数
click	点击按钮，且按钮状态不为加载或禁用时触发	event: Event
touchstart	开始触摸按钮时触发	event: TouchEvent

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

举例

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

最后样式

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

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

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>