zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge pull request '修复input输入框显示默认值无效问题' (#48) from zq-slider-menu into master 

Reviewed-on: #48
pull/51/head
zhangqi 2 weeks ago
parent
66c1d6e9e2 055724f21c
commit
0066517276
1 changed files with 85 additions and 96 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 179
      src/components/GuipInput.vue

179
src/components/GuipInput.vue
View File

@ -1,25 +1,12 @@
<template> <template>
<el-form-item <el-form-item :style="{ height: height, ...styleObject }"
:style="{height:height,...styleObject}" :class="[{ 'column': column }, { 'w510': addClass == 'w510' }, { 'w388': addClass == 'w388' }, 'form-item']" :label="label"
:class="[{'column':column},{'w510':addClass=='w510'},{'w388':addClass=='w388'},'form-item']" :prop="prop" :rules="rules">
:label="label" :prop="prop" :rules="rules"> <p v-if="desc" class="desc_right">{{ desc }}</p>
<p v-if="desc" class="desc_right">{{ desc }}</p> <el-input :type="type" v-bind="$attrs" :placeholder="placeholder1" :disabled="disabled" :maxlength="maxlength1"
<el-input :style="{ width: width, height: height }" :minLength="minLength1" :show-word-limit="showWordLimit"
:type="type" @input="$emit('input', $event)" @keydown="handleKeydown" @change="$emit('change', $event)"
@blur="$emit('blur', inputValue)" @focus="$emit('focus', inputValue)" v-model="inputValue">
v-bind="$attrs"
:placeholder="placeholder1"
:disabled="disabled"
:maxlength="maxlength1"
:style="{width:width,height:height}"
:minLength="minLength1"
:show-word-limit="showWordLimit"
@input="$emit('input', $event)"
@keydown="handleKeydown"
@change="$emit('change', $event)"
@blur="$emit('blur', inputValue)"
@focus="$emit('focus', inputValue)"
v-model="inputValue">
<!-- 自定义前面小图标 --> <!-- 自定义前面小图标 -->
<template v-slot:prepend> <template v-slot:prepend>
<slot name="prependshow"></slot> <slot name="prependshow"></slot>
@ -41,92 +28,92 @@
<!-- <el-button slot="append" v-if="hasBtn" type="primary" @click="$emit('enter',value)">搜索</el-button> --> <!-- <el-button slot="append" v-if="hasBtn" type="primary" @click="$emit('enter',value)">搜索</el-button> -->
</el-input> </el-input>
<!-- 单位 --> <!-- 单位 -->
<span class="unit" v-if="unit">{{ unit }}</span> <span class="unit" v-if="unit">{{ unit }}</span>
</el-form-item> </el-form-item>
</template> </template>
<script> <script>
export default { export default {
name: 'GuipInput', name: 'GuipInput',
props:['value','styleObject','disabled','defaultValue','placeholder', props: ['value', 'styleObject', 'disabled', 'defaultValue', 'placeholder',
'maxlength','minLength','clear','width','height','showWordLimit', 'maxlength', 'minLength', 'clear', 'width', 'height', 'showWordLimit',
'label','type','prop','rules','column','addClass','desc','unit'], 'label', 'type', 'prop', 'rules', 'column', 'addClass', 'desc', 'unit'],
data() { data() {
return { return {
inputValue: '', inputValue: this.value || this.defaultValue,
maxlength1: '', maxlength1: '',
minLength1: 0, minLength1: 0,
style:{ style: {
width:'510px', width: '510px',
height:'38px' height: '38px'
}, },
placeholder1:'' placeholder1: ''
} }
}, },
watch: { // 监听外部传来的 value prop 的变化，以便同步到内部状态 inputValue 上（可选） watch: { // 监听外部传来的 value prop 的变化，以便同步到内部状态 inputValue 上（可选）
// defaultValue(newVal) { // defaultValue(newVal) {
// console.log(newVal,'newVal'); // console.log(newVal,'newVal');
// this.inputValue = newVal; // this.inputValue = newVal;
// }, // },
value(newVal){ value(newVal) {
this.inputValue = newVal; this.inputValue = newVal;
} }
}, },
created(){ created() {
// 默认值赋值 // 默认值赋值
if(this.defaultValue != null){ // if (this.defaultValue != null) {
this.inputValue = this.defaultValue; // this.inputValue = this.defaultValue;
} // }
// 默认提示语 // 默认提示语
if(this.placeholder){ if (this.placeholder) {
this.placeholder1 = this.placeholder; this.placeholder1 = this.placeholder;
} }
// 默认提示语 // 默认提示语
if(this.maxlength){ if (this.maxlength) {
this.maxlength1 = this.maxlength; this.maxlength1 = this.maxlength;
} }
// 默认提示语 // 默认提示语
if(this.minLength){ if (this.minLength) {
this.minLength1 = this.minLength; this.minLength1 = this.minLength;
} }
}, },
mounted(){ mounted() {
this.$nextTick(()=>{ this.$nextTick(() => {
let els = document.querySelectorAll('.el-input'); let els = document.querySelectorAll('.el-input');
els.forEach(item=>{ els.forEach(item => {
item.onmouseover= function(){ item.onmouseover = function () {
item.classList.add("hoverclass") item.classList.add("hoverclass")
} }
item.onmouseout= function(){ item.onmouseout = function () {
item.classList.remove("hoverclass") item.classList.remove("hoverclass")
} }
// item.addEventListener('mouseover',function(){ // item.addEventListener('mouseover',function(){
// console.log('滑过'); // console.log('滑过');
// item.classList.add("hoverclass") // item.classList.add("hoverclass")
// }) // })
// item.addEventListener('mouseoout',function(){ // item.addEventListener('mouseoout',function(){
// console.log('滑出'); // console.log('滑出');
// item.classList.remove("hoverclass") // item.classList.remove("hoverclass")
// }) // })
// item.addEventListener('mouseoenter',function(){ // item.addEventListener('mouseoenter',function(){
// console.log('滑---'); // console.log('滑---');
// item.classList.add("hoverclass") // item.classList.add("hoverclass")
// }) // })
// item.addEventListener('mouseoleave',function(){ // item.addEventListener('mouseoleave',function(){
// console.log('滑出'); // console.log('滑出');
// item.classList.remove("hoverclass") // item.classList.remove("hoverclass")
// }) // })
}) })
// console.log(el,'====9999'); // console.log(el,'====9999');
// if(els&& this.styleObject){ // if(els&& this.styleObject){
// for(var key in this.styleObject){ // for(var key in this.styleObject){
// els.style[key] = this.styleObject[key] // els.style[key] = this.styleObject[key]
// } // }
// } // }
}) })
}, },
methods:{ methods: {
// input 事件 // input 事件
// changeInput(event){ // changeInput(event){
// this.$emit('input', event); // this.$emit('input', event);
@ -138,18 +125,20 @@
handleKeydown(e) { handleKeydown(e) {
console.log(e); console.log(e);
// if (e.key === '1') { // if (e.key === '1') {
e.preventDefault(); // 阻止默认行为 e.preventDefault(); // 阻止默认行为
// } // }
}, },
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.unit { .unit {
position: absolute; position: absolute;
right: 12px; /* 根据需要调整位置 */ right: 12px;
/* 根据需要调整位置 */
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
pointer-events: none; /* 防止单位文本影响输入框的点击事件 */ pointer-events: none;
/* 防止单位文本影响输入框的点击事件 */
} }
</style> </style>
Write Preview
Loading…
Cancel
Save