@10yun/cv-mobile-ui 0.5.27 → 0.5.30

package/uview-plus/components/u-dropdown-item/u-dropdown-item.vue

@@ -1 +1,126 @@
-<template>
  <view class="u-drawdown-item">
    <u-overlay customStyle="top: 126px" :show="show" :closeOnClickOverlay="closeOnClickOverlay" @click="overlayClick"></u-overlay>
    <view class="u-drawdown-item__content" :style="[style]" :animation="animationData" ref="animation">
      <slot />
    </view>
  </view>
 * Drawdownitem
 * @description
 * @tutorial url
 * @property {String}
 * @event {Function}
 * @example
 */
  name: 'u-drawdown-item',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      show: false,
      top: '126px',
      // uni.createAnimation的导出数据
      animationData: {}
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    // 发生变化时，需要去更新父组件对应的值
    dataChange(newValue, oldValue) {
      this.updateParentData();
    }
  },
  computed: {
    // 监听对应变量的变化
    dataChange() {
      return [this.title, this.disabled];
    },
    style() {
      const style = {
        zIndex: 10071,
        position: 'fixed',
        display: 'flex',
        left: 0,
        right: 0
      };
      style.top = uni.$u.addUnit(this.top);
      return style;
    }
  },
  methods: {
    init() {
      this.updateParentData();
    },
    // 更新父组件所需的数据
    updateParentData() {
      // 获取父组件u-dropdown
      this.getParentData('u-dropdown');
      if (!this.parent) uni.$u.error('u-dropdown-item必须配合u-dropdown使用');
      // 查找父组件menuList数组中对应的标题数据
      const menuIndex = this.parent.menuList.findIndex((item) => item.title === this.title);
      const menuContent = {
        title: this.title,
        disabled: this.disabled
      };
      if (menuIndex >= 0) {
        // 如果能找到，则直接修改
        this.parent.menuList[menuIndex] = menuContent;
      } else {
        // 如果无法找到，则为第一次添加，直接push即可
        this.parent.menuList.push(menuContent);
      }
    },
    async setContentAnimate(height) {
      this.animating = true;
      // #ifdef APP-NVUE
      const ref = this.$refs['animation'].ref;
      animation.transition(
        ref,
        {
          styles: {
            height: uni.$u.addUnit(height)
          },
          duration: this.duration,
          timingFunction: 'ease-in-out'
        },
        () => {
          this.animating = false;
        }
      );
      // #endif
      // #ifndef APP-NVUE
      const animation = uni.createAnimation({
        timingFunction: 'ease-in-out'
      });
      animation
        .height(height)
        .step({
          duration: this.duration
        })
        .step();
      // 导出动画数据给面板的animationData值
      this.animationData = animation.export();
      // 标识动画结束
      uni.$u.sleep(this.duration).then(() => {
        this.animating = false;
      });
      // #endif
    },
    overlayClick() {
      this.show = false;
      this.setContentAnimate(0);
    }
  }
