自留地 VUE相关
实用插件
$t()——i18n (国际化 (Internationalization) 的缩写) 插件的构建1
让我们从设置插件对象开始。建议在一个单独的文件中创建并导出它,以保证更好地管理逻辑,如下所示:
// plugins/i18n.js
export default {
install: (app, options) => {
// 在这里编写插件代码
}
}
我们想让整个应用程序有一个按 key 名翻译文本内容的函数,因此我们将它暴露在 app.config.globalProperties 上。这个函数接收一个以 . 作为分隔符的 key 字符串,用来在用户提供的翻译字典中查找对应语言的文本。
// plugins/i18n.js
export default {
install: (app, options) => {
// 注入一个全局可用的 $translate() 方法
app.config.globalProperties.$translate = (key) => {
// 获取 `options` 对象的深层属性
// 使用 `key` 作为索引
return key.split('.').reduce((o, i) => {
if (o) return o[i]
}, options)
}
}
}
该插件希望用户在使用该插件时通过选项传入一个翻译字典对象,所以应该这样使用:
import i18nPlugin from './plugins/i18n'
app.use(i18nPlugin, {
greetings: {
hello: 'Bonjour!'
}
})
我们的 $translate 函数会接收一个例如 greetings.hello的字符串,在用户提供的翻译字典中查找,并返回翻译得到的值,在这里就是 Bonjour!:
<h1>{{ $translate('greetings.hello') }}</h1>
参考链接: 主要参考来源官网
使用
2022-4-12 项目中结构
app.js中引入
\\app.js
const i18n = new I18n({
locale: 'zh',
messages: {
'zh': require('../../js/lang/zh'),
'en': require('../../js/lang/en')
},
silentTranslationWarn: true
})
引入的两个文件如下
//en.js
export const message = {
name: 'cat',
menuList: {
project: 'catch a cat',
}
//zh.js
export const message = {
name: '猫',
menuList: {
project: '抓一只猫',
}
使用时
<p>{{ $t('message.menuList.project') }}</p>
在通常情况下显示中文“抓一只猫”,但也可以快速翻译成“catch a cat”
更完整地使用参考:i18n国际化使用方法
watch和loading——使用侦听器实现数据加载刷新效果
这里使用的是deep watch(深度监听),可以监听嵌套数据的变更,以下为官网原理
watch 默认是浅层的:被侦听的 property,仅在被赋新值时,才会触发回调函数——而嵌套 property 的变化不会触发。如果想侦听所有嵌套的变更,你需要深层侦听器:
export default {
watch: {
someObject: {
handler(newValue, oldValue) {
// 注意:在嵌套的变更中,
// 只要没有替换对象本身,
// 那么这里的 `newValue` 和 `oldValue` 相同
},
deep: true
}
}
}
谨慎使用:深度侦听需要遍历被侦听对象中的所有嵌套的 property,当用于大型数据结构时,开销很大。因此请只在必要时才使用它,并且要留意性能。
使用
2022-4-13 项目中结构
//直接使用,效果是数据开始加载时loading效果显示,加载完毕loading关闭
watch: {
table: { //table的数据结构 table: { head:{} , data:[] }
handler (newval, oldval) {
this.tableDisplay = 'none'
this.$refs.loading.showLoading('请稍后。。。') //一个css的加载效果
if (newval) {
setTimeout(() => {
this.tableDisplay = 'block'
this.$refs.loading.hideLoading()
}, 0)
}
}
}
}
大概是可以被翻译的意思 ↩︎