lookcommon_course/pages_tool/pages/pinyin/index2.vue

<template>
    <!-- index.wxml -->

    <view class="container">
        <view class="info-container">
            <text class="pinyin-text">{{ pinyinText }}</text>
            <input ref="inp" id="inp" :value="inputValue" :focus="isFocus" maxlength="1" @input="onInput" placeholder=" " />
            <text class="tip">输入汉字</text>
        </view>
    </view>
</template>

<script>
// index.js
var app = getApp();
var pinyin = require('./pinyin.js');
export default {
    data() {
        return {
            pinyinText: '',
            inputValue: '',
            isFocus: false
        };
    },
    onLoad: function () {
        // 保证进入页面时输入框为空
        this.inputValue = '';
        this.pinyinText = '';
    },
    onReady: function () {
        // H5端用ref聚焦，微信小程序端用布尔focus控制
        // #ifdef H5
        this.$nextTick(() => {
            if (this.$refs.inp && typeof this.$refs.inp.focus === 'function') {
                this.$refs.inp.focus();
            }
        });
        // #endif
        // #ifdef MP-WEIXIN
        this.$nextTick(() => {
            this.isFocus = true;
        });
        // #endif
    },
    methods: {
        // 事件处理函数
        onInput: function (e) {
            const val = e && e.detail ? e.detail.value : '';
            const char = typeof val === 'string' ? val.trim() : '';
            this.inputValue = char;
            if (char.length == 1) {
                if (pinyin.hasOwnProperty(char)) {
                    this.pinyinText = pinyin[char].join(', ');
                } else {
                    this.pinyinText = '找不到，^_^';
                }
            } else {
                this.pinyinText = '';
            }
        }
    }
};
</script>
<style>
@import './index.css';
</style>