158 lines
3.7 KiB
Vue
158 lines
3.7 KiB
Vue
<template>
|
|
<a-locale-provider :locale="local">
|
|
<div id="app">
|
|
<van-nav-bar
|
|
v-if="hasNavBar"
|
|
:class="{'white-style': isWhiteNavBar}"
|
|
:title="specialTitle || pageTitle"
|
|
:left-text="hasBack ? $t('back') : ''"
|
|
:left-arrow="hasBack"
|
|
:right-text="isChinese ? $t('chinese') : $t('english')"
|
|
@click-left="handleBack"
|
|
@click-right="handleChangeLang"
|
|
/>
|
|
<div class="scroll-box" :class="{'no-nav-bar': !hasNavBar}">
|
|
<router-view @titleChange="titleChange" />
|
|
</div>
|
|
</div>
|
|
</a-locale-provider>
|
|
</template>
|
|
<script>
|
|
import Vue from 'vue'
|
|
import { Locale } from 'vant'
|
|
import zhCN from 'vant/es/locale/lang/zh-CN'
|
|
import enUS from 'vant/es/locale/lang/en-US'
|
|
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
|
|
import * as dd from 'dingtalk-jsapi' // 解决document.title
|
|
|
|
const ZH = 'zh-CN'
|
|
const EN = 'en-US'
|
|
|
|
export default {
|
|
name: 'App',
|
|
data () {
|
|
return {
|
|
currentLang: ZH,
|
|
local: zh_CN,
|
|
specialTitle: '' // 需要特别处理的标题
|
|
}
|
|
},
|
|
created () {
|
|
// 默认中文
|
|
Vue.ls.set('language', ZH, 7 * 24 * 60 * 60 * 1000)
|
|
Locale.use('zh-CN', zhCN)
|
|
this.$i18n.locale = ZH
|
|
},
|
|
computed: {
|
|
// 是否中文
|
|
isChinese () {
|
|
return this.currentLang === ZH
|
|
},
|
|
// 是否显示导航，打包后默认不显示
|
|
hasNavBar () {
|
|
return process.env.NODE_ENV === 'production' ? false : this.$route.meta.hasNavBar
|
|
},
|
|
// 是否显示返回
|
|
hasBack () {
|
|
return this.$route.meta.hasBack
|
|
},
|
|
// 导航标题（国际化）
|
|
pageTitle () {
|
|
if (!this.$route.meta.pageTitle && !this.$route.meta.title) {
|
|
return ''
|
|
}
|
|
// 路由守卫处理了把taskName赋值给title了
|
|
if (this.$route.meta.title) {
|
|
return this.$route.meta.title
|
|
}
|
|
return this.$t('pageTitle.' + this.$route.meta.pageTitle)
|
|
},
|
|
// 是否白色头部导航
|
|
isWhiteNavBar () {
|
|
return !!this.$route.meta.isWhiteNavBar
|
|
}
|
|
},
|
|
watch: {
|
|
pageTitle (val) {
|
|
this.specialTitle = ''
|
|
this.changeTitle(val)
|
|
}
|
|
},
|
|
methods: {
|
|
titleChange (value) {
|
|
this.specialTitle = value
|
|
this.changeTitle(value)
|
|
},
|
|
// 返回上一层
|
|
handleBack () {
|
|
this.$router.go(-1)
|
|
},
|
|
// 切换语言
|
|
handleChangeLang () {
|
|
// 如果是中文就切换英文，否则切换中文
|
|
const targetLang = this.isChinese ? EN : ZH
|
|
const vantLang = this.isChinese ? enUS : zhCN
|
|
// 更新响应式
|
|
this.currentLang = targetLang
|
|
// 更新本地存储
|
|
Vue.ls.set('language', targetLang, 7 * 24 * 60 * 60 * 1000)
|
|
// 更新vant语言
|
|
Locale.use(targetLang, vantLang)
|
|
// 更新i18n语言
|
|
this.$i18n.locale = targetLang
|
|
},
|
|
changeTitle (title) {
|
|
if (window.navigator.userAgent.includes('DingTalk')) {
|
|
dd.biz.navigation.setTitle({ title })
|
|
} else {
|
|
document.title = title
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '~@assets/less/common.less';
|
|
|
|
/deep/ .van-nav-bar__content {
|
|
height: 0.88rem;
|
|
}
|
|
|
|
/*头部导航字号处理*/
|
|
/deep/ .van-nav-bar__left, /deep/ .van-nav-bar__right, /deep/ .van-nav-bar__arrow, /deep/ .van-nav-bar__title {
|
|
font-size: 0.36rem;
|
|
}
|
|
|
|
/*头部导航固定*/
|
|
.scroll-box {
|
|
height: calc(100vh - 0.88rem);
|
|
overflow: auto;
|
|
}
|
|
|
|
.no-nav-bar {
|
|
height: 100vh;
|
|
}
|
|
|
|
/*处理白色头部导航样式*/
|
|
.white-style {
|
|
background-color: #FFFFFF !important;
|
|
|
|
/deep/ .van-nav-bar__title {
|
|
color: @font-color !important;
|
|
}
|
|
|
|
/deep/ .van-nav-bar__text {
|
|
color: @font-color !important;
|
|
}
|
|
|
|
/deep/ .van-icon {
|
|
color: @font-color !important;
|
|
}
|
|
}
|
|
|
|
/deep/ .van-hairline--bottom::after {
|
|
border: none;
|
|
}
|
|
</style>
|