1.定義全域性指令transliteration.js

import { transliterate as tr, slugify } from 'transliteration'  
export default {
  mounted(el) {
    const nameEl =  el.querySelector('.nameEl>input') //中文文字框
    const codeEl =  el.querySelector('.codeEl>input') //英文文字框
    let isFirstInput = true
    nameEl.addEventListener(
 
'keyup', () => {
      const isEmpty = !codeEl.value 
      //僅當code值為空時，才進行自動翻譯。如果code值已填寫，不翻譯
      if (isEmpty || !isFirstInput) {
          isFirstInput = false
          codeEl.value = slugify(nameEl.value, { separator: '_' }) //翻譯後的英文字串
          //自定義事件：觸發被翻譯欄位的檢視重新整理
          const inputEvt = document.createEvent("HTMLEvents")
          inputEvt.initEvent(
 
'input',false,false)
          codeEl.dispatchEvent(inputEvt)
      }
    })
  }
}

注意點：

1、在引入transliteration之前需要先安裝外掛：npm install transliteration --save

2、音譯外掛使用方法參考https://github.com/dzcpy/transliteration

2.在main.js中註冊指令

//引入自定義指令
import transliteration from '@/directive/transliteration'

const app: ReturnType
 
<typeof createApp> = createApp(App) //相當於Vue
app.directive('transliteration',transliteration) //註冊自定義指令

//下面的是路由以及store等的註冊
initElement(app)
app.config.globalProperties.$ELEMENT = {'size': 'small'}
app
  .use(router)
  .use(store, key)
  .mount('#app')

3.在頁面元件中使用v-transliteration