sh-view 1.7.6 → 2.0.0

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

@@ -1,201 +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>
+<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>