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

時間  2019-11-09
標籤 vue 基於 拓展 简体版
原文   原文鏈接

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

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

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

什麼是vue指令?

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

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

v-text 、 v-html 、 v-show 、 v-if 、 v-else 、v-for 、 v-bind 、 v-on 、
v-model 、 v-once
複製代碼

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

什麼是自定義指令?

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

<input  v-focus>// 爲例

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

鉤子函數

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

  • bind：只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置。github

  • inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)。web

  • update：所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前。指令的值可能發生了改變，也可能沒有。可是你能夠經過比較更新先後的值來忽略沒必要要的模板更新。express

  • componentUpdated：指令所在組件的 VNode 及其子 VNode 所有更新後調用。npm

  • unbind：只調用一次，指令與元素解綁時調用。

鉤子函數的參數

  • el：指令所綁定的元素，能夠用來直接操做 DOM 。
  • binding：一個對象，包含如下屬性：
    • 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>

複製代碼

結束語

若是您有好的指令歡迎👏來提issue,儘量多的覆蓋,一旦選用將獲取神祕禮品,期待您的加入

神交

以爲不錯的話給個star

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程