95 lines
2.6 KiB
Vue
95 lines
2.6 KiB
Vue
<!-- src/App.vue -->
|
||
<template>
|
||
<div class="common-layout">
|
||
<el-container>
|
||
<el-header><Header/></el-header>
|
||
<div class="ebody">
|
||
<router-view/>
|
||
</div>
|
||
<el-footer style="padding: 0">
|
||
<Footer/>
|
||
</el-footer>
|
||
</el-container>
|
||
</div>
|
||
<div v-if="false">
|
||
<el-config-provider :locale="elLocale">
|
||
<div>
|
||
<a href="https://vitejs.dev" target="_blank">
|
||
<img src="/vite.svg" class="logo" alt="Vite logo" />
|
||
</a>
|
||
<a href="https://vuejs.org/" target="_blank">
|
||
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
|
||
</a>
|
||
</div>
|
||
|
||
<el-switch
|
||
v-model="langSwitch"
|
||
style="
|
||
--el-switch-on-color: #13ce66;
|
||
--el-switch-off-color: #ff4949;
|
||
margin: 10px auto 20px;
|
||
display: block;
|
||
"
|
||
inline-prompt
|
||
active-text="中"
|
||
inactive-text="英"
|
||
@change="handleChangeI18n"
|
||
/>
|
||
|
||
<el-color-picker v-model="colorPicker" />
|
||
|
||
<!-- <Login /> -->
|
||
<router-view></router-view>
|
||
</el-config-provider>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from "vue";
|
||
// i18n
|
||
import { useI18n } from "vue-i18n";
|
||
// Element Plus全局配置国际化
|
||
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
|
||
import en from "element-plus/dist/locale/en.mjs";
|
||
import Header from "@/components/Header.vue";
|
||
|
||
const { locale } = useI18n({ useScope: "global" }); // vue-i18n提供了一个钩子函数 useI18n(),暴露出locale属性用于切换语言
|
||
if (localStorage.getItem("locale") === undefined ||localStorage.getItem("locale") === null || localStorage.getItem("locale") === '') {
|
||
//默认是中文
|
||
localStorage.setItem("locale",'zh_CN')
|
||
}
|
||
locale.value = localStorage.getItem("locale") || "zh_CN"; // 页面首次加载显示的语言
|
||
const elLocale = computed(() => (locale.value === "zh_CN" ? zhCn : en)); // Element Plus组件国际化
|
||
// 中英文切换开关
|
||
const langSwitch = ref(locale.value === "zh_CN");
|
||
// 中英文切换事件
|
||
const handleChangeI18n = (val) => {
|
||
// console.log(val);
|
||
locale.value = val ? "zh_CN" : "en_US"; // true为中文，false为英文
|
||
localStorage.setItem("locale", locale.value); // 本地缓存当前页面语言
|
||
};
|
||
|
||
// 取色器
|
||
const colorPicker = ref("#409EFF");
|
||
</script>
|
||
|
||
<style scoped>
|
||
.logo {
|
||
height: 6em;
|
||
padding: 1.5em;
|
||
will-change: filter;
|
||
}
|
||
.logo:hover {
|
||
filter: drop-shadow(0 0 2em #646cffaa);
|
||
}
|
||
.logo.vue:hover {
|
||
filter: drop-shadow(0 0 2em #42b883aa);
|
||
}
|
||
|
||
.ebody{
|
||
margin: 0;
|
||
padding: 10px 0;
|
||
width: auto;
|
||
}
|
||
</style>
|