添加静态常用语的弹窗

yangyin

2024-10-31 f5dd9b84b19a0a791d4ab03b877910dc46eac950

添加静态常用语的弹窗

 src/components/chat/components/playBar/phrase/CommonPhrases.vue

@@ -24,14 +24,29 @@
                </div>
            </div>
        </div>
        <div class="container_add">
        <div class="container_add" @click="addCommonPhrases">
            <span class="ywifont ywicon-jia text-[15px] cursor-pointer text-[#767a97]"></span>
            <div class="grow">添加常用语</div>
        </div>
        <el-dialog v-model="state.useCommonPhrasesDialog" :title="state?.sample_title" width="500" :before-close="handleClose">
            <el-input v-model="state.inputCommonPhrases" :rows="10" type="textarea"></el-input>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="submitCommonPhrases"> 添加 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { reactive, ref } from 'vue';
const state = reactive({
    useCommonPhrasesDialog: false,
    sample_title: '添加常用语',
    inputCommonPhrases: '',
});
const commonPhrases = ref([
    {
        id: 1,
@@ -51,6 +66,16 @@
]);
const props = defineProps(['isHome']);
const closeCommonPhrases = () => {};
//关闭常用语弹窗
const handleClose = () => {
    state.useCommonPhrasesDialog = false;
};
//打开常用语弹窗
const addCommonPhrases = () => {
    state.useCommonPhrasesDialog = true;
};
//提交常用语
const submitCommonPhrases = () => {};
</script>
<style scoped lang="scss">
.container {
@@ -104,6 +129,9 @@
                background: #fff;
                border-radius: 8px;
                width: 100%;
                &:hover {
                    background: #e5e7ed;
                }
                .title {
                    font-size: 14px;
                    color: #060607;
@@ -133,6 +161,9 @@
        padding: 6px 8px;
        background: #fff;
        border-radius: 8px;
        &:hover {
            background: #e5e7ed;
        }
    }
}
</style>