1.element-ui中撤销单选
<el-radio-group v-model="pushType">
<el-radio @click.native.prevent="checkBoxChange(0)" :label="0">短信推送</el-radio>
<el-radio @click.native.prevent="checkBoxChange(2)" :label="2">APP推送</el-radio>
</el-radio-group>
methods: {
checkBoxChange (val) {
val === this.pushType ? this.pushType = null : this.pushType = val
}
}
2.阻止表单提交
@submit.native.prevent 阻止表单enter提交
3.echarts图表鼠标移动展示弹窗样式自定义
<template>
<div class="line" id="line"></div>
</template>
<script>
export default {
props: {
},
data () {
return {
myChart: null
}
},
created () {
// 调用方法绘制图表
// 无法再created中调用drawLine()方法
},
mounted () {
this.drawLine()
},
methods:{
drawLine(){
// 为charts选定父容器并初始化charts画布
var myChart = this.$echarts.init(document.getElementById('line'));
// 为图表添加数据
myChart.setOption({
xAxis: {
type: 'category',
data: ['6-24', '6-26', '6-28', '7-1', '7-6', '7-9', '7-11', '7-16','8-1', '8-2', '8-3', '8-4', '8-5', '8-6', '8-7', '8-8'],
axisLabel: {
color: '#9B9B9B',
fontSize: 20,
padding: [10,0,0,0]
}
},
grid: {
left: '3.5%',
right: '5%',
// bottom: '1%',
containLabel: true
},
tooltip: {
trigger: 'axis',
// trigger: 'item',
triggerOn: 'mousemove|click|touchstart',
position: [0, 0],
axisPointer:{
show: true,
type : 'line',
lineStyle: {
type : 'dashed',
width : 2,
color: '#EC5642'
}
},
formatter: function (params) { // 设置提示信息的内容
return `<div style="width: 100vw;height: 44px;font-size: 26px;line-height: 44px;padding:0 15px;box-sizing:border-box;">
<span style="color: #323744;">${params[0].axisValue}</span>
<span style="float:right;padding-right: 10px;">
<span style="color: #323744;">七日年化收益率：</span>
<span style="color: #EC5642;">${params[0].data}%</span>
</span>
</div>`
},
backgroundColor: 'rgba(242,232,231,1)',
textStyle: {
fontSize: 18,
width: '100%'
}
},
yAxis: {
min:0,
max:1,
type: 'value',
axisLabel: {
formatter: function (value) {
return value.toFixed(2);
},
color: '#9B9B9B',
fontSize: 20,
padding: [0,5,0,0]
},
axisLine: {
show: false
}
},
series: [{
data: [0.3, 0.5, 0.1, 0.4, 0.6, 0.2, 0.8, 0.6, 0.3, 0.1, 0.5, 0.2, 0.2, 0.6, 0.4, 0.5],
type: 'line',
smooth: true,
lineStyle: {
color: '#EC5642',
width: 2,
}
}]
})
this.myChart = myChart
}
}
}
</script>
<style lang="less" scoped>
.line{
width: 375px;
height: 181px;
overflow-x:hidden;
.chart-msg{
width:100vw!important;
height:22px!important;
background:rgba(242,232,231,1)!important;
}
}
</style>
4.记录用户行为，不离开当前页面，生成唯一assessToken
function ajax(options) {
options = options || {};
options.type = (options.type || "GET").toUpperCase();
options.dataType = options.dataType || 'json';
options.async = options.async || true;
// var params = getParams(options.data);
var xhr;
if (window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
/* eslint-disable */
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4){
var status = xhr.status;
if (status >= 200 && status < 300 ){
options.success && options.success(xhr.responseText,xhr.responseXML);
}else{
options.fail && options.fail(status);
}
}
};
if (options.type == 'GET'){
xhr.open("GET",options.url + '?' + params, options.async);
xhr.send(null)
}else if (options.type == 'POST'){
xhr.open('POST',options.url, options.async);
// application/x-www-form-urlencoded
xhr.setRequestHeader('Content-Type','application/json');
xhr.send(options.data);
}
}
function getParams(data) {
var arr = [];
for (var param in data){
arr.push(encodeURIComponent(param) + '=' +encodeURIComponent(data[param]));
}
// arr.push(('token=' + Math.random()).replace('.'));
return arr.join('&');
}
var page = {
token: sessionStorage.getItem('behavior_token') ? sessionStorage.getItem('behavior_token') : '', //避免刷新导致导致token为空
setToken: function () {
page.token = '';
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-";
page.token = s.join("");
},
uuid: function(path) {
let hash = sessionStorage.getItem('behavior_hash') ? sessionStorage.getItem('behavior_hash') : '' //获取上次存贮的路由
if (hash) {
if (hash == path && page.token) {
return page.token // 如果本次路由和上次路由相同，返回同一个token
} else {
page.setToken()
}
} else {
page.setToken()
}
window.sessionStorage.setItem('behavior_hash', path)
window.sessionStorage.setItem('behavior_token', page.token)
return page.token;
}
}
function Behavior (url, channel) {
Behavior.prototype._behavior = function (param) {
let accessToken = page.uuid(param.pageId)
let ua = navigator.userAgent.toLowerCase()
let obj
if (ua.indexOf('micromessenger') != -1) {
obj = {accessToken: accessToken, channel: channel, platform: 'WX'}
} else {
obj = {accessToken: accessToken, channel: channel, platform: 'APP'}
}
let _obj = {...param,...obj}
ajax({
url: url + '/api/statistics/report',
type: 'POST',
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify(_obj)
})
};
}
export default Behavior
全局调用
var be = new Behavior('http://10.137.133.2:10011', 1)
Vue.prototype.$be = be
5.使用lib-flexible、postcss-px2rem实现移动端尺寸兼容
①安装依赖
yarn add lib-flexible
yarn add postcss-px2rem
②main.js引入lib-flexible
③配置vue.config.js
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 37.5
})
]
}
}
}
6.自定义eslint规则：package.json rules
0: off； 1：warning；2:error
"rules": {
"no-console": 0,
"no-debugger": 0,
"no-delete-var": 0,
"no-unused-vars": [
0,
{
"vars": "all",
"args": "after-used"
}
],
"no-irregular-whitespace": 0
},
网友评论