随笔分类 - vue3
摘要：1.Runtime directive used on component with non-element root node 。自定义指令不能放到组件上，而是要放到自有的元素上
阅读全文
摘要：批量导入（带信息反馈）： <!-- 批量创建 批量导入 --> <file @refresh="refresh"></file> 组件： <template> <div class="export-wrap"> <el-upload class="upload-demo" action="#" :b
阅读全文
摘要：介绍：通过组合式API可以把复杂或常用的逻辑封装成一个个hook来进行调用，简介优雅，方便维护。 hooks 本质是一个函数，是对 setup 中使用的 composition API的封装，通俗来讲：抽出一部分代码单独放一个js里，在setup里就可直接用hook中的函数，不是父子组件的关系。 h
阅读全文
摘要：动画：先放大 再消失 <template> <div class="app"> <div> <button @click="show = !show">切换</button> </div> <!-- 插入DOM元素和移除dom元素动画同时进行 --> <transition name="h1"> <
阅读全文
摘要：mitt又称事务总线，是第三方插件。 Vue2.x 使用 EventBus 进行组件通信，而 Vue3.x 推荐使用 mitt.js。 优点 首先它足够小，仅有200bytes，其次支持全部事件的监听和批量移除，它还不依赖 Vue 实例，所以可以跨框架使用，React 或者 Vue，甚至 jQuer
阅读全文
摘要：如图所示，没有传统穿梭框中间的箭头，操作更加方便，左侧选择后进入到右侧，并且可以对右侧所选项进行删除，从而左侧勾选也会对应取消。并且带搜索框。 代码如下： （涉及到深拷贝的一些知识） <template> <div style="display: inline-block"> <!-- 下拉选择 -
阅读全文
摘要：效果如图： 代码如下： <template> <div class="order-wrap" @click="orderFn"> <span class="text">{{ reverse ? "正序" : "倒序" }}</span> <span class="triangle"> <i clas
阅读全文
摘要：提取公共方法： import { copyDomText } from "@/untils/common.js"; 使用： //复制 const copyCode = (val) => { copyDomText(val); }; common.js文件 import { ElMessage } f
阅读全文
摘要：//compostion api (组合api) import { ref, reactive,onBeforeMount, onMounted,onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted,computed,watch,nextTi
阅读全文
摘要：vue2的this.$router.push在vue3中的写法： import { useRouter } from 'vue-router'; export default { components: { pagination }, setup() { const router = useRout
阅读全文
摘要：vue2的防抖处理(自定义指令) 在utils/index.js 文件中 // 防抖 立即执行 function debounce(fn, arg) { // delay = delay || 1000; let delay = 1000; let timeout; return function(
阅读全文
