{"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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"}