update 背更新

pages/newEnglish/components/selectPage.vue

@@ -8,7 +8,8 @@
 			<view class="show-words-box"> {{data.name}} </view>
 			<!--  音标区  -->
 			<view class="yb-play-box">
-				<text>{{activeWord.yinbiao}}</text>
+				<!-- <text>{{activeWord.yinbiao}}</text> -->
+				<yinbiaoTxtVue :yinbiao="activeWord.yinbiao"></yinbiaoTxtVue>
 				<!-- active -->
 				<audioTwoVue @play-audio="handlePlay" :active-word="activeWord"></audioTwoVue>
 			</view>
@@ -36,6 +37,7 @@
 	import selectTypesVue from './selectTypes.vue';
 	import audioTwoVue from './audioTwo.vue';
 	import * as httpApi from "@/api/word.js"
+	import yinbiaoTxtVue from "./yinbiaoTxt.vue"
 	import {
 		onLoad
 	} from "@dcloudio/uni-app"

pages/newEnglish/components/xuePage.vue

@@ -11,7 +11,7 @@
 		</view>
 		<!-- 音标区 -->
 		<view>
-			<view>{{activeWord.yinbiao}}</view>
+			<yinbiaoTxtVue :yinbiao="activeWord.yinbiao"></yinbiaoTxtVue>
 			<!-- 音频播放 -->
 			<audioTwoVue :active-word="activeWord" @play-audio="handlePlay"></audioTwoVue>
 		</view>
@@ -64,6 +64,7 @@
 	import audioTwoVue from './audioTwo.vue';
 	import audioThreeVue from './audioThree.vue';
 	import audioFourVue from './audioFour.vue';
+	import yinbiaoTxtVue from "./yinbiaoTxt.vue"
 	import {
 		reactive,
 		computed,

pages/newEnglish/components/yinbiaoTxt.vue

@@ -0,0 +1,22 @@
+<template>
+  <text v-for="item in yinbiaoArr">{{item}}</text>
+</template>
+
+<script setup>
+import {computed} from "vue"
+const props = defineProps({
+  yinbiao: {
+    type: String,
+    required: true
+  }
+})
+
+const yinbiaoArr = computed(() => {
+  const result = props.yinbiao.split(/(\/)/).filter(Boolean);
+  return result
+})
+</script>
+
+<style scoped>
+
+</style>