vue3 中对 dialog 封装

1. 子组件

// 点评页
const CommentDialog = {
  template: `
  <vxe-modal v-model="visible" id="commentDialog" width="1000" height="400" min-width="460" min-height="320"
   showFooter show-zoom resize remember storage transfer @close="onClose">
    <template #title>
      <span>点评</span><span style="color: red;">完整功能的窗口（移动、拖动、状态保存）</span>
    </template>
    <template #default>
      <h2>弹窗组件示例</h2>
    </template>
    <template #footer>
      <div style="text-align: center">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认</el-button>
      </div>
    </template>
  </vxe-modal>
  `,
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:dialogVisible', 'on-confirm'],
  setup(props, { emit }) {
    const { reactive, toRefs, watch } = Vue
    const { dialogVisible } = toRefs(props)
    const state = reactive({
      visible: dialogVisible.value
    })
    watch(
      dialogVisible,
      (newValue) => {
        state.visible = newValue
      },
      { immediate: true }
    )
    const onClose = () => {
      emit('update:dialogVisible', false)
    }
    const onConfirm = () => {
      emit('on-confirm', '子组件的值')
    }
    return {
      ...toRefs(state),
      onClose,
      onConfirm
    }
  }
}

2. 父组件

const HistoryComponent = {
  template: `
    <div class="page-box">
      ...其它内容
    </div>
    <comment-dialog v-model:dialogVisible="dialogVisible" @on-confirm="onCommentConfirm"></comment-dialog>
  `,
  setup() {
    const { ref } = Vue
    // const { pageData, pageChange } = usePagerEffect(loadHistoryData)

    const dialogVisible = ref(false)
    const onShowComment = (row) => {
      const { code } = row
      dialogVisible.value = true
    }
    const onCommentConfirm = () => {
      dialogVisible.value = false
    }

    return {
      dialogVisible,
      onShowComment,
      onCommentConfirm
    }
  }
}