火灬户-优快云博客

原创路由传参后，刷新会失去参数的问题

在路由传参时，刷新会失去参数，最后使用query传参的方式使参数不丢失，也可以通过储存在sessionStorage中解决。1.例如我想查看文章，在点击文章后，我们就需要将文章相关的内容通过路由传入具体文章的模板中，这时候我们要使用query传参才能让文章在刷新后不会消失。2.文章点击后触发函数跳转路由//item就是要传入的参数<div @click="toArticel(item)"></div>3.通过push方法跳转到articleDetail，并传入三个参数t

2020-06-09 15:28:02 1674 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 1298 1

原创 element-ui中级联标签过大问题

在使用级联标签时，发现点开选项后会过大，只要在全局样式，或者当前样式中规定死它的宽高即可。.el-cascader__dropdown { height: 200px; } .el-cascader-panel { height: 200px; }

2020-06-09 14:57:19 691

原创通过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 1089 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 3030

原创简单自定义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 554

原创 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 708

原创使用JavaScript实现placeholder效果，不使用placeholder。

使用JavaScript实现placeholder效果主要使用“focus”和“blur”的监听方法，实现了文本框未聚焦时，文本框内为灰色的提示文本，聚焦之后提示文本消失，输入的文字为黑色，若没有输入文字，失焦时文本框内重新显示灰色提示文本。下面先放代码<!DOCTYPE html><html lang="en"><head> <meta...

2020-04-14 11:53:49 436

原创 scrollHeight和scrollWidth的一些问题

scrollHeight和scrollWidth在添加overflow后的区别scrollHeight和scrollWidth添加overflow样式scrollHeight和scrollWidth两者分别是用来获取元素里面内容的最大高和宽+padding。<!DOCTYPE html><html lang="en"><head> <me...

2020-04-10 16:39:28 723

qq_44722972的博客