Vue a-textarea输入框更改宽度，且要整个div根据输入框的变化而变化，禁用

最新推荐文章于 2024-05-28 20:40:04 发布

23G

最新推荐文章于 2024-05-28 20:40:04 发布

阅读量1.1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48907405/article/details/131640838

版权

文章讨论了在HTML中使用AntDesign组件时遇到的问题，特别是关于的自动大小调整和CSS样式影响。当textarea发生变化时，下方的div未能随之调整，原因是AntDesign的div样式未正确应用。解决方案涉及对.ant-form-item的CSS样式修改，并根据页面类型动态控制textarea的禁用状态。

摘要由CSDN通过智能技术生成

HTML代码

<a-textarea
    v-model="model.description"
    placeholder="请输入工具描述"
    :auto-size="{ minRows: 1, maxRows: 6 }"
    :style="{ maxWidth: '1085px',width:'1085px'}"
>

CSS样式输入框变化，但是下方div没有动，其实是因为ant组件中的div没有随着动，所以没有变化

.testForm /deep/ .ant-form-item {
  height: auto;
}

根据是详情还是修改控制是否禁用

:disabled="this.$route.params.pageType==='details'

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

23G

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue a-textarea输入框更改宽度，且要整个div根据输入框的变化而变化，禁用

CSS样式输入框变化，但是下方div没有动，其实是因为ant组件中的div没有随着动，所以没有变化。根据是详情还是修改控制是否禁用。
复制链接

扫一扫

vue文本的宽度

qq_38502227的博客

07-16

3565

<template> <div class="text-demo"> <div> <div class="inputBox"> <el-input class="text_input" v-model="input" placeholder="请输入内容"></el-input> ...

vue-input-autowidth:Vue.js指令，用于调整文本输入的宽度以适合其内容

05-02

Vue输入自动宽度 Vue.js指令，用于调整文本输入的宽度以适合其内容。安装 $ yarn add vue-input-autowidth 或者 $ npm install --save vue-input-autowidth 也可以在Unpkg上使用： ://unpkg.com/vue-input-autowidth 用法 import VueInputAutowidth from 'vue-input-autowidth' Vue . use ( VueInputAutowidth ) // and in your template... < input type = "text" v - autowidth = "{maxWidth: '960px', minWidth: '20px', comfortZone: 0}" v - model = "name"

参与评论您还未登录，请先登录后发表或查看评论

Ant Design Vue UI组件中改变textarea的宽度和高度

Bule_BUFF的博客

09-27

6994

textarea给宽度不能改变。只能改变高。给样式也没效果，只能改变高度。后来发现在form表单中可以改变textarea的宽度。 label-col是改变form表单里面的组件距离左边的距离。数值越小距离越近。相当于margin-left。 wrapperCol是改变form表单里面的宽度。由于给了24，上面的Input组件也变宽了。 autosize是改变高度的。我设置的是最小10个高度，没有最大高度 ...

vue+antd实践：在输入框光标处插入内容

05-28

576

介绍了如何在vue+antd项目中，实现在输入框光标处插入内容。

ant-design-vue 文本域＜a-textarea＞＜/a-textarea＞高度自适应

m0_61964123的博客

03-13

1353

表单内的文本域需设定最小高度，随着输入内容的增多，文本域高度由内容撑高，并且要求文本域内部不允许出现滚动条和高度自动变化。

Vue中textarea的使用：

SunPeng的博客

02-14

1万+

Vue中textarea的使用：

Vue下textarea文本框根据内容自适应改变高度

10-20

Vue自定义组件实现文本框根据文本内容自适应高度的效果，解决若输入文本量或显示文本量超过指定行数后，会出现垂直滚动条，但在IE环境下，该滚动条是隐藏的问题。

对Vue- 动态元素属性及v-bind和v-model的区别详解

10-18

在学习Vue框架的过程中，对于动态元素属性的使用以及Vue提供的指令v-bind和v-model的理解是非常关键的。这两个指令在Vue.js中用于数据绑定，但是它们的使用场景和作用有着本质的区别。接下来，我将从多个维度详细...

vue留言板，支持vue2，vue3

06-12

在本文中，我们将深入探讨如何使用Vue.js（支持Vue2和Vue3）构建一个功能完善的留言板系统，结合Element UI库来实现用户友好的界面。Element UI是基于Vue.js的组件库，提供了一系列丰富的UI组件，使得开发更加高效。...