+<template>
+  <view class="u-dropdown-item" v-if="active" @touchmove.stop.prevent="() => {}" @tap.stop.prevent="() => {}">
+    <block v-if="!$slots.default && !$slots.$default">
+      <scroll-view
+        class="u-dropdown-item__scroll"
+        scroll-y="true"
+        :style="{
+          height: addUnit(height)
+        }"
+      >
+        <view class="u-dropdown-item__options">
+          <up-cell-group>
+            <up-cell
+              @click="cellClick(item.value)"
+              :arrow="false"
+              :title="item.label"
+              v-for="(item, index) in options"
+              :key="index"
+              :title-style="{
+                color: modelValue == item.value ? activeColor : inactiveColor
+              }"
+            >
+              <up-icon v-if="modelValue == item.value" name="checkbox-mark" :color="activeColor" size="32"></up-icon>
+            </up-cell>
+          </up-cell-group>
+        </view>
+      </scroll-view>
+    </block>
+    <slot v-else />
+  </view>
+</template>
+<script>
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, $parent } from '../../libs/function/index';
+/**
+ * dropdown-item 下拉菜单
+ * @description 该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+ * @tutorial https://ijry.github.io/uview-plus/components/dropdown.html
+ * @property {String | Number} v-model 双向绑定选项卡选择值
+ * @property {String} title 菜单项标题
+ * @property {Array[Object]} options 选项数据，如果传入了默认slot，此参数无效
+ * @property {Boolean} disabled 是否禁用此选项卡（默认false）
+ * @property {String | Number} duration 选项卡展开和收起的过渡时间，单位ms（默认300）
+ * @property {String | Number} height 弹窗下拉内容的高度(内容超出将会滚动)（默认auto）
+ * @example <u-dropdown-item title="标题"></u-dropdown-item>
+ */
+export default {
+  name: 'u-dropdown-item',
+  mixins: [mpMixin, mixin, props],
+  options: {
+    styleIsolation: 'shared'
+  },
+  data() {
+    return {
+      active: false, // 当前项是否处于展开状态
+      activeColor: '#2979ff', // 激活时左边文字和右边对勾图标的颜色
+      inactiveColor: '#606266' // 未激活时左边文字和右边对勾图标的颜色
+    };
+  },
+  computed: {
+    // 监听props是否发生了变化，有些值需要传递给父组件u-dropdown，无法双向绑定
+    propsChange() {
+      return `${this.title}-${this.disabled}`;
+    }
+  },
+  watch: {
+    propsChange(n) {
+      // 当值变化时，通知父组件重新初始化，让父组件执行每个子组件的init()方法
+      // 将所有子组件数据重新整理一遍
+      if (this.parent) this.parent.init();
+    }
+  },
+  created() {
+    // 父组件的实例
+    this.parent = false;
+  },
+  emits: ['update:modelValue', 'change'],
+  methods: {
+    addUnit,
+    init() {
+      // 获取父组件u-dropdown
+      let parent = $parent.call(this, 'u-dropdown');
+      if (parent) {
+        this.parent = parent;
+        // 将子组件的激活颜色配置为父组件设置的激活和未激活时的颜色
+        this.activeColor = parent.activeColor;
+        this.inactiveColor = parent.inactiveColor;
+        // 将本组件的this，放入到父组件的children数组中，让父组件可以操作本(子)组件的方法和属性
+        // push进去前，显判断是否已经存在了本实例，因为在子组件内部数据变化时，会通过父组件重新初始化子组件
+        let exist = parent.children.find((val) => {
+          return this === val;
+        });
+        if (!exist) parent.children.push(this);
+        if (parent.children.length == 1) this.active = true;
+        // 父组件无法监听children的变化，故将子组件的title，传入父组件的menuList数组中
+        parent.menuList.push({
+          title: this.title,
+          disabled: this.disabled
+        });
+      }
+    },
+    // cell被点击
+    cellClick(value) {
+      // 修改通过v-model绑定的值
+      // #ifdef VUE2
+      this.$emit('input', value);
+      // #endif
+      // #ifdef VUE3
+      this.$emit('update:modelValue', value);
+      // #endif
+      // 通知父组件(u-dropdown)收起菜单
+      this.parent.close();
+      // 发出事件，抛出当前勾选项的value
+      this.$emit('change', value);
+    }
+  },
+  mounted() {
+    this.init();
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-empty/props.js

@@ -1,60 +1,61 @@
-import defprops from '../../libs/config/props';
-export default {
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
   props: {
     // 内置图标名称，或图片路径，建议绝对路径
     icon: {
       type: String,
-      default: defprops.empty.icon
+      default: () => defProps.empty.icon
     },
     // 提示文字
     text: {
       type: String,
-      default: defprops.empty.text
+      default: () => defProps.empty.text
     },
     // 文字颜色
     textColor: {
       type: String,
-      default: defprops.empty.textColor
+      default: () => defProps.empty.textColor
     },
     // 文字大小
     textSize: {
       type: [String, Number],
-      default: defprops.empty.textSize
+      default: () => defProps.empty.textSize
     },
     // 图标的颜色
     iconColor: {
       type: String,
-      default: defprops.empty.iconColor
+      default: () => defProps.empty.iconColor
     },
     // 图标的大小
     iconSize: {
       type: [String, Number],
-      default: defprops.empty.iconSize
+      default: () => defProps.empty.iconSize
     },
     // 选择预置的图标类型
     mode: {
       type: String,
-      default: defprops.empty.mode
+      default: () => defProps.empty.mode
     },
     //  图标宽度，单位px
     width: {
       type: [String, Number],
-      default: defprops.empty.width
+      default: () => defProps.empty.width
     },
     // 图标高度，单位px
     height: {
       type: [String, Number],
-      default: defprops.empty.height
+      default: () => defProps.empty.height
     },
     // 是否显示组件
     show: {
       type: Boolean,
-      default: defprops.empty.show
+      default: () => defProps.empty.show
     },
     // 组件距离上一个元素之间的距离，默认px单位
     marginTop: {
       type: [String, Number],
-      default: defprops.empty.marginTop
+      default: () => defProps.empty.marginTop
     }
   }
-};
+});

