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

package/ui-cv/cv-number-box/cv-number-box.vue

@@ -1,223 +0,0 @@
-<template>
-  <view class="uni-numbox">
-    <view @click="_calcValue('minus')" class="uni-numbox__minus uni-cursor-point">
-      <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue <= min || disabled }">-</text>
-    </view>
-    <input :disabled="disabled" @focus="_onFocus" @blur="_onBlur" class="uni-numbox__value" type="number" v-model="inputValue" />
-    <view @click="_calcValue('plus')" class="uni-numbox__plus uni-cursor-point">
-      <text class="uni-numbox--text" :class="{ 'uni-numbox--disabled': inputValue >= max || disabled }">+</text>
-    </view>
-  </view>
-</template>
-<script>
-/**
- * NumberBox 数字输入框
- * @description 带加减按钮的数字输入框
- * @tutorial https://ext.dcloud.net.cn/plugin?id=31
- * @property {Number} value 输入框当前值
- * @property {Number} min 最小值
- * @property {Number} max 最大值
- * @property {Number} step 每次点击改变的间隔大小
- * @property {Boolean} disabled = [true|false] 是否为禁用状态
- * @event {Function} change 输入框值改变时触发的事件，参数为输入框当前的 value
- */
-
-export default {
-  name: 'cvNumberBox',
-  emits: ['change', 'input', 'update:modelValue', 'blur', 'focus'],
-  props: {
-    value: {
-      type: [Number, String],
-      default: 1
-    },
-    modelValue: {
-      type: [Number, String],
-      default: 1
-    },
-    min: {
-      type: Number,
-      default: 0
-    },
-    max: {
-      type: Number,
-      default: 100
-    },
-    step: {
-      type: Number,
-      default: 1
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      inputValue: 0
-    };
-  },
-  watch: {
-    value(val) {
-      this.inputValue = +val;
-    },
-    modelValue(val) {
-      this.inputValue = +val;
-    }
-  },
-  created() {
-    if (this.value === 1) {
-      this.inputValue = +this.modelValue;
-    }
-    if (this.modelValue === 1) {
-      this.inputValue = +this.value;
-    }
-  },
-  methods: {
-    _calcValue(type) {
-      if (this.disabled) {
-        return;
-      }
-      const scale = this._getDecimalScale();
-      let value = this.inputValue * scale;
-      let step = this.step * scale;
-      if (type === 'minus') {
-        value -= step;
-        if (value < this.min * scale) {
-          return;
-        }
-        if (value > this.max * scale) {
-          value = this.max * scale;
-        }
-      }
-
-      if (type === 'plus') {
-        value += step;
-        if (value > this.max * scale) {
-          return;
-        }
-        if (value < this.min * scale) {
-          value = this.min * scale;
-        }
-      }
-
-      this.inputValue = (value / scale).toFixed(String(scale).length - 1);
-      this.$emit('change', +this.inputValue);
-      // TODO vue2 兼容
-      this.$emit('input', +this.inputValue);
-      // TODO vue3 兼容
-      this.$emit('update:modelValue', +this.inputValue);
-    },
-    _getDecimalScale() {
-      let scale = 1;
-      // 浮点型
-      if (~~this.step !== this.step) {
-        scale = Math.pow(10, String(this.step).split('.')[1].length);
-      }
-      return scale;
-    },
-    _onBlur(event) {
-      this.$emit('blur', event);
-      let value = event.detail.value;
-      if (!value) {
-        // this.inputValue = 0;
-        return;
-      }
-      value = +value;
-      if (value > this.max) {
-        value = this.max;
-      } else if (value < this.min) {
-        value = this.min;
-      }
-      const scale = this._getDecimalScale();
-      this.inputValue = value.toFixed(String(scale).length - 1);
-      this.$emit('change', +this.inputValue);
-      this.$emit('input', +this.inputValue);
-    },
-    _onFocus(event) {
-      this.$emit('focus', event);
-    }
-  }
-};
-</script>
-<style scoped>
-/* #ifdef APP-NVUE */
-/* #endif */
-.uni-numbox {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  height: 35px;
-  line-height: 35px;
-  width: 120px;
-}
-
-.uni-cursor-point {
-  /* #ifdef H5 */
-  cursor: pointer;
-  /* #endif */
-}
-
-.uni-numbox__value {
-  background-color: #ffffff;
-  width: 50px;
-  height: 35px;
-  text-align: center;
-  font-size: 16px;
-  border-width: 1rpx;
-  border-style: solid;
-  border-color: #e5e5e5;
-  border-left-width: 0;
-  border-right-width: 0;
-}
-
-.uni-numbox__minus {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 35px;
-  height: 35px;
-  font-size: 20px;
-  color: #333;
-  background-color: #f8f8f8;
-  border-width: 1rpx;
-  border-style: solid;
-  border-color: #e5e5e5;
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  border-right-width: 0;
-}
-
-.uni-numbox__plus {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 35px;
-  height: 35px;
-  border-width: 1rpx;
-  border-style: solid;
-  border-color: #e5e5e5;
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-  background-color: #f8f8f8;
-  border-left-width: 0;
-}
-
-.uni-numbox--text {
-  font-size: 20px;
-  color: #333;
-}
-
-.uni-numbox--disabled {
-  color: #c0c0c0;
-  /* #ifdef H5 */
-  cursor: not-allowed;
-  /* #endif */
-}
-</style>

