Vue - 随笔分类(第2页) - Mahmud*小麦*

摘要：

Vue项目项目中经常会遇到事件线的功能Timeline，比如说快递跟踪功能等。element.js 时间线的使用，先来看效果图是因为element2.6.0之前的版本不支持时间线组件了。所有下载安装比较麻烦。这里推荐使用本地组件：直接放在pluginis目录下，然后引入就可以 timeline文件阅读全文

posted @ 2022-11-29 11:38 Mahmud*小麦* 阅读(2564) 评论(0) 推荐(0)

项目使用lodash（深拷贝）的方法

摘要：

Vue项目使用lodash（深拷贝）的方法 Lodash使用了一个简单的 _ 符号，就像Jquery的 $ 一样，十分简洁。 https://www.lodashjs.com/ 1.安装 npm install lodash -S 2.导入 (1)方式一:在main.js中导入 //全部导入 imp 阅读全文

posted @ 2022-11-28 14:29 Mahmud*小麦* 阅读(1100) 评论(2) 推荐(0)

ElementUI实现图片上传的功能🌈~（已完成✔）

摘要：

Vue项目中经常会遇到使用ElementUI实现图片上传的需求~（已完成✔）（1）安装官网组件Upload 打开官网有个Upload 上传组件-通过点击或者拖拽上传文件：本次项目中用到了：图片列表缩略图结构  <!-- on-previ 阅读全文

posted @ 2022-11-27 23:17 Mahmud*小麦* 阅读(2996) 评论(1) 推荐(0)

Vue项目中使用ElementUI实现Steps步骤条和Tabs标签页的联动效果功能

摘要：

Vue项目中使用Elemen-tUI做一个steps步骤条：左边的内容和步骤条进度效果是同步的切换，顶部是（1）steps步骤条（2）Tabs标签页（3）steps步骤条和tabs标签页之间的联动效果思路：那么这里需要步骤条的属性名称和标签页的属性名称联动同步切换的功能：步骤条是属性 :a 阅读全文

posted @ 2022-11-27 14:30 Mahmud*小麦* 阅读(5155) 评论(0) 推荐(0)

Vue项目中使用树形控件 vue-table-width-tree-grid

摘要：

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

posted @ 2022-11-15 21:47 Mahmud*小麦* 阅读(2535) 评论(0) 推荐(0)

项目实现用户长时间不操作，自动退出登录⏳

摘要：

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

posted @ 2022-11-12 15:06 Mahmud*小麦* 阅读(1045) 评论(0) 推荐(0)

vue项目中手机号+邮箱验证正则~✔

摘要：

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

posted @ 2022-11-09 20:22 Mahmud*小麦* 阅读(862) 评论(0) 推荐(0)

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/ 阅读全文

posted @ 2022-11-08 21:15 Mahmud*小麦* 阅读(305) 评论(0) 推荐(0)

项目中使用ElementUI的Form 组件

摘要：

使用ElementUI的Form 组件（1）首先必须是项目中安装ElementUI库（2）引入Vue的项目中（3）引入对应的组件名称并且全局注册 ElementUI 安装 npm i element-ui -S 引入 Element main.js 内容添加 import ElementUI 阅读全文

posted @ 2022-11-08 20:24 Mahmud*小麦* 阅读(138) 评论(0) 推荐(0)

左侧菜单改造路由链接

摘要：使用ElementUI实现左侧菜单改造路由链接 Vue的项目中我们会经常用到Element，Iview..等轻量框架来实现页面布局。如果是不是彻底理解这些框架的各个功能和属性的话会带来很多麻烦的。项目中用到了elementUI的菜单组件，有个展开和折叠功能。这个时候需要实现路由地址的改造链接：就是阅读全文

posted @ 2022-11-08 09:19 Mahmud*小麦* 阅读(155) 评论(0) 推荐(0)

ElementUI侧边栏展开隐藏折叠功能

摘要：

一般后台管理项目中无论是ElementUI或Iview 轻量UI框架都有很多组件来实现功能我们需要实现的是这样子的：在源代码里左侧菜单之前添加一个div，类名为“toggle-button”，然后在div中添加“|||”三个竖杠，作为可以折叠的图例：然后为该div添加样式然后给按钮添加事件事阅读全文

posted @ 2022-11-08 00:28 Mahmud*小麦* 阅读(4868) 评论(1) 推荐(0)

项目上线-项目报告+创建web服务器

