vue-v-xxx基于 Vue拓展的 v-xxx 库

君问归期未有期，巴山夜雨涨秋池。
何当共剪西窗烛，却话巴山夜雨时。

作为vue轻车熟路的老司机，经常会用到一些指令，vue官方提供的指令又太少，无法满足旺盛的欲望，而每次要写一遍，终日郁郁寡欢，从小就教育我们乐于助人，为了将奉献精神贯彻始终，用了这个库，空下来大把时间陪陪家人朋友岂不乐哉。

闲话少叙，直逼主题，毕竟我们是正经的官方软文。

查看官网
查看源码

什么是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() 
    } 
  } 
}

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
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:2000 默认 2s

在线预览

<template lang="pug">
.v-xxx
  h3 立即触发:{{num}}
  input(v-model="num")
  h3 节流后:{{num2}}
  input(v-debounce:2000="num2")
</template>
<script>
  export default {
    name: 'v-debounce',
    data() {
      return {
        num: '立即改变',
        num2: '节流值'
      }
    }
  }
</script>

v-throttle 节流指令

v-throttle 支持传入节流时间v-throttle:500 默认 500ms

在线预览

<template lang="pug">
.v-xxx
  h1 未加防抖
  h2 点击次数:{{num}}
  Button(@click="addNum") (点我)
  h1 加入防抖
  h2 点击次数:{{num2}}
  Button(v-throttle="addNum2") (点我)
</template>
<script>
  export default {
    name: 'v-throttle',
    data() {
      return {
        num: 0,
        num2: 0
      }
    },
    methods: {
      addNum() {
        this.num++
      },
      addNum2() {
        this.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>

结束语

如果您有好的指令欢迎👏来提issue,尽可能多的覆盖,一旦选用将获取神秘礼品,期待您的加入

神交

觉得不错的话给个star

GitHub
blog

posted @ 2019-10-07 17:10 云中一樵夫阅读(917) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

superDragon