js：Vue2.js中使用CDN方式引入vueuse

文档

• ​​https://vueuse.org/guide/​​

示例

1、使用核心包中的方法

<!-- 引入Vue.js  -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

<!-- 引入vueuse -->   
<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

<div id="app">
  <input type="text" v-model="title" />
</div>

<script>
  new Vue({
    el: "#app",

    data() {
      return {
        // 修改浏览器标题
        title: VueUse.useTitle(),
      };
    },
  });
</script>

2、使用指令监听元素大小变化

<!-- 引入 Vue2.js  -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 引入 vueuse -->
<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>
<!-- 使用 @vueuse/components -->
<script src="https://unpkg.com/@vueuse/components"></script>

<div id="app">
  <textarea :rows="5" v-model="size" v-element-size="onResize"></textarea>
</div>

<script>
  // 使用指令
  Vue.directive("element-size", VueUse.vElementSize);

  new Vue({
    el: "#app",

    data() {
      return {
        size: "",
      };
    },

    methods: {
      onResize({ width, height }) {
        this.size = JSON.stringify({ width, height }, null, 2);
      },
    },
  });
</script>

3、使用vOnClickOutside监听鼠标点击元素外区域

<!-- 引入 Vue2.js  -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<!-- 引入 vueuse -->
<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>
<!-- 使用 @vueuse/components -->
<script src="https://unpkg.com/@vueuse/components"></script>

<style>
  .box {
    width: 400px;
    height: 400px;
    background-color: goldenrod;
  }
</style>

<div id="app">
  <div class="box" v-click-outside="handleClickOutside"></div>
</div>

<script>
  // 使用指令
  Vue.directive("click-outside", VueUse.vOnClickOutside);

  new Vue({
    el: "#app",

    data() {
      return {
        size: "",
      };
    },

    methods: {
      handleClickOutside() {
        console.log("HandleTrigger");
      },
    },
  });
</script>