sh-view 1.7.6 → 2.0.0

package/packages/components/global-components/{sh-vxe-modal → sh-modal}/index.vue

@@ -1,209 +1,209 @@
-<template>
-	<vxe-modal
-		:id="id"
-		ref="vxeModal"
-		v-model="modalVisible"
-		:title="title"
-		:size="size"
-		:class-name="className"
-		:width="width"
-		:height="height"
-		:type="type"
-		:status="status"
-		:loading="loading"
-		:destroy-on-close="destroyOnClose"
-		:transfer="transfer"
-		:fullscreen="mobile || fullscreen"
-		:show-header="showHeader"
-		:show-zoom="showZoom"
-		:show-close="showClose"
-		:show-footer="showFooter"
-		:resize="resize"
-		:mask="mask"
-		:mask-closable="maskClosable"
-		:esc-closable="escClosable"
-		:position="position"
-		:before-hide-method="beforeHideMethod"
-		@show="onModalShow"
-		@hide="onModalHide"
-		@zoom="onModalZoom"
-		@close="onModalClose"
-		@cancel="onModalClose"
-		@confirm="onModalConfirm">
-		<template v-for="slot in Object.keys($slots)" #[slot]="scope">
-			<!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
-			<slot :name="slot" v-bind="scope"></slot>
-		</template>
-		<template #footer>
-			<div class="sh-modal-footer">
-				<div class="sh-modal-footer-left"><slot name="footerLeft"></slot></div>
-				<div class="sh-modal-footer-right">
-					<slot name="footerRightLeft"></slot>
-					<vxe-button v-ripple :content="cancelButtonText" @click="onModalClose"></vxe-button>
-					<vxe-button v-if="!readonly" v-ripple status="theme" :content="confirmButtonText" @click="onModalConfirm"></vxe-button>
-					<slot name="footerRight"></slot>
-				</div>
-			</div>
-		</template>
-	</vxe-modal>
-</template>
-
-<script>
-export default {
-	name: 'ShModal',
-	props: {
-		visible: {
-			type: Boolean
-		},
-		id: {
-			type: String
-		},
-		title: {
-			type: String
-		},
-		size: {
-			type: String
-		},
-		className: {
-			type: String
-		},
-		width: {
-			type: [String, Number],
-			default: '80%'
-		},
-		height: {
-			type: [String, Number],
-			default: 'auto'
-		},
-		type: {
-			type: String,
-			default: 'modal'
-		},
-		status: {
-			type: String
-		},
-		loading: {
-			type: Boolean
-		},
-		destroyOnClose: {
-			type: Boolean,
-			default: true
-		},
-		transfer: {
-			type: Boolean,
-			default: true
-		},
-		fullscreen: {
-			type: Boolean
-		},
-		showHeader: {
-			type: Boolean,
-			default: true
-		},
-		showZoom: {
-			type: Boolean,
-			default: true
-		},
-		showClose: {
-			type: Boolean,
-			default: true
-		},
-		showFooter: {
-			type: Boolean,
-			default: true
-		},
-		resize: {
-			type: Boolean,
-			default: true
-		},
-		mask: {
-			type: Boolean,
-			default: true
-		},
-		maskClosable: {
-			type: Boolean
-		},
-		escClosable: {
-			type: Boolean,
-			default: true
-		},
-		position: {
-			type: [String, Object],
-			default: 'center'
-		},
-		beforeHideMethod: {
-			type: Function
-		},
-		readonly: {
-			type: Boolean
-		},
-		confirmButtonText: {
-			type: String,
-			default: '确认'
-		},
-		cancelButtonText: {
-			type: String,
-			default: '取消'
-		}
-	},
-	emits: ['show', 'hide', 'zoom', 'confirm', 'close', 'update:visible'],
-	data() {
-		return {
-			modalVisible: this.visible
-		}
-	},
-	computed: {},
-	watch: {
-		visible() {
-			this.modalVisible = this.visible
-		},
-		modalVisible(nv) {
-			if (!nv) this.onModalClose()
-		}
-	},
-	created() {},
-	mounted() {},
-	beforeUnmount() {},
-	methods: {
-		modalRef() {
-			return this.$refs.vxeModal
-		},
-		// 弹窗显示回调
-		onModalShow() {
-			this.$emit('show')
-		},
-		// 弹窗隐藏回调
-		onModalHide() {
-			this.$emit('hide')
-		},
-		// 弹窗全屏切换回调
-		onModalZoom() {
-			this.$emit('zoom')
-		},
-		// 确认操作
-		onModalConfirm() {
-			this.$emit('confirm')
-		},
-		// 取消操作
-		onModalClose() {
-			this.$emit('close')
-			this.$emit('update:visible', false)
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.sh-modal-footer {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	flex-wrap: wrap;
-	white-space: nowrap;
-	.sh-modal-footer-left {
-	}
-	.sh-modal-footer-right {
-		flex: 1;
-	}
-}
-</style>
+<template>
+	<vxe-modal
+		:id="id"
+		ref="vxeModal"
+		v-model="modalVisible"
+		:title="title"
+		:size="size"
+		:class-name="className"
+		:width="width"
+		:height="height"
+		:type="type"
+		:status="status"
+		:loading="loading"
+		:destroy-on-close="destroyOnClose"
+		:transfer="transfer"
+		:fullscreen="fullscreen"
+		:show-header="showHeader"
+		:show-zoom="showZoom"
+		:show-close="showClose"
+		:show-footer="showFooter"
+		:resize="resize"
+		:mask="mask"
+		:mask-closable="maskClosable"
+		:esc-closable="escClosable"
+		:position="position"
+		:before-hide-method="beforeHideMethod"
+		@show="onModalShow"
+		@hide="onModalHide"
+		@zoom="onModalZoom"
+		@close="onModalClose"
+		@cancel="onModalClose"
+		@confirm="onModalConfirm">
+		<template v-for="slot in Object.keys($slots)" #[slot]="scope">
+			<!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
+			<slot :name="slot" v-bind="scope"></slot>
+		</template>
+		<template #footer>
+			<div class="sh-modal-footer">
+				<div class="sh-modal-footer-left"><slot name="footerLeft"></slot></div>
+				<div class="sh-modal-footer-right">
+					<slot name="footerRightLeft"></slot>
+					<vxe-button v-ripple :content="cancelButtonText" @click="onModalClose"></vxe-button>
+					<vxe-button v-if="!readonly" v-ripple status="primary" :content="confirmButtonText" @click="onModalConfirm"></vxe-button>
+					<slot name="footerRight"></slot>
+				</div>
+			</div>
+		</template>
+	</vxe-modal>
+</template>
+
+<script>
+export default {
+	name: 'ShModal',
+	props: {
+		visible: {
+			type: Boolean
+		},
+		id: {
+			type: String
+		},
+		title: {
+			type: String
+		},
+		size: {
+			type: String
+		},
+		className: {
+			type: String
+		},
+		width: {
+			type: [String, Number],
+			default: '80%'
+		},
+		height: {
+			type: [String, Number],
+			default: 'auto'
+		},
+		type: {
+			type: String,
+			default: 'modal'
+		},
+		status: {
+			type: String
+		},
+		loading: {
+			type: Boolean
+		},
+		destroyOnClose: {
+			type: Boolean,
+			default: true
+		},
+		transfer: {
+			type: Boolean,
+			default: true
+		},
+		fullscreen: {
+			type: Boolean
+		},
+		showHeader: {
+			type: Boolean,
+			default: true
+		},
+		showZoom: {
+			type: Boolean,
+			default: true
+		},
+		showClose: {
+			type: Boolean,
+			default: true
+		},
+		showFooter: {
+			type: Boolean,
+			default: true
+		},
+		resize: {
+			type: Boolean,
+			default: true
+		},
+		mask: {
+			type: Boolean,
+			default: true
+		},
+		maskClosable: {
+			type: Boolean
+		},
+		escClosable: {
+			type: Boolean,
+			default: true
+		},
+		position: {
+			type: [String, Object],
+			default: 'center'
+		},
+		beforeHideMethod: {
+			type: Function
+		},
+		readonly: {
+			type: Boolean
+		},
+		confirmButtonText: {
+			type: String,
+			default: '确认'
+		},
+		cancelButtonText: {
+			type: String,
+			default: '取消'
+		}
+	},
+	emits: ['show', 'hide', 'zoom', 'confirm', 'close', 'update:visible'],
+	data() {
+		return {
+			modalVisible: this.visible
+		}
+	},
+	computed: {},
+	watch: {
+		visible() {
+			this.modalVisible = this.visible
+		},
+		modalVisible(nv) {
+			if (!nv) this.onModalClose()
+		}
+	},
+	created() {},
+	mounted() {},
+	beforeUnmount() {},
+	methods: {
+		modalRef() {
+			return this.$refs.vxeModal
+		},
+		// 弹窗显示回调
+		onModalShow() {
+			this.$emit('show')
+		},
+		// 弹窗隐藏回调
+		onModalHide() {
+			this.$emit('hide')
+		},
+		// 弹窗全屏切换回调
+		onModalZoom() {
+			this.$emit('zoom')
+		},
+		// 确认操作
+		onModalConfirm() {
+			this.$emit('confirm')
+		},
+		// 取消操作
+		onModalClose() {
+			this.$emit('close')
+			this.$emit('update:visible', false)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-modal-footer {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-wrap: wrap;
+	white-space: nowrap;
+	.sh-modal-footer-left {
+	}
+	.sh-modal-footer-right {
+		flex: 1;
+	}
+}
+</style>