随手记 - 简书

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
 },