致力于提供有竞争力的软件解决方案和服务,德尚网络欢迎您!
技术/产品咨询
技术/产品咨询
    • - 微信扫一扫 -

      QQ:181814630

      电话:15116362044

DSKMS演示
  • DSKMS(内容付费系统)演示地址及账号
    DSKMS交流群:553212556
    演示角色 演示地址 账号 密码
    后台PC端 点击进入 dskms 123456
    用户PC端 点击进入 buyer 123456
    机构PC端 点击进入 buyer 123456
    用户手机端 点击进入 buyer 123456
    机构手机端 点击进入 buyer 123456
    DSKMS(内容付费系统)uniapp移动端二维码演示地址
    • 用户端

    • 机构端

    • 用户端安卓APP
      (使用浏览器打开)

    • 商家端安卓APP
      (使用浏览器打开)

DSShop演示
  • DSShop(单店铺系统)演示地址及账号
    DSShop交流群:549770277
    演示角色 演示地址 账号 密码
    后台PC端 点击进入 dsshop 123456
    用户PC端 点击进入 buyer 123456
    手机端 点击进入 buyer 123456
    DSShop(单店铺系统)uniapp版移动端二维码演示地址
    • 用户端

    • 用户手机端安卓APP
      (使用浏览器打开)

DSESN演示
  • DSESN(社区团购系统)uniapp版演示地址及账号
    dsesn交流群:553212556
    演示角色 演示地址 账号 密码
    管理员后台 点击进入 dsesn 123456
    供应商后台 点击进入 buyer 123456
    用户端 点击进入 test001 123456
    仓库端 点击进入 13700000000 123456
    团长端 点击进入 13800000000 123456
    DSESN(社区团购系统))uniapp移动端二维码演示地址
    • 用户端

    • 仓库端

    • 团长端

DSO2O演示
  • DSO2O(外卖/上门服务/跑腿系统)演示地址及账号
    DSO2O交流群:549770277
    演示角色 演示地址 账号 密码
    后台PC端 点击进入 dso2o 123456
    用户PC端 点击进入 buyer 123456
    卖家PC端 点击进入 buyer 123456
    服务机构PC端 点击进入 后台添加
    用户手机端 点击进入 buyer 123456
    商家手机端 点击进入 buyer 123456
    配送员 点击进入 测试配送员 123456
    服务机构手机端 点击进入 test1 123456
    DSO2O(外卖/上门服务/跑腿系统)uniapp移动端二维码演示地址
    • 用户端

    • 商家端

    • 配送员管理端

    • 服务机构端

    • 用户端安卓APP
      (使用浏览器打开)

    • 商家端安卓APP
      (使用浏览器打开)

    • 配送员管理安卓APP
      (使用浏览器打开)

    • 服务机构安卓APP
      (使用浏览器打开)

DSMall演示
  • DSMall(多店铺商城系统)演示地址及账号
    DSMall交流群:10235778
    演示角色 演示地址 账号 密码
    后台PC端 点击进入 dsmall 123456
    用户PC端 点击进入 buyer 123456
    商家PC端 点击进入 buyer 123456
    用户手机端 点击进入 buyer 123456
    商家手机端 点击进入 buyer 123456
    门店手机端 点击进入 seller 123456
    DSMall(多店铺商城系统)uniapp移动端二维码演示地址
    • 用户端

    • 商家端

    • 门店端

    • 用户安卓APP
      (使用浏览器打开)

    • 商家安卓APP
      (使用浏览器打开)

    • 门店安卓APP
      (使用浏览器打开)

多语言切换功能

1.安装vue-i18n    

npm install vue-i18n

可参考vue-i18n官网文档:http://kazupon.github.io/vue-i18n/


2.main.js中引入:

import Vue from 'vue'

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: localStorage.getItem('locale') || 'zh-CN', // 通过切换locale的值来实现语言切换,this.$i18n.locale
  messages: {
    'zh-CN': require('./lang/zh'), // 中文语言包
    'en-US': require('./lang/en') // 英文语言包
  }
})
new Vue({
  el: '#app',
  i18n, //新增
  router,
  store,
  components: { App },
  template: ''
})


3.新增语言包

lang/zh.js

export const lang = {
  menu: [
    {name: '首页', path: ''},
    {name: '商品分类', path: ''},
    {name: '促销中心', path: ''},
    {name: '用户中心', path: ''},
    {name: '文章公告', path: ''}
  ],
  login: '登录',
  register: '注册',
  logout: '退出'
}


lang/en.js

export const lang = {
  menu: [
    {name: 'HomePage', path: ''},
    {name: 'HomeCategory', path: ''},
    {name: 'HomePro', path: ''},
    {name: 'HomeUser', path: ''},
    {name: 'HomeArticle', path: ''}
  ],
  login: 'login',
  register: 'register',
  logout: 'logout'
}


4.语言切换

this.$i18n.locale = 'en-US'// 切换成英文
this.$i18n.locale = 'zh-CN'// 切换成中文

实用中可以参考以下方法进行改进

@click="changeLang"

changeLang() {
       this.lang = localStorage.getItem('locale') || 'zh-CN';
       
       if ( this.lang === 'zh-CN' ) {
          this.lang = 'en-US';
          this.$i18n.locale = this.lang;
       } else {
          this.lang = 'zh-CN';
          this.$i18n.locale = this.lang;
       }
       localStorage.setItem('locale', this.lang);
    },


4.具体呈现



{{ $t('lang.welcome') }}

:title="$t('lang.new_arrivals')"

v-for="(item,index) in $t('lang.menu')"


例:




有不清楚请咨询客服


上一篇:Vue3.0安装

下一篇:暂时没有了