Directive 指令

引入方式

import Vue from 'vue';
import { ClickOutSide, Clipboard, ClickRepeat, TitleTip } from '@polyv/polyv-ui';

Vue.use(ClickOutSide);
Vue.use(Clipboard);
Vue.use(ClickRepeat);
Vue.use(TitleTip);

clickOutSide

点击元素以外的区域时触发事件。

<template>
  <div class="directive-wrap">
    <div
      class="directive-box"
      v-click-out-side="handleClickOutSide"
      @click="message = 'click here...'">{{ message }}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'click! click! click! '
      };
    },
    methods: {
      handleClickOutSide() {
        this.message = 'click outside';
      }
    }
  };
</script>

显示代码

clickRepeat

鼠标按住元素时触发事件。

<template>
  <div class="directive-wrap">
    <div
      class="directive-box"
      v-click-repeat="handleClickRepeat">click me repeat: {{ count }}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 1
      };
    },
    methods: {
      handleClickRepeat() {
        this.count += 1;
      }
    }
  };
</script>

显示代码

clipboard

复制文本。

<template>
  <plv-button
    v-clipboard="text"
    v-clipboard:success="handleSuccess"
    v-clipboard:error="handleError">复制文本</plv-button>
</template>

<script>
  export default {
    data() {
      return {
        text: '这是一段复制文本'
      };
    },

    methods: {
      handleSuccess() {
        this.$toast.success('复制成功');
      },
      handleError() {
        this.$toast.warning('复制失败');
      }
    }
  };
</script>

显示代码

titleTip

标题气泡，与浏览器的 title 属性类似

<template>
  <div v-title-tip="text" style="cursor: pointer;">测试一个title</div>
</template>

<script>
  export default {
    data() {
      return {
        text: '我是一个title'
      };
    }
  };
</script>

显示代码