Question

这是我的情况：

我有一个网络应用程序，允许用户更改UI大小。（即小，中或大按钮）

用户可以在运行时动态更改外观。所有文本和表单输入框将被调整大小。

我的项目在Vue.js中。

解决此问题的最佳方法是什么？用户单击时加载不同的CSS？

Answer 1

在用户单击与此类似的按钮时，加载不同的CSS。 Codepen：https://codepen.io/anon/pen/NJEoVM

HTML

    <div id="app" :class="size">
  <div class="text">Text</div>
  <input class="ipt"/><br/><br/> 
  <button class="btn" @click="change('small')">Small</button>
  <button class="btn"  @click="change('medium')">Medium</button>
  <button class="btn"  @click="change('large')">Large</button>
</div>

CSS

    .small .ipt{
  width: 100px;
  height:30px;
}
.small .text{
  font-size: 18px;
}

.medium .ipt{
  width: 300px;
  height:50px;
}
.medium .text{
  font-size: 32px;
}

.large .ipt{
  width: 600px;
  height:100px;
}
.large .text{
  font-size: 64px;
}

JavaScript

    new Vue({
  el: '#app',
  data:()=>({
  size:'small'
}),
methods:{
  change(val){
    this.size = val
  }
}
});

Answer 2

实际上，您可以使用Custom Properties aka CSS variables。

首先，定义按钮CSS样式

   /* button.css */
   #buttonRef {
     --fontSize: 16px;
     font-size: var(--fontSize)
    }

整个流程类似于以下示例

methods: {
  changeButtonSize: function(size, event) {
    event.preventDefault();

    /* size might be either of 's', 'm', 'l' */

    /* let the button ref is stored in refs */

    const buttonRef = this.$refs[“buttonRef”];

    let fontSize = 16;

    switch(size) {
      case 's':
        fontSize = 12;
      case 'm':
        fontSize = 18;
      case 'l':
        fontSize = 22;
    }

    /* dynamically change the value for custom property */
    buttonRef.style.setProperty("--fontSize", fontSize);

  }
}

Answer 3

您可以设置3个课程：

.small {font-size:12px}
.medium {font-size:18px}
.large {font-size:24px}

然后将其添加或删除到您的主父div onClick。

如果您谨慎地设置了元素的字体大小，则必须将这些元素作为目标：

.small .description { font-size:12px }
.small .title{ font-size:16px }

如何在vue.js中动态应用CSS？

3 个答案: