vue 限制textarea内容的行数

简介: vue 限制textarea内容的行数

需求

限制 textarea中只能输入3行

实现思路

watch监听 textarea中的内容,实时计算内容的行数,若新值超过3行,则恢复原来的值

代码

                <el-input
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="content">
                </el-input>

data

content: '',

watch

        watch: {
            'content'(newValue, oldValue) {
                if (this.getRow() > 3) {
                    this.content = oldValue
                }
            }
        },

methods

            getRow() {
                let row = 0
                this.content.split("\n").forEach(item => {
                    if (item.length === 0) {
                        row += 1
                    } else {
                        row += Math.ceil(item.replace(/[\u0391-\uFFE5]/g,"aa").length / 20)
                    }
                })
                return row
            }

根据textarea的宽度,将20修改为合适的值

目录
相关文章
|
2天前
|
JavaScript
vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
13 4
|
2天前
|
JavaScript
vue拖拽 —— vuedraggable 表格拖拽行
vue拖拽 —— vuedraggable 表格拖拽行
4 1
|
2天前
|
JavaScript
vue 动态绑定方法
vue 动态绑定方法
6 0
|
2天前
|
JavaScript
vue 手动/局部刷新组件
vue 手动/局部刷新组件
5 0
|
2天前
|
JavaScript 搜索推荐
vue【详解】props —— 子组件接收父组件传入的参数
vue【详解】props —— 子组件接收父组件传入的参数
6 0
|
2天前
|
JavaScript
vue 动画 —— 滚动动画
vue 动画 —— 滚动动画
6 0
|
2天前
|
JavaScript
vue 监听滚动条行为 | 判断滚动条是向上滚动还是向下滚动
vue 监听滚动条行为 | 判断滚动条是向上滚动还是向下滚动
8 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1006 0
|
2天前
|
JavaScript
vue组件封装 | 数字输入框(限制只能输入数字的input,可以指定小数点位数,最大值、最小值)
vue组件封装 | 数字输入框(限制只能输入数字的input,可以指定小数点位数,最大值、最小值)
15 7
|
2天前
|
JavaScript
vue 组件封装 | 图片放大镜(同天猫、淘宝、京东等商品图片放大浏览效果)
vue 组件封装 | 图片放大镜(同天猫、淘宝、京东等商品图片放大浏览效果)
12 6