@zfqh/uniapp 0.1.1

package/lib/components/g-tag-editor/g-tag-editor.vue

@@ -0,0 +1,482 @@
+<template>
+  <view class="tag-editor">
+    <view v-if="mode === 'tag'" class="flex items-start flex-wrap" :style="[tagsWrapStyle]" @tap="focus = true">
+      <uv-tags
+        v-for="(tag, i) in value"
+        :key="tag"
+        :text="tag"
+        :type="defineType(tag)"
+        plain
+        :closable="!disabled"
+        :customStyle="_tagStyle"
+        @close="removeTag(i)"
+      />
+      <view v-if="!disabled" class="flex-1 flex" style="min-width: 160rpx">
+        <input
+          v-model.trim="content"
+          class="box-border flex-1"
+          :adjustPosition="adjustPosition"
+          :cursorSpacing="cursorSpacing"
+          :placeholder="placeholder"
+          :focus="focus"
+          :disabled="disabled"
+          :maxlength="maxlength"
+          :placeholderStyle="_placeholderStyle"
+          :style="__inputStyle"
+          confirm-hold
+          @input="input"
+          @blur="blur"
+          @confirm="confirmTag"
+        />
+        <text v-if="content" class="ml-10rpx tag-editor-confirm" @tap.stop="confirmTag" @touchend.prevent="confirmTag">
+          确定
+        </text>
+      </view>
+    </view>
+    <textarea
+      v-else
+      v-model.trim="content"
+      class="w-full box-border"
+      :adjustPosition="adjustPosition"
+      :cursorSpacing="cursorSpacing"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :autoHeight="autoHeight"
+      :maxlength="maxlength"
+      :placeholderStyle="_placeholderStyle"
+      :style="_inputStyle"
+      @input="input"
+      @blur="blur"
+    />
+    <view v-for="(item, index) in list" :key="index" class="tag-editor-labels">
+      <view v-if="item.title" :style="[titleStyle]"> {{ item.title }} </view>
+      <view v-if="item.list" class="flex items-start">
+        <view class="flex-1 flex flex-wrap">
+          <uv-tags
+            v-for="ele in item.list"
+            :key="ele.label"
+            :text="ele.label"
+            size="medium"
+            shape="circle"
+            type="primary"
+            :color="ele.checked ? '#fff' : activeColor"
+            :borderColor="ele.checked ? activeColor : inactiveColor"
+            :bgColor="ele.checked ? activeColor : inactiveColor"
+            :customStyle="_labelStyle"
+            @click="select(ele)"
+          />
+        </view>
+        <slot name="extra"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import color from '../../configs/color';
+import model from '../../mixins/model';
+import debounce from '../../mixins/debounce';
+import deep from '../../mixins/deep';
+
+export default {
+  data() {
+    return {
+      list: [],
+      content: '',
+      cursor: -1,
+      focus: false,
+      inputList: [],
+    };
+  },
+  mixins: [
+    deep,
+    debounce,
+    model({
+      type: [String, Array],
+      default: '',
+    }),
+  ],
+  props: {
+    mode: {
+      type: String,
+      default: 'text',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    values: {
+      type: Array,
+      default: null,
+    },
+    autoHeight: {
+      type: Boolean,
+      default: true,
+    },
+    adjustPosition: {
+      type: Boolean,
+      default: true,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    cursorSpacing: {
+      type: [Number, String],
+      default: 0,
+    },
+    separate: {
+      type: [String, Boolean],
+      default: '，',
+    },
+    maxlength: {
+      type: [String, Number],
+      default: 1000,
+    },
+    height: {
+      type: [String, Number],
+      default: 40,
+    },
+    inputSize: {
+      type: [String, Number],
+      default: 14,
+    },
+    placeholderSize: {
+      type: [String, Number],
+      default: 13,
+    },
+    inputBgColor: {
+      type: String,
+      default: () => color.bgColor,
+    },
+    disabledBgColor: {
+      type: String,
+      default: () => color.bgColor,
+    },
+    inputColor: {
+      type: String,
+      default: () => color.mainColor,
+    },
+    activeColor: {
+      type: String,
+      default: () => color.primary,
+    },
+    inactiveColor: {
+      type: String,
+      default: () => color.primaryLight,
+    },
+    placeholderColor: {
+      type: String,
+      default: () => color.tipsColor,
+    },
+    titleStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    inputStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    tagStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    labelStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    placeholderStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    customList: {
+      type: Array,
+      default: null,
+    },
+    selectClean: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    tagsWrapStyle({ inputBgColor, disabledBgColor, disabled, customStyle }) {
+      return Object.assign(
+        {
+          padding: '0 20rpx',
+          backgroundColor: disabled ? disabledBgColor : inputBgColor,
+          borderRadius: '8rpx',
+          alignContent: 'baseline',
+        },
+        customStyle,
+      );
+    },
+    __inputStyle({ inputStyle, inputSize, height, inputColor }) {
+      const style = Object.assign(
+        {
+          fontSize: uni.$uv.addUnit(inputSize),
+          color: inputColor,
+          height: uni.$uv.addUnit(height),
+        },
+        inputStyle,
+      );
+      return style;
+    },
+    _inputStyle({ inputBgColor, inputColor, disabledBgColor, inputStyle, inputSize, disabled }) {
+      const style = Object.assign(
+        {
+          padding: '26rpx 20rpx 16rpx',
+          minHeight: '40rpx',
+          backgroundColor: disabled ? disabledBgColor : inputBgColor,
+          fontSize: uni.$uv.addUnit(inputSize),
+          color: inputColor,
+          borderRadius: '8rpx',
+        },
+        inputStyle,
+      );
+      return style;
+    },
+    _labelStyle({ labelStyle }) {
+      return Object.assign(
+        {
+          margin: '20rpx 20rpx 0 0',
+          boxSizing: 'border-box',
+          lineHeight: '30rpx',
+          height: 'auto',
+          wordBreak: 'break-all',
+          padding: '8rpx 20rpx 6rpx',
+        },
+        labelStyle,
+      );
+    },
+    _tagStyle({ tagStyle }) {
+      return Object.assign(
+        {
+          margin: '20rpx 20rpx 0 0',
+          boxSizing: 'border-box',
+          lineHeight: '30rpx',
+          height: 'auto',
+          wordBreak: 'break-all',
+          padding: '6rpx 18rpx 4rpx',
+        },
+        tagStyle,
+      );
+    },
+    _placeholderStyle({ placeholderStyle, placeholderSize, placeholderColor }) {
+      const style = Object.assign(
+        { fontSize: uni.$uv.addUnit(placeholderSize), color: placeholderColor },
+        placeholderStyle,
+      );
+      const styles = [];
+      Object.keys(style).forEach((k) => {
+        styles.push(`${k}:${style[k]}`);
+      });
+      return styles.join(';');
+    },
+    contents({ content }) {
+      const val = content.trim();
+      if (!val) {
+        return [];
+      }
+      return val.split(/[,，]/).filter((e) => !!e.trim());
+    },
+  },
+  watch: {
+    data() {
+      this.initList();
+    },
+    value(e, o) {
+      if (this.mode !== 'tag') {
+        const update = this.content !== e;
+        this.content = e;
+        if (update) {
+          uni.$uv.formValidate(this, 'change');
+          this.updateList();
+        }
+      } else {
+        if (e?.length !== o?.length) {
+          uni.$uv.formValidate(this, 'change');
+        }
+        this.updateList();
+      }
+    },
+    content(e) {
+      if (this.mode !== 'tag') {
+        this.updateModel(e);
+      }
+    },
+  },
+  methods: {
+    mergeChecked(source) {
+      if (typeof source !== 'object') {
+        source = {
+          label: source,
+        };
+      }
+      const data = { ...source };
+      if (this.mode === 'tag' && this.value?.some((val) => val === data.label)) {
+        data.checked = true;
+      } else if (this.mode !== 'tag' && this.contents.includes(data.label)) {
+        data.checked = true;
+      } else if (data.checked) {
+        delete data.checked;
+      }
+      return data;
+    },
+    initList() {
+      if (this.disabled) {
+        this.list = [];
+      } else {
+        const value = [];
+        this.data.forEach((ele) => {
+          if (Array.isArray(ele.list)) {
+            const { list: arr, ...rest } = ele;
+            value.push({
+              ...rest,
+              list: arr.map((e) => this.mergeChecked(e)),
+            });
+          } else if (!value[0]?.list) {
+            value[0] = {
+              list: [this.mergeChecked(ele)],
+            };
+          } else {
+            value[0].list.push(this.mergeChecked(ele));
+          }
+        });
+        this.list = value;
+      }
+    },
+    updateList() {
+      this.list.forEach((ele) => {
+        ele.list = ele.list.map((ele) => {
+          return this.mergeChecked(ele);
+        });
+      });
+    },
+    updateTags(value) {
+      this.updateModel([...new Set(value)]);
+    },
+    input(e) {
+      this.$emit('input', e);
+      const { cursor, value } = e.detail;
+      if (this.mode === 'tag' && value.length === Number(this.maxlength)) {
+        this.confirmTag();
+        return;
+      }
+      this.debounce(() => {
+        const keyword = value.slice(0, cursor).split(/[,，]/).pop();
+        this.$emit('search', keyword);
+        this.updateList();
+      });
+    },
+    blur(e) {
+      const { cursor } = e.detail;
+      this.cursor = cursor;
+      this.focus = false;
+      uni.$uv.formValidate(this, 'blur');
+    },
+    select(item) {
+      if (this.mode === 'tag') {
+        if (!item.checked) {
+          if (this.selectClean) {
+            this.content = '';
+          }
+          this.updateTags(this.value.concat(item.label));
+        } else {
+          this.updateTags(this.value.filter((val) => val !== item.label));
+        }
+      } else {
+        if (!item.checked) {
+          const index = this.content.lastIndexOf(this.separate);
+          const text = this.content.slice(index + 1);
+          if (text && item.label?.includes(text)) {
+            this.content = this.contents.slice(0, -1).concat(item.label, '').join(this.separate);
+          } else {
+            this.content = this.contents.concat(item.label, '').join(this.separate);
+          }
+        } else {
+          const index = this.contents.indexOf(item.label);
+          this.content = this.contents
+            .slice(0, index)
+            .concat(this.contents.slice(index + 1), '')
+            .join(this.separate);
+        }
+      }
+      this.updateList();
+    },
+    removeTag(i) {
+      this.findTag(i);
+      this.updateTags(this.value.slice(0, i).concat(this.value.slice(i + 1)));
+    },
+    findTag(i) {
+      if (Array.isArray(this.customList) && this.customList.includes(this.value[i])) {
+        let index = this.customList.findIndex((item) => item === this.value[i]);
+        this.customList.splice(index, 1);
+      }
+    },
+    defineType(tag) {
+      if (this.customList && this.customList.includes(tag)) {
+        return 'warning';
+      } else {
+        return 'primary';
+      }
+    },
+    confirmTag() {
+      uni.$uv.throttle(() => {
+        if (this.separate !== false) {
+          this.updateTags(this.value.concat(this.contents));
+        } else if (this.content) {
+          this.updateTags(this.value.concat(this.content));
+          if (Array.isArray(this.customList) && !this.customList.includes(this.content)) {
+            this.customList.push(this.content);
+          }
+        }
+        this.$emit('search', '');
+        this.content = '';
+        // #ifdef MP-WEIXIN
+        setTimeout(() => {
+          this.content = '';
+        }, 100);
+        // #endif
+      });
+    },
+  },
+  mounted() {
+    if (this.mode !== 'tag') {
+      this.content = this.value;
+    }
+    this.initList();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.tag-editor {
+  &-confirm {
+    height: 50rpx;
+    background-color: $uv-primary;
+    color: #fff;
+    width: 80rpx;
+    border-radius: 6rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 28rpx;
+  }
+  ::v-deep .uv-tags {
+    &__text {
+      line-height: inherit !important;
+    }
+    &--circle {
+      border-radius: 30rpx !important;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,61 @@
+<template>
+  <text> {{ time }} </text>
+</template>
+
+<script>
+import { dateStringToTime } from '../../utils';
+
+export default {
+  props: {
+    start: {
+      type: [String, Number],
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      time: '',
+    };
+  },
+  methods: {
+    timeFormat(duration) {
+      const h = parseInt(duration / (60 * 60));
+      const m = parseInt((duration - h * 60 * 60) / 60);
+      const s = parseInt(duration % 60);
+      return `${h ? `${String(h).padStart(2, '0')}:` : ''}${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+    },
+    execTimer(timestamp) {
+      const timer = () => {
+        const duration = parseInt((Date.now() - timestamp) / 1000);
+        this.$emit('change', duration);
+        this.time = this.timeFormat(duration);
+      };
+      timer();
+      this.timer = setInterval(timer, 1000);
+    },
+    init() {
+      let timestamp = 0;
+      if (typeof this.start === 'number') {
+        timestamp = this.start;
+      } else {
+        timestamp = dateStringToTime(this.start);
+      }
+      if (!timestamp) {
+        timestamp = Date.now();
+      }
+      if (String(timestamp).length === 10) {
+        timestamp = timestamp * 1000;
+      }
+      this.execTimer(timestamp);
+    },
+  },
+  beforeMount() {
+    this.init();
+  },
+  beforeUnmount() {
+    clearInterval(this.timer);
+  },
+};
+</script>
+
+<style></style>