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

package/ui-cv/cv-load-more/cv-load-more.vue

@@ -66,10 +66,32 @@
 </template>
 
 <script>
-const platform = uni.getSystemInfoSync().platform;
-
+let platform;
+setTimeout(() => {
+  platform = uni.getSystemInfoSync().platform;
+}, 16);
+
+/**
+ * LoadMore 加载更多
+ * @description 用于列表中，做滚动加载使用，展示 loading 的各种状态
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=29
+ * @property {String} status = [more|loading|noMore] loading 的状态
+ * 	@value more loading前
+ * 	@value loading loading中
+ * 	@value noMore 没有更多了
+ * @property {Number} iconSize 指定图标大小
+ * @property {Boolean} iconSize = [true|false] 是否显示 loading 图标
+ * @property {String} iconType = [snow|circle|auto] 指定图标样式
+ * 	@value snow ios雪花加载样式
+ * 	@value circle 安卓唤醒加载样式
+ * 	@value auto 根据平台自动选择加载样式
+ * @property {String} color 图标和文字颜色
+ * @property {Object} contentText 各状态文字说明，值为：{contentdown: "上拉显示更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}
+ * @event {Function} clickLoadMore 点击加载更多时触发
+ */
 export default {
   name: 'cvLoadMore',
+  emits: ['clickLoadMore'],
   props: {
     status: {
       // 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
@@ -141,7 +163,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .cv-load-more {
   /* #ifndef APP-NVUE */
   display: flex;
@@ -256,7 +278,6 @@ export default {
 }
 
 /* #endif */
-
 /* #ifdef H5 */
 .cv-load-more__img--android-H5 {
   animation: loading-android-H5-rotate 2s linear infinite;
@@ -298,7 +319,6 @@ export default {
 }
 
 /* #endif */
-
 /* #ifndef APP-NVUE || H5 */
 .cv-load-more__img--android-MP {
   position: relative;
@@ -345,34 +365,43 @@ export default {
   0% {
     transform: rotate(0deg);
   }
+
   50% {
     transform: rotate(90deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
+
 @keyframes loading-android-MP-2 {
   0% {
     transform: rotate(0deg);
   }
+
   50% {
     transform: rotate(180deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
+
 @keyframes loading-android-MP-3 {
   0% {
     transform: rotate(0deg);
   }
+
   50% {
     transform: rotate(270deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
+
 /* #endif */
 </style>

package/ui-cv/cv-message/cv-message.vue

@@ -22,7 +22,7 @@ export default {
       loaclStyle: {}
     };
   },
-  created: function () {
+  created() {
     this.loaclStyle = { color: this.color };
   }
 };

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-nav-col/cv-nav-col.vue

@@ -80,7 +80,7 @@ export default {
       isViewPla: true
     };
   },
-  created: function () {
+  created() {
     this._dealStyle();
     this._changeIsViewPla();
   },

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

@@ -96,7 +96,7 @@ export default {
   data() {
     return {};
   },
-  created: function () {
+  created() {
     // console.log(this.$slots);
   },
   methods: {