[JavaScript知识库]vue3利用component打开弹框

dialog.ts

import { reactive, watch } from '@vue/composition-api'

interface Iargs {
  title?: string
  width?: string
  dialogOption?: object
  [propName: string]: any
}
interface Idialog {
  name: string
  args: Iargs
  visible: boolean
}
export default () => {
  const dialog: Idialog = reactive({
    name: '',
    args: {},
    visible: false,
  })
  const dialogClose = () => {
    Object.assign(dialog, {
      name: '',
      args: null,
    })
  }
  const dialogOpen = (name: string, args: Iargs = {}) => {
    Object.assign(dialog, {
      name,
      args,
      visible: true,
    })
  }
  watch(
    () => dialog.visible,
    (val) => {
      if (!val) {
        dialogClose()
      }
    },
  )
  return {
    dialog,
    dialogClose,
    dialogOpen,
  }
}

modal.ts

import { ref, toRef, computed, watch, SetupContext } from '@vue/composition-api'

interface IdialogOption {
  [propName: string]: any
}
interface Iargs {
  props: Readonly<
    {
      value: boolean
      [propName: string]: any
    } & {}
  >
  context: SetupContext<{}>
  modalOption?: IdialogOption
}
export default ({ props, context, modalOption = {} }: Iargs) => {
  const dialogOption: IdialogOption = ref({
    ...modalOption,
  })
  const isValue = toRef(props, 'value')
  const isShow = computed({
    get: (): boolean => isValue.value,
    set: (v: boolean) => {
      context.emit('input', v)
    },
  })
  watch(
    isShow,
    (val) => {
      if (val) {
        const { dialogOption: options } = context.attrs
        dialogOption.value = {
          ...(options as object),
          ...dialogOption.value,
        }
      }
    },
    { immediate: true },
  )
  return {
    isShow,
    dialogOption,
  }
}

index.vue 中调用dialogOpen()

<div class="right" @click="handleInstruction">
          <el-button>注释</el-button>
</div>
<Component
      :is="dialog.name"
      :ref="dialog.name"
      v-model="dialog.visible"
      v-bind="dialog.args"
></Component>

<script lang="ts">
import useDialog from '@/pages/central-control/hooks/dept-map/dialog'
import warnInstruction from '../warnInstruction.vue'
import { defineComponent} from 
export default defineComponent({
  components: {
    warnInstruction,
  },
  
  setup(props, context) {
    const { dialogOpen, dialog } = useDialog()
	const handleInstruction = () => {
    dialogOpen('warnInstruction', {
      title: '预警说明',
    })
  }
    return {
      // 弹框信息
      handleInstruction,
      dialog,
    }
  },
})
</script>

warnInstruction.vue

-<template>
  <ElDialog :visible.sync="isShow" v-bind="dialogOption">
    <div class="body">
      弹框组件子组件
    </div>
  </ElDialog>
</template>

<script lang="ts">
import { defineComponent} from '@vue/composition-api'
import modal from '@cc/hooks/dept-map/modal'

export default defineComponent({
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    onSubmit: {
      type: Function,
      default: () => {},
    },
  },
  setup(props, context) {
    const modalOption = {
      width: '412px',
      title: '预警说明',
      closeOnClickModal: false,
      top: '20vh',
      center: true,
    }
    const { isShow, dialogOption } = modal({ props, context, modalOption })

    return {
      isShow,
      dialogOption,
    }
  },
})
</script>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