添加静态常用语的弹窗

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>