目录
4、element-ui表格中使用fixed多出一条横线，在全局css中设置如下属性（在带有scoped的style中设置不起作用）
6、不使用element-ui的日期范围情况下设计时间范围：
9、做h5页面手机端适配，设计图为750px，转换：32px->1rem
前言
很多解决方案都是参考其他大佬的文章（感谢大佬们），在此只是做一个汇总方便以后遇到同样问题时能快速查看解决方案。
1、页面跳转路由传值问题
① 当使用query进行路由传值时，如果所传的是个对象，需要先将对象转化为json字符串，在接收页面再将字符串转化为对象，此方法可以防止在页面刷新时路由中的所传的值丢失。
A->B
A.vue
let item = JSON.stringify(_this.activityInfo);
this.$router.push({
path: "/activitySignSuccess",
query: {
activityInfo: item,
},
});B.vue
this.activityInfo = JSON.parse(this.$route.query.activityInfo); ② A页面中有其他页面的传来的query，本身在一定操作下跳转到B，B返回A时需要修改A页面query中某些值。方法如下：
beforeRouteLeave(to, from, next) {
to.query.activitySign = '1';
next();
}2、公众号顶部标题设置。
注：当路由中设置有组件的title时，在加载过程中会出现项目名，解决此问题的方法是添加入下图的代码：
// vue.config.js
module.exports = {
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title= '你想设置的title名字'
return args
})
}
}
在此项配置中对应的使用位置为：
3、对象数组的深拷贝
this.changeData = JSON.parse(JSON.stringify(data));4、element-ui表格中使用fixed多出一条横线，在全局css中设置如下属性（在带有scoped的style中设置不起作用）
.el-table__fixed {
height: 100% !important; //设置高优先，以覆盖内联样式
}
.el-table__fixed-right {
height: 100% !important; //设置高优先，以覆盖内联样式
}5、关闭当前页，调用vuex中actions的方法
this.$store.dispatch("tagsView/delView",this.$route)6、不使用element-ui的日期范围情况下设计时间范围：
<el-date-picker
:editable="false"
v-model="startTime"
:picker-options="pickerOptionsStart"
size="small"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择开始日期"
@change="changeEnd"
style="width: 160px"
/>
至
<el-date-picker
:editable="false"
v-model="endTime"
:picker-options="pickerOptionsEnd"
size="small"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择结束日期"
@change="changeStart"
style="width: 160px"
/> data() {
return {
//日期范围
startTime: "",
endTime: "",
pickerOptionsStart: {},
pickerOptionsEnd: {},
}
},
// 结束时间限制开始时间
changeStart() {
if (!this.endTime) {
this.pickerOptionsStart = {
disabledDate: {},
};
return;
}
//日期格式默认为标准时间，如果设置的时间格式为其他需要转换
let endTime = new Date(this.endTime+' 00:00:00')
let end = endTime.getTime()
this.pickerOptionsStart = Object.assign({}, this.pickerOptionsStart, {
// 可通过箭头函数的方式访问到this
disabledDate: (time) => {
var times = "";
times = time.getTime() > end;
return times;
},
});
},
// 开始时间 控制结束时间
changeEnd() {
if (!this.startTime) {
this.pickerOptionsEnd = {
disabledDate: {},
};
return;
}
//日期格式默认为标准时间，如果设置的时间格式为其他需要转换
let startTime = new Date(this.startTime+' 00:00:00')
let start = startTime.getTime()
this.pickerOptionsEnd = Object.assign({}, this.pickerOptionsEnd, {
disabledDate: (time) => {
return time.getTime() < start;
},
});
},7、element-ui输入提示二次简单封装：
<template>
<el-autocomplete
v-model="value"
suffix-icon="el-icon-search"
@input="arrChange"
:fetch-suggestions="querySearch"
:placeholder="queryPlaceholder"
size="small"
style="width: 160px"
@select="handleSelect"
>
<template slot-scope="{ item }">
{{item.label}}
</template>
</el-autocomplete>
</template>
<script>
export default {
name: "QuerySearch",
props: {
queryPlaceholder: {
type: String,
},
queryList: {
type: Array,
},
},
data() {
return {
value: "",
};
},
methods: {
arrChange() {
this.$emit("input", this.value);
},
querySearch(queryString, cb) {
var restaurants = this.queryList;
var results =
queryString
? restaurants.filter(this.createFilter(queryString))
: restaurants;
// 调用 callback 返回建议列表的数据
let arr = [];
for (let i = 0; i < results.length; i++) {
arr.push({value:results[i].dictValue,label:results[i].dictLabel});
}
cb(arr);
},
createFilter(queryString) {
return (restaurant) => {
return restaurant.dictLabel.indexOf(queryString) != -1;
};
},
handleSelect(item) {
// console.log(item);
},
},
};
</script>
<style>
</style>8、使用vant中的省市区选择。
①安装 npm i @vant/area-data -D 或 yarn add @vant/area-data --dev ②引用 import { areaList } from '@vant/area-data';
使用时结合输入框和弹出层（在data中引入areaList变量），确定按钮事件的回调函数的参数为对象数组，对象包含省市区编码和名称
<van-field
v-model="form.memberNativePlace"
label="籍贯"
name="籍贯"
placeholder="请选择籍贯"
required
:rules="[{ required: true,message: '请选择籍贯' }]"
@click="showPicker = true"
/>
<van-popup v-model="showPicker" position="bottom">
<van-area title="籍贯" :area-list="areaList" @confirm="onConfirm"
@cancel="showPicker = false"/>
</van-popup>9、做h5页面手机端适配，设计图为750px，转换：32px->1rem
'use strict';
(function(doc, win) {
var docEl = doc.documentElement, // 获取html对象
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', // 横屏是否支持，不支持则为浏览器大小改变
// 计算页面字体大小
recalc = function() {
// 获取页面宽度
var clientWidth = docEl.clientWidth;
// 获取不到页面宽度，直接返回
if (!clientWidth) return;
// 设置html字体大小(浏览器默认字体大小为16px)
docEl.style.fontSize = clientWidth / 375 * 16 + "px";
};
// 不支持addEventListener,返回
if (!doc.addEventListener) return;
// 监听事件，获取当前html标签的字体大小
win.addEventListener(resizeEvt, recalc, false);
// dom内容加在完成事件
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);10、使用css修改小图标的颜色，推荐第二种方式更简洁
/*第一种方式 */
.icon {
display: inline-block;
width: 30px;
height: 30px;
background: url(./img/zuowei.png);
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
}
.icon:after {
content: '';
display: block;
height: 100%;
transform: translateX(-100%);
background: inherit;
filter: drop-shadow(30px 0 0 #000); //需要修改的颜色值
}
/*第二种方式 */
.colorful {
display: inline-block;
width: 30px;
height: 30px;
background: #6d6d6d; //需要修改的颜色值
background-size: 80%;
-webkit-mask: url(./img/zuowei.png) no-repeat;
-webkit-mask-size: 100% 100%;
mask: url(./img/zuowei.png) no-repeat;
mask-size: 100% 100%;
}11、点扩散动画样式
.content div{
background:#ffffff;
width: 3px;
height: 3px;
border: 4px #009FD9 solid;
border-radius:50%;
background-color: #009FD9;
top: 10px;
left: 20px;
position: relative;
}
.content p, .content span{
position: absolute;
width: 3px;
height: 3px;
border-radius:50%;
animation: myfirst 1.5s infinite;
box-shadow: 0px 0px 1px #009FD9;
margin: 0px;
}
@keyframes myfirst{
10% {transform: scale(1);}
100% {transform: scale(8);}
}12、前端部分功能性css
/* 1、禁止页面选中出现蓝色 */
-moz-user-select: none; /*火狐*//*选中文字时避免出现蓝色背景*/
-webkit-user-select: none; /*webkit浏览器*//*选中文字时避免出现蓝色背景*/
-ms-user-select: none; /*IE10*//*选中文字时避免出现蓝色背景*/
user-select: none;/*选中文字时避免出现蓝色背景*/
/* 2、取消数字输入框上下箭头显示 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
/* chrome */
input[type="number"] {
-moz-appearance: textfield;
/* firefox */
}
/* 3、项目添加新字体 */
@font-face {
font-family:xxxx;
font-weight: 400;
src: url(xxxx.ttf);
}
/* 4、设置字体颜色为渐进色 */
background-image: -webkit-linear-gradient(top,#F9EDD5,#F5CB4F);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
/* 5、设置文字不超过两行，多余的省略 */
overflow: hidden;
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;13、jQuery解决问题
//1、加载本地数据
$.getJSON('../static/lib/citytest.json', data => {
// 逻辑
})
//2、监听滚动条
$(window).scroll(function() {
let top = $(document).scrollTop(); // 获取纵向滚动条滚动的高度
let nump = $("xxx").offset().top; // 获取元素距离页面整体顶部的高度
let pot = $("xxx").position().top; // 获取元素距离有相对定位的父元素的高度
})
//3、回车搜索
$("xxx").on('keypress',function(event){
if(event.keyCode==13) {
}
});
//4、输入监听
$("xxxx").on("input propertychange",function(){
$(this).val($(this).val().replace(/[^\d]/g, "")); // 限制输入内容只能为数字（输入框type值为text，当为number时输入小数点不会被限制）
});
//5、回到顶部
$("#go-top").click(function() {
$('html,body').animate({scrollTop: 0}, 300); // 动画效果，{}中可填入css属性
});
//6、同元素选择器遍历
$("#city-list span").each(function() {
let list = $("#city-list span");
let index = list.index(this); // 获取当前的下标
$("#city-list span").eq(index); // 获取第index个元素
})14、正则方法记录
let t.replace(/<[^>]+>|&[^>]+;/g, ""); // 提取富文本中文字
15、小程序手机端调试
// 参考小程序官方文档，https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.setEnableDebug.html // 打开调试 wx.setEnableDebug({ enableDebug: true }) // 关闭调试 wx.setEnableDebug({ enableDebug: false }) // uniapp中将wx换成uni即可，可参考uniapp官网api // tips：在正式版打开调试还有一种方法，就是先在开发版或体验版打开调试，再切到正式版就能看到vConsole。（引自官方文档）
4132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
