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