vue+ant 多语言切换实现单独小范围修改样式

最新推荐文章于 2024-10-27 17:15:51 发布

Bonjours

最新推荐文章于 2024-10-27 17:15:51 发布

阅读量556

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Bonjours/article/details/123223132

版权

前端专栏收录该内容

27 篇文章

订阅专栏

ant

className={!getLang().ISZHCN ? styles.english : ''}

className={`${styles.swiper_item} ${styles[getLang().lang]}`}

className={`${styles.textMedium} ${!getLang().ISZHCN ? styles.english : ''}`}

<div className={`${styles.logo} ${!getLang().ISZHCN ? styles.english : ''}`}>
    <img src={require(`@/img/${lang}/logo.png`)} alt="" className={styles.logo} />
</div>

 .logo {
    width: 130px;
    &.english {
      width: 170px;
    }
  }

VUE

:class="{'english':!$ISZHCN}"

<ul :class="{'english':!$ISZHCN}"></ul>

ul {
      display: grid;
      grid-template-columns: 24% 24% 24% 24%;
      grid-gap: 20px 20px;
      margin-bottom: 30px;
      &.english{
        grid-template-columns: 32% 32% 32%;
      }
</ul>