zq
1 month ago
11 changed files with 999 additions and 672 deletions
@ -0,0 +1,7 @@ |
|||
import GuipDialog from './src/index.vue' |
|||
|
|||
GuipDialog.install = function(Vue) { |
|||
Vue.component(GuipDialog.name || 'GuipDialog', GuipDialog) |
|||
} |
|||
|
|||
export default GuipDialog |
|||
@ -0,0 +1,124 @@ |
|||
<template> |
|||
<el-dialog |
|||
:visible.sync="dialogShow" |
|||
:title="title" |
|||
v-bind="$attrs" |
|||
append-to-body |
|||
:width="width" |
|||
:show-close="showCloseButton" |
|||
:before-close="handleClose" |
|||
:class="type == 'center' ?'center' : 'normal'" |
|||
> |
|||
<!-- 自定义内容 --> |
|||
<slot></slot> |
|||
<!-- 底部按钮 --> |
|||
<span v-if="showFooterButton" slot="footer" :class="[type == 'center' ? 'dialog-footer-center' : 'dialog-footer-normal', 'flex']" style="justify-content: space-between;"> |
|||
<GuipButton v-if="showCancelButton" @click="handleCancel" type="ignore" >{{ cancelText }}</GuipButton> |
|||
<GuipButton type="primary" @click="handleConfirm">{{ confirmText }}</GuipButton> |
|||
</span> |
|||
</el-dialog> |
|||
</template> |
|||
|
|||
<script> |
|||
import GuipButton from '../../GuipButton'; |
|||
|
|||
export default { |
|||
name: 'GuipDialog', |
|||
props: { |
|||
type:{ |
|||
type:String, |
|||
default:'normal' |
|||
}, |
|||
// 控制弹框显示 |
|||
dialogVisible: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
// 弹框标题 |
|||
title: { |
|||
type: String, |
|||
default: '提示', |
|||
}, |
|||
// 弹框宽度 |
|||
width: { |
|||
type: String, |
|||
default: '599px', |
|||
}, |
|||
// 是否显示右上角关闭按钮 |
|||
showCloseButton: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
// 是否显示取消按钮 |
|||
showCancelButton: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
// 是否显示底部按钮 |
|||
showFooterButton: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
// 取消按钮文本 |
|||
cancelText: { |
|||
type: String, |
|||
default: '取消', |
|||
}, |
|||
// 确认按钮文本 |
|||
confirmText: { |
|||
type: String, |
|||
default: '确定', |
|||
}, |
|||
}, |
|||
components:{ |
|||
GuipButton |
|||
}, |
|||
computed: { |
|||
dialogShow: { |
|||
get() { |
|||
return this.dialogVisible; |
|||
}, |
|||
set(newVal) { |
|||
this.$emit('dialogVisibleChange', newVal); |
|||
} |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// 内部维护一个 visible 状态 |
|||
internalVisible: this.visible, |
|||
// dialogVisible:false, |
|||
}; |
|||
}, |
|||
watch: { |
|||
// // 监听 prop 的变化，同步到 internalVisible |
|||
// visible(newVal) { |
|||
// this.internalVisible = newVal; |
|||
// }, |
|||
// // 监听 internalVisible 的变化，通知父组件 |
|||
// internalVisible(newVal) { |
|||
// this.$emit('update:visible', newVal); |
|||
// }, |
|||
}, |
|||
methods: { |
|||
// 关闭弹框 |
|||
handleClose(done) { |
|||
this.$emit('close'); |
|||
this.internalVisible = false; // 关闭弹框 |
|||
if(done){ |
|||
done(); |
|||
} |
|||
}, |
|||
// 点击取消按钮 |
|||
handleCancel() { |
|||
this.$emit('cancel'); |
|||
this.internalVisible = false; // 关闭弹框 |
|||
}, |
|||
// 点击确认按钮 |
|||
handleConfirm() { |
|||
this.$emit('confirm'); |
|||
this.internalVisible = false; // 关闭弹框 |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 673 B |
|
After Width: | Height: | Size: 782 B |
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 14 KiB |
Loading…
Reference in new issue