riku
2025-02-21 c35074e0e33054bb6c5ada22f8104422ae953b17
src/components/CardDialog.vue
@@ -4,7 +4,12 @@
    @opened="handleChange(true)"
    @closed="handleChange(false)"
    :show-close="false"
    align-center
    :destroy-on-close="true"
    :width="width"
    :draggable="draggable"
    :modal="modal"
    :close-on-click-modal="modal"
    :modal-class="modal ? 'p-events-auto' : ''"
  >
    <template #header="{ close, titleId, titleClass }">
      <BaseCard direction="top-left" borderless="t">
@@ -27,20 +32,39 @@
      <template #content>
        <slot></slot>
      </template>
      <template #footer>
        <slot name="footer"></slot>
      </template>
    </BaseCard>
  </el-dialog>
</template>
<script>
export default {
  props: {
    // 显隐控制
    modelValue: Boolean,
    // 标题
    title: String,
    modelValue: Boolean
    // 宽度
    width: {
      type: [String, Number],
      default: '50%'
    },
    // 可拖拽
    draggable: Boolean,
    // 遮罩层
    modal: {
      type: Boolean,
      default: true
    }
  },
  emits: ['update:modelValue'],
  emits: ['update:modelValue', 'changed'],
  methods: {
    handleChange(value) {
      this.$emit('update:modelValue', value);
      this.$emit('changed', value);
    }
  }
};
</script>
<style></style>