表单弹框
实际的项目中会存在很多的表单弹框,并且有许多是可以复用的,我们可以简单的封装成业务组件。技巧就是利用.sync特性
<Dialog :visible.sync="dialogFormVisible"></Dialog>
<el-dialog @close="close" title="收货地址" :visible.sync="visible">
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="ok">确 定</el-button>
</div>
</el-dialog>
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);
}
}
};
表单嵌入
有一些场景,除了表单输入不同,其他的一些逻辑都是一样的,这时候就可以把表单拉出来,做一个判断,这样就能公用一个页面
<el-form :model="form">
<Forms :data.sync="form"></Forms>
<el-button @click="close">取 消</el-button>
<el-button type="primary" @click="ok">确 定</el-button>
</el-form>
//Forms
<div>
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-numberInt:5="data.name" v-model="data.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="data.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</div>
export default {
props: {
data: Object
},
data() {
return {
formLabelWidth: "120px"
};
}
};
Directive 指令
有一天,我正在开开心心的写代码的时候,产品突然跟我说,表单仅仅做校验是不够的,我们还要限制用户输入,价格只能输入数字,数量只能输入整数,我听到后整个人就很 高兴说: 我(艹)看(泥)看(马)(当用户傻呀,外星人呀,价格是ABC)
<el-input v-numberInt:5="data.name" v-model="data.name" ></el-input>
//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 在容器内铺满网格线
<div class="grid-box">
<span class="vLine" :style="{left: n * 20 + 'px'}" v-for="n in nCol" :key="'v' + n"></span>
<span class="hLine" :style="{top: n * 20 + 'px'}" v-for="n in nRow" :key="'h' + n"></span>
</div>
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
<CrystalNum :num="num"></CrystalNum>
<div class="crystalnum" >
<span v-for="(item, index) in aCount" :key="index" :class="!show && item != oldCount[index]?'animation-flip iconfont icon-'+ item:'iconfont icon-'+ item"></span>
</div>
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);
}
}
};
有好几个月没碰原来的项目,回头看了下,有很多不足的地方,有一些碰到的问题时间太久,没记录也没什么印象了,回头有实践再更新吧,也欢迎拍砖