阅读量:2
输入框的样子
文本域的样子
当输入框出现滚动条的时候，就自动切换成文本域；当文本域到1行并且宽度小于输入框宽度时切换成输入框
<div class="left_box_inpt"> <div class="right_box_inpt" :class="{ notclickable: inputdisabled, }" > //文本域 <div v-if="isOverflow" style=" display: flex; width: 98%; margin: 10px auto 0; border-radius: 25px !important; background-color: #fff; " > <el-input ref="inputRef" id="text-input" v-model="memory" @input="oninput" @keyup.enter.native="sub()" type="textarea" resize="none" :autosize="{ minRows: 1, maxRows: 4 }" :style="{ width: textareawidth + 'px' }" ></el-input> </div> // 输入框 <div style=" display: flex; width: 100%; border-radius: 25px !important; background-color: #fff; " > <el-input v-if="!isOverflow" ref="inputRef" id="text-input" v-model="memory" @input="oninput" @keyup.enter.native="sub()" :disabled="inputdisabled" > </el-input> <div style=" display: flex; line-height: 50px; padding: 0 10px; margin-left: auto; " > <el-tooltip class="item" effect="dark" :content="$t('upload')" placement="top" > <el-upload ref="upload" action="#" multiple :http-request="httpRequest" :before-upload="beforeUpload" :show-file-list="false" accept=".pdf,.docx,.xlsx" > <el-button class="subbtn" type="text" style="padding: 17px 0" icon="el-icon-circle-plus-outline" :disabled="inputdisabled" > </el-button> </el-upload> </el-tooltip> <span style=" width: 1px; height: 15px; background-color: #dcdfe6; margin: auto 10px; " ></span> <el-tooltip class="item" effect="dark" :content="$t('send')" placement="top" > <el-button :disabled="BtnDisabled" class="subbtn" type="text" @click="sub()" > <img v-if="BtnDisabled" src="@/assets/right1.png" style="width: 15px" /> <img v-else src="@/assets/right3.png" style="width: 15px" /> </el-button> </el-tooltip> </div> </div> </div> </div><script> export default { data () { return { memory: "", //发送信息 BtnDisabled :false, isOverflow: false,//切换输入框为文本框 inputoffsetWidth: "",//输入框的宽度 textareawidth: "100%"//文本域的宽度 }; }, methods: { // 监听输入框 oninput (e) { if (e !== "") { this.BtnDisabled = false; } else { this.BtnDisabled = true; } // 输入框超出变成文本框 this.$nextTick(() => { const inputInner = this.$refs.inputRef.$el.querySelector('.el-input__inner'); const textareaInner = this.$refs.inputRef.$el.querySelector('.el-textarea__inner'); if (inputInner) { this.isOverflow = inputInner.scrollWidth > inputInner.offsetWidth; this.inputoffsetWidth = inputInner.offsetWidth setTimeout(() => { this.$refs.inputRef.focus() }, 100) } if (textareaInner) { // 是不是1行 if (textareaInner.scrollHeight < 52) { // 改变宽度 this.textareawidth = this.getBLen(e) * 7 + 35 if (this.textareawidth < this.inputoffsetWidth) { this.isOverflow = false; setTimeout(() => { this.$refs.inputRef.focus() this.textareawidth = '100%' }, 100) } } } }); }, // 获取字符串的字节长度，中文2个、英文1个 getBLen (str) { if (str == null) return 0; if (typeof str != "string") { str += ""; } return str.replace(/[^\x00-\xff]/g, "01").length; }, } } </script>this.getBLen(e) * 7 + 35 这个应该是字符串长度乘以字体px加光标显示宽度，但是实际上按照实际数据来会出很大偏差，所以我自己检测了一下，最后才定下适合我的数据。
这个终究是估算的，所有多少会有些偏差，我目前也没找到其他方法，所以最终还是需要你们自行结合实际情况。
