element文本域禁止手动拉伸、两种方式、textarea

这篇具有很好参考价值的文章主要介绍了element文本域禁止手动拉伸、两种方式、textarea。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


style方式

html

<el-input
	v-model="content"
	:rows="3"
	class="r_n"
	type="textarea"
	maxlength="40"
	placeholder=""
	style="height: 100%;"
/>

css

style标签定义lang="scss" scoped

::v-deep .r_n {
    .el-textarea__inner {
        resize: none;
    }
}

element自带的禁止拉伸方法

none: 紧致拉伸
both: 两者(纵向横向都可以拉伸)
horizontal: 水平的(横向拉伸)
vertica: 垂直(纵向拉伸)

<el-input
	v-model="content"
	:rows="3"
	resize="none"
	type="textarea"
	maxlength="40"
	placeholder=""
	style="height: 100%;"
/>

建议

建议使用样式实现禁止拉伸,当文本域处于禁止输入状态时,使用element自带的禁止拉伸方式会影响resize的显示。resize在文本域禁止输入状态使用自带的禁止拉伸功能只显示一行,而样式禁止拉伸则能按照resize设置的值显示。文章来源地址https://www.toymoban.com/news/detail-663403.html

到了这里,关于element文本域禁止手动拉伸、两种方式、textarea的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • springboot 集成caffeine单体缓存两种方式及算法简介 (注解/手动)

           Caffeine 是基于 JAVA 8 的高性能缓存库。并且在 spring5 (springboot 2.x) 后,spring 官方放弃了 Guava,而使用了性能更优秀的 Caffeine 作为默认缓存组件。        Caffeine 因为使用了  Window-TinyLFU  缓存淘汰策略,提供了一个 近乎最佳的命中率 。综合了 LRU 和 LFU 算法的长处,

    2024年02月03日
    浏览(43)
  • element ui textarea文本域显示滚动条

    测试报的一个小bug,在这做个记录 效果图: 加之前:鼠标放上去才会显示  加之后:超过直接显示出来  代码:

    2024年02月11日
    浏览(49)
  • element ui 文本域el-textarea的计数限制不遮挡输入的文字

    在我们使用 element-ui 文本域的时候,有时可能会需要计算输入的文字的总长度的功能,此时我们可以使用 el-textarea 自带的 show-word-limit 属性,但是有一点不好的地方就是会遮挡住我们输入的文字,就像下面这样: 我们可以通过修改样式来解决这个问题:  

    2024年02月13日
    浏览(36)
  • vue2创建项目的两种方式,配置路由vue-router,引入element-ui

    提示:vue2依赖node版本8.0以上 使用@vue/cli脚手架vue create创建 使用vue-cli脚手架vue init webpack创建 1、查看nodejs版本 2、全局安装vue脚手架和webpack脚手架 3、新建vue2项目 创建选项除了,Install vue-router??选择是,其他选择的否 4、安装依赖并启动文件 5、预览 6、目录结构 1、如果安

    2024年04月14日
    浏览(43)
  • Nginx或Apache禁止某些IP段访问的两种方法

    修改Nginx配置文件nginx.conf Nginx配置访问IP可以修改nginx.conf文件,只需要在server中添加allow和deny的IP即可,如下: server {     listen       80;     server_name  localhost;     allow all;     deny 123.123.123.123;     error_page   500 502 503 504  /50x.html; }   注意!上面的配置中allow必须在deny的前

    2024年02月03日
    浏览(43)
  • element-ui tab标签禁止切换

    给el-tabs标签设置style=“pointer-events: none;” 注意:每个el-tab-pane标签也要加上style=\\\"pointer-events: auto;\\\"否则各个页面的所有鼠标事件都会失效 HTML JS

    2024年02月11日
    浏览(45)
  • element中table多选功能禁止选择某一项

    element-ui中的table的多选很好用,但是如果其中某一项禁止选择,该怎样操作呢 在官方文档中,有一个这样的属性,可以控制是否禁止选择

    2024年02月13日
    浏览(32)
  • element ui el-date-picker 禁止选择指定日期

    1)禁止选择当天之前的日期 禁止选择包含当天及其之前的日期 2)禁用选择当天之后的日期 禁止选择包含当天及其之后的日期 3)禁止选择自定义加载的日期,比如打开编辑框,禁止选择当前数据回显日期之前的日期 禁止选择之后  禁止选择之前   - 8.64e7 表示可选择当天时

    2024年02月11日
    浏览(178)
  • element-ui表格复选超出数量后剩下的全部禁止选择

    先上效果图   主要是两个方面, 1.单选 2.页面内的全选 单选逻辑简单  全选是无法置灰,只能在事件触发后给出提示信息,跟上篇文章提到的方案一致

    2024年02月12日
    浏览(32)
  • Element-ui upload 手动上传文件

    (随手一发,可以拿过来就用,不做解释看不懂的可以照搬,👇代码可复制👇)    

    2024年02月11日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包