Vue项目改变div大小 实现图标大小选择功能

vue项目 实现 自由选择 系统图标大小

我想实现一种选择图标大小，然后改变图标的size,项目：Vue+elment-ui:

HTML

     <el-dropdown @command="chooseSize">
                <el-button size="mini">
                  图标大小
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="small">小图标</el-dropdown-item>
                  <el-dropdown-item command="medium">中图标</el-dropdown-item>
                  <el-dropdown-item command="big">大图标</el-dropdown-item>
                </el-dropdown-menu>
     </el-dropdown>

JS

     chooseSize(command) {
          var document_cards = document.getElementsByClassName("document_card");
          var cardImages = document.getElementsByClassName("cardImage");
          for (var i = 0; i < document_cards.length; i++) {
            if (command == "small") {
              document_cards[i].style.width = 101 + "px";
              document_cards[i].style.height = 140 + "px";
              cardImages[i].style.width = 101 + "px";
              cardImages[i].style.height = 101 + "px";
            } else if (command == "medium") {
              document_cards[i].style.width = 151 + "px";
              document_cards[i].style.height = 195 + "px";
              cardImages[i].style.width = 150 + "px";
              cardImages[i].style.height = 150 + "px";
            } else if (command == "big") {
              document_cards[i].style.width = 202.5 + "px";
              document_cards[i].style.height = 260 + "px";
              cardImages[i].style.width = 202 + "px";
              cardImages[i].style.height = 202 + "px";
            }
          }
        }

CSS

    document_card {
      width: 150px;
      height: 195px;
      max-height: 260px;
      margin-right: 10px;
      margin-bottom: 10px;
      cursor: pointer;
    }
    .cardImage {
      width: 150px;
      height: 150px;
      display: block;
      margin: 0 auto;
    }

现实结果：

虽然点击后能后改变大小，但是跳转到其他页面后再回来就恢复原来大小（中等）。
而且改变的卡片数量一直不固定，都是之前有的，而不是接下来要渲染的。
不管如何改变函数的执行顺序都不能解决这个问题

经过和同学一晚上的讨论研究，觉得是js异步和渲染虚拟dom的问题，具体没有深究，下面写出我的解决方案：

用v-bind:style解决 css样式渲染错误

HTML:(没变)

    <el-dropdown @command="chooseSize">
            <el-button size="mini">
              图标大小
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="small">小图标</el-dropdown-item>
              <el-dropdown-item command="medium">中图标</el-dropdown-item>
              <el-dropdown-item command="big">大图标</el-dropdown-item>
            </el-dropdown-menu>
    </el-dropdown>

目标div1

    class="document_card"
    :style="styleObject"

目标div2

    class="cardImage"
    :style="styleCardImage"

JS：在data()中添加样式数据

扫描二维码关注公众号，回复： 9369822 查看本文章

    export default {
      name: "Doc",
      data() {
        return {
        //目标div1
          styleCardImages: {
            width: "150px",
            height: "150px"
          },
          //目标div2
          styleObject: {
            width: "151px",
            height: "195px"
          }
        };
      },

修改之前的chooseSize(command)函数，如下 ：

       chooseSize(command) {
          this.cardSize = command;
          if (this.cardSize === "small") {
            this.styleObject.width = "101px";
            this.styleObject.height = "140px";
            this.styleCardImages.width = "101px";
            this.styleCardImages.height = "101px";
          } else if (this.cardSize === "medium") {
            this.styleObject.width = "151px";
            this.styleObject.height = "195px";
            this.styleCardImages.width = "150px";
            this.styleCardImages.height = "150px";
          } else if (this.cardSize === "big") {
            this.styleObject.width = "202.5px";
            this.styleObject.height = "260px";
            this.styleCardImages.width = "202px";
            this.styleCardImages.height = "202px";
          }
        }

最终结果：

我的目标有两个div,如果你要用的话，删掉一些代码就行。