sh-view 1.5.2

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

@@ -0,0 +1,142 @@
+<template>
+	<div class="sh-split heightall">
+		<div v-if="loading" class="layout-loader">
+			<div class="loadbox">
+				<div class="loading" :class="`loading${loadingType < 0 || loadingType > 23 ? 2 : loadingType}`"></div>
+				<div v-if="loadingText" class="loadtext">{{ loadingText }}</div>
+			</div>
+		</div>
+		<Split v-model="verticalValue" mode="vertical">
+			<template #top><slot name="head"></slot></template>
+			<template #bottom>
+				<Split v-model="value" :mode="mode" :min="min" :max="max" @on-move-start="onMoveStart" @on-moving="onMoveing" @on-move-end="onMoveEnd">
+					<template #top><slot name="top"></slot></template>
+					<template #bottom><slot name="bottom"></slot></template>
+					<template #left><slot name="left"></slot></template>
+					<template #right
+						><div class="split-right"><slot name="right"></slot></div
+					></template>
+					<template v-if="disabled" #trigger>
+						<Divider class="m-0 heightall" :type="dividerMode">{{ dividerText }}</Divider>
+					</template>
+				</Split>
+			</template>
+			<template v-if="verticalDisabled" #trigger>
+				<Divider v-show="$slots.head" class="m-0" type="horizontal"></Divider>
+			</template>
+		</Split>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShLayout',
+	components: {},
+	props: {
+		split: {
+			type: [Number, String],
+			default: 0.2
+		},
+		mode: {
+			type: String,
+			default: 'horizontal'
+		},
+		min: {
+			type: [Number, String],
+			default: 0
+		},
+		max: {
+			type: [Number, String],
+			default: 0.6
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		dividerText: {
+			type: String,
+			default: ''
+		},
+		loading: {
+			type: Boolean
+		},
+		loadingText: {
+			type: String,
+			default: ''
+		},
+		loadingType: {
+			type: String,
+			default: '2'
+		},
+		verticalSplit: {
+			type: [Number, String],
+			default: '50px'
+		},
+		verticalDisabled: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ['move-start', 'moveing', 'move-end', 'update:modelValue'],
+	data() {
+		return {
+			value: this.split,
+			verticalValue: this.$slots.head ? this.verticalSplit : 0,
+			modeArr: ['horizontal', 'vertical']
+		}
+	},
+	computed: {
+		dividerMode() {
+			return this.modeArr.filter(item => item !== this.mode)
+		}
+	},
+	watch: {},
+	created() {},
+	mounted() {},
+	beforeUnmount() {},
+	methods: {
+		// 拖拽开始
+		onMoveStart() {
+			this.$emit('move-start', this.value)
+		},
+		// 拖拽
+		onMoveing() {
+			this.$emit('moveing', this.value)
+		},
+		// 拖拽结束
+		onMoveEnd() {
+			this.$emit('update:modelValue', this.value)
+			this.$emit('move-end', this.value)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-split {
+	position: relative;
+	.layout-loader {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.4);
+		transition: opacity 0.65s;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-wrap: wrap;
+		font-size: 15px;
+		color: #fff;
+		z-index: 100;
+	}
+	.split-right {
+		position: absolute;
+		right: 0;
+		left: 5px;
+		top: 0;
+		bottom: 0;
+	}
+}
+</style>

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

@@ -0,0 +1,42 @@
+<template>
+	<Spin v-if="loading" size="large" :fix="fix" class="sh-loading">
+		<div class="loading" :class="`loading${loadingType}`"></div>
+		<div v-if="content" class="loadtext">{{ content }}</div>
+	</Spin>
+</template>
+
+<script>
+export default {
+	name: 'ShLoading',
+	components: {},
+	props: {
+		type: {
+			type: String,
+			default: '12'
+		},
+		loading: Boolean,
+		fix: Boolean,
+		content: {
+			type: [String, Number],
+			default: '加载中'
+		}
+	},
+	computed: {
+		loadingType() {
+			return !this.type || this.type > 23 || this.type < 0 ? '12' : this.type
+		}
+	}
+}
+</script>
+
+<style scoped lang="scss">
+.sh-loading {
+	position: relative;
+	z-index: 999;
+	background: rgba(255, 255, 255, 0.5);
+	padding: 0.5em;
+	.loadtext {
+		color: var(--theme-color);
+	}
+}
+</style>

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

@@ -0,0 +1,201 @@
+<template>
+	<div v-if="isShow" class="sh-notice-bar" :class="[round && 'sh-notice-bar-round', type]" :style="styles">
+		<div class="sh-notice-bar-left" :class="[!customLeft && !icon && 'sh-notice-bar-empty']">
+			<template v-if="customLeft">
+				<slot name="left"></slot>
+			</template>
+			<template v-else-if="icon">
+				<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">
+				<slot></slot>
+			</div>
+		</div>
+		<div class="sh-notice-bar-right">
+			<template v-if="customRight">
+				<slot name="right"></slot>
+			</template>
+			<template v-else-if="mode || closable">
+				<sh-icon class="sh-notice-icon sh-notice-icon-right" :type="rightIcon" size="20" @click.stop="noticebarClose" />
+			</template>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShNoticeBar',
+	components: {},
+	props: {
+		mode: {
+			type: String,
+			default: ''
+		},
+		type: {
+			type: String,
+			default: 'default' // default/activity/warning
+		},
+		color: {
+			type: String,
+			default: '#1890ff'
+		},
+		time: {
+			type: Number,
+			default: 0
+		},
+		round: {
+			type: Boolean,
+			default: false
+		},
+		multiRows: {
+			type: Boolean,
+			default: false
+		},
+		scrollable: {
+			type: Boolean,
+			default: false
+		},
+		icon: {
+			type: String,
+			default: ''
+		},
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		speed: {
+			type: Number,
+			default: 50
+		}
+	},
+	emits: ['close'],
+	data() {
+		return {
+			isShow: true,
+			overflow: false
+		}
+	},
+	computed: {
+		styles() {
+			return {
+				color: this.color,
+				backgroundColor: this.$vUtils.fade(this.color, 30)
+			}
+		},
+		animateStyles() {
+			return {
+				animationDuration: this.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) {
+			setTimeout(() => {
+				this.isShow = false
+			}, time)
+		},
+		noticebarClose() {
+			if (this.mode === 'closable' || this.closable) {
+				this.isShow = false
+			}
+			this.$emit('close')
+		},
+		noticebarCheckOverflow() {
+			if (!this.scrollable) {
+				return
+			}
+			const { wrap, content } = this.$refs
+			if (!wrap || !content) {
+				return
+			}
+			/**
+			 * 计算 padding-left 对宽度的影响
+			 * 替换 clientWidth 为 getBoundingClientRect
+			 */
+			const paddingLeft = window.getComputedStyle(content, null).getPropertyValue('padding').split(' ')[3] || '0px'
+			const left = Number(paddingLeft.match(/\d+/g)[0])
+			this.overflow = content.scrollWidth - left > Math.ceil(wrap.getBoundingClientRect().width)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-notice-bar {
+	display: flex;
+	background-color: rgba(0, 0, 0, 0.05);
+	color: inherit;
+	position: relative;
+	z-index: 15;
+	padding: 10px 0 10px 15px;
+	box-sizing: border-box;
+	&.sh-notice-bar-round {
+		border-radius: 6px;
+	}
+	.sh-notice-icon {
+		cursor: pointer;
+	}
+}
+.sh-notice-bar-left,
+.sh-notice-bar-right {
+	display: flex;
+	align-items: center;
+}
+
+.sh-notice-bar-left {
+	padding-right: 10px;
+}
+.sh-notice-bar-right {
+	padding: 0 10px;
+}
+.sh-notice-bar-empty {
+	padding-right: 0;
+}
+
+.sh-notice-bar-content {
+	flex: 1;
+	margin: auto;
+	width: auto;
+	white-space: nowrap;
+	overflow: hidden;
+	&.sh-notice-bar-multi-content {
+		padding: 0;
+		line-height: 1.5;
+		white-space: normal;
+	}
+	.sh-notice-bar-content-animate {
+		padding-left: 100%;
+		display: inline-block;
+		animation: sh-notice-bar-animation linear 30s infinite both;
+	}
+}
+@keyframes sh-notice-bar-animation {
+	0% {
+		transform: translate3d(0, 0, 0);
+	}
+	100% {
+		transform: translate3d(-100%, 0, 0);
+	}
+}
+</style>

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

@@ -0,0 +1,62 @@
+<template>
+	<div class="sh-preview">
+		<template v-if="previewObj.component">
+			<component :is="previewObj.component" :url="url" :width="width" :height="height" disabled />
+		</template>
+		<iframe v-else :src="(previewObj.base || '') + url + '#scrollbars=0&toolbar=0&statusbar=0'" :width="width" :height="height" frameborder="0"></iframe>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'ShPreview',
+	props: {
+		type: {
+			type: String
+		},
+		base: {
+			type: String
+		},
+		url: {
+			type: String
+		},
+		width: {
+			type: String,
+			default: '100%'
+		},
+		height: {
+			type: String,
+			default: '600px'
+		}
+	},
+	data() {
+		return {
+			compTypeObj: [
+				{
+					types: ['word', 'doc', 'docx'],
+					component: 'ShWord'
+				},
+				{
+					types: ['excel', 'xlsx'],
+					component: 'ShSheet'
+				}
+			]
+		}
+	},
+	computed: {
+		previewType() {
+			return (this.type && this.type.toLowerCase()) || (this.url && this.url.substr(this.url.lastIndexOf('.') + 1).toLowerCase())
+		},
+		previewObj() {
+			return this.compTypeObj.find(item => item.types.includes(this.previewType)) || {}
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.sh-preview {
+	position: relative;
+	overflow: auto;
+}
+</style>