- 博客(9)
- 收藏
- 关注
原创 路由传参后,刷新会失去参数的问题
在路由传参时,刷新会失去参数,最后使用query传参的方式使参数不丢失,也可以通过储存在sessionStorage中解决。1.例如我想查看文章,在点击文章后,我们就需要将文章相关的内容通过路由传入具体文章的模板中,这时候我们要使用query传参才能让文章在刷新后不会消失。2.文章点击后触发函数跳转路由//item就是要传入的参数<div @click="toArticel(item)"></div>3.通过push方法跳转到articleDetail,并传入三个参数t
2020-06-09 15:28:02
1619
1
原创 父传子,在父组件将图片路径传入子组件,子组件接收不到。
父传子要想传递路径必须要使用require函数,比如我在写淘宝放大镜组件时,需要传入大小两张图片1.在模板中将数据和要传入的数据绑定<my-magnify :data="data.i"></my-magnify>data() { return { data: { i: { min: require("../assets/MySmall.png"), max: require("../assets/My
2020-06-09 15:14:04
1243
1
原创 element-ui中级联标签过大问题
在使用级联标签时,发现点开选项后会过大,只要在全局样式,或者当前样式中规定死它的宽高即可。.el-cascader__dropdown { height: 200px; } .el-cascader-panel { height: 200px; }
2020-06-09 14:57:19
654
原创 通过sessionStorage保存element-ui菜单栏的激活状态,在刷新后依旧高亮显示。
1.在el-menu中关联高亮的链接地址<el-menu :default-active="activePath"></el-menu>2.在data中保存被激活的链接地址export default { data() { return { // 被激活的链接地址 activePath: "" }; }}3.在具体的el-menu-item添加点击事件//添加saveNavState事件,并传入路由地址el-menu-
2020-06-09 14:52:13
1019
3
原创 vue移动端适配的两种方法
vue移动端适配的两种方法一.使用element-ui中的layout布局1.引入element-ui,具体可看其他教程。2.先添加el-row标签,再在其中填加el-col标签,一般整个页面从左到右想分成几块就定义几个el-col,然后通过span来具体划分大小,总共栅格数为24,具体可以看element文档。3.通过xs、sm、md、lg、xl等属性来规定在不同分辨率的具体显示情况,例如我定义了两个col,各占12想在移动端只显示其中一个,另一个隐藏。<el-row>
2020-06-09 14:38:07
2916
原创 简单自定义element-ui的方法
可以通过在样式前加/deep/来改变element-ui的默认样式,即改变一些带下划线的属性值。.el-tabs { height: 1000px; width: 450px; img { width: 100%; } //通过/deep/改变__item和__content的值 /deep/.el-tabs__item { font-size: 20px; } /deep/.el-tabs__content { height: 920px; }
2020-06-09 14:12:38
517
原创 Vue-Cli3实现rem适配,2020有效
Vue-Cli3实现rem适配1.在Vue可视化面板的依赖中下载lib-flexible和pxtorem2.在入口文件main.js中:import ‘lib-flexible/flexible.js’3.在package.json内,在postcss内添加:"postcss": { "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue": 75 // 设计稿宽度的1/10,
2020-06-09 14:03:40
671
原创 使用JavaScript实现placeholder效果,不使用placeholder。
使用JavaScript实现placeholder效果主要使用“focus”和“blur”的监听方法,实现了文本框未聚焦时,文本框内为灰色的提示文本,聚焦之后提示文本消失,输入的文字为黑色,若没有输入文字,失焦时文本框内重新显示灰色提示文本。下面先放代码<!DOCTYPE html><html lang="en"><head> <meta...
2020-04-14 11:53:49
401
原创 scrollHeight和scrollWidth的一些问题
scrollHeight和scrollWidth在添加overflow后的区别scrollHeight和scrollWidth添加overflow样式scrollHeight和scrollWidth两者分别是用来获取元素里面内容的最大高和宽+padding。<!DOCTYPE html><html lang="en"><head> <me...
2020-04-10 16:39:28
669
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人