满口金牙 2022-07-23 13:56 采纳率: 91.5%
浏览 121
已结题

Input 多行文字实现请教?

// 我要做个判断 如果 i.attr.format.align == mulit_line      那么可以进行多行输入,并且高度自适应
 <input class="cell-input" type="text" v-model=i.attr.value
            @blur="inputBlurCheck(i)" @input="testInput(i)" 
            :style="{
              'fontFamily': i.attr.font_family,
              'fontSize': i.attr.font_size + 'px',
              'color': i.attr.format.color ? i.attr.format.color : i.attr.font_color,
              'backgroundColor': i.attr.background_color,
              'letterSpacing': i.attr.letter_spacing,
              'textAlign': i.attr.align_h,
              'fontWeight': i.attr.font_weight,
              'fontStyle': i.attr.font_style,
              'textDecoration': i.attr.text_decoration,
            }" />



<input v-if ='i.attr.format.align == mulit_line' />

<textarea v-else ... />
这个方法感觉很low
  • 写回答

5条回答 默认 最新

  • CSDN专家-showbo 2022-07-23 14:15
    关注

    input没法换行，直接textarea，不是多行的话input事件中替换掉输入值的回车（overflow：hidden+white-space:nowrap），但是鼠标会无法像input那样可以左右移动，需要用键盘左右箭头来移动光标，所以还是用做切换好些
    自适应的话需要用js来控制textarea的高度，根据滚动高度重新设置高度
    简单示例如下

    
<!doctype html>
<script src="https://unpkg.com/vue@next" data-ver="3"></script>
<style>
    textarea{resize:none;line-height:20px;box-sizing:border-box;height:26px;padding:2px;outline:none;overflow:hidden;}
    textarea.singleLine{white-space:nowrap}
</style>
<div id="app">
    <div v-for="i in arr">
        <textarea :ref="i.attr.id"  v-model="i.attr.value" @input="testInput(i)" :class="i.attr.format.align=='mulit_line'?'':'singleLine'" :placeholder="i.attr.format.align"></textarea>
    </div>
</div>
<script>
    var app = {
        data() {
            return {
                arr: [
                    {
                        attr: {
                            id: 'ta1',
                            value: '',
                            format: { align: 'single' }
                        }
                    },
                    {
                        attr: {
                            id: 'ta2',
                            value: '',
                            format: { align: 'mulit_line' }
                        }
                    }
                ]
            };
        },
        methods: {
            testInput(i) {
                let ta = this.$refs[i.attr.id][0];
                if (i.attr.format.align == 'mulit_line') {
                    ta.style.height = '26px';//恢复默认高度，要不减少内容不会缩回去
                    ta.style.height = ta.scrollHeight + 2 + 'px';
                }
                else {
                    i.attr.value = i.attr.value.replace(/[\r\n]/g, '')
                }
            }
        }
    };
    Vue.createApp(app).mount('#app')
</script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(4条)

报告相同问题？

问题事件

  • 系统已结题 7月31日
  • 已采纳回答 7月23日
  • 修改了问题 7月23日
  • 修改了问题 7月23日
  • 展开全部

悬赏问题

  • ¥15 linux驱动，linux应用，多线程
  • ¥20 我要一个分身加定位两个功能的安卓app
  • ¥15 基于FOC驱动器，如何实现卡丁车下坡无阻力的遛坡的效果
  • ¥15 IAR程序莫名变量多重定义
  • ¥15 (标签-UDP|关键词-client)
  • ¥15 关于库卡officelite无法与虚拟机通讯的问题
  • ¥15 目标检测项目无法读取视频
  • ¥15 GEO datasets中基因芯片数据仅仅提供了normalized signal如何进行差异分析
  • ¥100 求采集电商背景音乐的方法
  • ¥15 数学建模竞赛求指导帮助