vue使用‘:style‘控制动态width样式!

最新推荐文章于 2024-07-25 09:24:40 发布

Tang_Monk

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量969

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_58647634/article/details/132229751

版权

示例代码如下

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <!-- 整个页面 -->
  <div class="index">
    <!-- 左导航 -->
    <div class="leftNav" :style="{ width: leftNavWidth ,visibility: show ,transition: transitionParam}">
    </div>

    <!-- 主界面 -->
    <div class="mainSection" :style="{ width: mainSectionWidth,transition: transitionParam}"></div>
    <!-- mainSection -->
  </div>
  <!-- index -->
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "mainSection",
  data() {
    return {
      //接收从Login页传来的登录用户名
      user_name: localStorage.getItem('user_name'),
      //设置导航和主界面默认宽高
      leftNavWidth: "16%",
      mainSectionWidth: "84%",
      show:"visible",
      //过度0.5秒
      transitionParam:"width 0.5s ease"
    };
  },
  methods:{
    //控制导航和主界面的宽和高
    controlWidth() {
      console.log("已进入控制宽度方法");
      this.leftNavWidth = (this.leftNavWidth === '16%' ? '0%' : '16%');
      //控制左导航的显示与隐藏  同时设置mainSectionWidth的宽和高
      if(this.leftNavWidth === '16%') {
        this.show = 'visible'
        this.mainSectionWidth = '84%'
      }
      else if(this.leftNavWidth === '0%') {
        this.show = 'hidden'
        this.mainSectionWidth = '100%'
      }
    }
  }
};
</script>

<style>
</style>