zq
1 month ago
11 changed files with 999 additions and 672 deletions
File diff suppressed because it is too large
@ -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