摘要：一般我们的项目开发完毕以后就需要考虑如何优化，如何将项目部署上线，提供给外界用户使用等的问题。所有必须要考虑的问题是：优化项目，部署上线项目项目优化方案：（1）生成打包报告：通过项目的Vue UI可视化工具生成一个打包的报告，根据报告发现和优化项目，进一步的区解决。（2）第三方库使用CDN：为阅读全文

posted @ 2022-11-07 13:46 Mahmud*小麦* 阅读(266) 评论(0) 推荐(0)

ElementUI的左侧菜单栏的小问题~~

摘要：

Vue后台管理的项目中使用了ElementUI的组件库。左侧菜单栏遇到了一些小问题，结果一步一步的解决了~~ 1，首先菜单栏的图标Icon不满足我们的需求，我们可以引入公司内部的样式icon图标文件，数组的方式动态渲染出来就可以。 2，左侧菜单栏的列表渲染完成后点击一个菜单发现全部菜单同时展开 3，阅读全文

posted @ 2022-11-07 09:13 Mahmud*小麦* 阅读(1018) 评论(0) 推荐(0)

项目报错类型：Invalid prop: type check failed for prop "index". Expected String with value "125", got Number with value 125.

摘要：vue项目中出现可一个小报错问题：Invalid prop: type check failed for prop "index". Expected String with value "125", got Number with value 125. 在elementUI导航组件中加入后台数据驱阅读全文

posted @ 2022-11-07 07:32 Mahmud*小麦* 阅读(393) 评论(0) 推荐(0)

axios请求拦在器添加token（请求头添加token）保证有权访问请求数据~~

摘要：

axios请求拦在器添加token 开发项目中有很多个请求接口，除了login以外其他的请求接口有了访问权限才能正常请求数据访问页面。需要授权的API必须每一次的请求携带token，就是请求头添加token，后端根据token来判断该请求有没有授权。那么必须在请求头中使用Authorizatio 阅读全文

posted @ 2022-11-06 15:20 Mahmud*小麦* 阅读(5166) 评论(2) 推荐(0)

登录/退出—token验证（路由导航守卫控制访问权）

摘要：

登录/退出—token验证（路由导航守卫控制访问权）如果不是要访问登录页先判断登录状态，不在登录状态的强制跳转到login登录页面登录功能登录login页面点击按钮绑定点击事件@click="login" 1，login事件里先判断表单预验证：用户名和密码是否为合法。如果是合法内容直接走下一步发阅读全文

posted @ 2022-11-05 12:48 Mahmud*小麦* 阅读(527) 评论(0) 推荐(0)

Vue项目中定时器的问题...

摘要：

Vue项目中定时器的问题... 比如说我们现在在a页面写一个定时，让他每秒钟处理操作，比如：每秒钟打印一个1，然后跳转到b页面，此时可以看到，定时器依然在执行。这样是非常消耗性能的。如下图所示：解决方法1：首先我在data函数里面进行定义定时器名称： data() { return { tim 阅读全文

posted @ 2022-11-03 00:38 Mahmud*小麦* 阅读(119) 评论(0) 推荐(0)

Vue2项目ant-design-vue引入报错问题（已解决✔）

摘要：Vue2项目ant-design-vue引入报错问题安装，引入ant-design npm install ant-design-vue --save 一直报错：依赖包：解决方法：一直在报错： error in ./node_modules/ant-design-vue/dist/antd. 阅读全文

posted @ 2022-11-01 10:06 Mahmud*小麦* 阅读(1780) 评论(3) 推荐(0)

vue动态绑定class的几种方式

摘要：

开发项目中：vue动态绑定class的几种方式~ 第一种：（最简单的绑定） 1.绑定单个class html部分： <div :class="{'active':isActive}"></div> js部分：判断是否绑定一个active data() { return { isActive: tru 阅读全文

posted @ 2022-11-01 10:04 Mahmud*小麦* 阅读(303) 评论(0) 推荐(0)

Vue项目小功能：过度~transition

摘要：Vue 提供了 transition 的封装组件，来处理过渡以及动画使用过渡或动画的场景在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染(使用v-if) 条件展示(使用v-show) 动态组件组件的根节点 div: <div id="app"> <button @click="i 阅读全文

posted @ 2022-11-01 01:50 Mahmud*小麦* 阅读(57) 评论(0) 推荐(0)

Mahmud

随笔分类 - Vue

公告