随着Vue越来越火,热相关组件库也非常多啦,只用轮子怎么够,还是要造起来! ! !
Vue组件开发的API:道具、事件和槽
github地址:https://github.com/MengFangui/VueInputNumber
效果:
(1) index . html
& lt; !DOCTYPE html>
& lt; html lang=皕h型”比;
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; title>数字输入框组件& lt;/title>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt; !——数字输入框组件命名为:输入数——比;
& lt; !——数字输入框组件默认值为5,最大值为10,最小值为0,在
& lt;输入数v模型=凹壑怠?max=?0”: min=' 0 '祝辞& lt;/input-number>
& lt;/div>
& lt;脚本src=" https://cdn.bootcss.com/vue/2.5.9/vue.min.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/js/input-number.js " type=" text/javascript " charset=皍tf - 8”祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/js/index.js " type=" text/javascript " charset=皍tf - 8”祝辞& lt;/script>
& lt;/body>
& lt;/html>
(2)input-number.js
//验证输入值是否为数字
函数isValueNumber(价值){
返回(/(^ & # 63;[0 - 9]+ \。{1}\ d + $) |(^ & # 63;(1 - 9) *美元)|(^ & # 63;0美元{1})/)。测试(价值+”);
}
Vue.component(输入数,{//模板
模板:
祝辞& lt; div class="输入数”;
& lt;输入类型=拔谋尽?value=" https://www.yisu.com/zixun/currentValue " @change=" handleChange "/比;
& lt;按钮@click=癶andleDown”:禁用=癱urrentValue & lt;=min”祝辞& lt;/button>
& lt;按钮@click=癶andleUp”:禁用=癱urrentValue祝辞=max "祝辞+ & lt;/button>
& lt;/div>
”,//道具实现与父组件的通信(父组件,在子组件)//对每个道具进行校验,道具的值可以是数组,也可以是对象
道具:{
马克斯:{//必须是数字类型
类型:数字,//默认值为无穷大
默认值:无穷
}，
分钟:{
类型:数字,
默认值:无穷
}，
价值:{
类型:数字,
默认值:0
}
}，//Vue组件为单向数据流,声明数据来引用父组件的价值,在组件内部维护currentValue
数据:函数(){
返回{
currentValue: this.value
}
}，//监听:与父组件通信(子组件,在父组件)
看:{
currentValue:函数(val) {//使用v模型改变值//这个指向当前组件实例
这一点。发出(“输入”,val)美元
}//,//本示例未使用自定义函数,使用了v型输入函数来更新价值//值:函数(val) {////自定义事件变化,告知父组件数字输入框值有所改变//这个。发出(“变化”,val)美元//}
}，
方法:{//父组件传递过来的值可能不符合条件(大于最大值,小于最小值)
updateValue:函数(val) {
如果(val比;this.max) {
val=this.max;
}
如果(val & lt;this.min) {
val=this.min;
}
这一点。currentValue=https://www.yisu.com/zixun/val;
}，
handleDown:函数(){
如果这一点。currentValue <=this.min) {
返回;
}
这一点。currentValue -=1;
}，
handleUp:函数(){
如果这一点。currentValue>=this.max) {
返回;
}
这一点。currentValue +=1;
}，
handleChange:函数(事件){
var val=event.target.value.trim ();
var max=this.max;
var min=this.min;
如果(isValueNumber (val)) {
val=数量(val);
这一点。currentValue=val;
如果(val> max) {
这一点。当前=max;
}
如果(val
(3)index.js
应用var=new Vue ({
埃尔:“#应用”,
数据:{//数字输入框组件默认值为5(父组件设置初始化值)
值:5
}
})
以上所述是小编给大家介绍的基于Vue开发数字输入框组件,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
