- 博客(43)
- 收藏
- 关注
RSS订阅原创 Vue3:动态路由+子页面(新增、详情页)动态路由配置(代码全注释)
emm，项目中使用动态路由实现根据后端返回的用户详情信息，动态将该用户能够访问的页面信息，动态生成并且绑定到路由对象中。但是后端返回的不包含像是页面详情页，新增页的权限路由，如果前端在路由对象中写死的话，那每次进入页面都得判断是否将进入一个用户没有权限的页面，但是路由中有存在的。3.GetPossibleDetails 根据传递过来的信息，筛选出存在权限的数据， 转换成路由信息,因为如果在本地中已经定义了全部的页面新增，详情，编辑等页面，但是咱们还是需要根据后端返回的权限中，判断咱们是否注册该页面的路由。
2024-05-23 17:34:08
1550
原创 Vue3:封装Table 表格组件问题修改
问题修正：上一次封装了组件，刚开始想的是接口请求完成后，返回了数据在把组件显示出来，但是如果接口请求错误，或者某些原因导致了接口无法正常返回数据，就会导致页面报错白屏。
2024-05-22 10:16:08
221
原创 Vue3:封装Table 表格组件
组件官网 elementPlus : 点击跳转创建新的组件文件: Table.vue2.接收父组件传递过来的数据3.父组件代码效果：
2024-05-20 15:26:42
827
1
原创 Vue3:menu导航栏出现多个同一跳转路径的菜单处理
最近公司想将之前老的项目整理出来，因为这个老项目内容太杂什么页面都往里面塞，导致菜单特别多，公司就像将这个老的项目迁出来，这个旧的项目本来是后端PHP写的。我们想的是新需求页面做在新项目然后再新的项目中显示旧项目页面。现在我就想的是如果在新项目中显示旧的项目页面，但是在vue中路由跳转一般都是一个页面对应一个路由，旧项目页面太多上百个，如果旧页面还没迁离出来，新的项目已经有上百个文件来显示页面，太冗余了，就想着用一个页面现在没有迁离出来的就页面。1.新项目中获取后端返回的页面权限以及页面的路由等信息。
2024-05-07 14:20:36
671
1
原创 Vue2:标签页一个页面拆分成俩个选项卡
el-tabs 中的v-model 的值，对应着 el-tab-pane中的:name属性 就会选中该标签高亮提示。1.路由配置文件 router.js 配置路由信息。2.配置路由前置守卫(获取页面的路由信息)4.Tabs标签页组件。
2024-04-17 17:23:21
373
原创 vue3:菜单、标签页和面包屑联动效果
2.创建store文件: index.ts 、user.ts 文件名字自己随便取,后面需要引入的时候不要把名称写错了。1.创建你的组件文件，nav:菜单 、header:面包屑 、tabs：标签页,然后先把自己的基础页面信息。store //我习惯了命名 store ，实际可以取名 pinia 因为用到的组件库就是这个。3.创建router.ts文件,在src目录下新建router文件夹 - > 新建index.ts文件。如有写的不明确的地方可以提出来，或者大佬们有更好的方法。
2024-04-11 18:14:45
917
原创 Vue3:mock模拟数据
2.创建user.ts，编写请求请求接口参数 以及 返回值。4.创建mock-vue.d.ts。3.创建typing.ts。1.创建index.ts。
2024-02-20 15:51:37
754
1
原创 PNPM搭建vue3+TypeScript项目
(1):以管理员身份运行 window powershell。preact // 轻量化react框架。svelte // svelte框架。lit // 轻量级web组件。> vue // 默认 vue3。(安装项目依赖) pnpm install。(运行本地项目) pnpm run dev。vanilla // 原生js。(2) 选择TypeScript。(2)：查看是否安装成功。（1）选择自己创建的项目框架。(进入项目)cd 项目名称。
2024-01-09 17:56:00
666
原创 NVM：node.js版本管理
nvm可以实现电脑安装和管理多个版本的node.js，一般情况下公司的新项目会采用较新的nodejs版本，一些老项目可能会使用老版本的nodejs,如果反复删除安装nodejs就很不方便，通过nvm可以实现直接下载nodejs、随时切换nodejs版本，大大减轻了前端程序员切换nodejs版本的时间成本。nvm uninstall // 卸载node.js是的命令，卸载指定版本的nodejs，当安装失败时卸载使用。6.安装自己想要的node版本。7.查看已安装的node版本。
2024-01-09 17:55:47
476
原创 npm创建小程序项目
使用alpha版（对应HBuilderX最新alpha版）将uview-ui挂载到Vue （mian.js）在App.vue文件中引入uview-ui css。使用正式版（对应HBuilderX最新正式版）1.全局安装Vue-cli。在src目录下找到uni.scss文件。在pages.json文件中。使用Vue3/Vite版。
2023-11-17 10:37:18
204
原创 Vue:关于element中Select组件点击选中数据没有显示选择的数据问题
这是修改窗口，点击编辑的时候将用户之前选中的数据直接赋值给select的数组中，但是将再次点击选择内容的时候，点击选中的数据没有勾选状态并且，对应的输入框中没有添加，如果添加@change时间，获取到选择框接收的数组又新增了数据。此时只要在@change绑定的方法中添加 this.$forceUpdate() 强制刷新数据就出现了。1代表的是1部，2代表的2部。
2023-11-06 16:08:47
1322
原创 Vue2:切换主题功能
2.配置解析less变量设置:在vue.config.json文件中找到 mudule.exprots。调用方法更改less变量的值,然后把less变量给对应需要改变颜色的css中就行啦。3.点击不同的主题颜色,调用方法改变原来的less变量值,直接吧主题模块代码。1.创建全局的 less 变量文件:variables.less。2.定义主题默认对应的颜色 :model.js。4.主题组件调用的方法。
2023-10-06 15:34:35
815
原创 Vue2: 在vue项目中使用less全局变量,事件修改less变量
1.创建一个less文件 : 比如:variables.less//主题背景-查询按钮-分页的背景-滑块的背景-单选框的颜色 #1890ff//主题字体 #faad14 #1890ff//抛出自己定义的变量:export{
2023-09-21 17:50:25
4919
2
原创 Vue:实现JSSDK调取微信扫一扫功能
2.后端拿到数据,回调到我们页面(需要跟后端确定,授权完成之后跳转的路径 比如 : ''#/index'')(1):项目安装JSSDK : 安装完成查看根目录 package.json文件,查看是否引入成功。1.请求签名的url 和 前端请求wx.config中的url不一致 就会提示这个错误。功能需求:项目需求VueH5项目调取微信的扫一扫功能,实现扫码获取二维码返回信息。1.在需要用到扫一扫的页面中通过config接口注入权限验证配置。1.在用户登录项目的时候需要跳转微信的授权地址:微信教程地址。
2023-09-01 17:30:13
1548
原创 Vue2:按下回车键,调用页面查询
1.代码思路:监听用户在页面中按下回车键:然后根据window.loction.hash获取到当前的路由信息.根据访问的路由地址,找到对应页面中的方法.通过bus使两个页面之间调用方法.实现刷新功能。近期产品提出一个需求,用户页面中输入查询参数后,点击回车就能够调用查询功能,自己在网上搜了下实现代码,然后结合自己的想法封装了一个方法,提供大家参考,有更好的提议,可以留言.2.在需要用到按下调用刷新的页面中 接收index.vue传递的信息。
2023-09-01 10:18:14
649
原创 Vue2:智能地址识别
在项目中,可能会有用户填写地址,需要做成一个类似购物复制用户地址提交货,拿取到用户的名称,电话,收货地址信息.使用: this.$refs.自己定义组件中的ref名称.(组件的变量 || 组件的方法名() )ref: 可以拿取到 更改 或者调用组件的 变量 , 方法。二. 在需要获取地址的组件中引入插件。四: 页面中拿取到组件传递过来的数据。提示:需要引用组件地址和注册组件。
2023-08-07 11:22:19
1057
5
原创 Vue:定义全局css样式
在项目中,会存在很多的相同css样式,如果在每一个存在的vue文件中都加上这个样式的话,到时候需要更改的时候就会很麻烦,所以就需要把这些相同的css样式写入一个css文件中,然后在全局引入这个css文件.解决重复定义,修改起来麻烦的问题。1.在src -> common -> css ->base.less。2.main.js中引入 全局的样式。这些都是一些组件的css样式。
2023-07-25 15:40:01
1390
原创 git :回滚分支
在我们项目中,难免会碰到提交错分支,或者其他原因导致需要回滚分支.重新打开git 输入 :git rest --hard 版本号。git push -f 强制提交 就ok了。打开git : 输入 git log。获取想回滚到的 版本号。
2023-07-13 15:00:25
754
1
原创 vue:退回,标签页和显示位置默认选中之前
1.项目bug,由于之前nav导航栏,tab标签页 和 其他组件 都有关联,点击菜单栏,其他组件要更改或者添加对应的数据。图中,点击 标签页要添加一个,并且选中跳转页面,还有顶上显示的模块位置也要改变.breadcrumb组件 更改上面显示的 模块菜单信息和点击的菜单信息。tab:标签页显示的点击菜单信息 ->防止刷新数据丢失所以就存起来了。由于是需要在回退的时候更改以上几个组件的数据默认选择或者修改数据,这个我本地数据的结构,保存有整个后端返回的菜单数据信息。还有选中的点击菜单数据信息,
2023-07-11 14:35:45
445
原创 vue:关于权限没有加载完成进入页面导致的问题
1.这是我页面中拿取权限 我的权限按钮是存放在 vuex中.但是在进入页面的时候我需要请求权限接口,然后再把数据交给我vux中处理,导致页面加载完成,权限还没拿取到。baseURL 是获取到当前的请求地址(上面图片 ) 直接在router.js中 impro引入就行。to.name就是路由将要去的页面name : 在路由中自己配置的。解决: 我这接口需要截取到用户的id ,然后通过id去请求权限。
2023-07-06 17:53:58
163
1
原创 Vue:请求401 没有权限 退出登录
在项目中,每个用户登录之后都会有一个token,一般token都会设置过期时间,如果在规定的时间内用户没有任何操作请求后端接口,就会导致用户的token过期,在过期后再次请求后端数据的话,一般接口就会返回状态码:401 标识没有权限.正常情况下接口请求后端数据,请求头携带用户token,接口返回状态: 200 表示请求成功,但是如果用户的token过期,用户就没有权限在去访问后端的数据,此时后端就会在接口的状态中返回:401。那么在这种情况下,用户状态过期,就需要咱们用户重新登录,拿到最新的token.
2023-07-06 09:41:32
3517
3
原创 vue:定义公共方法
由于在项目中可能会出现需要调用同一个接口,那么如果每个需要调用这个方法的地方都重新写一个接口请求,显然这是一个不容易维护的行为,那么这个时候我们可以把频繁重复调用的方法提取出来,以后需要调用这个接口的时候直接引入这个接口就行了.1.创建公共方法文件 :common -> index.js文件就是我的公共方法了。有两种方法 第一种就是在需要这个方法的文件中,引入这个公共文件的idenx文件.3.已经把公共的方法挂载到Vue原型上了,接下来该怎么调用定义的公共方法了?
2023-07-05 14:59:40
639
1
原创 VueCLI中环境变量和模式
1.依靠环境变量,这样就可以根据不同的环境,配置不同环境下可以请求相对应的接口地址。1.在项目跟目录文件中 创建 注意 ( .env env前面有小数点)(3): .env.production : 正式环境配置。(2): .env.development :测试环境配置。(1): .env.test : 本地环境配置。
2023-07-05 13:07:46
250
1
原创 el-tablecolumn : v-if列表顺序被打乱解决
在table中难免需要控制显示的列,这就得用到v-if 了.但是添加了v-if 导致了列表中的列顺序被打乱掉,原本是需要操作在最后一列的,但是加了v-if 操作列就跑到前面去了.向需要往前排的列中绑定key ,key值是一个随机数.这样检测到不同的key值就会重新去加载排序。
2023-07-04 14:41:14
1194
3
原创 vue:手机访问本地项目
3.手机浏览器输入地址 : 电脑ip + 项目端口号(比如:8080)1.需要在项目根目录config文件夹中的index.js中配置。2.需要电脑的ip地址 需要在同一个局域网环境中。查看电脑 :IPv4 就是ip。
2023-06-28 11:22:24
896
1
原创 vue2:页面按钮权限
然后就是vuex中的方法,原谅自己太菜了,套了无数个 for if ,只就是处理跳转页面的时候,获取到对应的 下拉菜单 -> 菜单 -> 按钮 ->按钮下的按钮 (比如一些更多操作按钮下的按钮) 还有详情页的按钮也在 一级按钮的children中,我的想法就是,在跳转前,获取到这个页面的全部按钮。按钮->children :按钮下的按钮 和 详情页面的按钮 都是在 按钮中的children中。然后就是配置前置路由守卫,用户获取页面按钮权限 调用 vuex的方法,1.用户登录获取到该用户的权限。
2023-06-26 17:14:29
750
1
原创 element Tree 树形控件 父节点默认勾选,子节点的数据全部选中
需求,后台权限控制 , 前端传递给后端勾选中的 节点id , 后端返回树状结构数据.每个对象中有一个字段来标识是否勾选,由于传给后端的时候也需要把父节点的id传递过去.等到下次弹窗打开需要默认勾选中已经绑定过得权限节点,但是遍历后端数据,我把父节点的id 和 按钮权限的 id 都存入到一个数组中,导致组件接收到父级节点的id时,下面的子节点全部勾选.。比如就单勾选了 二级 2-1 但是默认显示的时候,存在父节点id ,就会导致父节点下面的元素全部选中.附上点击勾选触发的方法。
2023-06-26 16:44:54
3081
2
原创 Vue2.引入sass
base.conf.js文件，在该文件module.export中的module.rules加入解释scss文件的loade。在项目中的build目录找到。如果报错提示，就是版本过高。3.配置loader。
2023-06-18 02:18:49
2377
1
原创 Element - UI : el - table 多选框禁用
点击确定,提交数据到父页面,然后保留此页面的勾选数据,下次进入的时候上次已经选中过的数据变成禁用状态,外边删除的时候,在此进入已经被删除的数据,在弹窗中变成可选取状态.2.:selectable="checkSelectSet" //selectable属性:是否不禁用状态 --- checkSelectSet自定义的方法名。开发表单弹窗的时候 需要在父组件中显示 弹窗选中的数据,然后第二次点击弹窗的时候需要禁用已经选中的数据。1.必须属性 type="selection" 这样才能变成多选。
2023-06-08 15:48:23
4865
1
原创 Element - ui :el-input 输入只能是数字并且小数点后只能是1-2位
给输入框定义 input事件,标识只要输入框内容改变的时候就会调用 numberFn()方法。numberFn('receipt_amount') :传入需要检验的参数。
2023-06-08 14:07:14
2789
原创 Element-ui :el-table 中表尾合计行
这种情况它会计算表格中的列数据,只要能够通过number进行转化为数值类型的,都会在该列的下面显示列数值加起来的总和.在这个代码块中,可以看到判断 "index" 是否等于 0 , 由此为坐标0的位置,添加 "总价"这个文字,那么咱们可以在 if{}后面添加 else if(index === 2 || index === 3) {index: 2 对应的列就是 数值一 , index: 3就是对应的数值二 这列。在官网中,为我们提供了方法,可以自定义修改,更改显示信息.
2023-06-08 13:40:14
1553
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人