vue中scss结合dom进行动态传参的技巧

  1. 在vue中,有时需要根据dom中不同的参数,css中的属性使用不同的值,如果根据不同的条件绑定不同的类名,会显得小题大做,也感觉代码比较臃肿。例如,我们要封装一些扩展性和定制化比较强的组件,通过简单的传参就可以使代码更清晰和灵活。

对于一般的传参,使用var接收,如:

<div :style="{'--color':this.list.length>3?'#88d78e':'#fd9890'}" class="alarm-content">
  {{content}}
</div>

.alarm-content{
  background-color: var(--color);
}

2. 有时候,使用伪类如“after”“before”等,里面的内容content要根据要求进行动态改变,如:对伪类content中的内容使用国际化,则就需要将content的内容设为变量,并将变量绑定到dom中以动态传参形式实现等。

对于特殊形势下的动态传参,使用attr接收,如:

<div class="node-arrival" toa="离开"></div>
.node-arrival {
  &::after {
    content: attr(toa);
  }
}

3. 有时候,由于一些业务上的限制,如该项目不是vue+scss形式,只是简单的html+css形式的页面,为了语义化清晰方便后期维护,那么以上方式可能有些不太合适,单独看html文件完全不知道是什么内容。这时候我们可以使用给dom添加属性的方式,增加可读性。

<h2 data-lang-ch="标题" data-lang-en="title"></h2>
<h3 data-lang-ch="段落" data-lang-en="paragraph"></h3>
<h4 data-lang-ch="描述" data-lang-en="summary"></h4>

/**ch**/
html:lang(ch) [data-lang-ch]:after{
  content: attr(data-lang-ch);
}
/**en**/
html:lang(en) [data-lang-en]:after{
    content: attr(data-lang-en);
}

很简单,各自取各自对应的属性即可,需要什么语言直接在html添加属性即可,也不需要什么js。结合css地址选择器,可以很轻松的实现根据地址来适配各种语言。

<body>
    <div id="ch"></div>
    <div id="en"></div>
    <h2 data-lang-ch="标题" data-lang-en="title"></h2>
    <h3 data-lang-ch="段落" data-lang-en="paragraph"></h3>
    <h4 data-lang-ch="描述" data-lang-en="summary"></h4>

    <a href="#ch">中文</a>
    <a href="#en">英文</a>
</body>

[data-lang-ch]:after,
#ch:target~[data-lang-ch]:after{
    content: attr(data-lang-ch);
}
#en:target~[data-lang-en]:after{
    content: attr(data-lang-en);
}

但是该方式的缺点也很明显,虽然以上跳过js实现了国际化需求,语义化也清晰,但是如果说是一些动态内容,比如时间,就没法放在属性里面的,这种情况就只能通过js来处理了,实属无奈。另外如果页面复杂,或者需适配语言太多,那就意味着属性要写很多,显得很臃肿。

以上主要探讨了两种完全不同的国际化方式,前两种主流,最后一种完全属于另类,但还是有用武之地的。如果你的页面不太复杂,完全可以采取这种方式。实际业务中可以根据需要和实际场景选择合适的方式。

原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/1998

发表评论

邮箱地址不会被公开。 必填项已用*标注