随笔分类 - Vue~UI框架功能
项目使用lodash(深拷贝)的方法
摘要:
Vue项目使用lodash(深拷贝)的方法 Lodash使用了一个简单的 _ 符号,就像Jquery的 $ 一样,十分简洁。 https://www.lodashjs.com/ 1.安装 npm install lodash -S 2.导入 (1)方式一:在main.js中导入 //全部导入 imp

Vue富文本编辑器(vue-quill-editor)使用✔✔
摘要:
最近工作中需求使用一款富文本编辑器,最终选择了vue-quill-editor,之所以选择vue-quill-editor,是看上了它的轻量以及外观简洁的优势。打开官方文档,直接上手配置,各种报错,踩了很多坑,遇到的主要问题有以下几个 字体大小无法设置 工具栏样式错位 图片上传报错 编辑器高度无法设

ElementUI实现图片上传的功能🌈~(已完成✔)
摘要:
Vue项目中经常会遇到使用ElementUI实现图片上传的需求~(已完成✔) (1)安装官网组件Upload 打开官网有个Upload 上传组件-通过点击或者拖拽上传文件:本次项目中用到了:图片列表缩略图结构 <!-- action-表示图片要上传到的后台api地址--> <!-- on-previ

Vue项目中使用ElementUI实现Steps步骤条和Tabs标签页的联动效果功能
摘要:
Vue项目中使用Elemen-tUI做一个steps步骤条:左边的内容和步骤条进度效果是同步的切换,顶部是 (1)steps步骤条 (2)Tabs标签页 (3)steps步骤条和tabs标签页之间的联动效果 思路: 那么这里需要步骤条的属性名称和标签页的属性名称联动同步切换的功能:步骤条是属性 :a

Vue项目中使用树形控件 vue-table-width-tree-grid
摘要:
Vue项目中使用树形控件 vue-table-width-tree-grid 需要实现的整体效果如下: 这个树形结构组件ElementUI是没有提供的,我们需要依赖第三方插件来完成。 一、安装tree-table组件 (1)Vue 可视化工程vue UI来安装: 我们打开VUE的可视化面板(在cmd

项目实现用户长时间不操作,自动退出登录⏳
摘要:
Vue项目实现用户长时间不操作,自动退出登录 1.实现思路 使用 mouseover事件来监测是否有用户操作页面,然后写一个定时器间隔特定时间检测是否长时间未操作页面,如果是清除token,提示登录已过期请重新登录 每隔10s去检查一下用户是否过了10秒 未操作页面因为我这边是单点登录所以用户10秒

vue项目中手机号+邮箱验证正则~✔
摘要:
vue项目中手机号+邮箱验证正则~✔ vue项目中经常会遇到各种验证规则的需求。这里我把布局用ElementUI来写出来了。接下来需要添加用户,密码,手机号,邮箱的验证规则。 里面用户名,密码是比较简单的,直接用element提供的组件验证规则。手机号和邮箱是自定义规则,需要严格验证是否合法 1,首

ElementUI中Table和Switch组件中插槽scope应用使用场景
摘要:
ElementUI中Table和Switch组件中插槽scope应用使用场景 ElementUI 安装 npm i element-ui -S 引入 Element main.js 内容添加 import ElementUI from 'element-ui';import 'element-ui/

项目中使用ElementUI的Form 组件
摘要:使用ElementUI的Form 组件 (1)首先必须是项目中安装ElementUI库 (2)引入Vue的项目中 (3)引入对应的组件名称并且全局注册 ElementUI 安装 npm i element-ui -S 引入 Element main.js 内容添加 import ElementUI
左侧菜单改造路由链接
摘要:使用ElementUI实现左侧菜单改造路由链接 Vue的项目中我们会经常用到Element,Iview..等轻量框架来实现页面布局。如果是不是彻底理解这些框架的各个功能和属性的话会带来很多麻烦的。 项目中用到了elementUI的菜单组件,有个展开和折叠功能。这个时候需要实现路由地址的改造链接:就是
ElementUI侧边栏展开隐藏折叠功能
摘要:
一般后台管理项目中无论是ElementUI或Iview 轻量UI框架都有很多组件来实现功能 我们需要实现的是这样子的: 在源代码里左侧菜单之前添加一个div,类名为“toggle-button”,然后在div中添加“|||”三个竖杠,作为可以折叠的图例: 然后为该div添加样式 然后给按钮添加事件事

解决vue项目$router.go(-1)返回刷新问题(keep-alive)
摘要:
相信每个人在项目中都会遇到这样的需求,就是跳到详情在返回来还希望保持原来的搜索结果,就是不希望刷新,这个时候呢keep-alive就起到了很大的作用 ***接下来就说说如何使用keep-alive来动态缓存页面的。 一: 直接在<router-view></router-view>外边加一层keep

百度分享插件
摘要:window._bd_share_config = { common : { bdText : '分享标题', bdDesc : '分享描述', bdUrl : '分享链接', bdPic : '分享图片' }, share : [{ "bdSize" : 22 }], image : [{ vie
关于iview ui的"Page分页"组件的使用
摘要:iView是一个很好的vue框架,但是因框架比较新,使用的案例比价少,官网上虽有api,但是api应用案例也比较少,下面来说下“Page分页”组件的使用,但我们属性了这个组件,会感觉到其实框架的套路也就这样,用法差不多的。 这里给出Page分页网址:https://www.iviewui.com/c