@zfqh/uniapp 0.1.1

package/lib/components/g-mask/g-mask.vue

@@ -0,0 +1,126 @@
+<template>
+  <view
+    class="mask"
+    hover-stop-propagation
+    :style="[maskStyle, zoomStyle]"
+    @tap="click"
+    @touchmove.stop.prevent="() => {}"
+    :class="{
+      'mask-zoom': zoom,
+      'mask-show': show,
+    }"
+  >
+    <slot />
+  </view>
+</template>
+
+<script>
+/**
+ * mask 遮罩
+ * @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
+ * @property {Boolean} show 是否显示遮罩（默认false）
+ * @property {String Number} z-index z-index 层级（默认1070）
+ * @property {Object} custom-style 自定义样式对象，见上方说明
+ * @property {String Number} duration 动画时长，单位毫秒（默认300）
+ * @property {Boolean} zoom 是否使用scale对遮罩进行缩放（默认true）
+ * @property {Boolean} mask-click-able 遮罩是否可点击，为false时点击不会发送click事件（默认true）
+ * @event {Function} click mask-click-able为true时，点击遮罩发送此事件
+ * @example <g-mask :show="show" @click="show = false"></g-mask>
+ */
+export default {
+  name: 'g-mask',
+  props: {
+    // 是否显示遮罩
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    // 层级z-index
+    zIndex: {
+      type: [Number, String],
+      default: '',
+    },
+    // 用户自定义样式
+    customStyle: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    // 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放
+    zoom: {
+      type: Boolean,
+      default: true,
+    },
+    // 遮罩的过渡时间，单位为ms
+    duration: {
+      type: [Number, String],
+      default: 300,
+    },
+    // 是否可以通过点击遮罩进行关闭
+    maskClickAble: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      zoomStyle: {
+        transform: 'scale(1, 1)',
+      },
+      scale: 'scale(1.2, 1.2)',
+    };
+  },
+  watch: {
+    show(n) {
+      if (n && this.zoom) {
+        // 当展示遮罩的时候，设置scale为1，达到缩小(原来为1.2)的效果
+        this.zoomStyle.transform = 'scale(1, 1)';
+      } else if (!n && this.zoom) {
+        // 当隐藏遮罩的时候，设置scale为1.2，达到放大(因为显示遮罩时已重置为1)的效果
+        this.zoomStyle.transform = this.scale;
+      }
+    },
+  },
+  computed: {
+    maskStyle() {
+      let style = {};
+      style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
+      if (this.show) style.zIndex = this.zIndex ? this.zIndex : 10000;
+      else style.zIndex = -1;
+      style.transition = `all ${this.duration / 1000}s ease-in-out`;
+      // 判断用户传递的对象是否为空，不为空就进行合并
+      if (Object.keys(this.customStyle).length)
+        style = {
+          ...style,
+          ...this.customStyle,
+        };
+      return style;
+    },
+  },
+  methods: {
+    click() {
+      if (!this.maskClickAble) return;
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  transition: transform 0.3s;
+}
+.mask-show {
+  opacity: 1;
+}
+.mask-zoom {
+  transform: scale(1.2, 1.2);
+}
+</style>

package/lib/components/g-money/g-money.vue

@@ -0,0 +1,174 @@
+<template>
+  <view class="flex" :class="[{ 'items-start': align === 'top', 'items-end': align === 'bottom', 'items-center': align === 'center', 'items-stretch': align === 'stretch', 'items-baseline': align === 'baseline' }]" :style="[customStyle]">
+    <view v-if="prefix" :style="[_signStyle]">
+      <slot name="prefix">
+        <text :style="[prefixStyle]"> {{ prefix }} </text>
+      </slot>
+    </view>
+    <slot name="value">
+      <text v-if="sign" :style="[_signStyle]"> {{ sign }} </text>
+      <text :style="[_valueStyle, fontStyle]"> {{ valueStart }} </text>
+      <text v-if="valueEnd" :style="[_decimalStyle, fontStyle]"> {{ valueEnd }} </text>
+    </slot>
+    <view v-if="suffix" :style="[_decimalStyle]">
+      <slot name="suffix">
+        <text :style="[suffixStyle]"> {{ suffix }} </text>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    // 金额值
+    value: {
+      type: [String, Number],
+      default: 0,
+    },
+    // 金额符号
+    sign: {
+      type: [String, Boolean],
+      default: '￥',
+    },
+    // 金额前缀
+    prefix: {
+      type: [String, Boolean],
+      default: false,
+    },
+    // 金额后缀
+    suffix: {
+      type: [String, Boolean],
+      default: false,
+    },
+    // 是否显示小数点
+    decimal: {
+      type: [Boolean, String, Number],
+      default: 2,
+    },
+    // 金额字体大小
+    size: {
+      type: [String, Number],
+      default: 20,
+    },
+    // 金额符号字体大小
+    signSize: {
+      type: [String, Number],
+      default: 12,
+    },
+    // 金额小数字体大小
+    decimalSize: {
+      type: [String, Number],
+      default: 12,
+    },
+    // 金额字符对齐方式
+    align: {
+      type: String,
+      default: 'baseline',
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    signStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    valueStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    decimalStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    prefixStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    suffixStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    font: {
+      type: String,
+      default: 'rubik-medium',
+    },
+  },
+  computed: {
+    fontStyle() {
+      return { fontFamily: this.font };
+    },
+    _valueStyle() {
+      const fontSize = uni.$uv.addUnit(this.size);
+      return Object.assign(
+        {
+          fontSize,
+          lineHeight: fontSize,
+        },
+        this.valueStyle,
+      );
+    },
+    _signStyle() {
+      const fontSize = uni.$uv.addUnit(this.signSize);
+      return Object.assign(
+        {
+          fontSize,
+          lineHeight: this.getLineHeight(this.signSize, this.size),
+        },
+        this.signStyle,
+      );
+    },
+    _decimalStyle() {
+      const fontSize = uni.$uv.addUnit(this.decimalSize);
+      return Object.assign(
+        {
+          fontSize,
+          lineHeight: this.getLineHeight(this.decimalSize, this.size),
+        },
+        this.decimalStyle,
+      );
+    },
+    valueStart() {
+      const number = Number.parseInt(this.value);
+      if (isNaN(number)) {
+        return 0;
+      }
+      return number;
+    },
+    valueEnd() {
+      const { value, decimal } = this;
+      if (decimal !== false) {
+        let number = Number.parseFloat(value);
+        if (isNaN(number)) {
+          number = 0;
+        }
+        if (decimal === 'auto') {
+          let [, end = ''] = String(number).split('.');
+          end = end.replace(/0+$/, '');
+          if (end) {
+            return '.' + end;
+          }
+        } else if (decimal === true || typeof decimal === 'number') {
+          const [, end] = number.toFixed(decimal === true ? 2 : decimal).split('.');
+          return '.' + end;
+        }
+      }
+      return '';
+    },
+  },
+  methods: {
+    getLineHeight(selfSize = 0, size = 0) {
+      selfSize = parseFloat(selfSize);
+      size = parseFloat(size);
+      let lineHeight = size;
+      if (selfSize < size) {
+        lineHeight = selfSize + (size - selfSize) / 2;
+      }
+      return uni.$uv.addUnit(lineHeight);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

package/lib/components/g-more/g-more.vue

@@ -0,0 +1,68 @@
+<template>
+  <view :style="[style]">
+    <view class="flex" @tap.stop="click">
+      <slot name="text">
+        <text> {{ text }} </text>
+      </slot>
+      <slot name="arrow">
+        <g-icon :name="iconName" :size="iconSize" class="flex" />
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script>
+import color from '../../configs/color';
+
+export default {
+  props: {
+    text: {
+      type: String,
+      default: '更多',
+    },
+    textSize: {
+      type: [String, Number],
+      default: 13,
+    },
+    iconName: {
+      type: String,
+      default: 'arrow-right',
+    },
+    iconSize: {
+      type: [String, Number],
+      default: 10,
+    },
+    color: {
+      type: String,
+      default: () => color.tipsColor,
+    },
+    marginTop: {
+      type: [String, Number],
+      default: 0,
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    style() {
+      return Object.assign(
+        {
+          marginTop: uni.$uv.addUnit(this.marginTop),
+          fontSize: uni.$uv.addUnit(this.textSize),
+          color: this.color,
+        },
+        this.customStyle,
+      );
+    },
+  },
+  methods: {
+    click(e) {
+      this.$emit('click', e);
+    },
+  },
+};
+</script>
+
+<style></style>