60 lines
1.2 KiB
Vue
60 lines
1.2 KiB
Vue
<template>
|
|
<n-modal
|
|
v-bind="getModalOptions"
|
|
:style="`width:${getModalOptions.width}px`"
|
|
preset="card"
|
|
:title="options.title"
|
|
@update:show="handleClose"
|
|
>
|
|
<n-card :bordered="false">
|
|
<slot name="Context" />
|
|
<n-space style="float: right">
|
|
<n-button @click="handleClose">取消</n-button>
|
|
<n-button type="primary" @click="handleClick">确认</n-button>
|
|
</n-space>
|
|
</n-card>
|
|
</n-modal>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { defineComponent, computed, unref } from 'vue'
|
|
export default defineComponent({
|
|
name: 'Modal',
|
|
props: {
|
|
options: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
emits: {
|
|
save: null, // click事件没有检验
|
|
onClose: (value) => {
|
|
return value
|
|
}
|
|
},
|
|
setup(props, { emit }) {
|
|
const getModalOptions = computed(() => {
|
|
return {
|
|
...props.options,
|
|
width: props.options.width || 600
|
|
}
|
|
})
|
|
const handleClick = function() {
|
|
emit('save')
|
|
}
|
|
const handleClose = function() {
|
|
emit('onClose', true)
|
|
}
|
|
return {
|
|
getModalOptions,
|
|
handleClick,
|
|
handleClose
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang='scss'>
|
|
</style>
|