Vue Watch监听器实现翻译业务

CFL~

已于 2024-03-23 20:19:49 修改

阅读量198

点赞数 3

文章标签： vue.js css3 css 前端 javascript

于 2024-03-23 20:00:16 首次发布

本文链接：https://blog.csdn.net/chenfulu/article/details/136974075

版权

本文介绍了如何使用Vue.js结合axios库实现一个简单的文本翻译功能，包括条件选择、输入框监听和异步请求接口调用的代码示例。

摘要由CSDN通过智能技术生成

代码讲解地址：https://www.bilibili.com/video/BV1HV4y1a7n4?p=32&vd_source=d941dd8594d98f7fbefd96ab259a263d

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 18px;
        }

        #app {
            padding: 10px 20px;
        }

        .query {
            margin: 10px 0;
        }

        .box {
            display: flex;
        }

        textarea {
            width: 300px;
            height: 160px;
            font-size: 18px;
            border: 1px solid #dedede;
            outline: none;
            resize: none;
            padding: 10px;
        }

        textarea:hover {
            border: 1px solid #1589f5;
        }

        .transbox {
            width: 300px;
            height: 160px;
            background-color: #f0f0f0;
            padding: 10px;
            border: none;
        }

        .tip-box {
            width: 300px;
            height: 25px;
            line-height: 25px;
            display: flex;
        }

        .tip-box span {
            flex: 1;
            text-align: center;
        }

        .query span {
            font-size: 18px;
        }

        .input-wrap {
            position: relative;
        }

        .input-wrap span {
            position: absolute;
            right: 15px;
            bottom: 15px;
            font-size: 12px;
        }

        .input-wrap i {
            font-size: 20px;
            font-style: normal;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 条件选择框 -->
    <div class="query">
        <span>翻译成的语言：</span>
        <select>
            <option value="italy">意大利</option>
            <option value="english">英语</option>
            <option value="german">德语</option>
        </select>
    </div>

    <!-- 翻译框 -->
    <div class="box">
        <div class="input-wrap">
            <textarea v-model="obj.words"></textarea>
            <span><i>⌨️</i>文档翻译</span>
        </div>
        <div class="output-wrap">
            <div class="transbox">{{translateWords}}</div>
        </div>
    </div>
</div>
<script src="./vue.js"></script>
<script src="./axios.js"></script>
<script>
    // 接口地址：https://applet-base-api-t.itheima.net/api/translate
    // 请求方式：get
    // 请求参数：
    // （1）words：需要被翻译的文本（必传）
    // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
    // -----------------------------------------------

    const app = new Vue({
        el: '#app',
        data: {
            translateWords: '',
            //timer:null,
            obj: {
                words: '小黑',
                lang:'italy'
            }
        },
        // 具体讲解：(1) watch语法 (2) 具体业务实现
        watch: {
            obj:{
                //深度监视，所有的obj子属性都会被监视
                deep:true,
                //立即执行，一旦进入页面handler就会执行一次
                immediate:true,
                handler(newValue){
                        clearTimeout(this.timer)
                        this.timer = setTimeout(async () => {
                            const response = await axios({
                                url: 'https://applet-base-api-t.itheima.net/api/translate',
                                method: 'get',
                                params: newValue
                            })
                            this.translateWords = response.data.data;
                            console.log(this.translateWords)
                        }, 300)
                }
            }

            // 'obj.words'(newValue) {
            //     clearTimeout(this.timer)
            //     this.timer = setTimeout(async () => {
            //         const response = await axios({
            //             url: 'https://applet-base-api-t.itheima.net/api/translate',
            //             method: 'get',
            //             params: {
            //                 words: newValue
            //             }
            //         })
            //         this.translateWords = response.data.data;
            //         console.log(this.translateWords)
            //     }, 300)
            //
            // }
        }
    })
</script>
</body>
</html>