vue.js常用语句记录

vue

• npm install错误

npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
npm install node-sass
npm install

• table点击行选中

<el-table @row-click="clickRow" >

clickRow(val) {
  this.$refs.table.toggleRowSelection(val);
}

// $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
this.$nextTick(function () {
  this.trainPeopleTable.forEach(row=>{
    if(this.selectList.indexOf(row.staffId) >= 0){
      this.$refs.trainPersonTable.toggleRowSelection(row);
    }
  })
})

• 更改table编辑状态editing

this.$set(this.jtcyData, index, Object.assign({}, row, {
        "editing": false
}));

• 禁止图片拖动复制

HTML:
<img src=”logo.gif” width=88 height=31 ondragstart=”return false;” >

oncontextmenu=”return false;” //禁止鼠标右键
ondragstart=”return false;” //禁止鼠标拖动
onselectstart=”return false;”//文字禁止鼠标选中
onselect=”document.selection.empty();”//禁止复制文本

CSS:
<div style="user-select: none">你好</div>

user-select: none; // 禁止选中文字

• 禁止浏览器保存密码

<el-input v-model="xxx.password" type="text" autocomplete="off" style="-webkit-text-security: disc; "/>

CSS:
-webkit-text-security: disc;  // 设置type为text，添加此style属性

• 数组拷贝不改变原值

let newData = JSON.parse(JSON.stringify(data));

• 点击事件匿名函数

<button @click="function(arg){alert(arg)}('hello world')">点击我</button>

• JS金额转中文大写

//函数文件名 upperDigits.js
export default (function () {

    function toUpperCase(n) {
        var fraction = ['角', '分'];
        var digit = [
            '零', '壹', '贰', '叁', '肆',
            '伍', '陆', '柒', '捌', '玖'
        ];
        var unit = [
            ['元', '万', '亿'],
            ['', '拾', '佰', '仟']
        ];
        var head = n < 0 ? '欠' : '';
        n = Math.abs(n);
        var s = '';
        for (var i = 0; i < fraction.length; i++) {
            if (i === fraction.length - 1) {
                // 末位小数进行四舍五入解决2.01等浮点数精度导致的小数丢失问题
                s += (digit[Math.round(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
            } else {
                s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
            }
        }
        s = s || '整';
        n = Math.floor(n);
        for (var i = 0; i < unit[0].length && n > 0; i++) {
            var p = '';
            for (var j = 0; j < unit[1].length && n > 0; j++) {
                p = digit[n % 10] + unit[1][j] + p;
                n = Math.floor(n / 10);
            }
            s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
        }
        return head + s.replace(/(零.)*零元/, '元')
            .replace(/(零.)+/g, '零')
            .replace(/^整$/, '零元整');
    }

    return {
        toUpperCase: toUpperCase
    }

})();

• vue route常见传参及接收方式

// 地址栏可见参数
this.$router.push({path: '/index', query: data})
// 地址栏不可见参数
this.$router.push({name: 'index', params: data})

// 接收参数
mounted() {
	if(this.$route.query.data) {
		// todo
	}
}
// 监听参数
watch: {
  $route:{
      handler(newRoute, oldRoute) {
        if (newRoute.name === 'index') {
          if (newRoute.query.data) {
          	// todo
          }
        }
      },
      deep:true,
      immediate: true
    },
},