Vue
richful_world
纸上得来终觉浅
展开
-
Vue 左右布局中拖拽容器边框实现自适应宽度
拖拽div边框实现动态改变宽度,并且布局自适应原创 2022-11-23 16:13:59 · 1812 阅读 · 0 评论 -
Vue3 <script setup>中局部引入组件,动态组[Vue warn]: Vue received a Component which was made a reactive object.
Vue3 <script setup>中局部引入组件,动态组件不渲染内容Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`原创 2022-08-29 10:15:11 · 1322 阅读 · 1 评论 -
Vue3 <script setup>中局部引入组件,动态组件不渲染内容
Vue3 中局部引入组件,动态组件不渲染内容,只显示组件名标签原创 2022-08-27 12:40:23 · 6162 阅读 · 1 评论 -
File chooser dialog can only be shown with a user activation.
File chooser dialog can only be shown with a user activation.vue项目中直接写this.$refs.fileInput.click()点击之后报警告 File chooser dialog can only be shown with a user activation., 要想消灭警告,Just do this···可以用下面这种方式代替 $refs.fileInput.click() uploadEvt () { t原创 2022-02-08 15:45:12 · 7657 阅读 · 1 评论 -
error: vue-cli路Failed to download repo vuejs-templates/webpack: read ECONNRESET
用vue-cli 搭建vue项目时初始化报错:Failed to download repo vuejs-templates/webpack: read ECONNRESETstep1: 排查 vue -V ,node -v,webpack -v行你们有骨气都成功安装了,再试一次【循环三次 vue init webpack xxx】,不给面子是吧,行算你狠。。。step2: 瞅着你像个报错连接异常,应该是网络的问题,尝试了直接使用github/webpack路径:下载【https://githu原创 2021-07-10 09:43:17 · 961 阅读 · 0 评论 -
ElementUI Table 拖动列改变宽度事件 (@header-dragend)
问题场景 : elementUI 的 Table 的列支持拖动改变列宽,实际有这种场景,拖拽列要求限制在一定范围内,拖动距离在期望的最大值和最小值之间思路:查看官方文档发现列属性中只提供了 ‘min-width’ ,但是只写min-width,并不能达到min-width的效果;尝试写 max-width 一样没起到 max-width的作用;既然属性不起作用,elementUI一定会留一条活路吧,没错从 ’事件‘ 入手,查看 Table Event 中,有你想要的:header-dra原创 2020-12-22 09:35:51 · 13838 阅读 · 0 评论 -
路由配置报错:Failed to mount component: template or render function not defined
在electron-vue 项目中配置路由过程中,引入发现:component: require('../view/home/HomeView'),报错:Failed to mount component: template or render function not defined先来解决报错:尝试了两种方式都可以解决:import 方式const mailDial = () => import('../view/Main/Addressbook/mail-dial');原创 2020-12-18 11:58:21 · 1784 阅读 · 0 评论 -
elementUI el-input 回车页面刷新
有一种bug,可遇不可求。看似不起眼,可能是压死骆驼的最后一根稻草问题描述:在使用 el-input 的时候一定看一看你的 el-input 是否在 el-form 中,如果在请你先 enter 一下,看看页面有没有变化;毫无疑问你的页面 刷新了;分析 ----> bug fixed: 起初还在看日志的你,结果换然大悟,这一回车竟然出发了form表单的默认提交行为,导致页面refresh,so 上代码 @submit.native.prevent:微笑刺客:你说的致命不过如此! &l原创 2020-10-28 09:03:47 · 1395 阅读 · 2 评论 -
右键菜单跟随,临近边界自动调整位置
自定义右键菜单是一个比较常见的功能,菜单的位置也是一个很重要的参数,如果遇到菜单高度根据右键不同的对象动态变化,并且遇见页面下边界要自动向上调整位置这样的需求,话不多说直接上代码:// table的右键点击当前行事件 rightClick(row) { //单向直播无会控操作 if (this.singleLive) return; event.preventDefault(); // 初始化右键菜单数据 this.initMenu(.原创 2020-10-21 11:02:06 · 787 阅读 · 0 评论 -
vue 右键单击 实现
vue 中右键单击自定义菜单实现// table的右键点击当前行事件 rightClick(row) { //获取我们自定义的右键菜单 var menu = document.querySelector("#menu"); event.preventDefault(); // 初始化右键菜单数据 this.initMenu(row); // 根据事件对象中鼠标点击的位置,进行定位 menu.style.left =原创 2020-06-18 16:23:10 · 1661 阅读 · 0 评论 -
手动关闭 ElementUI Message 或 this.$message 消息提示
很多小伙伴可能会在实际的业务场景中遇见这样一种情况:this.$message({...,duration:0})设置消息框在某种情况下一直显示(根据官方文档的提示将duration的值设为0即可)现在有一种情况需要将这个一直显示的提示消息关闭官方文档的描述是这样 : " 调用 Message 或 this.$message 会返回当前 Message 的实例。如果需要手动关闭实例,可以调用它的 close 方法。"所以贴上亲测有效的代码 OnOfflineStatus(原创 2020-06-17 09:38:03 · 11851 阅读 · 0 评论 -
electron-vue 踩坑记(1)elementUI input 框输入不了
electron-vue 踩坑记(1)elementUI input 框输入不了原创 2020-04-24 11:16:37 · 2898 阅读 · 1 评论 -
Vue 组件通信 ---- 父子组件通信
Vue 组件通信组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信自定义事件当组件需要向父组件传递数据时,就要用到自定义事件,v-on 除了监听DOM事件外,还可以用于组件之间 的自定义事件。JavaScript的设计模式里面有一种’观察者模式’.Vue组件也由于只类似的一套模式,子组件用’$emit()’ 来触发事件,父组件用on来监听子组件的事件。父组件也可以直接在子组件的...原创 2019-11-24 12:39:29 · 176 阅读 · 0 评论