@10yun/cv-mobile-ui 0.5.26 → 0.5.29

package/uview-plus/components/u-dropdown-item/props.js

@@ -1,37 +1,47 @@
-import defprops from '../../libs/config/props';
-export default {
-  props: {
-    // 当前选中项的value值
-    value: {
-      type: [Number, String, Array],
-      default: ''
-    },
-    // 菜单项标题
-    title: {
-      type: [String, Number],
-      default: ''
-    },
-    // 选项数据，如果传入了默认slot，此参数无效
-    options: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    // 是否禁用此菜单项
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    // 下拉弹窗的高度
-    height: {
-      type: [Number, String],
-      default: 'auto'
-    },
-    // 点击遮罩是否可以收起弹窗
-    closeOnClickOverlay: {
-      type: Boolean,
-      default: true
-    }
-  }
-};
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+export const props = defineMixin({
+  props: {
+    // #ifdef VUE3
+    // 当前选中项的value值
+    modelValue: {
+      type: [Number, String, Array],
+      default: ''
+    },
+    // #endif
+    // #ifdef VUE2
+    // 当前选中项的value值
+    value: {
+      type: [Number, String, Array],
+      default: ''
+    },
+    // #endif
+    // 菜单项标题
+    title: {
+      type: [String, Number],
+      default: ''
+    },
+    // 选项数据，如果传入了默认slot，此参数无效
+    options: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    // 是否禁用此菜单项
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 下拉弹窗的高度
+    height: {
+      type: [Number, String],
+      default: 'auto'
+    },
+    // 点击遮罩是否可以收起弹窗
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: true
+    }
+  }
+});

package/uview-plus/components/u-dropdown-item/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;
@@ -9,8 +24,6 @@ view, scroll-view, swiper-item {
   align-content: flex-start;
 }
 /* #endif */
-.u-drawdown-item__content {
-  background-color: #ffffff;
-  overflow: hidden;
-  height: 0;
-}
+.u-dropdown-item__scroll {
+  background: #ffffff;
+}

package/uview-plus/components/u-dropdown-item/style.scss

@@ -1,9 +1,4 @@
-@import '../../libs/css/components.scss';
-
-.u-drawdown-item {
-  &__content {
-    background-color: #ffffff;
-    overflow: hidden;
-    height: 0;
-  }
-}
+@import '../../libs/css/components.scss';
+.u-dropdown-item__scroll {
+  background: #ffffff;
+}

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,8 +10,8 @@
     <image
       v-else
       :style="{
-        width: $u.addUnit(width),
-        height: $u.addUnit(height)
+        width: addUnit(width),
+        height: addUnit(height)
       }"
       :src="icon"
       mode="widthFix"
@@ -23,9 +23,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 +76,24 @@ 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;
     },
     // 判断icon是否图片路径
     isSrc() {
       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;
+    }
+  }
+}