sh-view 2.8.1 → 2.8.3

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

@@ -1,215 +1,215 @@
-<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="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>
-		<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>
-import { defineComponent, computed, onMounted, onUpdated, getCurrentInstance, ref } from 'vue'
-export default defineComponent({
-	name: 'ShNoticebar',
-	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'],
-	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: props.color,
-				backgroundColor: $vUtils.fade(props.color, 30)
-			}
-		})
-		const animateStyles = computed(() => {
-			return {
-				animationDuration: props.speed + 's'
-			}
-		})
-		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(() => {
-				isShow.value = false
-			}, time)
-		}
-		const noticebarClose = () => {
-			if (props.mode === 'closable' || props.closable) {
-				isShow.value = false
-			}
-			emit('close')
-		}
-		const noticebarCheckOverflow = () => {
-			if (!props.scrollable) {
-				return
-			}
-			if (!wrapRef.value || !contentRef.value) {
-				return
-			}
-			/**
-			 * 计算 padding-left 对宽度的影响
-			 * 替换 clientWidth 为 getBoundingClientRect
-			 */
-			const paddingLeft = window.getComputedStyle(contentRef.value, null).getPropertyValue('padding').split(' ')[3] || '0px'
-			const left = Number(paddingLeft.match(/\d+/g)[0])
-			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>
-.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>
+<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="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>
+		<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>
+import { defineComponent, computed, onMounted, onUpdated, getCurrentInstance, ref } from 'vue'
+export default defineComponent({
+	name: 'ShNoticebar',
+	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'],
+	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: props.color,
+				backgroundColor: $vUtils.fade(props.color, 30)
+			}
+		})
+		const animateStyles = computed(() => {
+			return {
+				animationDuration: props.speed + 's'
+			}
+		})
+		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(() => {
+				isShow.value = false
+			}, time)
+		}
+		const noticebarClose = () => {
+			if (props.mode === 'closable' || props.closable) {
+				isShow.value = false
+			}
+			emit('close')
+		}
+		const noticebarCheckOverflow = () => {
+			if (!props.scrollable) {
+				return
+			}
+			if (!wrapRef.value || !contentRef.value) {
+				return
+			}
+			/**
+			 * 计算 padding-left 对宽度的影响
+			 * 替换 clientWidth 为 getBoundingClientRect
+			 */
+			const paddingLeft = window.getComputedStyle(contentRef.value, null).getPropertyValue('padding').split(' ')[3] || '0px'
+			const left = Number(paddingLeft.match(/\d+/g)[0])
+			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>
+.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>