vdesign-ui 0.2.9 → 0.2.12

package/dist/components/noticebar/index.vue

@@ -1,258 +1,258 @@
-<template>
-  <div
-    :class="[mode ? `${prefixCls}-${mode}` : '', type ? 'vd-noticebar-' + type : '', { 'vd-noticebar-action': action }]"
-    v-if="isShow">
-    <!-- 左侧图标 -->
-    <div v-if="customLeft || customIcon" :class="`${prefixCls}-${mode}__left`">
-      <template v-if="customLeft">
-        <slot name="left"></slot>
-      </template>
-
-      <template v-else-if="customIcon">
-        <vd-icon :name="customIcon" :svg="iconSvg"></vd-icon>
-      </template>
-    </div>
-    <!-- 内容区 -->
-    <div :class="[`${prefixCls}-${mode}__content`, multiRows && `${prefixCls}-${mode}__multi`]" ref="wrap">
-      <!-- scrollable -->
-      <div v-if="scrollable" :style="contentStyle"
-        :class="[(overflow && scrollable) && `${prefixCls}-${mode}__content--animate`]" ref="content">
-        <div v-if="customTitle || title" :class="`${prefixCls}-${mode}__message`">
-          <div :class="[`${prefixCls}-${mode}__message--title`]">
-            <template v-if="customTitle">
-              <slot name="title"></slot>
-            </template>
-            <template v-else>{{ title }}</template>
-          </div>
-          <div v-if="tag" :class="[tag && `${prefixCls}-${mode}__message--tag`, state ? 'vd-noticebar-' + state : '']">
-            {{
-              tag
-            }}</div>
-        </div>
-        <slot></slot>
-      </div>
-      <template v-else>
-        <div v-if="customTitle || title" :class="`${prefixCls}-${mode}__message`">
-          <div :class="[`${prefixCls}-${mode}__message--title`]">
-            <template v-if="customTitle">
-              <slot name="title"></slot>
-            </template>
-            <template v-else>{{ title }}</template>
-          </div>
-          <div v-if="tag" :class="[tag && `${prefixCls}-${mode}__message--tag`, state ? 'vd-noticebar-' + state : '']">
-            <vd-icon
-              :name="state === 'success' ? 'icon_show_finished' : state === 'tips' ? 'icon_show_doing' : state === 'warning' ? 'icon_show_failed' : 'icon_show_cancel'"></vd-icon>
-            {{ tag }}
-          </div>
-        </div>
-        <slot></slot>
-      </template>
-    </div>
-    <!-- 右侧操作区 -->
-    <div :class="`${prefixCls}-${mode}__right`">
-      <template v-if="customRight">
-        <slot name="right"></slot>
-      </template>
-      <!-- 操作区 -->
-      <div v-if="action" :class="`${prefixCls}-${mode}__button`">
-        <vd-button type="primary_text">{{ action }}</vd-button>
-      </div>
-      <!-- 可关闭 -->
-      <vd-icon v-if="closable" name="icon_btn_close" @click.native.stop="$_close"></vd-icon>
-      <!-- 可链接 -->
-      <vd-icon v-if="islink" name="icon_btn_next"></vd-icon>
-    </div>
-  </div>
-</template>
-
-<script>
-import VdIcon from '../icon';
-import VdButton from '../button';
-import { inBrowser } from '../utils/env'
-export default {
-  components: {
-    VdIcon,
-    VdButton,
-  },
-  name: 'vd-noticebar',
-  props: {
-    prefixCls: {
-      type: String,
-      default: 'vd-noticebar'
-    },
-    mode: {
-      type: String,
-      default: 'snackbar', // snackbar toast notify
-    },
-    type: {
-      type: String,
-      default: 'info', // info/warning/tips
-    },
-    scrollable: {
-      type: Boolean,
-      default: false,
-    },
-    closable: {
-      type: Boolean,
-      default: false,
-    },
-    islink: {
-      type: Boolean,
-      default: false
-    },
-    // notify
-    title: {
-      type: String,
-      default: '',
-    },
-    action: {
-      type: String,
-      default: '',
-    },
-    tag: {
-      type: String,
-      default: '',
-    },
-    state: {
-      type: String,
-      default: 'tips'
-    },
-    // 画蛇添足部分
-    icon: {
-      type: String,
-      default: '',
-    },
-    iconSvg: {
-      type: Boolean,
-      default: false,
-    },
-    multiRows: {
-      type: Boolean,
-      default: false,
-    },
-    speed: {
-      type: Number,
-      default: 50
-    },
-    defaultWidth: {
-      type: Number,
-      default: 375
-    }
-  },
-
-  data() {
-    return {
-      isShow: true,
-      overflow: false,
-      contentStyle: {
-        transitionDuration: '0s',
-        transform: 'translateX(0px)'
-      },
-      wrapWidth: 0,
-      contentWidth: 0,
-      time: 0,
-      timer: null,
-      convertSpeed: 1
-    }
-  },
-
-  computed: {
-    customIcon() {
-      let result
-      if (this.mode === 'toast') {
-        result = this.type === 'warning' ? 'icon_btn_clean' : 'icon_show_finished'
-      } else {
-        result = this.icon
-      }
-      return result
-    },
-    customLeft() {
-      return !!this.$slots.left
-    },
-
-    customRight() {
-      return !!this.$slots.right
-    },
-
-    customTitle() {
-      return !!this.$slots.title
-    }
-  },
-
-  updated() {
-    if (inBrowser) {
-      this.$_checkOverflow();
-    }
-  },
-
-  mounted() {
-    if (inBrowser) {
-      this.$_checkOverflow();
-      this.init();
-    }
-  },
-
-  methods: {
-    $_close() {
-      if (this.closable) {
-        this.isShow = false
-      }
-      this.$emit('close')
-    },
-    $_checkOverflow() {
-      if (!this.scrollable) {
-        return
-      }
-      const { wrap, content } = this.$refs
-
-      /* istanbul ignore if */
-      if (!wrap || !content) {
-        return
-      }
-
-      const paddingLeft =
-        window
-          .getComputedStyle(content, null)
-          .getPropertyValue('padding')
-          .split(' ')[3] || '0px'
-      const left = +paddingLeft.match(/\d+/g)[0]
-      this.overflow = content.scrollWidth - left > Math.ceil(wrap.getBoundingClientRect().width)
-
-    },
-    init() {
-      if (!inBrowser) return; // 确保只在浏览器环境执行
-      const { wrap, content } = this.$refs
-      if (wrap && content) {
-        // const _width = window.innerWidth
-        // this.convertSpeed = _width / this.defaultWidth * this.speed  // 根据分辨率转化成不同的速度
-        this.convertSpeed = 375 / this.defaultWidth * this.speed //_width / this.defaultWidth * this.speed  // 根据分辨率转化成不同的速度
-        this.wrapWidth = wrap.offsetWidth
-        this.contentWidth = content.scrollWidth
-        console.log(content.scrollWidth);
-        this.startAnimate()
-        this.timer = setInterval(() => {
-          this.startAnimate()
-        }, this.time * 1000)
-        this.$once('hook:beforeDestroy', () => {
-          clearInterval(this.timer)
-          this.timer = null
-        })
-      }
-    },
-    startAnimate() {
-      this.contentStyle.transitionDuration = '0s'
-      this.contentStyle.transform = 'translateX(' + this.wrapWidth + 'px)'
-      this.time = (this.wrapWidth + this.contentWidth) / this.convertSpeed
-      setTimeout(() => {
-        this.contentStyle.transitionDuration = this.time + 's'
-        this.contentStyle.transform = 'translateX(-' + this.contentWidth + 'px)'
-      }, 200)
-    },
-  },
-}
-
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>
+<template>
+  <div
+    :class="[mode ? `${prefixCls}-${mode}` : '', type ? 'vd-noticebar-' + type : '', { 'vd-noticebar-action': action }]"
+    v-if="isShow">
+    <!-- 左侧图标 -->
+    <div v-if="customLeft || customIcon" :class="`${prefixCls}-${mode}__left`">
+      <template v-if="customLeft">
+        <slot name="left"></slot>
+      </template>
+
+      <template v-else-if="customIcon">
+        <vd-icon :name="customIcon" :svg="iconSvg"></vd-icon>
+      </template>
+    </div>
+    <!-- 内容区 -->
+    <div :class="[`${prefixCls}-${mode}__content`, multiRows && `${prefixCls}-${mode}__multi`]" ref="wrap">
+      <!-- scrollable -->
+      <div v-if="scrollable" :style="contentStyle"
+        :class="[(overflow && scrollable) && `${prefixCls}-${mode}__content--animate`]" ref="content">
+        <div v-if="customTitle || title" :class="`${prefixCls}-${mode}__message`">
+          <div :class="[`${prefixCls}-${mode}__message--title`]">
+            <template v-if="customTitle">
+              <slot name="title"></slot>
+            </template>
+            <template v-else>{{ title }}</template>
+          </div>
+          <div v-if="tag" :class="[tag && `${prefixCls}-${mode}__message--tag`, state ? 'vd-noticebar-' + state : '']">
+            {{
+              tag
+            }}</div>
+        </div>
+        <slot></slot>
+      </div>
+      <template v-else>
+        <div v-if="customTitle || title" :class="`${prefixCls}-${mode}__message`">
+          <div :class="[`${prefixCls}-${mode}__message--title`]">
+            <template v-if="customTitle">
+              <slot name="title"></slot>
+            </template>
+            <template v-else>{{ title }}</template>
+          </div>
+          <div v-if="tag" :class="[tag && `${prefixCls}-${mode}__message--tag`, state ? 'vd-noticebar-' + state : '']">
+            <vd-icon
+              :name="state === 'success' ? 'icon_show_finished' : state === 'tips' ? 'icon_show_doing' : state === 'warning' ? 'icon_show_failed' : 'icon_show_cancel'"></vd-icon>
+            {{ tag }}
+          </div>
+        </div>
+        <slot></slot>
+      </template>
+    </div>
+    <!-- 右侧操作区 -->
+    <div :class="`${prefixCls}-${mode}__right`">
+      <template v-if="customRight">
+        <slot name="right"></slot>
+      </template>
+      <!-- 操作区 -->
+      <div v-if="action" :class="`${prefixCls}-${mode}__button`">
+        <vd-button type="primary_text">{{ action }}</vd-button>
+      </div>
+      <!-- 可关闭 -->
+      <vd-icon v-if="closable" name="icon_btn_close" @click.native.stop="$_close"></vd-icon>
+      <!-- 可链接 -->
+      <vd-icon v-if="islink" name="icon_btn_next"></vd-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+import VdIcon from '../icon';
+import VdButton from '../button';
+import { inBrowser } from '../utils/env'
+export default {
+  components: {
+    VdIcon,
+    VdButton,
+  },
+  name: 'vd-noticebar',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'vd-noticebar'
+    },
+    mode: {
+      type: String,
+      default: 'snackbar', // snackbar toast notify
+    },
+    type: {
+      type: String,
+      default: 'info', // info/warning/tips
+    },
+    scrollable: {
+      type: Boolean,
+      default: false,
+    },
+    closable: {
+      type: Boolean,
+      default: false,
+    },
+    islink: {
+      type: Boolean,
+      default: false
+    },
+    // notify
+    title: {
+      type: String,
+      default: '',
+    },
+    action: {
+      type: String,
+      default: '',
+    },
+    tag: {
+      type: String,
+      default: '',
+    },
+    state: {
+      type: String,
+      default: 'tips'
+    },
+    // 画蛇添足部分
+    icon: {
+      type: String,
+      default: '',
+    },
+    iconSvg: {
+      type: Boolean,
+      default: false,
+    },
+    multiRows: {
+      type: Boolean,
+      default: false,
+    },
+    speed: {
+      type: Number,
+      default: 50
+    },
+    defaultWidth: {
+      type: Number,
+      default: 375
+    }
+  },
+
+  data() {
+    return {
+      isShow: true,
+      overflow: false,
+      contentStyle: {
+        transitionDuration: '0s',
+        transform: 'translateX(0px)'
+      },
+      wrapWidth: 0,
+      contentWidth: 0,
+      time: 0,
+      timer: null,
+      convertSpeed: 1
+    }
+  },
+
+  computed: {
+    customIcon() {
+      let result
+      if (this.mode === 'toast') {
+        result = this.type === 'warning' ? 'icon_btn_clean' : 'icon_show_finished'
+      } else {
+        result = this.icon
+      }
+      return result
+    },
+    customLeft() {
+      return !!this.$slots.left
+    },
+
+    customRight() {
+      return !!this.$slots.right
+    },
+
+    customTitle() {
+      return !!this.$slots.title
+    }
+  },
+
+  updated() {
+    if (inBrowser) {
+      this.$_checkOverflow();
+    }
+  },
+
+  mounted() {
+    if (inBrowser) {
+      this.$_checkOverflow();
+      this.init();
+    }
+  },
+
+  methods: {
+    $_close() {
+      if (this.closable) {
+        this.isShow = false
+      }
+      this.$emit('close')
+    },
+    $_checkOverflow() {
+      if (!this.scrollable) {
+        return
+      }
+      const { wrap, content } = this.$refs
+
+      /* istanbul ignore if */
+      if (!wrap || !content) {
+        return
+      }
+
+      const paddingLeft =
+        window
+          .getComputedStyle(content, null)
+          .getPropertyValue('padding')
+          .split(' ')[3] || '0px'
+      const left = +paddingLeft.match(/\d+/g)[0]
+      this.overflow = content.scrollWidth - left > Math.ceil(wrap.getBoundingClientRect().width)
+
+    },
+    init() {
+      if (!inBrowser) return; // 确保只在浏览器环境执行
+      const { wrap, content } = this.$refs
+      if (wrap && content) {
+        // const _width = window.innerWidth
+        // this.convertSpeed = _width / this.defaultWidth * this.speed  // 根据分辨率转化成不同的速度
+        this.convertSpeed = 375 / this.defaultWidth * this.speed //_width / this.defaultWidth * this.speed  // 根据分辨率转化成不同的速度
+        this.wrapWidth = wrap.offsetWidth
+        this.contentWidth = content.scrollWidth
+        console.log(content.scrollWidth);
+        this.startAnimate()
+        this.timer = setInterval(() => {
+          this.startAnimate()
+        }, this.time * 1000)
+        this.$once('hook:beforeDestroy', () => {
+          clearInterval(this.timer)
+          this.timer = null
+        })
+      }
+    },
+    startAnimate() {
+      this.contentStyle.transitionDuration = '0s'
+      this.contentStyle.transform = 'translateX(' + this.wrapWidth + 'px)'
+      this.time = (this.wrapWidth + this.contentWidth) / this.convertSpeed
+      setTimeout(() => {
+        this.contentStyle.transitionDuration = this.time + 's'
+        this.contentStyle.transform = 'translateX(-' + this.contentWidth + 'px)'
+      }, 200)
+    },
+  },
+}
+
+</script>
+
+<style lang="less">
+@import './style.less';
+</style>