package/uview-plus/components/u-empty/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -35,4 +50,4 @@ view, scroll-view, swiper-item {
   justify-content: center;
   align-items: center;
   margin-top: 20rpx;
-}
+}

package/uview-plus/components/u-empty/u-empty.vue

@@ -10,12 +10,13 @@
     <image
       v-else
       :style="{
-        width: $u.addUnit(width),
-        height: $u.addUnit(height)
+        width: addUnit(width),
+        height: addUnit(height)
       }"
-      :src="icon"
+      :src="parseIcon"
       mode="widthFix"
     ></image>
+    <!-- :src2="icon" -->
     <text class="u-empty__text" :style="[textStyle]">{{ text ? text : icons[mode] }}</text>
     <view class="u-empty__wrap" v-if="$slots.default || $slots.$default">
       <slot />
@@ -23,9 +24,10 @@
   </view>
 </template>
 <script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, addStyle, deepMerge } from '../../libs/function/index';
 /**
  * empty 内容为空
  * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
@@ -75,21 +77,49 @@ export default {
     // 组件样式
     emptyStyle() {
       const style = {};
-      style.marginTop = uni.$u.addUnit(this.marginTop);
+      style.marginTop = addUnit(this.marginTop);
       // 合并customStyle样式，此参数通过mixin中的props传递
-      return uni.$u.deepMerge(uni.$u.addStyle(this.customStyle), style);
+      return deepMerge(addStyle(this.customStyle), style);
     },
     // 文本样式
     textStyle() {
       const style = {};
       style.color = this.textColor;
-      style.fontSize = uni.$u.addUnit(this.textSize);
+      style.fontSize = addUnit(this.textSize);
       return style;
     },
+    parseIcon() {
+      const ui_url = 'https://10ui.cn/10yun-uni/common/empty/';
+      let imageArr = {
+        auth: ui_url + 'auth.png',
+        car: ui_url + 'car.png',
+        cart: ui_url + 'cart.png',
+        comment: ui_url + 'comment.png',
+        coupon: ui_url + 'coupon.png',
+        data: ui_url + 'data.png',
+        datasc: ui_url + 'datasc.png',
+        history: ui_url + 'history.png',
+        list: ui_url + 'list.png',
+        news: ui_url + 'news.png',
+        order: ui_url + 'order.png',
+        page: ui_url + 'page.png',
+        permission: ui_url + 'permission.png',
+        search: ui_url + 'search.png',
+        wifi: ui_url + 'wifi.png'
+      };
+      if (!this.icon || this.icon == '') {
+        return imageArr[this.mode] || imageArr['data'];
+      }
+      return this.icon;
+    },
     // 判断icon是否图片路径
     isSrc() {
+      return this.parseIcon.indexOf('/') >= 0;
       return this.icon.indexOf('/') >= 0;
     }
+  },
+  methods: {
+    addUnit
   }
 };
 </script>

package/uview-plus/components/u-float-button/style.css

@@ -0,0 +1,41 @@
+/* #ifndef APP-NVUE */
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  flex-grow: 0;
+  flex-basis: auto;
+  align-items: stretch;
+  align-content: flex-start;
+}
+/* #endif */
+.u-float-button {
+  z-index: 999;
+}
+.u-float-button .show-list {
+  transform: rotate(45deg);
+}
+.u-float-button__list {
+  position: absolute;
+  bottom: 0px;
+  display: flex;
+  flex-direction: column;
+}
+.u-float-button__list > view {
+  margin: 5px 0px;
+}

package/uview-plus/components/u-float-button/style.scss

