You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.5 KiB
121 lines
3.5 KiB
<template>
|
|
|
|
<el-input
|
|
:type="type"
|
|
:style="{...style,width:width,height:height,...styleObject}"
|
|
:placeholder="placeholder1"
|
|
:disabled="disabled"
|
|
:maxlength="maxlength1"
|
|
:minLength="minLength1"
|
|
:show-word-limit="showWordLimit"
|
|
@input="$emit('input', $event)"
|
|
@change="$emit('change', $event)"
|
|
@blur="$emit('blur', value)"
|
|
@focus="$emit('focus', value)"
|
|
v-model="value">
|
|
<!-- 自定义前面小图标 -->
|
|
<template v-slot:prepend>
|
|
<slot name="prependshow"></slot>
|
|
</template>
|
|
<template v-slot:prefix>
|
|
<slot name="prefix"></slot>
|
|
</template>
|
|
<!-- 清除小图标 -->
|
|
<template v-slot:suffix>
|
|
<slot name="suffix"></slot>
|
|
</template>
|
|
<template v-slot:append>
|
|
<slot name="appendshow"></slot>
|
|
</template>
|
|
<!-- <i slot="suffix" v-if="empty" class="el-icon-close" @click="handleClear">h</i> -->
|
|
<!-- <el-button slot="append" v-if="hasBtn" type="primary" @click="$emit('enter',value)">搜索</el-button> -->
|
|
</el-input>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'GuipInput',
|
|
props:['styleObject','disabled','defaultValue','placeholder','maxlength','minLength','clear','width','height','showWordLimit','type'],
|
|
data() {
|
|
return {
|
|
value: '',
|
|
maxlength1: '',
|
|
minLength1: 0,
|
|
style:{
|
|
width:'200px',
|
|
height:'38px'
|
|
},
|
|
placeholder1:'请输入内容'
|
|
}
|
|
},
|
|
watch: { // 监听外部传来的 value prop 的变化，以便同步到内部状态 inputValue 上（可选）
|
|
defaultValue(newVal) {
|
|
console.log(newVal,'newVal');
|
|
this.value = newVal;
|
|
}
|
|
},
|
|
created(){
|
|
// 默认值赋值
|
|
if(this.defaultValue != null){
|
|
this.value = this.defaultValue;
|
|
}
|
|
// 默认提示语
|
|
if(this.placeholder){
|
|
this.placeholder1 = this.placeholder;
|
|
}
|
|
// 默认提示语
|
|
if(this.maxlength){
|
|
this.maxlength1 = this.maxlength;
|
|
}
|
|
// 默认提示语
|
|
if(this.minLength){
|
|
this.minLength1 = this.minLength;
|
|
}
|
|
},
|
|
mounted(){
|
|
this.$nextTick(()=>{
|
|
let els = document.querySelectorAll('.el-input');
|
|
els.forEach(item=>{
|
|
item.onmouseover= function(){
|
|
item.classList.add("hoverclass")
|
|
}
|
|
item.onmouseout= function(){
|
|
item.classList.remove("hoverclass")
|
|
}
|
|
// item.addEventListener('mouseover',function(){
|
|
// console.log('滑过');
|
|
// item.classList.add("hoverclass")
|
|
// })
|
|
// item.addEventListener('mouseoout',function(){
|
|
// console.log('滑出');
|
|
// item.classList.remove("hoverclass")
|
|
// })
|
|
// item.addEventListener('mouseoenter',function(){
|
|
// console.log('滑---');
|
|
// item.classList.add("hoverclass")
|
|
// })
|
|
// item.addEventListener('mouseoleave',function(){
|
|
// console.log('滑出');
|
|
// item.classList.remove("hoverclass")
|
|
// })
|
|
})
|
|
// console.log(el,'====9999');
|
|
// if(el&& this.styleObject){
|
|
// for(var key in this.styleObject){
|
|
// el.style[key] = this.styleObject[key]
|
|
// }
|
|
// }
|
|
})
|
|
},
|
|
methods:{
|
|
// input 事件
|
|
// changeInput(event){
|
|
// this.$emit('input', event);
|
|
// }
|
|
// handleClear(){
|
|
// console.log('清除---');
|
|
// this.$emit('clear', '清楚逻辑')
|
|
// }
|
|
}
|
|
}
|
|
</script>
|