@10yun/cv-mobile-ui 0.4.2 → 0.4.3

package/ui-cv/cv-combox/cv-combox.vue

@@ -1,250 +0,0 @@
-<template>
-  <view class="uni-combox">
-    <view v-if="label" class="uni-combox__label" :style="labelStyle">
-      <text>{{ label }}</text>
-    </view>
-    <view class="uni-combox__input-box">
-      <input
-        class="uni-combox__input"
-        type="text"
-        :placeholder="placeholder"
-        v-model="inputVal"
-        @input="onInput"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-      <cv-icon2 class="uni-combox__input-arrow" type="arrowdown" size="14" @click="toggleSelector"></cv-icon2>
-      <view class="uni-combox__selector" v-if="showSelector">
-        <scroll-view scroll-y="true" class="uni-combox__selector-scroll">
-          <view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
-            <text>{{ emptyTips }}</text>
-          </view>
-          <view
-            class="uni-combox__selector-item"
-            v-for="(item, index) in filterCandidates"
-            :key="index"
-            @click="onSelectorClick(index)"
-          >
-            <text>{{ item }}</text>
-          </view>
-        </scroll-view>
-      </view>
-    </view>
-  </view>
-</template>
-
-<script>
-/**
- * Combox 组合输入框
- * @description 组合输入框一般用于既可以输入也可以选择的场景
- * @tutorial https://ext.dcloud.net.cn/plugin?id=1261
- * @property {String} label 左侧文字
- * @property {String} labelWidth 左侧内容宽度
- * @property {String} placeholder 输入框占位符
- * @property {Array} candidates 候选项列表
- * @property {String} emptyTips 筛选结果为空时显示的文字
- * @property {String} value 组合框的值
- */
-export default {
-  name: 'cvCombox',
-  emits: ['input', 'update:modelValue'],
-  props: {
-    label: {
-      type: String,
-      default: ''
-    },
-    labelWidth: {
-      type: String,
-      default: 'auto'
-    },
-    placeholder: {
-      type: String,
-      default: ''
-    },
-    candidates: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    emptyTips: {
-      type: String,
-      default: '无匹配项'
-    },
-    // #ifndef VUE3
-    value: {
-      type: [String, Number],
-      default: ''
-    },
-    // #endif
-    // #ifdef VUE3
-    modelValue: {
-      type: [String, Number],
-      default: ''
-    }
-    // #endif
-  },
-  data() {
-    return {
-      showSelector: false,
-      inputVal: ''
-    };
-  },
-  computed: {
-    labelStyle() {
-      if (this.labelWidth === 'auto') {
-        return {};
-      }
-      return {
-        width: this.labelWidth
-      };
-    },
-    filterCandidates() {
-      return this.candidates.filter((item) => {
-        return item.toString().indexOf(this.inputVal) > -1;
-      });
-    },
-    filterCandidatesLength() {
-      return this.filterCandidates.length;
-    }
-  },
-  watch: {
-    // #ifndef VUE3
-    value: {
-      handler(newVal) {
-        this.inputVal = newVal;
-      },
-      immediate: true
-    },
-    // #endif
-    // #ifdef VUE3
-    modelValue: {
-      handler(newVal) {
-        this.inputVal = newVal;
-      },
-      immediate: true
-    }
-    // #endif
-  },
-  methods: {
-    toggleSelector() {
-      this.showSelector = !this.showSelector;
-    },
-    onFocus() {
-      this.showSelector = true;
-    },
-    onBlur() {
-      setTimeout(() => {
-        this.showSelector = false;
-      }, 153);
-    },
-    onSelectorClick(index) {
-      this.inputVal = this.filterCandidates[index];
-      this.showSelector = false;
-      this.$emit('input', this.inputVal);
-      this.$emit('update:modelValue', this.inputVal);
-    },
-    onInput() {
-      setTimeout(() => {
-        this.$emit('input', this.inputVal);
-        this.$emit('update:modelValue', this.inputVal);
-      });
-    }
-  }
-};
-</script>
-
-<style scoped>
-.uni-combox {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  height: 40px;
-  flex-direction: row;
-  align-items: center;
-}
-
-.uni-combox__label {
-  font-size: 16px;
-  line-height: 22px;
-  padding-right: 10px;
-  color: #999999;
-}
-
-.uni-combox__input-box {
-  position: relative;
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex: 1;
-  flex-direction: row;
-  align-items: center;
-}
-
-.uni-combox__input {
-  flex: 1;
-  font-size: 16px;
-  height: 22px;
-  line-height: 22px;
-}
-
-.uni-combox__input-arrow {
-  padding: 10px;
-}
-
-.uni-combox__selector {
-  /* #ifndef APP-NVUE */
-  box-sizing: border-box;
-  /* #endif */
-  position: absolute;
-  top: 42px;
-  left: 0;
-  width: 100%;
-  background-color: #ffffff;
-  border-radius: 6px;
-  box-shadow: #dddddd 4px 4px 8px, #dddddd -4px -4px 8px;
-  z-index: 2;
-}
-
-.uni-combox__selector-scroll {
-  /* #ifndef APP-NVUE */
-  max-height: 200px;
-  box-sizing: border-box;
-  /* #endif */
-}
-
-.uni-combox__selector::before {
-  /* #ifndef APP-NVUE */
-  content: '';
-  /* #endif */
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-bottom: solid 6px #ffffff;
-  border-right: solid 6px transparent;
-  border-left: solid 6px transparent;
-  left: 50%;
-  top: -6px;
-  margin-left: -6px;
-}
-
-.uni-combox__selector-empty,
-.uni-combox__selector-item {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  cursor: pointer;
-  /* #endif */
-  line-height: 36px;
-  font-size: 14px;
-  text-align: center;
-  border-bottom: solid 1px #dddddd;
-  margin: 0px 10px;
-}
-
-.uni-combox__selector-empty:last-child,
-.uni-combox__selector-item:last-child {
-  /* #ifndef APP-NVUE */
-  border-bottom: none;
-  /* #endif */
-}
-</style>

