消息

TUIKit/components/common/Dialog/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <div
+    v-if="showDialog"
+    class="dialog"
+    :class="[!isPC ? 'dialog-h5' : '', center ? 'center' : '']"
+    @click.stop.prevent="toggleView(clickType.OUTSIDE)"
+  >
+    <main
+      class="dialog-main"
+      :class="[!backgroundDialog ? 'dialog-main-back' : '']"
+      @click.stop.prevent="toggleView(clickType.INSIDE)"
+    >
+      <header
+        v-if="isHeaderShowDialog"
+        class="dialog-main-header"
+      >
+        <h1 class="dialog-main-title">
+          {{ showTitle }}
+        </h1>
+        <i
+          class="icon icon-close"
+          @click="close"
+        />
+      </header>
+      <div
+        class="dialog-main-content"
+        :class="[isUniFrameWork && isH5 ? 'dialog-main-content-uniapp' : '']"
+      >
+        <slot />
+      </div>
+      <footer
+        v-if="isFooterShowDialog"
+        class="dialog-main-footer"
+      >
+        <button
+          class="btn btn-cancel"
+          @click="close"
+        >
+          {{ TUITranslateService.t('component.取消') }}
+        </button>
+        <button
+          class="btn btn-default"
+          @click="submit"
+        >
+          {{ TUITranslateService.t('component.确定') }}
+        </button>
+      </footer>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watchEffect } from '../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { isPC, isH5, isUniFrameWork } from '../../../utils/env';
+const clickType = {
+  OUTSIDE: 'outside',
+  INSIDE: 'inside',
+};
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  isHeaderShow: {
+    type: Boolean,
+    default: true,
+  },
+  isFooterShow: {
+    type: Boolean,
+    default: true,
+  },
+  background: {
+    type: Boolean,
+    default: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  center: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const showDialog = ref(false);
+const isHeaderShowDialog = ref(true);
+const isFooterShowDialog = ref(true);
+const backgroundDialog = ref(true);
+const showTitle = ref('');
+
+watchEffect(() => {
+  showDialog.value = props.show;
+  showTitle.value = props.title;
+  isHeaderShowDialog.value = props.isHeaderShow;
+  isFooterShowDialog.value = props.isFooterShow;
+  backgroundDialog.value = props.background;
+});
+
+const emit = defineEmits(['update:show', 'submit']);
+
+const toggleView = (type: string) => {
+  if (type === clickType.OUTSIDE) {
+    close();
+  }
+};
+
+const close = () => {
+  showDialog.value = !showDialog.value;
+  emit('update:show', showDialog.value);
+};
+
+const submit = () => {
+  emit('submit');
+  close();
+};
+</script>
+<style lang="scss" scoped src="./style/dialog.scss"></style>