Vue前端之路(二)---组件库element

目录

 

序言

1.element集成

1.1.npm安装element

1.2.完整引入element

2.element国际化实现

2.1.准备自定义内容文件

2.2.兼容 vue-i18n@5.x配置

2.3.配置文件绑定到vue实例中

2.4.测试切换中英文功能

2.5.国际化的使用

2.5.1.template中的常量格式

2.5.2.template中组件属性的格式

2.5.3.js中的使用

---

序言

网上各式各样的组件库，眼花缭乱，这里选择了饿了吗推出的element，网站地址：https://element.eleme.cn/#/zh-CN

1.element集成

1.1.npm安装element

打开vscode和项目，在终端下执行安装命令，命令如下：

npm i element-ui -S

1.2.完整引入element

在 main.js 中写入以下内容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

2.element国际化实现

在步骤上分三步，这里以中英文为例。

2.1.准备自定义内容文件

在asset文件夹下，新建一个lang文件夹，在lang文件夹下新建两个js文件，en.js和zh.js，作为自定义国际化内容文件

举例说明：

en.js文件内容：

const en = {
  login: {
    "logIn":"Log In",
  }
}

export default en;

zh.js文件内容：

const zh= {
  login: {
    "logIn":"登 录",
  }
}

export default zh;

2.2.兼容 vue-i18n@5.x配置

在src目录下，新建i18n文件夹，在i18n文件夹下新建index.js文件，作为Element 兼容 vue-i18n@5.x，搭配使用能更方便地实现多语言切换的配置文件

内容如下：

import Vue from "vue";
import VueI18n from "vue-i18n";
import locale from "element-ui/lib/locale";
import elementEnLocale from "element-ui/lib/locale/lang/en";
import elementZhLocale from "element-ui/lib/locale/lang/zh-CN";
import enLocale from "@/assets/lang/en";
import zhLocale from "@/assets/lang/zh";

// 引入工具函数
import { getStorage } from "@/utils/global";

//vue 使用VueI18n模块
Vue.use(VueI18n);

//获取当前语言（初始化时localStorage里没有存语言，默认为浏览器当前的语言） getBrowserLang();
const lang = getStorage("lang") || "en";

//引入本地
const messages = {
    en: {
        ...enLocale,//es6拓展运算符，解析出每一个对象
        ...elementEnLocale
    },
    zh: {
        ...zhLocale,
        ...elementZhLocale
    }
};

//创建国际化实例
const i18n = new VueI18n({
    locale: lang,
    messages,
    silentFallbackWarn: true,  // 设置为true后，在组件内使用时在浏览器不会报警告
});
locale.i18n((key, value) => i18n.t(key, value));

export default i18n;

工具方法global.js如下：

// 获取localStorage
export const getStorage = function(key) {
    return window.localStorage.getItem(key);
};

// 设置localStorage
export const setStorage = function(key, obj) {
    window.localStorage.setItem(key, obj);
};

// 移除localStorage
export const removeStorage = function(key) {
    window.localStorage.removeItem(key);
};

// 获取浏览器默认语言
export const getBrowserLang = function() {
    let browserLang = navigator.language ? navigator.language: navigator.browserLanguage;
    let defaultBrowserLang = '';
    if (browserLang.toLowerCase() === 'cn' || browserLang.toLowerCase() === 'zh' || browserLang.toLowerCase() === 'zh-cn') {
        defaultBrowserLang = 'zh';
    } else {
        defaultBrowserLang = 'en';
    }
    return defaultBrowserLang;
};

2.3.配置文件绑定到vue实例中

修改main,js，加黑部分是新添加的内容

import i18n from "@/i18n";//国际化
import locale from "element-ui/lib/locale/lang/en";

Vue.use(ElementUI, { locale });

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

2.4.测试切换中英文功能

新建一个index.vue文件

tempate内容如下：

<div class="lang-container">
    <el-dropdown @command="handleSetLang" trigger="click">
        <div class="lang-name-container">
            <div v-for="(lang, i) in langs" :key="`LangActive${i}`" v-show="lang.key === activeLang" class="lang-name">{{ lang.value }}
                <i class="el-icon-arrow-down el-icon--right arrow-down"></i>
            </div>
        </div>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(lang, i) in langs" :key="`Lang${i}`" :command="lang.key">
                <span class="text">{{ lang.value }}</span>
            </el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</div>

js内容如下：

methods: {
    ...mapMutations(
        {
            "setLanguage": "dashboard/setLanguage"
        },
    ),
    //切换语言
    handleSetLang(lang) {
        // 设置i18n.locale 组件库会按照上面的配置使用对应的文案文件
        this.$i18n.locale = lang;
        // 提交mutations
        this.setLanguage(lang);
    },
}

css中内容如下：

.lang-container {
    float: left;
    width: 90px;
    text-align: center;
    .lang-name-container {
        .lang-name {
            height: 30px;
            color:#f3f5f7;
            cursor: pointer;
        }
        .arrow-down {
            height: 30px;
            font-size: 12px;
            cursor: pointer;
        }
    }
}

vuex中内容如下：

// 引入工具函数
import { getStorage,setStorage } from "@/utils/global";

const state = {
    language: getStorage("lang") || "en", // 项目初始化时，默认为浏览器的语言
}

const mutations = {
    setLanguage: (state, language) => {
        state.language = language;
        setStorage("lang", language);
    }
}

const actions = {}

const getters = {
    language: state => state.language,
}

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
};

在store引入配置：

import Vue from "vue";
import Vuex from "vuex";
import dashboard from "./modules/dashboard";

Vue.use(Vuex);

const store = new Vuex.Store({
    modules: {
        dashboard,
    }
});

export default store;

2.5.国际化的使用

主要有三个点：

2.5.1.template中的常量格式

例如：

{{ $t("login.logIn") }}

2.5.2.template中组件属性的格式

例如：

:content="$t('login.logIn')"

2.5.3.js中的使用

需要放在computed才能生效，例如：

computed: {
    menuList: {
        get: function() {
            return [
                {
                    "id": "1",
                    "menuName": this.$t("login.login"),
                    "path": "/dashboard/**/**"
                }
            ];
        },
        set: function(v) {
        }
    }
},

未完待续！

上一章：Vue前端之路(一)---入坑前的准备----https://blog.csdn.net/weixin_42211693/article/details/113992143