python vue element_VUE + Element项目中，你可能不知道的一些技巧

表单弹框

实际的项目中会存在很多的表单弹框，并且有许多是可以复用的，我们可以简单的封装成业务组件。技巧就是利用.sync特性

取 消

确 定

export default {

props: {

visible: false

},

data() {

return {

form: {

name: "",

region: ""

},

formLabelWidth: "120px"

};

},

methods: {

close() {

this.$emit("update:visible", false);

},

ok() {

this.$emit("update:visible", false);

}

}

};

表单嵌入

有一些场景，除了表单输入不同，其他的一些逻辑都是一样的，这时候就可以把表单拉出来，做一个判断，这样就能公用一个页面

取 消

确 定

//Forms

export default {

props: {

data: Object

},

data() {

return {

formLabelWidth: "120px"

};

}

};

Directive 指令

有一天，我正在开开心心的写代码的时候，产品突然跟我说，表单仅仅做校验是不够的，我们还要限制用户输入，价格只能输入数字，数量只能输入整数，我听到后整个人就很高兴说: 我(艹)看(泥)看(马)(当用户傻呀，外星人呀，价格是ABC)

//JS

export const numberInt = {

update: function (el, binding, vnode) {

let val = binding.value ? binding.value.toString() : ''

let len = binding.arg

if (val === '') return

let reg = new RegExp('^[0-9]{0,' + len + '}$')

if (!reg.test(val)) {

// 因为model的原因必须nextTick后去更改才行

Vue.nextTick(() => {

vnode.data.model.callback(binding.oldValue)

})

}

}

}

Line 在容器内铺满网格线

export default {

name: "Lines",

data() {

return {

nRow: 0,

nCol: 0

};

},

created() {},

mounted() {

this.nRow = Math.ceil(this.$el.offsetHeight / 20);

this.nCol = Math.ceil(this.$el.offsetWidth / 20);

},

methods: {}

};

电子表数字 CrystalNum

export default {

name: "CrystalNum",

props: {

num: {

type: [String, Number],

default: "0"

}

},

data() {

return {

show: true,

oldCount: ["0"],

aCount: ["0"]

};

},

computed: {},

mounted() {},

watch: {

num(cur, old) {

this.show = false;

this.oldCount = old.toString().split("");

let num = cur;

if (typeof num === "number") {

num = "" + num;

}

if (num === "") {

this.aCount = ["0"];

} else {

let aCount = num.split("");

this.aCount = aCount;

}

setTimeout(() => {

this.show = true;

}, 1000);

}

}

};

有好几个月没碰原来的项目，回头看了下，有很多不足的地方，有一些碰到的问题时间太久，没记录也没什么印象了，回头有实践再更新吧，也欢迎拍砖