1 line
15 KiB
Plaintext
1 line
15 KiB
Plaintext
{"version":3,"file":"su-notice-bar.js","sources":["../../../../../../src/sheep/ui/su-notice-bar/su-notice-bar.vue"],"sourcesContent":["<!-- 公告栏组件 -->\r\n<template>\r\n <view\r\n v-if=\"show\"\r\n class=\"uni-noticebar\"\r\n :style=\"{ backgroundColor: backgroundColor }\"\r\n @click=\"onClick\"\r\n >\r\n <slot name=\"icon\">\r\n <uni-icons\r\n v-if=\"showIcon === true || showIcon === 'true'\"\r\n class=\"uni-noticebar-icon\"\r\n type=\"sound\"\r\n :color=\"color\"\r\n size=\"22\"\r\n />\r\n </slot>\r\n <view\r\n ref=\"textBox\"\r\n class=\"uni-noticebar__content-wrapper\"\r\n :class=\"{\r\n 'uni-noticebar__content-wrapper--scrollable': scrollable,\r\n 'uni-noticebar__content-wrapper--single': !scrollable && (single || moreText),\r\n }\"\r\n >\r\n <view\r\n :id=\"elIdBox\"\r\n class=\"uni-noticebar__content\"\r\n :class=\"{\r\n 'uni-noticebar__content--scrollable': scrollable,\r\n 'uni-noticebar__content--single': !scrollable && (single || moreText),\r\n }\"\r\n >\r\n <text\r\n :id=\"elId\"\r\n ref=\"animationEle\"\r\n class=\"uni-noticebar__content-text\"\r\n :class=\"{\r\n 'uni-noticebar__content-text--scrollable': scrollable,\r\n 'uni-noticebar__content-text--single': !scrollable && (single || showGetMore),\r\n }\"\r\n :style=\"{\r\n color: color,\r\n width: wrapWidth + 'px',\r\n animationDuration: animationDuration,\r\n '-webkit-animationDuration': animationDuration,\r\n animationPlayState: webviewHide ? 'paused' : animationPlayState,\r\n '-webkit-animationPlayState': webviewHide ? 'paused' : animationPlayState,\r\n animationDelay: animationDelay,\r\n '-webkit-animationDelay': animationDelay,\r\n }\"\r\n >\r\n {{ text }}\r\n </text>\r\n </view>\r\n </view>\r\n <view\r\n v-if=\"showGetMore === true || showGetMore === 'true'\"\r\n class=\"uni-noticebar__more uni-cursor-point\"\r\n @click=\"clickMore\"\r\n >\r\n <text\r\n v-if=\"moreText.length > 0\"\r\n :style=\"{ color: moreColor }\"\r\n class=\"uni-noticebar__more-text\"\r\n >\r\n {{ moreText }}\r\n </text>\r\n <uni-icons v-else type=\"right\" :color=\"moreColor\" size=\"16\" />\r\n </view>\r\n <view\r\n class=\"uni-noticebar-close uni-cursor-point\"\r\n v-if=\"\r\n (showClose === true || showClose === 'true') &&\r\n (showGetMore === false || showGetMore === 'false')\r\n \"\r\n >\r\n <view @click=\"close\">\r\n <slot name=\"close\">\r\n <uni-icons type=\"closeempty\" :color=\"color\" size=\"16\" />\r\n </slot>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script>\r\nimport sheep from '@/sheep'\r\n// #ifdef APP-NVUE\r\nconst dom = weex.requireModule('dom')\r\nconst animation = weex.requireModule('animation')\r\n// #endif\r\n\r\n/**\r\n * NoticeBar 自定义导航栏\r\n * @description 通告栏组件\r\n * @tutorial https://ext.dcloud.net.cn/plugin?id=30\r\n * @property {Number} speed 文字滚动的速度，默认100px/秒\r\n * @property {String} text 显示文字\r\n * @property {String} backgroundColor 背景颜色\r\n * @property {String} color 文字颜色\r\n * @property {String} moreColor 查看更多文字的颜色\r\n * @property {String} moreText 设置“查看更多”的文本\r\n * @property {Boolean} single = [true|false] 是否单行\r\n * @property {Boolean} scrollable = [true|false] 是否滚动，为true时，NoticeBar为单行\r\n * @property {Boolean} showIcon = [true|false] 是否显示左侧喇叭图标\r\n * @property {Boolean} showClose = [true|false] 是否显示左侧关闭按钮\r\n * @property {Boolean} showGetMore = [true|false] 是否显示右侧查看更多图标，为true时，NoticeBar为单行\r\n * @event {Function} click 点击 NoticeBar 触发事件\r\n * @event {Function} close 关闭 NoticeBar 触发事件\r\n * @event {Function} getmore 点击”查看更多“时触发事件\r\n */\r\n\r\nexport default {\r\n name: 'UniNoticeBar',\r\n emits: ['click', 'getmore', 'close'],\r\n props: {\r\n text: {\r\n type: String,\r\n default: '',\r\n },\r\n moreText: {\r\n type: String,\r\n default: '',\r\n },\r\n backgroundColor: {\r\n type: String,\r\n default: '',\r\n },\r\n speed: {\r\n // 默认1s滚动100px\r\n type: Number,\r\n default: 100,\r\n },\r\n color: {\r\n type: String,\r\n default: 'var(--ui-BG-Main)',\r\n },\r\n moreColor: {\r\n type: String,\r\n default: '#FF9A43',\r\n },\r\n single: {\r\n // 是否单行\r\n type: [Boolean, String],\r\n default: false,\r\n },\r\n scrollable: {\r\n // 是否滚动，添加后控制单行效果取消\r\n type: [Boolean, String],\r\n default: false,\r\n },\r\n showIcon: {\r\n // 是否显示左侧icon\r\n type: [Boolean, String],\r\n default: false,\r\n },\r\n showGetMore: {\r\n // 是否显示右侧查看更多\r\n type: [Boolean, String],\r\n default: false,\r\n },\r\n showClose: {\r\n // 是否显示左侧关闭按钮\r\n type: [Boolean, String],\r\n default: false,\r\n },\r\n },\r\n data() {\r\n const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`\r\n const elIdBox = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`\r\n return {\r\n textWidth: 0,\r\n boxWidth: 0,\r\n wrapWidth: '',\r\n webviewHide: false,\r\n // #ifdef APP-NVUE\r\n stopAnimation: false,\r\n // #endif\r\n elId: elId,\r\n elIdBox: elIdBox,\r\n show: true,\r\n animationDuration: 'none',\r\n animationPlayState: 'paused',\r\n animationDelay: '0s',\r\n }\r\n },\r\n mounted() {\r\n // #ifdef APP-PLUS\r\n var pages = getCurrentPages()\r\n var page = pages[pages.length - 1]\r\n var currentWebview = page.$getAppWebview()\r\n currentWebview.addEventListener('hide', () => {\r\n this.webviewHide = true\r\n })\r\n currentWebview.addEventListener('show', () => {\r\n this.webviewHide = false\r\n })\r\n // #endif\r\n this.$nextTick(() => {\r\n this.initSize()\r\n })\r\n },\r\n // #ifdef APP-NVUE\r\n beforeDestroy() {\r\n this.stopAnimation = true\r\n },\r\n // #endif\r\n methods: {\r\n initSize() {\r\n if (this.scrollable) {\r\n // #ifndef APP-NVUE\r\n let query = [],\r\n boxWidth = 0,\r\n textWidth = 0\r\n let textQuery = new Promise((resolve, reject) => {\r\n uni\r\n .createSelectorQuery()\r\n // #ifndef MP-ALIPAY\r\n .in(this)\r\n // #endif\r\n .select(`#${this.elId}`)\r\n .boundingClientRect()\r\n .exec((ret) => {\r\n this.textWidth = ret[0].width\r\n resolve()\r\n })\r\n })\r\n let boxQuery = new Promise((resolve, reject) => {\r\n uni\r\n .createSelectorQuery()\r\n // #ifndef MP-ALIPAY\r\n .in(this)\r\n // #endif\r\n .select(`#${this.elIdBox}`)\r\n .boundingClientRect()\r\n .exec((ret) => {\r\n this.boxWidth = ret[0].width\r\n resolve()\r\n })\r\n })\r\n query.push(textQuery)\r\n query.push(boxQuery)\r\n Promise.all(query).then(() => {\r\n this.animationDuration = `${this.textWidth / this.speed}s`\r\n this.animationDelay = `-${this.boxWidth / this.speed}s`\r\n setTimeout(() => {\r\n this.animationPlayState = 'running'\r\n }, 1000)\r\n })\r\n // #endif\r\n // #ifdef APP-NVUE\r\n dom.getComponentRect(this.$refs['animationEle'], (res) => {\r\n let winWidth = sheep.$platform.device.windowWidth\r\n this.textWidth = res.size.width\r\n animation.transition(\r\n this.$refs['animationEle'],\r\n {\r\n styles: {\r\n transform: `translateX(-${winWidth}px)`,\r\n },\r\n duration: 0,\r\n timingFunction: 'linear',\r\n delay: 0,\r\n },\r\n () => {\r\n if (!this.stopAnimation) {\r\n animation.transition(\r\n this.$refs['animationEle'],\r\n {\r\n styles: {\r\n transform: `translateX(-${this.textWidth}px)`,\r\n },\r\n timingFunction: 'linear',\r\n duration: ((this.textWidth - winWidth) / this.speed) * 1000,\r\n delay: 1000,\r\n },\r\n () => {\r\n if (!this.stopAnimation) {\r\n this.loopAnimation()\r\n }\r\n },\r\n )\r\n }\r\n },\r\n )\r\n })\r\n // #endif\r\n }\r\n // #ifdef APP-NVUE\r\n if (!this.scrollable && (this.single || this.moreText)) {\r\n dom.getComponentRect(this.$refs['textBox'], (res) => {\r\n this.wrapWidth = res.size.width\r\n })\r\n }\r\n // #endif\r\n },\r\n loopAnimation() {\r\n // #ifdef APP-NVUE\r\n animation.transition(\r\n this.$refs['animationEle'],\r\n {\r\n styles: {\r\n transform: `translateX(0px)`,\r\n },\r\n duration: 0,\r\n },\r\n () => {\r\n if (!this.stopAnimation) {\r\n animation.transition(\r\n this.$refs['animationEle'],\r\n {\r\n styles: {\r\n transform: `translateX(-${this.textWidth}px)`,\r\n },\r\n duration: (this.textWidth / this.speed) * 1000,\r\n timingFunction: 'linear',\r\n delay: 0,\r\n },\r\n () => {\r\n if (!this.stopAnimation) {\r\n this.loopAnimation()\r\n }\r\n },\r\n )\r\n }\r\n },\r\n )\r\n // #endif\r\n },\r\n clickMore() {\r\n this.$emit('getmore')\r\n },\r\n close() {\r\n this.show = false\r\n this.$emit('close')\r\n },\r\n onClick() {\r\n this.$emit('click')\r\n },\r\n },\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.uni-noticebar {\r\n /* #ifndef APP-NVUE */\r\n display: flex;\r\n width: 100%;\r\n box-sizing: border-box;\r\n /* #endif */\r\n flex-direction: row;\r\n align-items: center;\r\n padding: 10px 12px;\r\n // margin-bottom: 10px;\r\n}\r\n\r\n.uni-cursor-point {\r\n /* #ifdef H5 */\r\n cursor: pointer;\r\n /* #endif */\r\n}\r\n\r\n.uni-noticebar-close {\r\n margin-left: 8px;\r\n margin-right: 5px;\r\n}\r\n\r\n.uni-noticebar-icon {\r\n margin-right: 5px;\r\n}\r\n\r\n.uni-noticebar__content-wrapper {\r\n flex: 1;\r\n flex-direction: column;\r\n overflow: hidden;\r\n}\r\n\r\n.uni-noticebar__content-wrapper--single {\r\n /* #ifndef APP-NVUE */\r\n line-height: 18px;\r\n /* #endif */\r\n}\r\n\r\n.uni-noticebar__content-wrapper--single,\r\n.uni-noticebar__content-wrapper--scrollable {\r\n flex-direction: row;\r\n}\r\n\r\n/* #ifndef APP-NVUE */\r\n.uni-noticebar__content-wrapper--scrollable {\r\n position: relative;\r\n height: 18px;\r\n}\r\n\r\n/* #endif */\r\n\r\n.uni-noticebar__content--scrollable {\r\n /* #ifdef APP-NVUE */\r\n flex: 0;\r\n /* #endif */\r\n /* #ifndef APP-NVUE */\r\n flex: 1;\r\n display: block;\r\n overflow: hidden;\r\n /* #endif */\r\n}\r\n\r\n.uni-noticebar__content--single {\r\n /* #ifndef APP-NVUE */\r\n display: flex;\r\n flex: none;\r\n width: 100%;\r\n justify-content: center;\r\n /* #endif */\r\n}\r\n\r\n.uni-noticebar__content-text {\r\n font-size: 14px;\r\n line-height: 18px;\r\n /* #ifndef APP-NVUE */\r\n word-break: break-all;\r\n /* #endif */\r\n}\r\n\r\n.uni-noticebar__content-text--single {\r\n /* #ifdef APP-NVUE */\r\n lines: 1;\r\n /* #endif */\r\n /* #ifndef APP-NVUE */\r\n display: block;\r\n width: 100%;\r\n white-space: nowrap;\r\n /* #endif */\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.uni-noticebar__content-text--scrollable {\r\n /* #ifdef APP-NVUE */\r\n lines: 1;\r\n padding-left: 750rpx;\r\n /* #endif */\r\n /* #ifndef APP-NVUE */\r\n position: absolute;\r\n display: block;\r\n height: 18px;\r\n line-height: 18px;\r\n white-space: nowrap;\r\n padding-left: 100%;\r\n animation: notice 10s 0s linear infinite both;\r\n animation-play-state: paused;\r\n /* #endif */\r\n}\r\n\r\n.uni-noticebar__more {\r\n /* #ifndef APP-NVUE */\r\n display: inline-flex;\r\n /* #endif */\r\n flex-direction: row;\r\n flex-wrap: nowrap;\r\n align-items: center;\r\n padding-left: 5px;\r\n}\r\n\r\n.uni-noticebar__more-text {\r\n font-size: 14px;\r\n}\r\n\r\n@keyframes notice {\r\n 100% {\r\n transform: translate3d(-100%, 0, 0);\r\n }\r\n}\r\n</style>\r\n"],"names":[],"mappings":"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"} |