【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、展示

相关推荐
He1955018 分钟前
Go初级之十:错误处理与程序健壮性
开发语言·python·golang
和鲸社区1 小时前
《斯坦福CS336》作业1开源,从0手搓大模型|代码复现+免环境配置
人工智能·python·深度学习·计算机视觉·语言模型·自然语言处理·nlp
豌豆花下猫1 小时前
Python 潮流周刊#118:Python 异步为何不够流行?(摘要)
后端·python·ai
THMAIL1 小时前
深度学习从入门到精通 - LSTM与GRU深度剖析:破解长序列记忆遗忘困境
人工智能·python·深度学习·算法·机器学习·逻辑回归·lstm
wheeldown2 小时前
【数学建模】数据预处理入门:从理论到动手操作
python·数学建模·matlab·python3.11
多打代码2 小时前
2025.09.05 用队列实现栈 & 有效的括号 & 删除字符串中的所有相邻重复项
python·算法
@CLoudbays_Martin112 小时前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php
程序猿炎义3 小时前
【NVIDIA AIQ】自定义函数实践
人工智能·python·学习
THMAIL3 小时前
深度学习从入门到精通 - BERT与预训练模型:NLP领域的核弹级技术详解
人工智能·python·深度学习·自然语言处理·性能优化·bert
软工的小白3 小时前
uniapp开发前端静态视频界面+如何将本地视频转换成网络地址
uni-app·音视频