@wulihua/vue-directives v0.0.5

vue 指令集

查看 demo

使用方法

// main.js
import Directive from '@wulihua/vue-directives'

// 默认加载全部
Vue.use(Directive)
// 自定义
Vue.use(Directive, [
  'hide', // 类似v-show，避免回流，提高性能
  'resize', // 监听窗口变化
  'draggable', // 拖拽
  'copy', // 点击复制
  'debounce', // 点击防抖
  'longpress', // 左击长按
  'click-outside', // 监听点击该元素外的区域
  'focus', // 输入框获取焦点
  'emoji', // 输入框过滤emoji表情
  'title', // 显示元素title
  'image', // 待目标图片加载完毕后替换默认图
  'img-lazy', // 图片懒加载
  'permission', // 根据权限控制dom显示\隐藏
  'loading', // 遮罩
  'water-marker', // 水印
  // ...待更新
])

<template>
  <div class="demo">
    <!-- -------------------------hide---------------------------- -->
    <button v-hide="true">避免回流</button>

    <!-- -------------------------resize---------------------------- -->
    <div v-resize="getSize">
      监听窗口变化，浏览器窗口宽：{{ windowSize.x }}，浏览器窗口高：{{
        windowSize.y
      }}
    </div>

    <!-- --------------------draggable--------------------------------- -->
    <div>
      <button v-draggable>拖拽此元素</button>
    </div>

    <!-- --------------------copy--------------------------------- -->
    <div>
      <button v-copy="'<div>复制的内容</div>'">
        点击复制（过滤html标签及属性）
      </button>
    </div>

    <!-- -------------------debounce---------------------------------- -->
    <div>
      <button @click="debounce" v-debounce>
        点击防抖：{{ debounceCount }}
      </button>
    </div>

    <!-- -------------------longpress---------------------------------- -->
    <div>
      <button v-longpress="longpress">
        左击默认长按2秒：{{ longpressCount }}
      </button>
      <button v-longpress:1000="longpress">
        左击自定义长按1秒：{{ longpressCount }}
      </button>
    </div>

    <!-- ---------------------click-outside-------------------------------- -->
    <div>
      <button v-click-outside="() => clickOutside()">
        点击该元素外区域：{{ clickOutsideCount }}
      </button>
    </div>

    <!-- -----------------focus-------emoji----------------------------- -->
    <input
      type="text"
      v-model="emoji"
      v-focus
      v-emoji
      placeholder="默认对焦 && 过滤emoji"
    />
    <span>复制emoji : 😃 Smileys & People</span>

    <!-- ---------------------title-------------------------------- -->
    <div v-title class="title">鼠标放到这显示title</div>

    <!-- -----------------------image------------------------------ -->
    <div>
      <span>待目标图片加载完毕后替换默认图：</span>
      <img
        src="http://111.229.161.253:10000/project/xuanwu-screen-web/image/%E6%A0%87%E9%A2%98.png"
        v-image="
          'http://111.229.161.253:10000/project/xuanwu-screen-web/image/%E6%95%B0%E5%AD%97.png'
        "
      />
    </div>

    <!-- -----------------------img-lazy------------------------------ -->
    <div class="img-list">
      <div>图片懒加载：</div>
      <div v-for="(item, index) in 100" :key="index">
        <img
          src="http://111.229.161.253:10000/project/xuanwu-screen-web/image/%E6%A0%87%E9%A2%98.png"
          v-img-lazy="
            'http://111.229.161.253:10000/project/xuanwu-screen-web/image/%E6%95%B0%E5%AD%97.png'
          "
        />
      </div>
    </div>

    <!-- -----------------------permission------------------------------ -->
    <div class="btns">
      <span>根据权限创建按钮：</span>
      <button v-permission="'1'">权限按钮1</button>
      <button v-permission="'10'">权限按钮2</button>
    </div>

    <!-- ------------------water-marker----------------------------------- -->
    <div v-water-marker="{ text: '水印' }"></div>

    <!-- ------------------loading----------------------------------- -->
    <div class="loading" v-loading="true">加载用的遮罩</div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      emoji: '',
      debounceCount: 0,
      longpressCount: 0,
      clickOutsideCount: 0,
      windowSize: {
        x: 0,
        y: 0,
      },
    }
  },
  mounted() {
    this.getSize()
  },
  methods: {
    debounce() {
      this.debounceCount += 1
    },
    longpress() {
      this.longpressCount += 1
    },
    clickOutside() {
      this.clickOutsideCount += 1
    },
    getSize() {
      this.windowSize = {
        x: window.innerWidth,
        y: window.innerHeight,
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.demo {
  width: 100%;
  height: 100%;
  position: relative;
}
button {
  color: #000;
}
.img-list {
  background-color: black;
  width: 100px;
  height: 200px;
  overflow: auto;
  img {
    opacity: 0;
    transition: all 0.3s;
  }
}
.loading {
  width: 200px;
  height: 200px;
}
.title {
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
</style>