vue-v-xxx基於 Vue拓展的 v-xxx 庫

時間 2019-11-07

標籤 vue 基於拓展简体版

原文原文鏈接

君問歸期未有期，巴山夜雨漲秋池。
何當共剪西窗燭，卻話巴山夜雨時。

做爲vue輕車熟路的老司機，常常會用到一些指令，vue官方提供的指令又太少，沒法知足旺盛的慾望，而每次要寫一遍，終日鬱鬱寡歡，從小就教育咱們樂於助人，爲了將奉獻精神貫徹始終，用了這個庫，空下來大把時間陪陪家人朋友豈不樂哉。css

閒話少敘，直逼主題，畢竟咱們是正經的官方軟文。html

查看官網
查看源碼

什麼是vue指令?

在咱們瞭解庫以前,咱們先回顧一下Vue指令

1. 咱們常常用的有一下幾種指令

v-text 、 v-html 、 v-show 、 v-if 、 v-else 、v-for 、 v-bind 、 v-on 、
v-model 、 v-once

具體用法前去官網,再也不贅述

什麼是自定義指令?

有的狀況下，你仍然須要對普通 DOM 元素進行底層操做，這時候就會用到自定義指令.

<input  v-focus>// 爲例

// 在組件內部
directives: { 
  focus: { 
  // 指令的定義 
  inserted: function (el) { 
    el.focus() 
    } 
  } 
}

鉤子函數

一個指令定義對象能夠提供以下幾個鉤子函數 (均爲可選)：vue

bind：只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置。
inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)。
update：所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前。指令的值可能發生了改變，也可能沒有。可是你能夠經過比較更新先後的值來忽略沒必要要的模板更新。
componentUpdated：指令所在組件的 VNode 及其子 VNode 所有更新後調用。
unbind：只調用一次，指令與元素解綁時調用。

鉤子函數的參數

