文档
示例
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>
