目录
前言:使用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>