sh-view 2.8.1 → 2.8.2

package/packages/components/sh-modal/index.vue

@@ -1,188 +1,188 @@
-<template>
-	<vxe-modal ref="modalRef" v-bind="modalConfig" @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>
-import { defineComponent, watch, ref, computed, getCurrentInstance } from 'vue'
-export default defineComponent({
-	name: 'ShModal',
-	props: {
-		modelValue: {
-			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: ['update:modelValue', 'show', 'hide', 'zoom', 'confirm', 'close'],
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
-		const { emit, slots } = context
-		const modalRef = ref()
-
-		const modalConfig = computed(() => {
-			let modelProps = $vUtils.omit(props, ['readonly', 'confirmButtonText', 'cancelButtonText'])
-			return $vUtils.omit(modelProps, val => val === undefined)
-		})
-
-		// 弹窗显示回调
-		const onModalShow = () => {
-			emit('show')
-		}
-		// 弹窗隐藏回调
-		const onModalHide = () => {
-			emit('hide')
-		}
-		// 弹窗全屏切换回调
-		const onModalZoom = () => {
-			emit('zoom')
-		}
-		// 确认操作
-		const onModalConfirm = () => {
-			emit('confirm')
-		}
-		// 取消操作
-		const onModalClose = () => {
-			emit('close')
-			emit('update:modelValue', false)
-		}
-
-		watch(
-			() => modalConfig.value.modelValue,
-			value => {
-				if (!value) onModalClose()
-			}
-		)
-
-		return {
-			slots,
-			modalRef,
-			modalConfig,
-			onModalShow,
-			onModalHide,
-			onModalZoom,
-			onModalClose,
-			onModalConfirm
-		}
-	}
-})
-</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 ref="modalRef" v-bind="modalConfig" @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>
+import { defineComponent, watch, ref, computed, getCurrentInstance } from 'vue'
+export default defineComponent({
+	name: 'ShModal',
+	props: {
+		modelValue: {
+			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: ['update:modelValue', 'show', 'hide', 'zoom', 'confirm', 'close'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+		const modalRef = ref()
+
+		const modalConfig = computed(() => {
+			let modelProps = $vUtils.omit(props, ['readonly', 'confirmButtonText', 'cancelButtonText'])
+			return $vUtils.omit(modelProps, val => val === undefined)
+		})
+
+		// 弹窗显示回调
+		const onModalShow = () => {
+			emit('show')
+		}
+		// 弹窗隐藏回调
+		const onModalHide = () => {
+			emit('hide')
+		}
+		// 弹窗全屏切换回调
+		const onModalZoom = () => {
+			emit('zoom')
+		}
+		// 确认操作
+		const onModalConfirm = () => {
+			emit('confirm')
+		}
+		// 取消操作
+		const onModalClose = () => {
+			emit('close')
+			emit('update:modelValue', false)
+		}
+
+		watch(
+			() => modalConfig.value.modelValue,
+			value => {
+				if (!value) onModalClose()
+			}
+		)
+
+		return {
+			slots,
+			modalRef,
+			modalConfig,
+			onModalShow,
+			onModalHide,
+			onModalZoom,
+			onModalClose,
+			onModalConfirm
+		}
+	}
+})
+</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>