xiaoshu/src/components/MessageInput.vue

<template>
    <div class="message-input-wrap">
        <div class="message-input-border">
            <div class="message-input-clear" @click="clearMessage">
                <div :class="[readonly ? 'disabled' : '']">
                    <img src="@/assets/icons/iconPark-clear.svg" width="15" />
                </div>
            </div>
            <a-textarea
                @keydown.enter="handleEnter"
                :max-length="maxLength"
                v-model="value"
                :show-word-limit="value.length > maxLength / 2"
                :auto-size="{ maxRows: 6 }"
                placeholder="输入您想了解的内容，Shift+Enter换行"
                :style="{
                    flex: 1,
                    borderRadius: '12px',
                    marginTop: '20px',
                    padding: '0px 30px 0 16px',
                    background: 'transparent',
                    border: '1px solid #e3e3e3',
                    minHeight: '120px',
                    paddingBottom: `${value.length > maxLength / 2 ? '20px' : ''}`
                }"
            >
            </a-textarea>
        </div>
        <div
            :class="['message-button', 'message-button-send', value.length > 0 && !readonly ? '' : 'disabled']"
            @click="sendMessage"
        >
            <icon-send size="30" />
        </div>
    </div>
</template>
<script>
import { defineComponent, ref, inject, onMounted, onBeforeUnmount } from "vue";
export default defineComponent({
    components: {},
    props: ["readonly", "eventName"],
    setup(props) {
        const { helper } = inject("$global");
        const value = ref("");
        const maxLength = ref(6000);
        const sendMessage = () => {
            if (value.value.length > 0 && !props.readonly) {
                const eventName = props.eventName || "send-message";
                helper.$bus.emit(eventName, value.value);
                value.value = "";
            }
        };
        const clearMessage = () => {
            if (!props.readonly) {
                helper.$bus.emit("clear-message");
            }
        };
        const handleEnter = (e) => {
            if (!e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        };
        onMounted(() => {
            helper.$bus.on("set-input", (data) => {
                value.value = data;
            });
        });
        onBeforeUnmount(() => {
            helper.$bus.off("set-input");
        });
        return {
            value,
            maxLength,
            sendMessage,
            clearMessage,
            handleEnter
        };
    }
});
</script>
<style scoped>
.message-input-border {
    display: flex;
}
.message-input-clear {
    width: 30px;
    height: 100%;
    margin-right: 8px;
    display: none;
    div {
        width: 30px;
        height: 30px;
        border-radius: 15px;
        background-color: rgba(64, 95, 234, 0.05);
        position: absolute;
        bottom: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        &.disabled {
            cursor: not-allowed;
        }
        &:hover {
            background-color: rgba(64, 95, 234, 0.1);
        }
    }
}
.message-input-wrap {
    position: relative;
    margin-bottom: 20px;
}
.message-button {
    position: absolute;
    width: 30px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    bottom: 5px;
    right: 5px;
    z-index: 2;
    &.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
}
.message-button-upload {
    left: 38px;
}
.message-button-send {
    color: rgb(64, 95, 234, 0.8);
    &:hover {
        color: rgb(64, 95, 234);
    }
}
</style>