在开发页面时,比如就一个页面,需要切换语言的元素并不多时,我们就不必从外部引入各种插件,包,直接在项目内实现语言切换,以vue项目为例,下面为具体实现过程

写入中英文数据

在vue中,把要展示的中英文数据写在data中,以下为页面代码,以及要写入的数据

  <template>
  <div class="index-wrapper">
    <div class="ink-header">
      <img class="logo" src="@/assets/logo3.jpg" />
      <div class="header-right">
        <div class="explore">
          <div class="title">{{ texts[currentLanguage].title }}</div>
          <div class="underline"></div>
        </div>
        <div class="lang">
          <div :class="{ cn: true, blue: currentLanguage === 'cn' }" @click="changeLang('cn')">简</div>
          <div :class="{ en: true, blue: currentLanguage === 'en' }" @click="changeLang('en')">En</div>
        </div>
        <div class="login" @click="toLogin" ref="login">
          {{ texts[currentLanguage].login }}
        </div>
      </div>
    </div>
  </div>
</template>
复制代码

上面为页面结构,我们可以看到,所有要展示的文字均已绑定值的形式写出,下面为data中的数据,我们可以给当前页面设置个默认语言,设为currentLanguage: 'cn'中文默认语言

  data() {
    return {
      currentLanguage: "cn",
      texts: {
        cn: {
          title: "探索",
          login: "登录",
        },
        en: {
          title: "Explore",
          login: "Login",
        }
      },
    };
  },
复制代码

文本以一个对象的形式写在数据中,下面最后一步就是给中英文切换按钮添加两个事件。其实事件就是改变currentLanguage的值,即可达到改变语言的目的

HTML:
   <div class="lang">
          <div :class="{ cn: true, blue: currentLanguage === 'cn' }" @click="changeLang('cn')">简</div>
          <div :class="{ en: true, blue: currentLanguage === 'en' }" @click="changeLang('en')">En</div>
   </div>
   
JS:
  changeLang(inlanguage){
      this.currentLanguage = inlanguage
  }
复制代码

在页面元素事件中,可以直接传入当前页面元素的标记当做参数,以达到直接改变currentLanguage的目的,作者由于是个菜鸟,刚开始走了很多弯路,还在页面元素中加入ref,再在事件中获取this.$refs,很麻烦不说,还没有成功,下面为分别点击“简”和“En”的效果图

vue中两个div切换颜色

在开发此项目时,点击切换语言时,被选择的按钮为高亮,首先要给两个div设一个默认颜色,然后判定currentLanguage是否为当前language,如果是的话就添加一个class即可,具体实现代码如下:

   <div class="lang">
          <div :class="{ cn: true, blue: currentLanguage === 'cn' }" @click="changeLang('cn')">简</div>
          <div :class="{ en: true, blue: currentLanguage === 'en' }" @click="changeLang('en')">En</div>
        </div>
复制代码

cn,en初始的style设为一样的,并默认为true,当currentLanguage等于当前选择时,blue为true,即可加上高亮颜色,覆盖初始色,实现点击换色的目的

转载于:https://juejin.im/post/5cff6d09e51d45778f076d13

Logo

前往低代码交流专区

更多推荐