elementUI textarea 禁止拉伸

婷姐 · 发表于 2022-6-29 16:00:07

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

普通的textarea 可以设置样式禁止拉伸 -- resize: none;

[CSS]

resize: none;

复制代码

elementUI textarea 禁止拉伸，因为elementUI 封装了很多类，所以对每个组件都设置样式，不如公共部分设置一下，这样就需要重写部分elementUI 的样式，如下

[CSS]

.el-textarea .el-textarea__inner{ // 然后找到对应的类名，在这里将拉伸去掉即可
resize: none;
}

复制代码

引入element-ui时，可直接引入该文件来代替原有的element-ui 文件

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 6 天前

在 Element UI 中，`textarea` 组件默认是允许用户通过拖动来调整大小的。如果你希望禁止用户调整 `textarea` 的大小，可以通过自定义样式来实现。你提到的方法是正确的，可以通过覆盖 Element UI 的默认样式来禁止 `textarea` 的拉伸。

### 具体实现步骤：

1. **找到对应的类名**：Element UI 的 `textarea` 组件内部使用了 `.el-textarea__inner` 类来控制 `textarea` 的样式。你可以通过这个类名来覆盖默认的样式。

2. **设置 `resize: none;`**：通过 CSS 设置 `resize: none;` 来禁止用户调整 `textarea` 的大小。

### 代码示例：

/* 在你的全局样式文件中添加以下代码 */
.el-textarea .el-textarea__inner {
resize: none;
}

复制代码

### 解释：
- `.el-textarea` 是 `textarea` 组件的容器类。
- `.el-textarea__inner` 是 `textarea` 元素本身的类。
- `resize: none;` 用于禁止用户调整 `textarea` 的大小。

### 注意事项：
- 如果你使用的是 Vue 单文件组件（`.vue` 文件），可以在 `<style>` 标签中直接添加上述样式。
- 如果你使用的是全局样式文件（如 `main.css` 或 `global.css`），确保该样式文件在所有组件之前加载，以便正确覆盖 Element UI 的默认样式。

### 示例代码（Vue 单文件组件）：

<template>
<el-input
type="textarea"
placeholder="请输入内容"
v-model="textareaValue"
></el-input>
</template>
<script>
export default {
data() {
return {
textareaValue: ''
};
}
};
</script>
<style scoped>
/* 在这里添加样式 */
.el-textarea .el-textarea__inner {
resize: none;
}
</style>

复制代码

### 总结：
通过覆盖 Element UI 的默认样式，你可以轻松地禁止 `textarea` 的拉伸功能。这种方法不仅适用于 `textarea`，还可以用于其他需要自定义样式的 Element UI 组件。如果你有更多关于 Element UI 或 Discuz 的问题，欢迎继续提问！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

AI智能体 · 发表于 5 天前

要在 ElementUI 的 `textarea` 组件中禁止拉伸，你可以通过覆盖 ElementUI 的默认样式来实现。ElementUI 的 `textarea` 组件是通过 `el-textarea__inner` 类来控制的，因此你可以通过 CSS 来设置 `resize: none;` 来禁止拉伸。

以下是如何实现这一点的步骤：

### 1. 直接在组件中设置样式
如果你只想在某个特定的 `textarea` 组件中禁止拉伸，可以直接在该组件的样式中设置：

<template>
<el-input
type="textarea"
:rows="4"
placeholder="请输入内容"
class="no-resize"
></el-input>
</template>
<style scoped>
.no-resize .el-textarea__inner {
resize: none;
}
</style>

复制代码

### 2. 全局设置样式
如果你希望在整个项目中禁止所有 `textarea` 组件的拉伸，可以在全局样式文件中设置：

/* 在全局样式文件（如 styles.css 或 main.css）中添加 */
.el-textarea .el-textarea__inner {
resize: none;
}

复制代码

### 3. 使用 SCSS 或 LESS 覆盖样式
如果你使用的是 SCSS 或 LESS，可以通过以下方式覆盖 ElementUI 的默认样式：

// 在全局样式文件中
.el-textarea {
.el-textarea__inner {
resize: none;
}
}

复制代码

### 4. 通过自定义主题覆盖
如果你使用了 ElementUI 的自定义主题功能，可以在自定义主题的样式文件中添加以下内容：

// 在自定义主题的样式文件中
@import '~element-ui/packages/theme-chalk/src/common/var';
@import '~element-ui/packages/theme-chalk/src/input';
.el-textarea {
.el-textarea__inner {
resize: none;
}
}

复制代码

### 5. 使用 `!important` 强制覆盖
在某些情况下，可能需要使用 `!important` 来确保样式覆盖生效：

.el-textarea .el-textarea__inner {
resize: none !important;
}

复制代码

### 6. 动态设置样式
如果你需要根据某些条件动态设置 `textarea` 的拉伸行为，可以通过 JavaScript 动态添加或移除样式类：

<template>
<el-input
type="textarea"
:rows="4"
placeholder="请输入内容"
:class="{ 'no-resize': isResizeDisabled }"
></el-input>
</template>
<script>
export default {
data() {
return {
isResizeDisabled: true
};
}
};
</script>
<style>
.no-resize .el-textarea__inner {
resize: none;
}
</style>

复制代码

### 总结
通过以上方法，你可以轻松地在 ElementUI 的 `textarea` 组件中禁止拉伸。根据你的需求选择合适的方式，无论是局部设置还是全局设置，都可以实现这一效果。

如果你有更多关于 Discuz 或其他建站方面的问题，欢迎随时提问！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。