package/ui-cv/cv-pagination/cv-pagination.vue

@@ -1,397 +0,0 @@
-<template>
-  <view class="uni-pagination">
-    <!-- #ifndef APP-NVUE -->
-    <view class="uni-pagination__total is-phone-hide">共 {{ total }} 条</view>
-    <!-- #endif -->
-    <view
-      class="uni-pagination__btn"
-      :class="currentIndex === 1 ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
-      :hover-class="currentIndex === 1 ? '' : 'uni-pagination--hover'"
-      :hover-start-time="20"
-      :hover-stay-time="70"
-      @click="clickLeft"
-    >
-      <template v-if="showIcon === true || showIcon === 'true'">
-        <cv-icon2 color="#666" size="16" type="arrowleft" />
-      </template>
-      <template v-else>
-        <text class="uni-pagination__child-btn">{{ prevText }}</text>
-      </template>
-    </view>
-    <view class="uni-pagination__num uni-pagination__num-flex-none">
-      <view class="uni-pagination__num-current">
-        <text class="uni-pagination__num-current-text is-pc-hide" style="color: #409eff">{{ currentIndex }}</text>
-        <text class="uni-pagination__num-current-text is-pc-hide">/{{ maxPage || 0 }}</text>
-        <!-- #ifndef APP-NVUE -->
-        <view
-          v-for="(item, index) in paper"
-          :key="index"
-          :class="{ 'page--active': item === currentIndex }"
-          class="uni-pagination__num-tag tag--active is-phone-hide"
-          @click.top="selectPage(item, index)"
-        >
-          <text>{{ item }}</text>
-        </view>
-        <!-- #endif -->
-      </view>
-    </view>
-    <view
-      class="uni-pagination__btn"
-      :class="currentIndex >= maxPage ? 'uni-pagination--disabled' : 'uni-pagination--enabled'"
-      :hover-class="currentIndex === maxPage ? '' : 'uni-pagination--hover'"
-      :hover-start-time="20"
-      :hover-stay-time="70"
-      @click="clickRight"
-    >
-      <template v-if="showIcon === true || showIcon === 'true'">
-        <cv-icon2 color="#666" size="16" type="arrowright" />
-      </template>
-      <template v-else>
-        <text class="uni-pagination__child-btn">{{ nextText }}</text>
-      </template>
-    </view>
-  </view>
-</template>
-
-<script>
-/**
- * Pagination 分页器
- * @description 分页器组件，用于展示页码、请求数据等
- * @tutorial https://ext.dcloud.net.cn/plugin?id=32
- * @property {String} prevText 左侧按钮文字
- * @property {String} nextText 右侧按钮文字
- * @property {Number} current 当前页
- * @property {Number} total 数据总量
- * @property {Number} pageSize 每页数据量
- * @property {Number} showIcon = [true|false] 是否以 icon 形式展示按钮
- * @event {Function} change 点击页码按钮时触发 ,e={type,current} current为当前页，type值为：next/prev，表示点击的是上一页还是下一个
- */
-
-export default {
-  name: 'UniPagination',
-  emits: ['update:modelValue', 'input', 'change'],
-  props: {
-    value: {
-      type: [Number, String],
-      default: 1
-    },
-    modelValue: {
-      type: [Number, String],
-      default: 1
-    },
-    prevText: {
-      type: String,
-      default: '上一页'
-    },
-    nextText: {
-      type: String,
-      default: '下一页'
-    },
-    current: {
-      type: [Number, String],
-      default: 1
-    },
-    total: {
-      // 数据总量
-      type: [Number, String],
-      default: 0
-    },
-    pageSize: {
-      // 每页数据量
-      type: [Number, String],
-      default: 10
-    },
-    showIcon: {
-      // 是否以 icon 形式展示按钮
-      type: [Boolean, String],
-      default: false
-    },
-    pagerCount: {
-      type: Number,
-      default: 7
-    }
-  },
-  data() {
-    return {
-      currentIndex: 1,
-      paperData: []
-    };
-  },
-  computed: {
-    maxPage() {
-      let maxPage = 1;
-      let total = Number(this.total);
-      let pageSize = Number(this.pageSize);
-      if (total && pageSize) {
-        maxPage = Math.ceil(total / pageSize);
-      }
-      return maxPage;
-    },
-    paper() {
-      const num = this.currentIndex;
-      // TODO 最大页数
-      const pagerCount = this.pagerCount;
-      // const total = 181
-      const total = this.total;
-      const pageSize = this.pageSize;
-      let totalArr = [];
-      let showPagerArr = [];
-      let pagerNum = Math.ceil(total / pageSize);
-      for (let i = 0; i < pagerNum; i++) {
-        totalArr.push(i + 1);
-      }
-      showPagerArr.push(1);
-      const totalNum = totalArr[totalArr.length - (pagerCount + 1) / 2];
-      totalArr.forEach((item, index) => {
-        if ((pagerCount + 1) / 2 >= num) {
-          if (item < pagerCount + 1 && item > 1) {
-            showPagerArr.push(item);
-          }
-        } else if (num + 2 <= totalNum) {
-          if (item > num - (pagerCount + 1) / 2 && item < num + (pagerCount + 1) / 2) {
-            showPagerArr.push(item);
-          }
-        } else {
-          if ((item > num - (pagerCount + 1) / 2 || pagerNum - pagerCount < item) && item < totalArr[totalArr.length - 1]) {
-            showPagerArr.push(item);
-          }
-        }
-      });
-      if (pagerNum > pagerCount) {
-        if ((pagerCount + 1) / 2 >= num) {
-          showPagerArr[showPagerArr.length - 1] = '...';
-        } else if (num + 2 <= totalNum) {
-          showPagerArr[1] = '...';
-          showPagerArr[showPagerArr.length - 1] = '...';
-        } else {
-          showPagerArr[1] = '...';
-        }
-        showPagerArr.push(totalArr[totalArr.length - 1]);
-      } else {
-        if ((pagerCount + 1) / 2 >= num) {
-        } else if (num + 2 <= totalNum) {
-        } else {
-          showPagerArr.shift();
-          showPagerArr.push(totalArr[totalArr.length - 1]);
-        }
-      }
-
-      return showPagerArr;
-    }
-  },
-  watch: {
-    current(val) {
-      this.currentIndex = val;
-    },
-    value(val) {
-      if (val < 1) {
-        this.currentIndex = 1;
-      } else {
-        this.currentIndex = val;
-      }
-    },
-    modelValue(val) {
-      if (val < 1) {
-        this.currentIndex = 1;
-      } else {
-        this.currentIndex = val;
-      }
-    }
-  },
-  created() {
-    this.currentIndex = +this.value;
-  },
-  methods: {
-    // 选择标签
-    selectPage(e, index) {
-      if (parseInt(e)) {
-        this.currentIndex = e;
-        this.change('current');
-      } else {
-        let pagerNum = Math.ceil(this.total / this.pageSize);
-        // let pagerNum = Math.ceil(181 / this.pageSize)
-        // 上一页
-        if (index <= 1) {
-          if (this.currentIndex - 5 > 1) {
-            this.currentIndex -= 5;
-          } else {
-            this.currentIndex = 1;
-          }
-          return;
-        }
-        // 下一页
-        if (index >= 6) {
-          if (this.currentIndex + 5 > pagerNum) {
-            this.currentIndex = pagerNum;
-          } else {
-            this.currentIndex += 5;
-          }
-          return;
-        }
-      }
-    },
-    clickLeft() {
-      if (Number(this.currentIndex) === 1) {
-        return;
-      }
-      this.currentIndex -= 1;
-      this.change('prev');
-    },
-    clickRight() {
-      if (Number(this.currentIndex) >= this.maxPage) {
-        return;
-      }
-      this.currentIndex += 1;
-      this.change('next');
-    },
-    change(e) {
-      this.$emit('input', this.currentIndex);
-      this.$emit('update:modelValue', this.currentIndex);
-      this.$emit('change', {
-        type: e,
-        current: this.currentIndex
-      });
-    }
-  }
-};
-</script>
-
-<style scoped>
-.uni-pagination {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  position: relative;
-  overflow: hidden;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-
-.uni-pagination__total {
-  font-size: 14px;
-  color: #999;
-  margin-right: 15px;
-}
-
-.uni-pagination__btn {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  cursor: pointer;
-  /* #endif */
-  padding: 0 8px;
-  line-height: 30px;
-  font-size: 14px;
-  position: relative;
-  background-color: #f4f4f5;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.uni-pagination__child-btn {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  font-size: 14px;
-  position: relative;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.uni-pagination__num {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex: 1;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  height: 30px;
-  line-height: 30px;
-  font-size: 14px;
-  color: #333;
-  margin: 0 5px;
-}
-
-.uni-pagination__num-tag {
-  /* #ifdef H5 */
-  cursor: pointer;
-  min-width: 30px;
-  /* #endif */
-  margin: 0 5px;
-  height: 30px;
-  text-align: center;
-  line-height: 30px;
-  color: #666;
-}
-
-.uni-pagination__num-current {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-}
-
-.uni-pagination__num-current-text {
-  font-size: 15px;
-}
-
-.uni-pagination--enabled {
-  color: #333333;
-  opacity: 1;
-}
-
-.uni-pagination--disabled {
-  opacity: 0.5;
-  /* #ifdef H5 */
-  cursor: default;
-  /* #endif */
-}
-
-.uni-pagination--hover {
-  color: rgba(0, 0, 0, 0.6);
-  background-color: #f1f1f1;
-}
-
-.tag--active:hover {
-  color: #007aff;
-}
-
-.page--active {
-  color: #fff;
-  background-color: #007aff;
-}
-
-.page--active:hover {
-  color: #fff;
-}
-
-/* #ifndef APP-NVUE */
-.is-pc-hide {
-  display: block;
-}
-
-.is-phone-hide {
-  display: none;
-}
-
-@media screen and (min-width: 450px) {
-  .is-pc-hide {
-    display: none;
-  }
-
-  .is-phone-hide {
-    display: block;
-  }
-
-  .uni-pagination__num-flex-none {
-    flex: none;
-  }
-}
-
-/* #endif */
-</style>