Skip to content

弹窗类组件


  • 弹窗类组件包括消息确认弹窗、Modal 弹窗、Message、Drawer 抽屉等组件。
  • 组件全部用命令模式来替换声明式的开发方式,使弹窗跟页面更符合高内聚低耦合的设计思想。
  • 组件所有交互规范满足 Promise,其中 resolve 是用户在弹窗里操作后关闭,reject 是用户没有操作关闭弹窗。

对话确认框

popup.confirm

ts
popup
  .confirm('确认提示信息?')
  .then(() => {
    console.log('确认')
  })
  .catch(() => {})

打开Modal弹窗

popup.createModal

vue
<template>
  <el-button type="primary" @click="openModal">打开Modal弹窗</el-button>
</template>
<script setup lang="ts">
import { popup } from 'vue-jwhuang-ui'
const openModal = () => {
  popup
    .createModal(
      import('./child-com/index.vue'),
      { title: 'drawer传过来的内容' },
      {
        id: 'modal1',
        title: '弹窗标题',
        confirmText: '保存'
        // showFooter: false
      }
    )
    .then(res => {
      console.log(res)
    })
    .catch(() => {})
}
</script>
vue
<template>
  <div style="height:600px">
    <div style="padding:20px">
      测试
      <b>{{ title }}</b>
    </div>
  </div>
</template>
<script setup lang="ts">
defineProps({
  title: {
    type: String,
    default: ''
  }
})
defineExpose({
  getModel: () => {
    return new Promise(async (resolve, reject) => {
      resolve(true)
    })
  }
})
</script>

打开Drawer抽屉

popup.createDrawer

vue
<template>
  <el-button type="primary" @click="openDrawer">打开Drawer抽屉</el-button>
</template>
<script setup lang="ts">
import { popup } from 'vue-jwhuang-ui'

const openDrawer = () => {
  popup
    .createDrawer(
      import('./child-com/index.vue'),
      { title: 'drawer传过来的内容' },
      {
        id: 'drawer1',
        title: '抽屉标题'
        // withHeader: false,
        // showFooter: false
      }
    )
    .then(res => {
      console.log(res)
    })
    .catch(() => {})
}
</script>
vue
<template>
  <div style="padding:20px">
    测试
    <b>{{ title }}</b>
  </div>
</template>
<script setup lang="ts">
defineProps({
  title: {
    type: String,
    default: ''
  }
})
defineExpose({
  getModel: () => {
    return new Promise(async (resolve, reject) => {
      resolve(true)
    })
  }
})
</script>

打开message消息提示

ts
popup.info('普通消息')
popup.success('成功消息')
popup.warning('警告消息')
popup.error('错误消息')

打开notification消息通知

ts
popup.inf('普通消息')
popup.succ('成功消息')
popup.warn('警告消息')
popup.err('错误消息')

注意事项

说明

弹窗,抽屉交互组件已经封装,只需要开发主要的业务内容 ./childCom/index.vue