web前段学习心得体会.pdf

12-17

- **上传文件**：`<input type="file">`允许用户选择本地文件，`size`定义输入框宽度。 - **禁用元素**：`disabled`属性可禁用表单元素。 - **提交/重置按钮**：`<input type="submit">`和`<input type="reset">`，`...

【若依vue内容长宽设置】

One_Piece111的博客

09-07

1429

记录将若依vue的内容文本域拓宽长高的方法

auto-textarea:基于Vue的高度自适应文本输入框

05-13

auto-textarea 基于Vue的高度自适应文本输入框 Use Setup (开始) Install auto-textarea (安装) $ npm install auto-textarea --save package.json "auto-textarea": "^1.3.6" Use (如何引入) // 方法一 // import with ES6 import Vue from 'vue' import autoTextarea from 'auto-textarea' // require with Webpack/Node.js var Vue = require('vue') var autoTextarea = require('autoTextarea') // use Vue.use(au

aframe-textarea-component:用于A框架的Textarea组件

05-06

框架文本区域组件用于Textarea组件。例子去做（欢迎拉动请求！）自动换行支持比例字体支持原料药财产描述默认值科尔斯文本区域中的列数 40 行数文本区域中的行数 20 颜色文字颜色黑色的残障人士控件是否可以接收键盘输入错误的背景颜色背景颜色白色的 disabledBackgroundColor 禁用时的背景颜色浅灰色文本文本区域中的默认文本 '' 安装浏览器通过直接包含安装和使用： < head > < title > My A-Frame Scene </ title > < script src =" https://aframe.io/releases/0.7.0/aframe.min.js " > </ script > < script src =" https://unpkg.com/aframe-t

Vue实现input宽度随文字长度自适应操作

10-15

主要介绍了Vue实现input宽度随文字长度自适应操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue结合html实时截取textarea文本

07-12

vue结合html实时截取textarea文本，获取鼠标下标，截取自定义文本，不错的demo

Vue实现动态显示textarea剩余字数

08-30

主要为大家详细介绍了Vue实现动态显示textarea剩余文字数量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

a-textarea 动态输入剩余数量限制组件封装

weixin_41977129的博客

12-27

466

【代码】a-textarea 动态输入剩余数量限制组件封装。

textarea 只显示内容，禁止输入或编辑

热门推荐

P2668239237的博客

08-20

1万+

加个readonly 就OK了的

响应式绑定＜a-textarea＞的内容

qq_27361945的博客

12-27

782

这样，当页面加载时，<a-textarea> 的内容将会显示 content 的初始值。注意：initialValue表示初始值，如果用户不编辑<a-textarea> 的内容，绑定内容将一直跟随改变，一旦对<a-textarea> 的内容进行了编辑，内容就不再跟随绑定变量改变。尝试 <a-textarea>{{插值}}</a-textarea>，实现不了，问ai得知需要使用v-decorator 指令的initialValue 属性。如何绑定数据到textarea内容中？

vue a-input输入框组件中将小数点自动格式化百分比

07-13

在Vue的a-input输入框组件中，如果想要将输入的小数点自动格式化为百分比，可以通过监听输入框的值变化并进行相应的处理。首先，需要在组件中定义一个data属性来保存输入框的值，并创建一个计算属性来将输入的值转换为百分比的格式。例如： ```javascript data() { return { inputValue: '' } }, computed: { formattedValue() { // 将输入的值转换为百分比的格式 if (this.inputValue === '') { return ''; } const value = parseFloat(this.inputValue); if (isNaN(value)) { return ''; } return (value * 100).toFixed(2) + '%'; } } ``` 然后，在模板中将输入框的值绑定到data中的inputValue属性，并将显示的值绑定到计算属性formattedValue。同时，监听输入框的值变化，将输入的值更新到data中的inputValue属性。例如： ```html <template> <a-input v-model="inputValue" @input="handleInput" /> <div>{{ formattedValue }}</div> </template> ``` 最后，实现handleInput方法来监听输入框的值变化，并在输入框失焦时更新输入框的值。例如： ```javascript methods: { handleInput() { // 在输入框失焦时更新输入框的值 this.inputValue = this.inputValue.replace('%', ''); } } ``` 通过以上步骤，就可以实现在Vue的a-input输入框组件中将小数点自动格式化为百分比的功能了。