vue
supming1
这个作者很懒,什么都没留下…
展开
-
element plus input 设置clearable focus时闪烁问题
element plus input 设置clearable focus时闪烁问题原创 2023-04-11 08:53:23 · 1721 阅读 · 0 评论 -
element plus tree组件实现父级影响子级,子级不影响父级
element plus tree组件实现父级影响子级,子级不影响父级原创 2022-11-18 16:30:04 · 590 阅读 · 0 评论 -
element plus tree组件 check-change 和 check属性的区别
element plus tree组件 check-change 和 check属性的区别原创 2022-11-18 15:56:43 · 1014 阅读 · 0 评论 -
element plus el-radio-group 无法默认选中原因排查
element plus el-radio-group 无法默认选中原因排查原创 2022-10-26 17:02:45 · 4286 阅读 · 0 评论 -
vue3 如何调用自定义组件方法
vue3 如何调用自定义组件方法原创 2022-10-24 23:34:31 · 974 阅读 · 0 评论 -
element ui + vue3 + axios 报错时出现多个提示问题
用element ui + vue3进行开发,结合axios封装了请求,发现一个奇怪的现象,报错时出现了多次错误提示。排查许久,发现只有改动了axios封装的请求文件时才会出现这种情况,而且每热更新一次,多一个提示。判断应该是热更新导致导致。找到现象产生原因,未找到解决办法。不过还好只是开发环境会。...原创 2022-05-18 10:37:56 · 625 阅读 · 2 评论 -
vue2 监听父级监听子组件的生命周期
<template> <child-component @hook:updated="onUpdated"></template>采用 @hook:生命周期名称的方式,实现父级监听子组件的生命周期。原创 2021-11-25 17:27:22 · 214 阅读 · 0 评论 -
vue3 开发总结
本文是vue3官方文档的提炼和总结,主要是记录vue3开发常用到的知识点,方便后续开发的时候查询,避免一段时间没开发之后遗忘了,又需要重新看官网,比较费时。原创 2021-11-25 17:35:47 · 3928 阅读 · 3 评论 -
vue3 父级重置组件内部样式
vue3采用如下形式<style scoped>.a :deep(.b) { /* ... */}</style>详情看这里,深度选择器部分。原创 2021-11-23 16:53:08 · 426 阅读 · 0 评论 -
el-table 实现单选
el-table只有多选的配置,要怎么实现单选呢?可参考这个,不过其代码中有个小问题,选中的时候,会显示label的值,修改如下:<el-radio> <!--在此处添加空节点,才不会显示label的值--> <i></i></el-radio>在radio中添加<i></i>,这样radio就不会显示label的值了...原创 2022-09-14 14:43:02 · 862 阅读 · 0 评论 -
动态修改面包屑标题
在用vue + element ui 做后台管理系统的时候,一般会有面包屑来指示当前所处的页面,一般是拿路由信息中的meta.title作为面包屑。如果遇到编辑和新增公用公用一个页面的情况,该怎么动态的修改标题呢?可以考虑在路由守卫中判断是否有id,来动态的修改meta。但特意写个路由守卫来这样修改并不是特别好,其他人维护的时候可能不知道你这样设置,可维护性不好,另一方面,还需要显示面包屑的组件支持meta.title动态修改,比较麻烦。可以通过配置两个路由,指向同一个页面的方式,来取巧的设置。如下:原创 2021-11-18 16:49:58 · 1662 阅读 · 0 评论 -
vue3 element plus el-input 无法输入问题
最近用vue3 elementplus进行开发,发现el-input无法输入,代码如下:<template> <el-card> <template #header> <div class="card-header"> <el-form ref="searchForm" :model="searchForm" label-width="80px"> <el-form-it...原创 2021-11-11 14:42:39 · 9081 阅读 · 0 评论 -
vue3 element-plus table 数据显示不出来现象
用vue3 + element-plus开发,今天遇到个坑爹的问题,用el-table显示数据,数据没显示出来。如下图在其他人机器上显示的出来调试发现开始是能渲染出来的,后面在更新的时候又被替换掉了。未找到具体原因。不过发现了其他人没有这个问题的原因。其他人的chrome浏览器比较新,我的是72版32位的,后面重新更新到92版本就能正常显示了。...原创 2021-11-10 18:29:30 · 5946 阅读 · 2 评论 -
element ui 菜单栏父路由未添加到子路由问题
vue路由我们一般会如下设置,我们期望最终形成的是/news/list之类的路由。{ path: '/news', component: HomeTemplate, meta: { title: '资讯管理', icon: 'record' }, children: [ { path: 'list', name: 'newsList', component: () => import('@/views..原创 2021-11-03 22:30:29 · 488 阅读 · 0 评论 -
基础请求封装中用到vue-router提示循环依赖问题解决
我们做项目时,一般会用axios封装一个基础请求模块(如:request.js),在其中拦截请求,做一些请求前后的处理,方便附加请求公共参数和错误请求等。如果登陆过期,可能会引入vue-router,然后用router.push跳转到登陆页。这时候,你在页面中,采用request调用接口,如果你的项目中引入了eslint,你就会发现报循环引入错误。排查许久,发现是路由加载页面,而页面引用了request,request中由引用了vue-router导致了循环依赖。但这个过程没法改变,request.js中.原创 2021-11-02 14:11:28 · 839 阅读 · 0 评论 -
el-radio-button 设置默认选中问题
el-radio-button官方给出的代码示例如下。<template> <div> <el-radio-group v-model="radio1"> <el-radio-button label="上海"></el-radio-button> <el-radio-button label="北京"></el-radio-button> </el-radio-gr.原创 2021-10-25 18:21:13 · 7582 阅读 · 0 评论 -
vue3 模板中如何格式化数据
vue3去掉了过滤器,那么我们如何在模板中做一些格式化之类的功能呢?以下是几种实现方式。1、简单的可以利用计算属性格式化之后显示2、在组件中写方法,在模板中调用3、可以采用全局属性的方式代替,这种比较符合我们要的效果。main.jsapp.config.globalProperties.$filters = { // 挂载全局属性 formatTime(){ // do some thing return .... } }.原创 2021-08-26 11:35:41 · 2046 阅读 · 0 评论 -
vue-router savedPosition 无效问题
按vue-router官网描述,页面返回要保持滚动条位置,需要如下设置:const router = createRouter({ scrollBehavior(to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { top: 0 } } },})但有时可能你会发现savedPosition返回的数值一直是{left:0,t原创 2021-08-10 16:59:27 · 2846 阅读 · 0 评论 -
<router-view> can no longer be used directly inside <transition> or <keep-alive>
<router-view> can no longer be used directly inside <transition> or <keep-alive>route-view 4.0按照之前keep-alive包router-view的调用方式会报上面错误,提示采用如下调用方式<router-view v-slot="{ Component }"> <keep-alive> <component :is="Comp...原创 2021-08-10 14:17:42 · 1636 阅读 · 0 评论 -
vue 循环中绑定事件是否需要事件委托
事件委托是在js中减少事件绑定的方式,是一种常用的js优化方法。曾经review其他人的代码,发现很多同学在循环的时候直接在循环元素上绑定事件。那么vue 循环中绑定事件是否需要事件委托?。通过打印出下面简单实例编译出来的render函数<div id="demo"> <a v-for="item in [1,2]" @click="clickFn">1</a></div>我们得到下面的结果:ƒanonymous() {...原创 2020-06-24 16:54:48 · 2192 阅读 · 0 评论 -
vue3 尝鲜
vue3 已经是beta版本了,估计很快就会发正式版了,小伙伴们可能已经迫不及待的要进行尝鲜了。那么如何搭建vue3尝鲜环境,体验vue3的新特性呢。在官网找到了vue-cli-plugin-vue-next插件,可使vue-cli(要求4.2.3版本以上)支持创建vue3开发环境。具体步骤如下:1、用vue-cli创建项目,确保vue-cli 版本在4.2.3以上vue create vue3-test2、进入项目,安装vue-cli-plugin-vue-next插件cd vue3.原创 2020-05-26 00:12:18 · 250 阅读 · 0 评论 -
vue-upload-component ie9下变成下载文件问题
vue-upload-component 是相当不错的vue上传组件,开发中发现在ie9下,返回结果会变成下载文件。看到返回结果为带pre标签的文本,可以通过下面的代码将pre标签替换成空字符串,然后就可以解析成json了。const result = JSON.parse(newFile.response.replace(/<\/?pre>/gi, ''));...原创 2020-04-10 18:37:12 · 837 阅读 · 1 评论 -
vue 实现搜索标红功能
思路:将搜索出来的匹配文本包裹span标签,并附上标红相关样式,因为涉及到DOM操作,所以写成插件。代码实现如下import Vue from 'vue'function hightLight(el, binding) { const match = binding.value; const reg = new RegExp(match, 'g') const txt = b...原创 2019-09-07 12:43:42 · 3514 阅读 · 0 评论 -
vue 折叠效果动画
vue 中应用css动画,详见文档:https://cn.vuejs.org/v2/guide/transitions.html,此处只列出css设置,方便后来者使用。.collapse-leave, .collapse-enter-active { max-height: 100000rem; // 由于折叠面板内容一般不知道高度,所以用max-height, 而不是height...原创 2019-09-01 11:23:02 · 2650 阅读 · 0 评论 -
重置vue组件样式
重置vue组件样式:单文件组件stype 标签上一般会加上scoped,这时候,在组件外层定义样式类,只能对组件最外层标签起作用,想对组件内部样式进行修改,可以通过添加 /deep/ 起作用,如下:.组件最外层类名 /deep/ { .selected { // 组件内部需要重置样式 }}vue3采用如下形式<style scoped>.a :deep(.b) { /* ... */}</style>详情看这里,深度选择器部分...原创 2019-06-24 14:29:23 · 1335 阅读 · 0 评论 -
vue UI 框架使用总结
记录自己用过的一些Vue UI框架使用感受,供后来者选型时做参考(后续随自身实践会陆续补充,另外,随时间推移,下面总结对最新版本不一定正确)1、element ui 在后台管理系统中使用,适合做PC端,组件较为齐全。a、感觉loading组件可定制性较差b、table 初始化的时候估计有bug,遇到在本地开发ok,但部署到开发环境,初始化时高度不正常,后面用了v-if 判断是否有数据,...原创 2019-05-19 12:20:03 · 343 阅读 · 0 评论 -
vue state 采用函数形式,减少重复代码
1、state 不仅可以写对象和基本数据了类型,还可以是函数,这在一些如同tab的布局结构,需要保存显示的数据时,可以很好的避免代码重复function taskListFactory(aType) { let taskListState = {} aType.forEach(type => { taskListState[`taskList/${type}...原创 2019-01-29 14:09:46 · 864 阅读 · 0 评论