每天学习一个vue插件(28)——v-directive

看吧，星星只有在夜里才璀璨夺目啊

前言

1.v-copy

安装

npm i v-copy -S

使用

<template>
  <div>
    <button v-copy="msg">复制</button>
  </div>
</template>

<script>
import { copy } from 'v-copy'
export default {
  directives: {
    copy
  },
  data() {
    return {
      msg: 'NO.123456',
    }
  }
}
</script>

参考链接

• v-copy

2.v-click-outside

安装

npm i v-click-outside -S

使用

<template>
  <div v-click-outside="onClickOutside">
  </div>
</template>

<script>
import { directive as clickOutside } from 'v-click-outside'
export default {
  directives: {
    clickOutside
  },
   methods: {
    onClickOutside(event) {
      console.log('Clicked outside Event: ', event)
    }
  }
}
</script>

参考链接

• v-click-outside

3.v-contextmenu-directive

安装

npm i v-contextmenu-directive -S

使用

<template>
  <div v-contextmenu="contextmenus">
  </div>
</template>

<script>
import Vue from 'vue'
import vContextmenu from 'v-contextmenu-directive'

Vue.use(vContextmenu)
export default {
   methods: {
      contextmenus() {
          return [
            {
              text: '剪切',
              subText: 'Ctrl + X',
              action: () => console.log('你点击了剪切')
            },
            {
              text: '复制',
              subText: 'Ctrl + C'
            },
            {
              text: '粘贴',
              subText: 'Ctrl + V'
            },
            { divider: true },
            {
              text: '删除',
              subText: 'Delete'
            }
          ]
    }
  }
}
</script>

参考链接

• v-contextmenu-directive

4.v-decimal

安装

npm i v-decimal -S

使用

<template>
  <div>
    <input v-model="value" v-decimal="2" />
  </div>
</template>

<script>
import Vue from 'vue'
import VDecimal from 'v-decimal'

Vue.use(VDecimal)
export default {
   data() {
    return {
      value: 0.00
    }
  }
}
</script>

参考链接

• v-decimal

5.v-debounce-throttle

安装

npm i v-debounce-throttle -S

使用

<template>
  <div>
    <button v-debounce="debounce">防抖</button>
    <button v-throttle="throttle">节流</button>
  </div>
</template>

<script>
import Vue from 'vue'
import vDebounceThrottle from 'v-debounce-throttle'

Vue.use(vDebounceThrottle)
export default {
   methods: {
    debounce(event) {
      console.log('debounce', event)
    },
    throttle(event) {
      console.log('throttle', event)
    }
  }
}
</script>

参考链接

• v-debounce-throttle

6.v-download

安装

npm i v-download -S

使用

<template>
  <div>
      <button
        v-download-data="data"
        v-download-data:type="type"
        >download</button>
  </div>
</template>

<script>
import { downloadData } from 'v-download'
export default {
  directives: {
    downloadData
  },
  data() {
    return {
      data: { msg: 'NO.123456' },
      type: 'json'
    }
  }
}
</script>

参考链接

• v-download

7.v-permission

安装

npm i v-permission -S

使用

<template>
  <div>
    <button v-permission:noDrop="noDrop">
      我是被禁止的
    </button>
    <button v-permission:remove="remove">
      我是被移除指令，渲染后不可见
    </button>
  </div>
</template>

<script>
import Vue from 'vue'
import vPermission from 'v-permission'

Vue.use(vPermission)
export default {
  data() {
      return {
        noDrop: true,
        remove: true,
      }
  }
}
</script>

参考链接

• v-permission

8.v-tips

安装

npm i v-tips -S

使用

<template>
  <div>
    <p v-tips="tips">tips</p>
  </div>
</template>

<script>
import Vue from 'vue'
import vTips from 'v-tips'

Vue.use(vTips)
export default {
  data() {
      return {
        tips: 'hello tips!'
      }
  }
}
</script>

参考链接

• v-tips

9.v-touch

安装

npm i yg-v-touch -S

使用

<template>
  <div
    v-touch
    @swipeLeft="swipeLeft"
    @longTap="longTap"
  >
  </div>
</template>

<script>
import Vue from 'vue'
import vTouch from 'yg-v-touch'

Vue.use(vTouch)
export default {
   methods: {
    swipeLeft(e) {
      console.log('swipeLeft', e)
    },
    longTap(e) {
      console.log('longTap', e)
    }
  }
}
</script>

参考链接

• v-touch

尾声

我把月亮挂高空，写满对你的祝福，一闪一闪亮晶晶，满眼都是小星星

晚安 ^_^

往期回顾

• 每天学习一个vue插件(1)——better-scroll
• 每天学习一个vue插件(2)——vue-awesome-swiper
• 每天学习一个vue插件(3)——eslint + prettier + stylelint
• 每天学习一个vue插件(4)——v-viewer
• 每天学习一个vue插件(5)——postcss-pxtorem
• 每天学习一个vue插件(6)——momentjs
• 每天学习一个vue插件(7)——hammerjs
• 每天学习一个vue插件(8)——mcanvas
• 每天学习一个vue插件(9)——MathJax
• 每天学习一个vue插件(10)——Vue-APlayer
• 每天学习一个vue插件(11)——vue-drag-resize
• 每天学习一个vue插件(12)——vue-fullpage
• 每天学习一个vue插件(13)——html2canvas
• 每天学习一个vue插件(14)——vue-pull-to
• 每天学习一个vue插件(15)——vue-content-placeholders
• 每天学习一个vue插件(16)——vue-video-player
• 每天学习一个vue插件(17)——js-file-download
• 每天学习一个vue插件(18)——js-audio-recorder
• 每天学习一个vue插件(19)——vue-treeselect
• 每天学习一个vue插件(20)——progressbar
• 每天学习一个vue插件(21)——ProvidePlugin
• 每天学习一个vue插件(22)——vue-router
• 每天学习一个vue插件(22)——vue-router
• 每天学习一个vue插件(23)——url-loader
• 每天学习一个vue插件(24)——drivejs
• 每天学习一个vue插件(25)——vuex-persist
• 每天学习一个vue插件(26)——uglifyjs-webpack-plugin
• 每天学习一个vue插件(27)——axios