vue3中实现点击ctrl+enter换行，enter发送

无言非影

于 2024-06-11 15:16:06 发布

阅读量374

点赞数 2

分类专栏： Vue 文章标签： vue.js typescript

本文链接：https://blog.csdn.net/weixin_40887836/article/details/139599936

版权

前端同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

Vue

4 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

TS部分：

<script lang="ts" setup>
import { Promotion } from '@element-plus/icons-vue'
import { ref } from 'vue';

const question = ref('')
const keyDownCode = ref(0)

// 键盘按下事件处理函数
const keyDownEnter = (e: any) => {
    console.log(e.keyCode)  // 打印按键代码
    keyDownCode.value = e.keyCode  // 将按键代码赋值给 keyDownCode
    e.preventDefault()  // 阻止默认行为
}

// 键盘抬起事件处理函数
const keyUpEnter = (e: any) => {
    if (keyDownCode.value === 229) {  // 如果 keyDownCode 的值为 229，则说明输入法正在处理输入
        return
    }
    e.preventDefault()  // 阻止默认行为
    console.log(e.keyCode)  // 打印按键代码
    send()  // 调用 send 函数
}

// 处理 Shift + Enter 的函数
const keyEnterShift = () => {
    console.log('shift,enter')  // 打印 'shift,enter'
}

// 发送消息的函数
const send = () => {
    question.value = ''  // 清空 question 的值
}
</script>

模板部分：

<template>
    <div class="chat-input">
        <div class="chat-inputcontainer">
            <div class="input-inner">
                <div class="editor">
                    <el-input class="editor-textarea" v-model="question" autosize type="textarea"
                        placeholder="在这里输入你的问题" @keydown.enter.exact="keyDownEnter" @keyup.enter.exact="keyUpEnter"
                        @keydown.enter.shift="keyEnterShift" />
                </div>
                <div class="toolbar">
                    <el-tooltip class="box-item" effect="dark" content="请输入你的问题" placement="top">
                        <el-button class="send" size="large" type="info" text>
                            <el-icon size="26">
                                <Promotion />
                            </el-icon>
                        </el-button>
                    </el-tooltip>
                </div>
            </div>
        </div>
    </div>
</template>

样式部分

<style lang="scss" scoped>
.chat-input {
    position: relative;

    .chat-inputcontainer {
        position: relative;
        background-color: #E5E7ED;
        border: 1px solid #E5E5E5;
        border-radius: 16px;
        box-shadow: 0px 8px 25px 0px #0000000D;
        overflow: hidden;

        .input-inner {
            display: flex;
            flex-wrap: wrap;
            background-color: #ffffff;
            padding: 8px 16px;

            .editor {
                word-break: break-all;
                flex-grow: 1;
                color: #060607;
                margin-right: -12px;

                .editor-textarea:deep(.el-textarea__inner) {
                    width: 100%;
                    resize: none;
                    font-variation-settings: inherit;
                    font-weight: inherit;
                    letter-spacing: inherit;
                    font-family: inherit;
                    font-feature-settings: inherit;
                    font-size: 1rem;
                    line-height: 1.5rem;
                    padding: .5rem .75rem;
                    border-radius: 0;
                    appearance: none;
                    --tw-shadow: 0 0 transparent;
                    margin: 0;
                    max-height: 25dvh;
                    border-width: 0;
                    background-color: transparent;
                    padding-left: 0;
                    padding-right: 0;
                    color: #0d0d0d;
                    outline: none;
                    box-shadow: none;

                    :focus {
                        --tw-ring-inset: var(--tw-empty,
                                /*!*/
                                /*!*/
                            );
                        --tw-ring-offset-width: 0px;
                        --tw-ring-offset-color: #fff;
                        --tw-ring-color: #2563eb;
                        outline-offset: 2px;
                        outline: none;
                        border-color: inherit;
                    }
                }
            }

            .toolbar {
                display: flex;
                gap: 4px;
                color: #5E6772;
                align-items: flex-end;
                margin-left: auto;

                .send {
                    border: none;
                }
            }
        }
    }
}
</style>