sh-view 2.0.8 → 2.2.0

package/packages/components/global-components/sh-image/index.vue

@@ -13,7 +13,8 @@
 </template>
 
 <script>
-export default {
+import { defineComponent, computed, ref, watch } from 'vue'
+export default defineComponent({
 	name: 'ShImage',
 	props: {
 		src: {
@@ -50,52 +51,60 @@ export default {
 		}
 	},
 	emits: ['update:modelValue', 'load', 'error'],
-	data() {
-		return {
-			imageloading: false,
-			imageError: false
-		}
-	},
-	computed: {
-		wrapStyles() {
+	setup(props, context) {
+		const { emit } = context
+		const imageloading = ref(false)
+		const imageError = ref(false)
+
+		const wrapStyles = computed(() => {
 			return {
-				width: typeof this.width === 'number' ? `${this.width}px` : this.width,
-				height: typeof this.height === 'number' ? `${this.height}px` : this.height
+				width: typeof props.width === 'number' ? `${props.width}px` : props.width,
+				height: typeof props.height === 'number' ? `${props.height}px` : props.height
 			}
-		},
-		imgConfig() {
+		})
+		const imgConfig = computed(() => {
 			const fitContains = ['fill', 'contain', 'cover', 'none', 'scale-down']
 			return {
-				alt: this.alt,
-				src: this.src,
-				referrerPolicy: this.referrerPolicy,
-				loading: this.lazy ? 'lazy' : 'eager',
-				style: fitContains.includes(this.fit) ? `object-fit:${this.fit};` : ''
+				alt: props.alt,
+				src: props.src,
+				referrerPolicy: props.referrerPolicy,
+				loading: props.lazy ? 'lazy' : 'eager',
+				style: fitContains.includes(props.fit) ? `object-fit:${props.fit};` : ''
 			}
+		})
+
+		const onImageLoad = () => {
+			imageloading.value = false
+			imageError.value = false
+			emit('load')
 		}
-	},
-	watch: {
-		src() {
-			this.loadImage()
+		const onImageError = () => {
+			imageloading.value = false
+			imageError.value = true
+			emit('error')
 		}
-	},
-	methods: {
-		onImageLoad() {
-			this.imageloading = false
-			this.imageError = false
-			this.$emit('load')
-		},
-		onImageError() {
-			this.imageloading = false
-			this.imageError = true
-			this.$emit('error')
-		},
-		loadImage() {
-			this.imageloading = true
-			this.imageError = false
+		const loadImage = () => {
+			imageloading.value = true
+			imageError.value = false
+		}
+
+		watch(
+			() => props.src,
+			() => {
+				loadImage()
+			}
+		)
+
+		return {
+			wrapStyles,
+			imageError,
+			imageloading,
+			imgConfig,
+			onImageLoad,
+			onImageError
 		}
 	}
-}
+})
 </script>
 
 <style scoped lang="scss">

package/packages/components/global-components/sh-list/index.vue

@@ -1,13 +1,13 @@
 <template>
 	<div class="sh-list">
-		<template v-if="$slots.header"><slot name="header"></slot></template>
-		<vxe-list ref="vxeList" :class="{ grid }" v-bind="listConfig">
+		<template v-if="slots.header"><slot name="header"></slot></template>
+		<vxe-list ref="listRef" :class="{ grid }" v-bind="listConfig">
 			<template #default="{ items }">
 				<sh-empty v-if="items.length === 0 && !loading" :icon="emptyIcon" :content="emptyText"></sh-empty>
 				<template v-if="groupSize">
 					<sh-row v-for="(rows, rowsindex) in items" :key="rowsindex" class="sh-list-item" :gutter="grid.gutter" :margin="rowMargin">
 						<sh-col v-for="(col, colindex) in rows" :key="colindex" :class="itemClassName" v-bind="grid">
-							<slot v-if="$slots.item" name="item" v-bind="col"></slot>
+							<slot v-if="slots.item" name="item" v-bind="col"></slot>
 							<div v-else :class="itemClassName">{{ col[labelField] }}</div>
 						</sh-col>
 					</sh-row>
@@ -15,7 +15,7 @@
 				<template v-else-if="grid">
 					<sh-row :gutter="grid.gutter" :margin="rowMargin">
 						<sh-col v-for="(item, itemindex) in items" :key="itemindex" class="sh-list-item" :class="itemClassName" v-bind="grid">
-							<slot v-if="$slots.item" name="item" v-bind="item"></slot>
+							<slot v-if="slots.item" name="item" v-bind="item"></slot>
 							<div v-else :class="itemClassName">{{ item[labelField] }}</div>
 						</sh-col>
 					</sh-row>
@@ -29,13 +29,14 @@
 				</template>
 			</template>
 		</vxe-list>
-		<template v-if="$slots.footer"><slot name="footer"></slot></template>
+		<template v-if="slots.footer"><slot name="footer"></slot></template>
 		<vxe-pager v-if="pagerConfig" v-bind="listPagerConfig" :loading="loading" @page-change="onPageChange"></vxe-pager>
 	</div>
 </template>
 
 <script>
-export default {
+import { defineComponent, ref, getCurrentInstance, computed } from 'vue'
+export default defineComponent({
 	name: 'ShList',
 	props: {
 		dataSourse: {
@@ -95,42 +96,46 @@ export default {
 		}
 	},
 	emits: ['page-change'],
-	data() {
-		return {}
-	},
-	computed: {
-		groupSize() {
-			return this.grid && +this.grid.span > 0 && +this.grid.span < 24 ? 24 / this.grid.span : 0
-		},
-		listConfig() {
+	setup(props, context) {
+		const vm = getCurrentInstance()
+		const { $vUtils } = vm.proxy
+		const { emit, slots } = context
+		const listRef = ref()
+
+		const groupSize = computed(() => {
+			return props.grid && +props.grid.span > 0 && +props.grid.span < 24 ? 24 / props.grid.span : 0
+		})
+		const listConfig = computed(() => {
 			return {
-				data: this.groupSize ? this.$vUtils.chunk(this.$vUtils.clone(this.dataSourse, true), this.groupSize) : this.dataSourse,
-				size: this.size,
-				className: this.className,
-				loading: this.loading,
-				height: this.height,
-				autoResize: this.autoResize,
-				syncResize: this.syncResize,
-				scrollY: Object.assign({ sItem: 'sh-list-item' }, this.scrollY)
+				data: groupSize.value ? $vUtils.chunk($vUtils.clone(props.dataSourse, true), groupSize.value) : props.dataSourse,
+				size: props.size,
+				className: props.className,
+				loading: props.loading,
+				height: props.height,
+				autoResize: props.autoResize,
+				syncResize: props.syncResize,
+				scrollY: Object.assign({ sItem: 'sh-list-item' }, props.scrollY)
 			}
-		},
-		listPagerConfig() {
-			return Object.assign({ enabled: this.pagerConfig, total: 0 }, this.pagerConfig)
-		}
-	},
-	created() {},
-	mounted() {},
-	beforeUnmount() {},
-	methods: {
-		listRef() {
-			return this.$refs.vxeList
-		},
+		})
+		const listPagerConfig = computed(() => {
+			return Object.assign({ enabled: Boolean(props.pagerConfig), total: 0 }, props.pagerConfig)
+		})
+
 		// 分页变化触发
-		onPageChange(data) {
-			this.$emit('page-change', data)
+		const onPageChange = data => {
+			emit('page-change', data)
+		}
+
+		return {
+			listRef,
+			slots,
+			groupSize,
+			listConfig,
+			listPagerConfig,
+			onPageChange
 		}
 	}
-}
+})
 </script>
 
 <style lang="scss" scoped>

package/packages/components/global-components/sh-loading/index.vue

@@ -1,14 +1,14 @@
 <template>
-	<div v-if="loading" size="large" class="sh-loading" :class="{ fix: fix }">
+	<div v-if="loading" class="sh-loading" :class="{ 'sh-loading-fix': fix }">
 		<div class="loading" :class="`loading${loadingType}`"></div>
 		<div v-if="content" class="loadtext">{{ content }}</div>
 	</div>
 </template>
 
 <script>
-export default {
+import { defineComponent, computed } from 'vue'
+export default defineComponent({
 	name: 'ShLoading',
-	components: {},
 	props: {
 		type: {
 			type: String,
@@ -21,12 +21,16 @@ export default {
 			default: '加载中'
 		}
 	},
-	computed: {
-		loadingType() {
-			return !this.type || this.type > 23 || this.type < 0 ? '12' : this.type
+	setup(props, context) {
+		const loadingType = computed(() => {
+			return !props.type || props.type > 23 || props.type < 0 ? '12' : props.type
+		})
+
+		return {
+			loadingType
 		}
 	}
-}
+})
 </script>
 
 <style scoped lang="scss">
@@ -35,7 +39,7 @@ export default {
 	z-index: 999;
 	background: rgba(255, 255, 255, 0.5);
 	padding: 0.5em;
-	&.fix {
+	&-fix {
 		position: absolute;
 		top: 0;
 		bottom: 0;

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

@@ -1,7 +1,7 @@
 <template>
 	<vxe-modal
 		:id="id"
-		ref="vxeModal"
+		ref="modalRef"
 		v-model="modalVisible"
 		:title="title"
 		:size="size"
@@ -30,7 +30,7 @@
 		@close="onModalClose"
 		@cancel="onModalClose"
 		@confirm="onModalConfirm">
-		<template v-for="slot in Object.keys($slots)" #[slot]="scope">
+		<template v-for="slot in Object.keys(slots)" #[slot]="scope">
 			<!-- 以之前的名字命名插槽，同时把数据原样绑定 -->
 			<slot :name="slot" v-bind="scope"></slot>
 		</template>
@@ -49,7 +49,8 @@
 </template>
 
 <script>
-export default {
+import { defineComponent, watch, ref } from 'vue'
+export default defineComponent({
 	name: 'ShModal',
 	props: {
 		visible: {
@@ -147,50 +148,58 @@ export 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
-		},
+	setup(props, context) {
+		const { emit, slots } = context
+		const modalRef = ref()
+		const modalVisible = ref(props.visible)
+
 		// 弹窗显示回调
-		onModalShow() {
-			this.$emit('show')
-		},
+		const onModalShow = () => {
+			emit('show')
+		}
 		// 弹窗隐藏回调
-		onModalHide() {
-			this.$emit('hide')
-		},
+		const onModalHide = () => {
+			emit('hide')
+		}
 		// 弹窗全屏切换回调
-		onModalZoom() {
-			this.$emit('zoom')
-		},
+		const onModalZoom = () => {
+			emit('zoom')
+		}
 		// 确认操作
-		onModalConfirm() {
-			this.$emit('confirm')
-		},
+		const onModalConfirm = () => {
+			emit('confirm')
+		}
 		// 取消操作
-		onModalClose() {
-			this.$emit('close')
-			this.$emit('update:visible', false)
+		const onModalClose = () => {
+			emit('close')
+			emit('update:visible', false)
+		}
+
+		watch(
+			() => props.visible,
+			value => {
+				modalVisible.value = value
+			}
+		)
+		watch(
+			() => modalVisible.value,
+			value => {
+				if (!value) onModalClose()
+			}
+		)
+
+		return {
+			modalRef,
+			slots,
+			modalVisible,
+			onModalShow,
+			onModalHide,
+			onModalZoom,
+			onModalClose,
+			onModalConfirm
 		}
 	}
-}
+})
 </script>
 
 <style lang="scss" scoped>

package/packages/components/global-components/sh-noticebar/index.vue

@@ -8,8 +8,8 @@
 				<sh-icon class="sh-notice-icon" :type="icon" size="20" />
 			</template>
 		</div>
-		<div ref="wrap" class="sh-notice-bar-content" :class="[multiRows && 'sh-notice-bar-multi-content']">
-			<div ref="content" :class="[overflow && scrollable && 'sh-notice-bar-content-animate']" :style="animateStyles">
+		<div ref="wrapRef" class="sh-notice-bar-content" :class="[multiRows && 'sh-notice-bar-multi-content']">
+			<div ref="contentRef" :class="[overflow && scrollable && 'sh-notice-bar-content-animate']" :style="animateStyles">
 				<slot></slot>
 			</div>
 		</div>
@@ -25,9 +25,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent, computed, onMounted, onUpdated, getCurrentInstance, ref } from 'vue'
+export default defineComponent({
 	name: 'ShNoticebar',
-	components: {},
 	props: {
 		mode: {
 			type: String,
@@ -71,74 +71,88 @@ export default {
 		}
 	},
 	emits: ['close'],
-	data() {
-		return {
-			isShow: true,
-			overflow: false
-		}
-	},
-	computed: {
-		styles() {
+	setup(props, context) {
+		const vm = getCurrentInstance()
+		const { $vUtils } = vm.proxy
+		const { emit, slots } = context
+
+		const wrapRef = ref()
+		const contentRef = ref()
+		const isShow = ref(true)
+		const overflow = ref(false)
+
+		const styles = computed(() => {
 			return {
-				color: this.color,
-				backgroundColor: this.$vUtils.fade(this.color, 30)
+				color: props.color,
+				backgroundColor: $vUtils.fade(props.color, 30)
 			}
-		},
-		animateStyles() {
+		})
+		const animateStyles = computed(() => {
 			return {
-				animationDuration: this.speed + 's'
+				animationDuration: props.speed + 's'
 			}
-		},
-		customLeft() {
-			return Boolean(this.$slots.left)
-		},
-		customRight() {
-			return Boolean(this.$slots.right)
-		},
-		rightIcon() {
-			return this.mode === 'link' ? 'ios-arrow-forward' : 'md-close'
-		}
-	},
-	watch: {},
-	updated() {
-		this.noticebarCheckOverflow()
-	},
-	mounted() {
-		if (this.time) {
-			this.noticebarHide(this.time)
-		}
-		this.noticebarCheckOverflow()
-	},
-	methods: {
-		noticebarHide(time) {
+		})
+		const customLeft = computed(() => {
+			return Boolean(slots.left)
+		})
+		const customRight = computed(() => {
+			return Boolean(slots.right)
+		})
+		const rightIcon = computed(() => {
+			return props.mode === 'link' ? 'ios-arrow-forward' : 'md-close'
+		})
+
+		const noticebarHide = time => {
 			setTimeout(() => {
-				this.isShow = false
+				isShow.value = false
 			}, time)
-		},
-		noticebarClose() {
-			if (this.mode === 'closable' || this.closable) {
-				this.isShow = false
+		}
+		const noticebarClose = () => {
+			if (props.mode === 'closable' || props.closable) {
+				isShow.value = false
 			}
-			this.$emit('close')
-		},
-		noticebarCheckOverflow() {
-			if (!this.scrollable) {
+			emit('close')
+		}
+		const noticebarCheckOverflow = () => {
+			if (!props.scrollable) {
 				return
 			}
-			const { wrap, content } = this.$refs
-			if (!wrap || !content) {
+			if (!wrapRef.value || !contentRef.value) {
 				return
 			}
 			/**
 			 * 计算 padding-left 对宽度的影响
 			 * 替换 clientWidth 为 getBoundingClientRect
 			 */
-			const paddingLeft = window.getComputedStyle(content, null).getPropertyValue('padding').split(' ')[3] || '0px'
+			const paddingLeft = window.getComputedStyle(contentRef.value, null).getPropertyValue('padding').split(' ')[3] || '0px'
 			const left = Number(paddingLeft.match(/\d+/g)[0])
-			this.overflow = content.scrollWidth - left > Math.ceil(wrap.getBoundingClientRect().width)
+			overflow.value = contentRef.value.scrollWidth - left > Math.ceil(wrapRef.value.getBoundingClientRect().width)
+		}
+
+		onMounted(() => {
+			if (props.time) {
+				noticebarHide(props.time)
+			}
+			noticebarCheckOverflow()
+		})
+		onUpdated(() => {
+			noticebarCheckOverflow()
+		})
+
+		return {
+			contentRef,
+			wrapRef,
+			isShow,
+			styles,
+			customLeft,
+			overflow,
+			animateStyles,
+			customRight,
+			rightIcon,
+			noticebarClose
 		}
 	}
-}
+})
 </script>
 
 <style lang="scss" scoped>