自留地 VUE相关

实用插件

$t()——i18n (国际化 (Internationalization) 的缩写) 插件的构建¹

让我们从设置插件对象开始。建议在一个单独的文件中创建并导出它，以保证更好地管理逻辑，如下所示：

// 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)
        }
      }
    }
}

---

1. 大概是可以被翻译的意思 ↩︎