Element-plus el-tabs标签页一会撑开一会又缩小

hanpiadong

已于 2023-02-17 18:40:00 修改

阅读量656

点赞数

文章标签： javascript 前端 vue.js

于 2023-02-17 17:06:35 首次发布

本文链接：https://blog.csdn.net/hanpiadong/article/details/129090398

版权

Element-plus el-tabs标签页一会撑开一会又缩小

第一个默认标签

在这里插入图片描述
其他三个标签都是这样变小

<!--tabs标签-->
    <el-tabs v-model="gamedetailName" class="gamedetail-tabs" :stretch=true>
      <!--详情-->
      <el-tab-pane label="详情" name="first">
        <h2>简介</h2>
        <p class="gamedetail" ref="gamedetailtext1">2</p>
        <h2>评价</h2>
        <el-carousel :interval="4000" type="card" height="200px" width="300px">
          <el-carousel-item v-for="item in evaluationArray" :key="item">
            <h3 text="2xl" justify="center">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
        <h2>论坛</h2>
      </el-tab-pane>

      <!--评价-->
      <el-tab-pane label="评价" name="second">
        <!--发表评价-->
        <el-button @click="dialogEvaluateVisible = true">
          <el-icon>
            <Star />
          </el-icon> 写评价
        </el-button>
        <!--全部评价-->
        <h3>全部评价</h3>
        <el-carousel :interval="4000" type="card" height="200px" width="300px">
          <el-carousel-item v-for="item in evaluationArray" :key="item">
            <h3 text="2xl" justify="center">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
        <!--罗列评价-->
        <el-dialog v-model="dialogEvaluateVisible" title="发表评价">
          <el-form>
            <el-input v-model="evaluationInput" type="textarea" :rows="3" :autosize="{ minRows: 3, maxRows: 5 }"
              placeholder="你会安利其他人玩这款游戏吗？从你的游戏体验中，有什么可以给大家参考？" />
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogEvaluateVisible = false">Cancel</el-button>
              <el-button @click="writeEvaluation">Confirm</el-button>
            </span>
          </template>
        </el-dialog>
      </el-tab-pane>

      <el-tab-pane label="攻略" name="third">攻略</el-tab-pane>
      <el-tab-pane label="论坛" name="fourth">论坛</el-tab-pane>
    </el-tabs>