@10yun/cv-mobile-ui 0.5.19 → 0.5.21

package/uni-ui/lib/uni-badge/uni-badge.vue

@@ -1 +1,150 @@
-<template>
  <view class="uni-badge--x">
    <slot />
    <text v-if="text" :class="classNames" :style="[positionStyle, customStyle, dotStyle]" class="uni-badge" @click="onClick()">
      {{ displayValue }}
    </text>
  </view>
 * Badge 数字角标
 * @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
 * @tutorial https://ext.dcloud.net.cn/plugin?id=21
 * @property {String} text 角标内容
 * @property {String} size = [normal|small] 角标内容
 * @property {String} type = [info|primary|success|warning|error] 颜色类型
 * 	@value info 灰色
 * 	@value primary 蓝色
 * 	@value success 绿色
 * 	@value warning 黄色
 * 	@value error 红色
 * @property {String} inverted = [true|false] 是否无需背景颜色
 * @property {Number} maxNum 展示封顶的数字值，超过 99 显示 99+
 * @property {String} absolute = [rightTop|rightBottom|leftBottom|leftTop] 开启绝对定位, 角标将定位到其包裹的标签的四角上
 * 	@value rightTop 右上
 * 	@value rightBottom 右下
 * 	@value leftTop 左上
 * 	@value leftBottom 左下
 * @property {Array[number]} offset	距定位角中心点的偏移量，只有存在 absolute 属性时有效，例如：[-10, -10] 表示向外偏移 10px，[10, 10] 表示向 absolute 指定的内偏移 10px
 * @property {String} isDot = [true|false] 是否显示为一个小点
 * @event {Function} click 点击 Badge 触发事件
 * @example <uni-badge text="1"></uni-badge>
 */
  name: 'UniBadge',
  emits: ['click'],
  props: {
    type: {
      type: String,
      default: 'error'
    },
    inverted: {
      type: Boolean,
      default: false
    },
    isDot: {
      type: Boolean,
      default: false
    },
    maxNum: {
      type: Number,
      default: 99
    },
    absolute: {
      type: String,
      default: ''
    },
    offset: {
      type: Array,
      default() {
        return [0, 0];
      }
    },
    text: {
      type: [String, Number],
      default: ''
    },
    size: {
      type: String,
      default: 'small'
    },
    customStyle: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    width() {
      return String(this.text).length * 8 + 12;
    },
    classNames() {
      const { inverted, type, size, absolute } = this;
      return [
        inverted ? 'uni-badge--' + type + '-inverted' : '',
        'uni-badge--' + type,
        'uni-badge--' + size,
        absolute ? 'uni-badge--absolute' : ''
      ].join(' ');
    },
    positionStyle() {
      if (!this.absolute) return {};
      let w = this.width / 2,
        h = 10;
      if (this.isDot) {
        w = 5;
        h = 5;
      }
      const x = `${-w + this.offset[0]}px`;
      const y = `${-h + this.offset[1]}px`;
      const whiteList = {
        rightTop: {
          right: x,
          top: y
        },
        rightBottom: {
          right: x,
          bottom: y
        },
        leftBottom: {
          left: x,
          bottom: y
        },
        leftTop: {
          left: x,
          top: y
        }
      };
      const match = whiteList[this.absolute];
      return match ? match : whiteList['rightTop'];
    },
    dotStyle() {
      if (!this.isDot) return {};
      return {
        width: '10px',
        minWidth: '0',
        height: '10px',
        padding: '0',
        borderRadius: '10px'
      };
    },
    displayValue() {
      const { isDot, text, maxNum } = this;
      return isDot ? '' : Number(text) > maxNum ? `${maxNum}+` : text;
    }
  },
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
+<template>
+  <view class="uni-badge--x">
+    <slot />
+    <text v-if="text" :class="classNames" :style="[positionStyle, customStyle, dotStyle]" class="uni-badge" @click="onClick()">
+      {{ displayValue }}
+    </text>
+  </view>
+</template>
+<script>
+/**
+ * Badge 数字角标
+ * @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=21
+ * @property {String} text 角标内容
+ * @property {String} size = [normal|small] 角标内容
+ * @property {String} type = [info|primary|success|warning|error] 颜色类型
+ * 	@value info 灰色
+ * 	@value primary 蓝色
+ * 	@value success 绿色
+ * 	@value warning 黄色
+ * 	@value error 红色
+ * @property {String} inverted = [true|false] 是否无需背景颜色
+ * @property {Number} maxNum 展示封顶的数字值，超过 99 显示 99+
+ * @property {String} absolute = [rightTop|rightBottom|leftBottom|leftTop] 开启绝对定位, 角标将定位到其包裹的标签的四角上
+ * 	@value rightTop 右上
+ * 	@value rightBottom 右下
+ * 	@value leftTop 左上
+ * 	@value leftBottom 左下
+ * @property {Array[number]} offset	距定位角中心点的偏移量，只有存在 absolute 属性时有效，例如：[-10, -10] 表示向外偏移 10px，[10, 10] 表示向 absolute 指定的内偏移 10px
+ * @property {String} isDot = [true|false] 是否显示为一个小点
+ * @event {Function} click 点击 Badge 触发事件
+ * @example <uni-badge text="1"></uni-badge>
+ */
+export default {
+  name: 'UniBadge',
+  emits: ['click'],
+  props: {
+    type: {
+      type: String,
+      default: 'error'
+    },
+    inverted: {
+      type: Boolean,
+      default: false
+    },
+    isDot: {
+      type: Boolean,
+      default: false
+    },
+    maxNum: {
+      type: Number,
+      default: 99
+    },
+    absolute: {
+      type: String,
+      default: ''
+    },
+    offset: {
+      type: Array,
+      default() {
+        return [0, 0];
+      }
+    },
+    text: {
+      type: [String, Number],
+      default: ''
+    },
+    size: {
+      type: String,
+      default: 'small'
+    },
+    customStyle: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    width() {
+      return String(this.text).length * 8 + 12;
+    },
+    classNames() {
+      const { inverted, type, size, absolute } = this;
+      return [
+        inverted ? 'uni-badge--' + type + '-inverted' : '',
+        'uni-badge--' + type,
+        'uni-badge--' + size,
+        absolute ? 'uni-badge--absolute' : ''
+      ].join(' ');
+    },
+    positionStyle() {
+      if (!this.absolute) return {};
+      let w = this.width / 2,
+        h = 10;
+      if (this.isDot) {
+        w = 5;
+        h = 5;
+      }
+      const x = `${-w + this.offset[0]}px`;
+      const y = `${-h + this.offset[1]}px`;
+      const whiteList = {
+        rightTop: {
+          right: x,
+          top: y
+        },
+        rightBottom: {
+          right: x,
+          bottom: y
+        },
+        leftBottom: {
+          left: x,
+          bottom: y
+        },
+        leftTop: {
+          left: x,
+          top: y
+        }
+      };
+      const match = whiteList[this.absolute];
+      return match ? match : whiteList['rightTop'];
+    },
+    dotStyle() {
+      if (!this.isDot) return {};
+      return {
+        width: '10px',
+        minWidth: '0',
+        height: '10px',
+        padding: '0',
+        borderRadius: '10px'
+      };
+    },
+    displayValue() {
+      const { isDot, text, maxNum } = this;
+      return isDot ? '' : Number(text) > maxNum ? `${maxNum}+` : text;
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>

package/uni-ui/lib/uni-breadcrumb/uni-breadcrumb.vue

@@ -1 +1,37 @@
-<template>
  <view class="uni-breadcrumb">
    <slot />
  </view>
 * Breadcrumb 面包屑导航父组件
 * @description 显示当前页面的路径，快速返回之前的任意页面
 * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
 * @property {String} separator 分隔符，默认为斜杠'/'
 * @property {String} separatorClass 图标分隔符 class
 */
  options: {
    virtualHost: true
  },
  props: {
    separator: {
      type: String,
      default: '/'
    },
    separatorClass: {
      type: String,
      default: ''
    }
  },
  provide() {
    return {
      uniBreadcrumb: this
    };
  }
+<template>
+  <view class="uni-breadcrumb">
+    <slot />
+  </view>
+</template>
+<script>
+/**
+ * Breadcrumb 面包屑导航父组件
+ * @description 显示当前页面的路径，快速返回之前的任意页面
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=xxx
+ * @property {String} separator 分隔符，默认为斜杠'/'
+ * @property {String} separatorClass 图标分隔符 class
+ */
+export default {
+  options: {
+    virtualHost: true
+  },
+  props: {
+    separator: {
+      type: String,
+      default: '/'
+    },
+    separatorClass: {
+      type: String,
+      default: ''
+    }
+  },
+  provide() {
+    return {
+      uniBreadcrumb: this
+    };
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>

package/uni-ui/lib/uni-breadcrumb-item/uni-breadcrumb-item.vue

@@ -1 +1,83 @@
-<template>
  <view class="uni-breadcrumb-item">
    <view
      :class="{
        'uni-breadcrumb-item--slot': true,
        'uni-breadcrumb-item--slot-link': to && currentPage !== to
      }"
      @click="navTo"
    >
      <slot />
    </view>
    <i v-if="separatorClass" class="uni-breadcrumb-item--separator" :class="separatorClass" />
    <text v-else class="uni-breadcrumb-item--separator">{{ separator }}</text>
  </view>
 * BreadcrumbItem 面包屑导航子组件
 * @property {String/Object} to 路由跳转页面路径/对象
 * @property {Boolean} replace 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录(仅 h5 支持）
 */
  data() {
    return {
      currentPage: ''
    };
  },
  options: {
    virtualHost: true
  },
  props: {
    to: {
      type: String,
      default: ''
    },
    replace: {
      type: Boolean,
      default: false
    }
  },
  inject: {
    uniBreadcrumb: {
      from: 'uniBreadcrumb',
      default: null
    }
  },
  created() {
    const pages = getCurrentPages();
    const page = pages[pages.length - 1];
    if (page) {
      this.currentPage = `/${page.route}`;
    }
  },
  computed: {
    separator() {
      return this.uniBreadcrumb.separator;
    },
    separatorClass() {
      return this.uniBreadcrumb.separatorClass;
    }
  },
  methods: {
    navTo() {
      const { to } = this;
      if (!to || this.currentPage === to) {
        return;
      }
      if (this.replace) {
        uni.redirectTo({
          url: to
        });
      } else {
        uni.navigateTo({
          url: to
        });
      }
    }
  }
+<template>
+  <view class="uni-breadcrumb-item">
+    <view
+      :class="{
+        'uni-breadcrumb-item--slot': true,
+        'uni-breadcrumb-item--slot-link': to && currentPage !== to
+      }"
+      @click="navTo"
+    >
+      <slot />
+    </view>
+    <i v-if="separatorClass" class="uni-breadcrumb-item--separator" :class="separatorClass" />
+    <text v-else class="uni-breadcrumb-item--separator">{{ separator }}</text>
+  </view>
+</template>
+<script>
+/**
+ * BreadcrumbItem 面包屑导航子组件
+ * @property {String/Object} to 路由跳转页面路径/对象
+ * @property {Boolean} replace 在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录(仅 h5 支持）
+ */
+export default {
+  data() {
+    return {
+      currentPage: ''
+    };
+  },
+  options: {
+    virtualHost: true
+  },
+  props: {
+    to: {
+      type: String,
+      default: ''
+    },
+    replace: {
+      type: Boolean,
+      default: false
+    }
+  },
+  inject: {
+    uniBreadcrumb: {
+      from: 'uniBreadcrumb',
+      default: null
+    }
+  },
+  created() {
+    const pages = getCurrentPages();
+    const page = pages[pages.length - 1];
+    if (page) {
+      this.currentPage = `/${page.route}`;
+    }
+  },
+  computed: {
+    separator() {
+      return this.uniBreadcrumb.separator;
+    },
+    separatorClass() {
+      return this.uniBreadcrumb.separatorClass;
+    }
+  },
+  methods: {
+    navTo() {
+      const { to } = this;
+      if (!to || this.currentPage === to) {
+        return;
+      }
+      if (this.replace) {
+        uni.redirectTo({
+          url: to
+        });
+      } else {
+        uni.navigateTo({
+          url: to
+        });
+      }
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>