随笔分类 - 前端 / Vue学习
摘要：在使用 setup() 语法糖时，方法的定义和 watch 的调用都在 setup内部进行。 需要确保方法在 watch 调用之前可访问。 **错误示例** ```html ``` 这个时候，会报错`Uncaught (in promise) ReferenceError: Cannot acces
阅读全文
摘要：这个错误的解决方案如下： 1. 禁用 "computeStyles" 修饰符的 adaptive 选项：这将允许平滑过渡，但可能会降低性能。 禁用 "computeStyles" 修饰符的 adaptive 选项，可以在创建 Popper 实例时指定 modifiers 参数，并将 computeS
阅读全文
摘要：修改dialog组件样式必须在非scoped环境下，再加一个style标签，并给需要加的dialog一个类名eg：createDialog <style lang="scss" scoped> ... </style> <style lang="scss"> .createDialog{ .el-d
阅读全文
摘要：userAvatar.vue <template> <div class="user-info-head" @click="editCropper()"> <img :src="options.img" title="点击上传头像" class="img-circle img-lg" /> <el-
阅读全文
摘要：index.vue文件 <template> <div> <!-- 多图片上传 --> <el-upload v-if="multiple" action='string' list-type="picture-card" :on-preview="handlePreview" :auto-uplo
阅读全文
摘要：如上图所示，我需要监听layerList的变化，代码如下： import useLayersStore from "@/store/modules/layers"; const layersStore = useLayersStore(); watch( () => userStore.layerL
阅读全文
摘要：1、在css中使用变量 (1)css中声明变量 --color：red (2)使用变量 color:var(--color) //color:red获取到全局声明变量值为red 2、使用vue中的变量 (1) 在html标签中 <span :style="{'--color':变量color}" r
阅读全文
摘要：import { useRoute, useRouter } from 'vue-router' const router = useRouter() const route = useRoute() router.push({ path: '/index'}) 这种在正常.vue文件中引入没有任何
阅读全文
摘要：v-contextmenu-github v-contextmenu-doc v-contextmenu-预览 可以非常快速实现鼠标右键菜单O(∩_∩)O~
阅读全文
摘要：如在Vue中，我们可以绑定在style上面变量，然后使用css来使用该变量，如下： <div class="layersBox unselect" v-move :style="`--color: ${theme}`"> .layersBox { color: var(--color); } 这样子
阅读全文
摘要：一、安装依赖 npm i -D unplugin-auto-import 二、创建文件 // 和src平级 vite/plugins // 目录 三、目录里创建index.js import vue from '@vitejs/plugin-vue' import createAutoImport
阅读全文
摘要：引言 在 Vue2 中，异步组件和路由懒加载处理使用 import 就可以很轻松实现。但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了。本文就详细讲讲vue3中异步组件和路由懒加载的实现。 Vue3 异步组件/路由 一、前言 1-1.三点变化： a.异步组件声明方法的改变：Vue
阅读全文
摘要：控制台警告Runtime directive used on component with non-element root node. The directives will not function as intended. 原因 意思是自定义指令不能放到组件上,而是要放到自有的元素上 也就是这
阅读全文
摘要：Vue 3 中兄弟间传值可以使用 Vuex，但小项目使用过于庞大，我们可以使用mitt进行兄弟组件间传值。 操作步骤 第一步：安装 mitt npm i mitt 第二步：创建文件（例如：eventBus.js） import mitt from 'mitt' export default mitt
阅读全文
摘要：element-ui中的el-form表单验证，只有在提交按钮点击时才进行验证，这样会减少消耗 其实很简单，直接在el-input上加一个属性就行:validate-event="false" Form 表单组件的表单属性都有这么一个属性 示例 <template> <el-form ref="fi
阅读全文
摘要：问题 vite 官方默认的配置，如果资源文件在assets文件夹打包后会把图片名加上hash值，但是直接通过:src="imgSrc"方式引入并不会在打包的时候解析，导致开发环境可以正常引入，打包后却不能显示的问题 这里我们先看看vite官方文档的解释： https://vitejs.bootcss
阅读全文
摘要：解决办法 append-to-body后上层就不在div在html下了,所有不能写在scoped里面,得单独写
阅读全文
摘要：问题 在vue.config.js 文件配置插件引入时，报错： ERROR Invalid options in vue.config.js: "plugins" is not allowed。 解决方法 webpack 相关的配置需要写到 configureWebpack 里，不能直接写在外面。
阅读全文
摘要：运行环境 "pinia": "^2.0.28", "vue": "^3.2.45", "vue-router": "^4.1.6" 触发错误代码 import { createWebHistory, createRouter } from 'vue-router' import useMenuSto
阅读全文
