【uniapp】使用uniapp实现一个输入英文单词翻译组件

目录

1、组件代码 

2、组件代码

3、调用页面

4、展示

---

前言：使用uniapp调用一个在线单词翻译功能

1、组件代码 

2、组件代码

YouDaoWordTranslator

<template><view class="translator"><input class="ipttext" type="text" v-model="query" placeholder="请输入单词" /><!-- <button @click="fetchData">查询</button> --><view class="showblock" v-if="result.length"><text class="showtext" v-for="(item, index) in result" :key="index">解释 {{ index + 1 }}: {{ item }}</text></view></view>
</template><script setup>
import { api } from '../../config/settings';
import { ref, watch } from 'vue';const query = ref('');
const result = ref([]);const fetchData = () => {  const url = api.defineword + '?q=' + query.value; console.log(url);uni.request({url: url,method: 'GET',header: {'Content-Type': 'application/json'},success: (res) => {console.log('响应数据:', res);if (res.statusCode === 200 && res.data && res.data.data && res.data.data.entries) {// 获取entries数组中每个元素的explain属性并存放到result数组中result.value = res.data.data.entries.map(item => item.explain);console.log(result.value);} else {console.error('请求失败或数据格式不正确:', res);}},fail: (err) => {console.error('请求失败:', err);}});
};// 监听查询字符串的变化，以便在输入时自动调用fetchData
watch(query, (newQuery) => {if (newQuery) {fetchData();} else {// 当输入框内容为空时，清空结果数组result.value = [];}
});
</script><style scoped>
/* 你的样式 */
.ipttext {margin-top: 10rpx;height: 50rpx;margin-bottom: 10rpx;
}
.showblock {background-color: azure;
}
</style>

3、调用页面

wordTranslator

<template><translator />
</template><script setup>
import Translator from '@/components/YouDaoWordTranslator/YouDaoWordTranslator.vue';</script>

4、展示