前端开发之路
前端三驾马车,“HTML、CSS、JavaScript”,一样不能少,页面美观,还原度高,功能流程流畅。
桃子陶子
我想要有对生命的觉悟,有一颗自由喜悦充满爱的心,能够走遍天下的气魄,回归自然与自然相链接,安稳平和的睡眠,享受真正属于自己的空间和时间,任何时候都有懂自己的人,身体健康且内心富有,能够感染他人并点燃他人希望,当然我也希望能有一个能真正陪伴的灵魂伴侣。相信未来的我可能独自一人,但我并不孤独。健身,学习,做饭,旅游。
展开
-
vue-antdv一个场景
后台管理系统用户(给用户配置角色)角色(每个角色有不同的菜单和部门)问题 我在新增和修改功能已经写好的情况下,然后被告知接口需要将上级菜单一起传入,在新增角色配置菜单和部门的时候(tree组件),只能拿到勾选的部分,但是实际上我需要的是勾选的以及和他有关联的父级。以及如何选中之后,将我显示的和我传给接口的分开(问题1)。在修改角色配置菜单和部门的时候如何回显(问题2)。2个小问题,只是总结一下使用antd过程中的一些思路获取父级(新增功能)在tree组件中有个方法check定义了两个原创 2021-11-16 16:52:45 · 816 阅读 · 0 评论 -
vue动态路由中路由信息存入缓存中的问题
动态存储路由信息当我们将动态路由信息存入缓存中(或者vuex实现持久化数据存储)时,在退出登录或token失效时需要将缓存清除(包括vuex存储的信息)。当拿到动态路由信息时,我们不要将处理成routes格式的信息存储到缓存,因为你再次拿到信息的时候,你会发现,路由可能还存在,但是对应的页面地址(component)已经没有了。解决方法:切换页面的时候重新请求将拿到的路由信息直接存储,在处理成routes格式之前,在需要的使用的时候,然后拿出来处理使用用。注意点,在一个对象中存在方法时,原创 2021-11-16 16:11:19 · 1501 阅读 · 0 评论 -
vue中的动态路由
请求接口 function myRoutes(){ let token = localStorage.getItem("token"); let result = []; console.log(token); let data = { url: "sys/menu/nav", method: "get", headers:{"token": token}, params:{} }; return req.原创 2021-10-21 13:58:34 · 312 阅读 · 0 评论 -
由于一行文本溢出隐藏,导致的后面元素对齐的问题
文本溢出隐藏一行文本溢出隐藏1.html <div class="username">一行文本溢出隐藏了</div>2.css .username{ width: 62px; word-break:keep-all;/* 不换行 */ white-space:nowrap;/* 不换行 */ overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis; }解决一行原创 2021-08-26 14:22:21 · 283 阅读 · 0 评论 -
JavaScript this的指向问题
1.this总结普通函数调用时,this指向的是window作为事件调用的时候,this指向的是调用他的那个对象作为构造函数调用时,this指向的是构造函数实例化的那个对象2. this在实际开发中可能遇到的问题在实际开发中(vue项目中),在我们如果在函数中调用函数时,这个函数如果是普通函数,里面使用了this的时候,那么要看这个this是否是全局的this,如果不是,那么需要定义一个参数,将全局的赋值给他,然后在内部使用。在实际开发中,最容易忽略的往往是请求中如果有this,那么也可以原创 2021-08-26 12:01:50 · 74 阅读 · 0 评论 -
在vscode中tes命令报错的解决办法-typescript命令运行报错
用管理员身份启动vscode打开终端输入命令 get-ExecutionPolicy 如下再输入命令 set-ExecutionPolicy RemoteSigned 如果正常,就没问题,如果报错如下再输入命令 set-ExecutionPolicy -Scope CurrentUser在如图位置输入 RemoteSigned就可以了...原创 2021-08-24 18:11:09 · 254 阅读 · 0 评论 -
华为手机自带浏览器的显示问题
使用way-item这种css类名命名方式,在华为自带浏览器中会有时会导致页面完全没有显示的问题(空白),其它手机浏览器是正常显示的。但是只要将way-item这种命名方式成驼峰命名wayItem这样,页面就能正常显示。为什么有时会出现这种问题?我也不太清楚...原创 2021-08-23 12:02:50 · 903 阅读 · 0 评论 -
vue中显示隐藏的两种指令以及数据页面加载时报错解决
显示隐藏v-ifv-if是通过控制dom节点的存在与否来控制元素的显隐,不需要高频切换的时候更多的使用。v-showv-show是通过设置DOM元素的display样式,block为显示,none为隐藏;v-show只是简单的基于css切换;需要高频切换的时候更多的使用。总结:综上所述,当我们在页面中,如果需要非常频繁地切换某个节点,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。v-if有更高的切换消耗;v-show有更高的初始渲染消耗。v-if能够解决在页面上原创 2021-08-23 11:56:23 · 1624 阅读 · 1 评论 -
vue插槽Slot
插槽默认插槽父组件<children-1>我是默认插槽1-这是父组件传入的值 </children-1>子组件<slot></slot> <h1> <slot>默认值1</slot> </h1>具名插槽父组件<children-2> <template v-slot:h_1> <p&原创 2021-08-17 16:54:19 · 83 阅读 · 0 评论 -
console.log()、console.log(this)报错-总结
console.log()和console.log(this)跳转到的页面中有console.log(this)(16个)或者console.log()(10个),那么页面就会报错;但是这个console.log(this)如果不在生命周期函数中,当前页面本身是不报错的,但是跳转到的这个页面如果有会报错(10个)。单独的console.log()不管在哪里,都会报错(10个)但是如果这个console.log(this)存在生命周期函数中,那么当前页面也会报错(10个)。注意:当我们在页面中打原创 2021-07-21 12:01:13 · 2098 阅读 · 0 评论 -
rem实现页面布局
rem来自适应屏幕创建html文件给根元素html设置font-size:xxxpx媒体查询(媒体查询间隔越小效果越好)给不同尺寸下的根元素html设置按照比例缩小(放大)的font-size:xxxpx;原创 2021-07-07 10:36:56 · 117 阅读 · 0 评论 -
pc端兼容移动端-最基础
pc端适应移动端-基础布局<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --> <title原创 2021-07-07 09:48:58 · 102 阅读 · 0 评论 -
vue组件-局部注册使用
vue局部组件创建组件<template> <div class="adrouplist-head"> <a-icon type="menu" /><span class="paddingLR5">查询</span> </div></template><script>export default { name:'v-head', data(){ ret原创 2021-07-06 13:38:49 · 94 阅读 · 0 评论 -
vue组件-全局注册使用
vue全局组件创建vue子组件 head.vue<template> <div class="adrouplist-head"> <a-icon type="menu" /><span class="paddingLR5">查询</span> </div></template><script>export default { name:'v-head', data()原创 2021-07-06 12:02:00 · 92 阅读 · 0 评论 -
pc端兼容移动端
pc端兼容移动端1.网页头部写viewpoint2.两种布局去兼容移动端上中下排布上中(放一个空盒子)下外面的盒子display:flex;布局空盒子给flex:1;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <原创 2021-07-05 15:44:14 · 638 阅读 · 0 评论 -
解决pc端网页在手机上的一些兼容问题
解决pc端网页在手机端的一些兼容问题1.viewPoint解决屏幕适应问题1. 如果想在手机端适应的更好,添加下面一段2. 如果想在ios端也适应,删除下面一段2.es6->es5低版本的安卓手机可能会白屏,是由新特性不支持引起的解决代码es6新特性兼容问题npm 安装npm install babel-polyfillnpm install es6-promisemain.js 引入import ‘babel-polyfill’import Es6Promi原创 2021-07-05 10:13:54 · 1991 阅读 · 0 评论