使用el-row让文字水平居中且根据textarea拉伸位置不改变

原创已于 2023-12-15 14:14:10 修改 · 838 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2023-12-15 14:11:25 首次发布

文章介绍了如何在ElementUI中使用el-row组件结合flex布局，使文字水平居中并确保textarea的高度自适应。通过添加特定CSS样式，解决了传统方法无法实现的随textarea拉伸的问题。

使用el-row让文字水平居中且根据textarea拉伸位置不改变

el-row是element的分栏布局方式
话不多说看代码：

 <el-row :gutter="0" type="flex" align="middle">
    <el-col :span="3">
       <el-card shadow="hover" >
           ******
       </el-card>
       </el-col>
       <el-col :span="9">
         <el-input style="width:100%" v-model="****.*****" readonly placeholder="****" class="inputstyle"></el-input>
       </el-col>
</el-row>

添加 **type=“flex” align=“middle”**两行代码效果图：
在这里插入图片描述
所以我们不能使用这种方法、正确的方式是。直接上代码：

/*使用felx布局来解决这个问题*/
<el-row :gutter="0" >
  <el-col :span="3">
    <el-card shadow="hover" class="cardstyle_col">
      ****
    </el-card>
    </el-col>
    <el-col :span="21">
      <el-input type="textarea" v-model="****.****" clearable readonly class="textareastyle" placeholder="placeholder"></el-input>
    </el-col>
</el-row>

/*样式*/
.textareastyle {
        display: inline-block; /*行内元素使用flex布局*/
        width: 100%;
        line-height: 35px;
        font-size: 12px;
        resize: none;
    }
.cardstyle_col {
        text-align: center;
        background-color: #F8F8F9;
        height: 100%;
        border-radius: 4px;
        line-height: 100%;
        width: 100%;
        vertical-align: middle;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }