封装自动宽度input组件
auto-input.vue
<template>
<div class="auto-input">
<span>{{ value }}</span>
<input class="my-input" ref="input" placeholder="" @input="setNum" v-model="newValue" />
</div>
</template>
<script>
export default {
name: 'autoinput',
props:{
value:{
type:[ Number , String],
default:'0'
}
},
data() {
return {
newValue:this.value
};
},
created() {},
mounted() {},
watch:{
value: {
//初始化的时候执行一次
immediate: true,
handler: function (oldValue, newValue) {
this.newValue = this.value
}
}
},
methods: {
setNum(){
this.$emit('update:value',this.newValue)
}
},
components: {},
};
</script>
<style lang="scss" scoped>
.auto-input {
color: #333;
padding: 0;
min-width: 44px;
position: relative;
display: inline-block;
margin-left: -2px;
margin-right: -15px;
text-align: center;
span {
display: inline-block;
height: 100%;
font-size: 59px;
visibility: hidden;
}
.my-input {
display: inline-block;
position: absolute;
left: -1px;
top: 9px;
width: 100%;
height: 100%;
background: transparent;
min-width: 40px;
padding: 1px;
font-size: 59px !important;
margin-top: -10px;
font-size: 28px;
caret-color: #426BF2;
outline: none;
border: none;
border-style: none;
text-align: center;
}
}
</style>
注册使用:
<auto-input :value.sync='value'/>
text文本域自动高度:
autoSize(el) {
var timer = null;
//由于ie8有溢出堆栈问题,故调整了这里
var setStyle = function (el, auto) {
if (auto) el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
};
var delayedResize = function (el) {
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function () {
setStyle(el);
}, 200);
};
if (el.addEventListener) {
el.addEventListener(
'input',
function () {
setStyle(el, 1);
},
false,
);
setStyle(el);
} else if (el.attachEvent) {
el.attachEvent('onpropertychange', function () {
setStyle(el);
});
setStyle(el);
}
if (window.VBArray && window.addEventListener) {
//IE9
el.attachEvent('onkeydown', function () {
var key = window.event.keyCode;
if (key == 8 || key == 46) delayedResize(el);
});
el.attachEvent('oncut', function () {
delayedResize(el);
}); //处理粘贴
}
},
调用:
let textarea = document.getElementById('textarea');
this.autoSize(textarea);