package/ui-cv/cv-countdown/cv-countdown.vue

@@ -1,245 +0,0 @@
-<template>
-  <view class="uni-countdown">
-    <text
-      v-if="showDay"
-      :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }"
-      class="uni-countdown__number"
-    >
-      {{ d }}
-    </text>
-    <text v-if="showDay" :style="{ color: splitorColor }" class="uni-countdown__splitor">天</text>
-    <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">
-      {{ h }}
-    </text>
-    <text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</text>
-    <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">
-      {{ i }}
-    </text>
-    <text :style="{ color: splitorColor }" class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</text>
-    <text :style="{ borderColor: borderColor, color: color, backgroundColor: backgroundColor }" class="uni-countdown__number">
-      {{ s }}
-    </text>
-    <text v-if="!showColon" :style="{ color: splitorColor }" class="uni-countdown__splitor">秒</text>
-  </view>
-</template>
-<script>
-/**
- * Countdown 倒计时
- * @description 倒计时组件
- * @tutorial https://ext.dcloud.net.cn/plugin?id=25
- * @property {String} backgroundColor 背景色
- * @property {String} color 文字颜色
- * @property {Number} day 天数
- * @property {Number} hour 小时
- * @property {Number} minute 分钟
- * @property {Number} second 秒
- * @property {Number} timestamp 时间戳
- * @property {Boolean} showDay = [true|false] 是否显示天数
- * @property {Boolean} showColon = [true|false] 是否以冒号为分隔符
- * @property {String} splitorColor 分割符号颜色
- * @event {Function} timeup 倒计时时间到触发事件
- * @example <cv-countdown :day="1" :hour="1" :minute="12" :second="40"></cv-countdown>
- */
-export default {
-  name: 'cvCountdown',
-  emits: ['timeup'],
-  props: {
-    showDay: {
-      type: Boolean,
-      default: true
-    },
-    showColon: {
-      type: Boolean,
-      default: true
-    },
-    start: {
-      type: Boolean,
-      default: true
-    },
-    backgroundColor: {
-      type: String,
-      default: '#FFFFFF'
-    },
-    borderColor: {
-      type: String,
-      default: '#000000'
-    },
-    color: {
-      type: String,
-      default: '#000000'
-    },
-    splitorColor: {
-      type: String,
-      default: '#000000'
-    },
-    day: {
-      type: Number,
-      default: 0
-    },
-    hour: {
-      type: Number,
-      default: 0
-    },
-    minute: {
-      type: Number,
-      default: 0
-    },
-    second: {
-      type: Number,
-      default: 0
-    },
-    timestamp: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      timer: null,
-      syncFlag: false,
-      d: '00',
-      h: '00',
-      i: '00',
-      s: '00',
-      leftTime: 0,
-      seconds: 0
-    };
-  },
-  watch: {
-    day(val) {
-      this.changeFlag();
-    },
-    hour(val) {
-      this.changeFlag();
-    },
-    minute(val) {
-      this.changeFlag();
-    },
-    second(val) {
-      this.changeFlag();
-    },
-    start: {
-      immediate: true,
-      handler(newVal, oldVal) {
-        if (newVal) {
-          this.startData();
-        } else {
-          if (!oldVal) return;
-          clearInterval(this.timer);
-        }
-      }
-    }
-  },
-  created: function (e) {
-    this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second);
-    this.countDown();
-  },
-  // #ifndef VUE3
-  destroyed() {
-    clearInterval(this.timer);
-  },
-  // #endif
-  // #ifdef VUE3
-  unmounted() {
-    clearInterval(this.timer);
-  },
-  // #endif
-  methods: {
-    toSeconds(timestamp, day, hours, minutes, seconds) {
-      if (timestamp) {
-        return timestamp - parseInt(new Date().getTime() / 1000, 10);
-      }
-      return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds;
-    },
-    timeUp() {
-      clearInterval(this.timer);
-      this.$emit('timeup');
-    },
-    countDown() {
-      let seconds = this.seconds;
-      let [day, hour, minute, second] = [0, 0, 0, 0];
-      if (seconds > 0) {
-        day = Math.floor(seconds / (60 * 60 * 24));
-        hour = Math.floor(seconds / (60 * 60)) - day * 24;
-        minute = Math.floor(seconds / 60) - day * 24 * 60 - hour * 60;
-        second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
-      } else {
-        this.timeUp();
-      }
-      if (day < 10) {
-        day = '0' + day;
-      }
-      if (hour < 10) {
-        hour = '0' + hour;
-      }
-      if (minute < 10) {
-        minute = '0' + minute;
-      }
-      if (second < 10) {
-        second = '0' + second;
-      }
-      this.d = day;
-      this.h = hour;
-      this.i = minute;
-      this.s = second;
-    },
-    startData() {
-      this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second);
-      if (this.seconds <= 0) {
-        return;
-      }
-      clearInterval(this.timer);
-      this.countDown();
-      this.timer = setInterval(() => {
-        this.seconds--;
-        if (this.seconds < 0) {
-          this.timeUp();
-          return;
-        }
-        this.countDown();
-      }, 1000);
-    },
-    changeFlag() {
-      if (!this.syncFlag) {
-        this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second);
-        this.startData();
-        this.syncFlag = true;
-      }
-    }
-  }
-};
-</script>
-<style scoped>
-.uni-countdown {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  justify-content: flex-start;
-  padding: 2rpx 0;
-}
-
-.uni-countdown__splitor {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  justify-content: center;
-  line-height: 48rpx;
-  padding: 5rpx;
-  font-size: 12px;
-}
-
-.uni-countdown__number {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  justify-content: center;
-  align-items: center;
-  width: 52rpx;
-  height: 48rpx;
-  line-height: 48rpx;
-  margin: 5rpx;
-  text-align: center;
-  font-size: 12px;
-}
-</style>