Closed mksasx closed 1 year ago
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<div class="result">{{ result }}</div>
<div class="voice-input-button-wrapper">
<div id="voice"></div>
<voice-input-button
appId=""
apiKey=""
apiSecret=""
v-model="result"
@record="showResult"
@record-start="recordStart"
@record-stop="recordStop"
@record-blank="recordNoResult"
@record-failed="recordFailed"
@record-ready="recordReady"
@record-complete="recordComplete"
interactiveMode="touch"
color="#fff"
tipPosition="top"
>
<template slot="no-speak">没听清您说的什么</template>
</voice-input-button>
</div>
</div>
</template>
<script name="DrawPic">
import { defineComponent, ref, toRefs, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
import voiceInputButton from "voice-input-button2";
import { Vue2InVue3 } from "@efox/emp-vuett";
const ContentInVue3 = Vue2InVue3(voiceInputButton, "voice");
export default {
name: "App",
components: {
"voice-input-button": ContentInVue3,
},
data() {
return {
result: "",
};
},
methods: {
recordReady: function () {
console.info("按钮就绪!");
},
recordStart: function () {
console.info("录音开始");
},
showResult: function (text) {
console.log("收到识别结果:", text);
},
recordStop: function () {
console.info("录音结束");
},
recordNoResult: function () {
console.info("没有录到什么,请重试");
},
recordComplete: function (text) {
console.log("识别完成! 最终结果:", text);
},
recordFailed: function (error) {
console.info("识别失败,错误栈:", error);
},
},
};
// function recordReady(): void {
// console.info("按钮就绪!");
// }
// function recordStart(): void {
// console.info("录音开始");
// }
// function showResult(text: string): void {
// console.info("收到识别结果:", text);
// }
// function recordStop(): void {
// console.info("录音结束");
// }
// function recordNoResult(): void {
// console.info("没有录到什么,请重试");
// }
// function recordComplete(text: string): void {
// console.info("识别完成! 最终结果:", text);
// }
// function recordFailed(error: string): void {
// console.info("识别失败,错误栈:", error);
// }
</script>
<style scoped>
.voice-input-button-wrapper {
width: 42px;
height: 42px;
background-color: mediumpurple;
border-radius: 50%;
}
.result {
width: 100%;
padding: 25px;
border: #e2e2e2 1px solid;
border-radius: 5px;
line-height: 2;
font-size: 16px;
color: #727272;
min-height: 24px;
margin-bottom: 25px;
}
</style>
你可能需要向 @efox/emp-vuett
提交 issue, voice-input-button2 源码中没有引用 target 属性。