el：指令所綁定的元素，能夠用來直接操做 DOM 。
binding：一個對象，包含如下屬性：node
- name：指令名，不包括 v- 前綴。
- value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值爲 2。
- oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。不管值是否改變均可用。
- expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式爲 "1 + 1"。
- arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數爲 "foo"。
- modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象爲 { foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節點。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

怎麼安裝vue-v-xxx?

基於vue指令,又新增豐富一些經常使用的指令,看看是怎麼使用的吧

安裝

您能夠經過npm 安裝,推薦使用 npm 的方式安裝，它能更好地和 webpack 打包工具配合使用。

# install vue-v-xxx

 npm install vue-v-xxx --save

# or

 yarn add vue-v-xxx --save

您也能夠經過 unpkg.com/vue-v-xxx 獲取到最新版本的資源，在頁面上引入 js 和 css 文件便可開始使用。

<!-- 引入樣式 -->

<link rel="stylesheet" href="https://unpkg.com/vue-v-xxx/lib/vue-v-xxx.css" />

<!-- 引入組件庫 -->

<script src="https://unpkg.com/vue-v-xxx"></script>

使用

您能夠在main.js裏面全局註冊,在組件內就能夠應用了推薦工程

import Vue from 'vue'

import App from './App'

import Vxxx from 'vue-v-xxx'

import 'vue-v-xxx/lib/vue-v-xxx.css'

Vue.config.productionTip = false

Vue.use(Vxxx)

/* eslint-disable no-new */

new Vue({

  el: '#app',

  components: { App },

  template: '<App/>'

})

您能夠經過 CDN 能夠快速使用 vue-v-xxx 寫出一個示例，您能夠複製下面代碼或在線預覽

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>vue-v-xxx</title>

    <link rel="stylesheet" href="https://unpkg.com/vue-v-xxx/lib/vue-v-xxx.css" />

  </head>

  <body>

    <div id="app">

      <h1 title="Welcome">歡迎使用 {{ value }}</h1>

      <button v-copy="value">Click me!</button>

    </div>

  </body>

  <!-- import Vue before vue-v-xxx -->

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

  <!-- import JavaScript -->

  <script src="https://unpkg.com/vue-v-xxx/lib/vue-v-xxx.umd.js"></script>

  <script>

    new Vue({

      el: '#app',

      data: {

        value: 'vue-v-xxx'

      }

    })

  </script>

</html>

咱們提供了那些額外的指令?

v-call 撥打指令

該指令快速喚起撥打電話或者發送短信

在線預覽
使用案例

<template lang="pug">
.v-xxx
  div(v-call="tel") 點擊撥打☎️
  div(v-call:sms="10086") 點擊發短信💬
</template>
<script>
  export default {
    name: 'v-call',
    data() {
      return {
        tel: '10086'
      }
    }
  }
</script>

v-copy 複製指令

在不少狀況下，咱們須要複製操做

在線預覽
使用案例

<template lang="pug">
.v-xxx
  Button(@click="handleClick" v-copy="value") 點擊複製
  div
    textarea(placeholder="Paste here" style="margin-top:40px;width:100%;height:100%;")
</template>
<script>
  export default {
    name: 'v-copy',
    data() {
      return {
        value: ''
      }
    },
    methods: {
      handleClick(html = '你複製了我,去粘貼吧') {
        this.value = html
      }
    }
  }
</script>

v-debounce 防抖指令

v-debounce 支持傳入防抖時間 v-debounce:500 默認 500ms

在線預覽

<template lang="pug">
.v-xxx
  h1 未加防抖
  h2 點擊次數:{{num}}
  Button(@click="addNum") (點我)
  h1 加入防抖
  h2 點擊次數:{{num2}}
  Button(v-debounce="addNum2") (點我)
</template>
<script>
export default {
  name: 'v-debounce',
  data () {
    return {
      num: 0,
      num2: 0,
    }
  },
  methods: {
    addNum () {
      this.num++
    },
    addNum2 () {
      this.num2++
    }
  }
}
</script>

v-throttle 節流指令

v-throttle 支持傳入防抖時間 v-throttle:2000 默認 2s

在線預覽

<template lang="pug">
.v-xxx
  h3 當即觸發:{{num}}
  input(v-model="num")
  h3 節流後:{{num2}}
  input(v-throttle:2000="num2")
</template>
<script>
  export default {
    name: 'v-throttle',
    data() {
      return {
        num: '當即改變',
        num2: '節流值'
      }
    }
  }
</script>

v-ellipsis 省略指令

v-ellipsis 在表格中常常使用, v-ellipsis默認單行省略

在線預覽

<template lang="pug">
.v-xxx
  div(v-ellipsis) {{des}}
  div(v-ellipsis:3)
    p {{des2}}
</template>
<script>
export default {
  name: 'v-ellipsis',
  data() {
    return {
      des:
        '單行省略單行省略單行省略單行省略單行省略單行省略單行省略單行省略單行省略單行省略單行省略單行省略單行省略單行省略單行省略單行省略',
      des2:
        '多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略多行省略'
    }
  }
}
</script>

v-pin 固定指令

v-pin 支持傳入定位位置和定位值 v-pin:left || top 默認 left

在線預覽

<template lang="pug">
.v-xxx
  div(v-pin="200") 頂部200px
  div(v-pin:left="300") 左邊300px
</template>
<script>
  export default {
    name: 'v-pin'
  }
</script>

v-focus 聚焦指令

v-focus 在移動端登陸時異常好用

在線預覽

<template lang="pug">
.v-xxx
  input(v-focus)
</template>
<script>
export default {
  name: 'v-focus'
}
</script>

v-click-out 外部點擊指令

v-click-out 點擊外部 dom 觸發

在線預覽

<template lang="pug">
.v-xxx
  div(style="border:1px solid red;width:200px;height:200px;" @click="handleClick" v-click-out="handleClickOut") {{name}}
</template>
<script>
  export default {
    name: 'v-click-out',
    data() {
      return {
        name: '內部'
      }
    },
    methods: {
      handleClick() {
        this.name = '您點擊了內部'
      },
      handleClickOut() {
        this.name = '您點擊了外部'
      }
    }
  }
</script>