Vue2中实现输入中文自动转化为拼音且不带音调的实现方案

npm install pinyin

<template>
  <div>
    <input 
      v-model="chineseInput" 
      placeholder="输入中文"
      @input="convertToPinyin"
    />
    <div>
      <p>中文: {{ chineseInput }}</p>
      <p>拼音: {{ pinyinOutput }}</p>
    </div>
  </div>
</template>
<script>
import pinyin from 'pinyin'
export default {
  data() {
    return {
      chineseInput: '',
      pinyinOutput: ''
    }
  },
  methods: {
    convertToPinyin() {
      // 使用pinyin库转换，设置style为NORMAL去除音调
      const result = pinyin(this.chineseInput, {
        style: pinyin.STYLE_NORMAL, // 不带音调
        heteronym: false // 不启用多音字模式
      })
      // 将二维数组转换为一维字符串
      this.pinyinOutput = result.flat().join('')
    }
  }
}
</script>

// directives/pinyin.js
import pinyin from 'pinyin'
export const pinyinDirective = {
  bind(el, binding, vnode) {
    const vm = vnode.context
    const expression = binding.expression
    el.addEventListener('input', (event) => {
      const result = pinyin(event.target.value, {
        style: pinyin.STYLE_NORMAL
      })
      const pinyinText = result.flat().join('')
      // 更新绑定的数据
      vm[expression] = pinyinText
    })
  }
}
// 在main.js中注册全局指令
import Vue from 'vue'
import { pinyinDirective } from './directives/pinyin'
Vue.directive('pinyin', pinyinDirective)

<template>
  <div>
    <input v-model="chineseText" placeholder="输入中文" />
    <input v-pinyin="pinyinText" placeholder="这里显示拼音" />
    <p>拼音结果: {{ pinyinText }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chineseText: '',
      pinyinText: ''
    }
  }
}
</script>

<template>
  <div>
    <input v-model="chineseInput" placeholder="输入中文" />
    <p>拼音: {{ pinyinResult }}</p>
  </div>
</template>
<script>
import pinyin from 'pinyin'
export default {
  data() {
    return {
      chineseInput: ''
    }
  },
  computed: {
    pinyinResult() {
      if (!this.chineseInput) return ''
      const result = pinyin(this.chineseInput, {
        style: pinyin.STYLE_NORMAL
      })
      return result.flat().join('')
    }
  }
}
</script>

<template>
  <div>
    <input 
      v-model="chineseInput" 
      placeholder="输入中文"
      @input="debouncedConvertPinyin"
    />
    <p>拼音: {{ pinyinOutput }}</p>
  </div>
</template>
<script>
import pinyin from 'pinyin'
export default {
  data() {
    return {
      chineseInput: '',
      pinyinOutput: '',
      timeout: null
    }
  },
  methods: {
    convertToPinyin() {
      const result = pinyin(this.chineseInput, {
        style: pinyin.STYLE_NORMAL
      })
      this.pinyinOutput = result.flat().join('')
    },
    debouncedConvertPinyin() {
      // 防抖处理，避免频繁转换
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.convertToPinyin()
      }, 300)
    }
  },
  beforeDestroy() {
    clearTimeout(this.timeout)
  }
}
</script>

npm install tiny-pinyin

<script>
import { pinyin } from 'tiny-pinyin'
export default {
  methods: {
    convertToPinyin(text) {
      return pinyin(text, { toneType: 'none' }) // 不带音调
    }
  }
}
</script>