弹窗类组件
- 弹窗类组件包括消息确认弹窗、Modal 弹窗、Message、Drawer 抽屉等组件。
- 组件全部用命令模式来替换声明式的开发方式,使弹窗跟页面更符合高内聚低耦合的设计思想。
- 组件所有交互规范满足 Promise,其中 resolve 是用户在弹窗里操作后关闭,reject 是用户没有操作关闭弹窗。
对话确认框
popup.confirmts
popup
.confirm('确认提示信息?')
.then(() => {
console.log('确认')
})
.catch(() => {})
打开Modal弹窗
popup.createModalvue
<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.createDrawervue
<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消息提示
popup.info
popup.success
popup.warning
popup.error
ts
popup.info('普通消息')
popup.success('成功消息')
popup.warning('警告消息')
popup.error('错误消息')
打开notification消息通知
popup.inf
popup.succ
popup.warn
popup.err
ts
popup.inf('普通消息')
popup.succ('成功消息')
popup.warn('警告消息')
popup.err('错误消息')
注意事项
说明
弹窗,抽屉交互组件已经封装,只需要开发主要的业务内容 ./childCom/index.vue