@10yun/cv-mobile-ui 0.4.1 → 0.4.2

package/ui-cv/cv-nav-bar/cv-nav-bar.vue

@@ -0,0 +1,256 @@
+<template>
+  <view class="uni-navbar">
+    <view
+      :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }"
+      :style="{ 'background-color': backgroundColor }"
+      class="uni-navbar__content"
+    >
+      <status-bar v-if="statusBar" />
+      <view :style="{ color: color, backgroundColor: backgroundColor }" class="uni-navbar__header uni-navbar__content_view">
+        <view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left uni-navbar__content_view">
+          <view class="uni-navbar__content_view" v-if="leftIcon.length">
+            <cv-icon2 :color="color" :type="leftIcon" size="24" />
+          </view>
+          <view
+            :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length }"
+            class="uni-navbar-btn-text uni-navbar__content_view"
+            v-if="leftText.length"
+          >
+            <text :style="{ color: color, fontSize: '14px' }">{{ leftText }}</text>
+          </view>
+          <slot name="left" />
+        </view>
+        <view class="uni-navbar__header-container uni-navbar__content_view" @tap="onClickTitle">
+          <view class="uni-navbar__header-container-inner uni-navbar__content_view" v-if="title.length">
+            <text class="uni-nav-bar-text" :style="{ color: color }">{{ title }}</text>
+          </view>
+          <!-- 标题插槽 -->
+          <slot />
+        </view>
+        <view
+          :class="title.length ? 'uni-navbar__header-btns-right' : ''"
+          @tap="onClickRight"
+          class="uni-navbar__header-btns uni-navbar__content_view"
+        >
+          <view class="uni-navbar__content_view" v-if="rightIcon.length">
+            <cv-icon2 :color="color" :type="rightIcon" size="24" />
+          </view>
+          <!-- 优先显示图标 -->
+          <view class="uni-navbar-btn-text uni-navbar__content_view" v-if="rightText.length && !rightIcon.length">
+            <text class="uni-nav-bar-right-text">{{ rightText }}</text>
+          </view>
+          <slot name="right" />
+        </view>
+      </view>
+    </view>
+    <view class="uni-navbar__placeholder" v-if="fixed">
+      <status-bar v-if="statusBar" />
+      <view class="uni-navbar__placeholder-view" />
+    </view>
+  </view>
+</template>
+
+<script>
+import statusBar from './cv-status-bar.vue';
+
+/**
+ * NavBar 自定义导航栏
+ * @description 导航栏组件，主要用于头部导航
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=52
+ * @property {String} title 标题文字
+ * @property {String} leftText 左侧按钮文本
+ * @property {String} rightText 右侧按钮文本
+ * @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
+ * @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
+ * @property {String} color 图标和文字颜色
+ * @property {String} backgroundColor 导航栏背景颜色
+ * @property {Boolean} fixed = [true|false] 是否固定顶部
+ * @property {Boolean} statusBar = [true|false] 是否包含状态栏
+ * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
+ * @event {Function} clickLeft 左侧按钮点击时触发
+ * @event {Function} clickRight 右侧按钮点击时触发
+ * @event {Function} clickTitle 中间标题点击时触发
+ */
+export default {
+  name: 'cvNavBar',
+  components: {
+    statusBar
+  },
+  emits: ['clickLeft', 'clickRight', 'clickTitle'],
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    leftText: {
+      type: String,
+      default: ''
+    },
+    rightText: {
+      type: String,
+      default: ''
+    },
+    leftIcon: {
+      type: String,
+      default: ''
+    },
+    rightIcon: {
+      type: String,
+      default: ''
+    },
+    fixed: {
+      type: [Boolean, String],
+      default: false
+    },
+    color: {
+      type: String,
+      default: '#000000'
+    },
+    backgroundColor: {
+      type: String,
+      default: '#FFFFFF'
+    },
+    statusBar: {
+      type: [Boolean, String],
+      default: false
+    },
+    shadow: {
+      type: [Boolean, String],
+      default: false
+    },
+    border: {
+      type: [Boolean, String],
+      default: true
+    }
+  },
+  mounted() {
+    if (uni.report && this.title !== '') {
+      uni.report('title', this.title);
+    }
+  },
+  methods: {
+    onClickLeft() {
+      this.$emit('clickLeft');
+    },
+    onClickRight() {
+      this.$emit('clickRight');
+    },
+    onClickTitle() {
+      this.$emit('clickTitle');
+    }
+  }
+};
+</script>
+
+<style scoped>
+.uni-nav-bar-text {
+  /* #ifdef APP-PLUS */
+  font-size: 34rpx;
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  font-size: 16px;
+  /* #endif */
+}
+
+.uni-nav-bar-right-text {
+  font-size: 14px;
+}
+
+.uni-navbar__content {
+  position: relative;
+  background-color: #ffffff;
+  overflow: hidden;
+}
+
+.uni-navbar__content_view {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  align-items: center;
+  flex-direction: row;
+}
+
+.uni-navbar__header {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  height: 44px;
+  line-height: 44px;
+  font-size: 16px;
+}
+
+.uni-navbar__header-btns {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-wrap: nowrap;
+  width: 120rpx;
+  padding: 0 6px;
+  justify-content: center;
+  align-items: center;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.uni-navbar__header-btns-left {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  width: 150rpx;
+  justify-content: flex-start;
+}
+
+.uni-navbar__header-btns-right {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  width: 150rpx;
+  padding-right: 30rpx;
+  justify-content: flex-end;
+}
+
+.uni-navbar__header-container {
+  flex: 1;
+}
+
+.uni-navbar__header-container-inner {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.uni-navbar__placeholder-view {
+  height: 44px;
+}
+
+.uni-navbar--fixed {
+  position: fixed;
+  z-index: 998;
+  /* #ifdef H5 */
+  left: var(--window-left);
+  right: var(--window-right);
+  /* #endif */
+  /* #ifndef H5 */
+  left: 0;
+  right: 0;
+  /* #endif */
+}
+
+.uni-navbar--shadow {
+  /* #ifndef APP-NVUE */
+  box-shadow: 0 1px 6px #ccc;
+  /* #endif */
+}
+
+.uni-navbar--border {
+  border-bottom-width: 1rpx;
+  border-bottom-style: solid;
+  border-bottom-color: #e5e5e5;
+}
+</style>

package/ui-cv/cv-notice-bar/cv-notice-bar.vue

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