Vue中textarea的使用：

1、禁止textarea禁止拉伸(拖拽)和编辑样式：

// 禁止拉伸： resize:none<textarea style="resize:none;" >自己设置宽高即可</textarea>

//readonly 可复制不可编辑<textarea type="textarea" readonly>不可编辑</textarea>
//readonly 可复制不可编辑有背景色<textarea type="textarea" disabled>不可编辑</textarea>二者效果区别：readonly：没背景颜色，保留滚动条（适合文字内容多的场景使用）disabled：有背景颜色，不保留滚动功能，（合文字少不需要滚动的场景使用）配合鼠标变成禁用图标使用 style="cursor:no-drop;"

2、Vue：

template：

<div class="box" v-for="(item,index) in dataList" :key="index"><textarea v-model="item.text" :disabled="item.isSave"></textarea>//v-model="item.text"双向绑定数据，:disabled="item.isSave"存在isSave时禁止更改<el-button type="success" @click="editBtn(index,false)" v-show="item.isSave">编辑</el-button><el-button type="success" @click="editBtn(index,true)" v-show="!item.isSave">取消</el-button><el-button type="success" @click="saveBtn(index)" v-show="!item.isSave">保存</el-button>
</div>

情况2：
<el-form-item label="理由" prop="text"><el-input type="textarea" v-model="item.text" rows="6" cols="6">
</el-form-item>

script:

import {getDataList,getDataSave} from "@/api/"
export default{data(){return{dataList:[],//存储数据}},created(){this.init()},methods:{init(){//获取数据getDataList().then(res=>{res.data.data.forEach(arr=>{arr["isSave"]=true;//自己添加isSave属性，判断是否编辑还是取消保存})this.dataList=res.data.data})},editBtn(index,type){//编辑与取消按钮this.dataList[index].isSave=type//取消时，后添加的数据不保存(v-model双向绑定点击取消按钮后恢复原数据)//法一：重新刷新页面if(type==true){//取消时this.init();//重新刷新页面this.$message.warning('数据已取消保存')}//法二：本地存储if(type==false){//编辑时localStorage.setItem('obj',JSON.stringify(this.dataList))}if(type==true){//取消时let Item=JSON.parse(localStorage.getItem('obj'))this.dataList=Item}},saveBtn(item){//保存按钮if(item.text==""){this.$message.warning("textarea不能为空")return}let param={...item}  //获取当前表单的数据并传入后台getDataSave(param).then(res=>{if(res.data.code==0){this.$message.success("数据保存成功");}this.init();//重新刷新页面})}}
}

Vue中textarea的使用：相关推荐

解决vue中textarea不换行
换行问题: vue 中用 {{}} 进行数据绑定的时候,如果你想让字符串换行是不生效的解决办法:不用上边的方式进行数据绑定,用v-html标签代替{{}} data中的str为 "111 ...
vue中textarea标签自适应高度
textarea.js文件 /** * 文本框根据输入内容自适应高度 * @param {HTMLElement} 输入框元素 * @param {Number} 设置光标与输入框保持的距离(默认0) ...
vue中textarea监听粘贴事件获取图片
html中代码: <el-inputid="textarea"v-model="value"type="textarea"maxlen ...
uniapp-H5、vue 中好用的textarea右下角显示字数限制
先看效果是你想要的不! html <textarea class="JTxtArea lg" :maxlength="88" :data-maxnum=& ...
Vue中使用form表单提交刷新问题
vue中使用表单form默认提交行为是刷新一下,在这儿我们使用事件修饰符prevent来阻止form表单的默认行为在@click后面跟上prevent 这样就可以阻止form表单默认刷新行为了 &l ...
vue中v-model和v-bind区别
Vue中的数据绑定有三种方式插值:也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind v-model v-model 主要是用在表单元素中,它实现了双向绑定. ...
在vue中渲染数学公式 - MathJax
在vue中渲染数学公式 - MathJax 1.开发背景目前在使用vue+elementui做一个考试管理系统,在做学生考试页面时需要用到数学公式,但是后台解析出来后不是图片,而且如果是图片的话放在 ...
vue中enter回车键事件
项目中在搜索商品时,在没有搜索按钮的情况下,刚开始是写的当用户输入完成后,input框失去焦点blur事件处理,产品提议用户输入后,按enter回车键返回搜索结果. vue中失去焦点事件写法:@blu ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...

Vue中textarea的使用：

1、禁止textarea禁止拉伸(拖拽)和编辑样式：

2、Vue：

Vue中textarea的使用：相关推荐

最新文章

热门文章