Vue自定义input区间组件
疫情期间,在家用两个input实现一个区间组件,希望对你们有帮助。效果图如下:使用步骤:一,在项目中创建组件InputRange.vue文件,把以下代码复制到新建组件中。<template><div class="hy-input-wrapper" :style="myStyle"><divclass="hy-input">...
·
疫情期间,在家用两个input实现一个区间组件,希望对你们有帮助。效果图如下:
使用步骤:
一,在项目中创建组件InputRange.vue文件,把以下代码复制到新建组件中。
<template>
<div class="hy-input-wrapper" :style="myStyle">
<div class="hy-input">
<input :type="type" :placeholder="startPlaceholder" v-model="inputMap.start" @input="inputValue" autocomplete="off" class="hy-input__inner" >
</div>
<div class="connect">{{connectText}}</div>
<div class="hy-input">
<input :type="type" :placeholder="endPlaceholder" v-model="inputMap.end" @input="inputValue" class="hy-input__inner" >
</div>
</div>
</template>
<script>
export default {
data(){
return {
inputMap: {...this.value}
}
},
props: {
startPlaceholder: {type: String, default: '起始值'},
endPlaceholder: {type: String, default: '结束值'},
type: {type: String, default: 'text'},
connectText: {type: String, default: '至'},
value: {type: Object, default: function(){
return {start: '',end: ''}
}
}, //v-model绑定的值
myStyle: {type: Object, default: function(){
return {width: '580px'}
}
}
},
model: {
prop: 'value',
event: 'change'
},
watch: {
'value.start'(val) {
this.inputMap.start = val;
},
'value.end'(val) {
this.inputMap.end = val;
}
},
created(){ },
mounted(){ },
methods: {
inputValue(event){
this.$emit("change",{...this.inputMap})
}
}
}
</script>
<style scoped>
.hy-input-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.connect{
font-size: 14px;
font-weight: bold;
color: #606266
}
.hy-input {
position: relative;
font-size: 13px;
display: inline-block;
padding: 0 10px 0 10px;
width: 100%;
}
.hy-input__inner {
-webkit-appearance: none;
background-color: #FFF;
background-image: none;
border-radius: 4px;
border: 1px solid #DCDFE6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 32px;
line-height: 32px;
outline: 0;
padding: 0 15px;
-webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
width: 100%;
}
.hy-input__inner:focus {
border-color: #409EFF;
outline: 0;
}
</style>
二,注册组件
import InputRange from './components/InputRange' //导入组件,注意路径
Vue.component('input-grange',InputRange) //注册
三,使用
<input-grange v-model='rangeValue'> </input-grange>
data() {
return {
rangeValue: {start: '', end: ''}, //用来绑定
}
}
相关属性:
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
startPlaceholder | 第一个输入框占位文本 | string | 起始值 | |
endPlaceholder | 第二个输入框占位文本 | string | 结束值 | |
type | 文本类型 | string | number,text | text |
connectText | 连接符,连接两个input的字符 | string | 至 | |
myStyle | 组件的样式 | Object | {width: ‘280px’} |
更多推荐
已为社区贡献1条内容
所有评论(0)