@@ -0,0 +1,17 @@
+@import '../../libs/css/components.scss';
+
+.u-float-button {
+  z-index: 999;
+  .show-list {
+    transform: rotate(45deg);
+  }
+  &__list {
+    position: absolute;
+    bottom: 0px;
+    display: flex;
+    flex-direction: column;
+    > view {
+      margin: 5px 0px;
+    }
+  }
+}

package/uview-plus/components/u-float-button/u-float-button.vue

@@ -0,0 +1,164 @@
+<template>
+  <view
+    class="u-float-button"
+    :style="{
+      position: 'fixed',
+      top: top,
+      bottom: bottom,
+      right: right
+    }"
+  >
+    <view
+      class="u-float-button__main"
+      @click="clickHandler"
+      :style="{
+        backgroundColor: backgroundColor,
+        color: color,
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: width,
+        height: height,
+        borderRadius: '50%',
+        borderColor: borderColor
+      }"
+    >
+      <slot :showList="showList">
+        <up-icon class="cursor-pointer" :class="{ 'show-list': showList }" name="plus" :color="color"></up-icon>
+      </slot>
+      <view
+        v-if="showList"
+        class="u-float-button__list"
+        :style="{
+          bottom: height
+        }"
+      >
+        <slot name="list">
+          <template :key="index" v-for="(item, index) in list">
+            <view
+              class="u-float-button__item"
+              :style="{
+                backgroundColor: item?.backgroundColor ? item?.backgroundColor : backgroundColor,
+                color: item?.color ? item?.color : color,
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: width,
+                height: height,
+                borderRadius: '50%',
+                borderColor: item?.borderColor ? item?.borderColor : borderColor
+              }"
+              @click="itemClick(item, index)"
+            >
+              <up-icon :name="item.name" :color="item?.color ? item?.color : color"></up-icon>
+            </view>
+          </template>
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle, addUnit, deepMerge } from '../../libs/function/index';
+/**
+ * FloatButton 悬浮按钮
+ * @description 悬浮按钮常用于屏幕右下角点击展开的操作菜单
+ * @tutorial https://ijry.github.io/uview-plus/components/floatButton.html
+ * @property {String}                backgroundColor      背景颜色
+ * @event {Function} click  点击触发事件
+ * @example <up-float-button></up-float-button>
+ */
+export default {
+  name: 'u-float-button',
+  // #ifdef MP
+  mixins: [mpMixin, mixin],
+  // #endif
+  // #ifndef MP
+  mixins: [mpMixin, mixin],
+  // #endif
+  emits: ['click', 'item-click'],
+  computed: {},
+  props: {
+    // 背景颜色
+    backgroundColor: {
+      type: String,
+      default: '#2979ff'
+    },
+    // 文字颜色
+    color: {
+      type: String,
+      default: '#fff'
+    },
+    // 宽度
+    width: {
+      type: String,
+      default: '50px'
+    },
+    // 高度
+    height: {
+      type: String,
+      default: '50px'
+    },
+    // 边框颜色，默认为空字符串表示无边框
+    borderColor: {
+      type: String,
+      default: ''
+    },
+    // 右侧偏移量
+    right: {
+      type: [String, Number],
+      default: '30px'
+    },
+    // 顶部偏移量，未提供默认值，可能需要根据具体情况设置
+    top: {
+      type: [String, Number],
+      default: ''
+    },
+    // 底部偏移量
+    bottom: {
+      type: String,
+      default: ''
+    },
+    // 是否为菜单项
+    isMenu: {
+      type: Boolean,
+      default: false
+    },
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      showList: false
+    };
+  },
+  methods: {
+    addStyle,
+    clickHandler(e) {
+      if (this.isMenu) {
+        this.showList = !this.showList;
+        this.$emit('click', e);
+      } else {
+        this.$emit('click', e);
+      }
+    },
+    itemClick(item, index) {
+      this.$emit('item-click', {
+        ...item,
+        index
+      });
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/{libs/config/props → components/u-form}/form.js

@@ -10,13 +10,13 @@
 export default {
     // form 组件
     form: {
-        model: () => ({}),
-        rules: () => ({}),
+        model: {},
+        rules: {},
         errorType: 'message',
         borderBottom: true,
         labelPosition: 'left',
         labelWidth: 45,
         labelAlign: 'left',
-        labelStyle: () => ({})
+        labelStyle: {}
     }
 }