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

package/ui-cv/cv-indexed-list/cv-indexed-list.vue

@@ -0,0 +1,371 @@
+<template>
+  <view class="uni-indexed-list" ref="list" id="list">
+    <!-- #ifdef APP-NVUE -->
+    <list class="uni-indexed-list__scroll" scrollable="true" show-scrollbar="false">
+      <cell v-for="(list, idx) in lists" :key="idx" :ref="'uni-indexed-list-' + idx">
+        <!-- #endif -->
+        <!-- #ifndef APP-NVUE -->
+        <scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y>
+          <view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx">
+            <!-- #endif -->
+            <indexed-list-item
+              :list="list"
+              :loaded="loaded"
+              :idx="idx"
+              :showSelect="showSelect"
+              @itemClick="onClick"
+            ></indexed-list-item>
+            <!-- #ifndef APP-NVUE -->
+          </view>
+        </scroll-view>
+        <!-- #endif -->
+        <!-- #ifdef APP-NVUE -->
+      </cell>
+    </list>
+    <!-- #endif -->
+    <view
+      class="uni-indexed-list__menu"
+      :class="touchmove ? 'uni-indexed-list__menu--active' : ''"
+      @touchstart="touchStart"
+      @touchmove.stop.prevent="touchMove"
+      @touchend="touchEnd"
+      @mousedown.stop="mousedown"
+      @mousemove.stop.prevent="mousemove"
+      @mouseleave.stop="mouseleave"
+    >
+      <view v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item">
+        <text class="uni-indexed-list__menu-text" :class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''">
+          {{ list.key }}
+        </text>
+      </view>
+    </view>
+    <view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
+      <text class="uni-indexed-list__alert">{{ lists[touchmoveIndex].key }}</text>
+    </view>
+  </view>
+</template>
+<script>
+import indexedListItem from './uni-indexed-list-item.vue';
+// #ifdef APP-NVUE
+const dom = weex.requireModule('dom');
+// #endif
+// #ifdef APP-PLUS
+function throttle(func, delay) {
+  var prev = Date.now();
+  return function () {
+    var context = this;
+    var args = arguments;
+    var now = Date.now();
+    if (now - prev >= delay) {
+      func.apply(context, args);
+      prev = Date.now();
+    }
+  };
+}
+
+function touchMove(e) {
+  let pageY = e.touches[0].pageY;
+  let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight);
+  if (this.touchmoveIndex === index) {
+    return false;
+  }
+  let item = this.lists[index];
+  if (item) {
+    // #ifndef APP-NVUE
+    this.scrollViewId = 'uni-indexed-list-' + index;
+    this.touchmoveIndex = index;
+    // #endif
+    // #ifdef APP-NVUE
+    dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
+      animated: false
+    });
+    this.touchmoveIndex = index;
+    // #endif
+  }
+}
+const throttleTouchMove = throttle(touchMove, 40);
+// #endif
+
+/**
+ * IndexedList 索引列表
+ * @description 用于展示索引列表
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=375
+ * @property {Boolean} showSelect = [true|false] 展示模式
+ * 	@value true 展示模式
+ * 	@value false 选择模式
+ * @property {Object} options 索引列表需要的数据对象
+ * @event {Function} click 点击列表事件 ，返回当前选择项的事件对象
+ * @example <uni-indexed-list options="" showSelect="false" @click=""></uni-indexed-list>
+ */
+export default {
+  name: 'UniIndexedList',
+  components: {
+    indexedListItem
+  },
+  emits: ['click'],
+  props: {
+    options: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    showSelect: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      lists: [],
+      winHeight: 0,
+      itemHeight: 0,
+      winOffsetY: 0,
+      touchmove: false,
+      touchmoveIndex: -1,
+      scrollViewId: '',
+      touchmovable: true,
+      loaded: false,
+      isPC: false
+    };
+  },
+  watch: {
+    options: {
+      handler: function () {
+        this.setList();
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    // #ifdef H5
+    this.isPC = this.IsPC();
+    // #endif
+    setTimeout(() => {
+      this.setList();
+    }, 50);
+    setTimeout(() => {
+      this.loaded = true;
+    }, 300);
+  },
+  methods: {
+    setList() {
+      let index = 0;
+      this.lists = [];
+      this.options.forEach((value, index) => {
+        if (value.data.length === 0) {
+          return;
+        }
+        let indexBefore = index;
+        let items = value.data.map((item) => {
+          let obj = {};
+          obj['key'] = value.letter;
+          obj['name'] = item;
+          obj['itemIndex'] = index;
+          index++;
+          obj.checked = item.checked ? item.checked : false;
+          return obj;
+        });
+        this.lists.push({
+          title: value.letter,
+          key: value.letter,
+          items: items,
+          itemIndex: indexBefore
+        });
+      });
+      // #ifndef APP-NVUE
+      uni
+        .createSelectorQuery()
+        .in(this)
+        .select('#list')
+        .boundingClientRect()
+        .exec((ret) => {
+          this.winOffsetY = ret[0].top;
+          this.winHeight = ret[0].height;
+          this.itemHeight = this.winHeight / this.lists.length;
+        });
+      // #endif
+      // #ifdef APP-NVUE
+      dom.getComponentRect(this.$refs['list'], (res) => {
+        this.winOffsetY = res.size.top;
+        this.winHeight = res.size.height;
+        this.itemHeight = this.winHeight / this.lists.length;
+      });
+      // #endif
+    },
+    touchStart(e) {
+      this.touchmove = true;
+      let pageY = this.isPC ? e.pageY : e.touches[0].pageY;
+      let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight);
+      let item = this.lists[index];
+      if (item) {
+        this.scrollViewId = 'uni-indexed-list-' + index;
+        this.touchmoveIndex = index;
+        // #ifdef APP-NVUE
+        dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
+          animated: false
+        });
+        // #endif
+      }
+    },
+    touchMove(e) {
+      // #ifndef APP-PLUS
+      let pageY = this.isPC ? e.pageY : e.touches[0].pageY;
+      let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight);
+      if (this.touchmoveIndex === index) {
+        return false;
+      }
+      let item = this.lists[index];
+      if (item) {
+        this.scrollViewId = 'uni-indexed-list-' + index;
+        this.touchmoveIndex = index;
+      }
+      // #endif
+      // #ifdef APP-PLUS
+      throttleTouchMove.call(this, e);
+      // #endif
+    },
+    touchEnd() {
+      this.touchmove = false;
+      this.touchmoveIndex = -1;
+    },
+
+    /**
+     * 兼容 PC @tian
+     */
+
+    mousedown(e) {
+      if (!this.isPC) return;
+      this.touchStart(e);
+    },
+    mousemove(e) {
+      if (!this.isPC) return;
+      this.touchMove(e);
+    },
+    mouseleave(e) {
+      if (!this.isPC) return;
+      this.touchEnd(e);
+    },
+
+    // #ifdef H5
+    IsPC() {
+      var userAgentInfo = navigator.userAgent;
+      var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
+      var flag = true;
+      for (let v = 0; v < Agents.length - 1; v++) {
+        if (userAgentInfo.indexOf(Agents[v]) > 0) {
+          flag = false;
+          break;
+        }
+      }
+      return flag;
+    },
+    // #endif
+
+    onClick(e) {
+      let { idx, index } = e;
+      let obj = {};
+      for (let key in this.lists[idx].items[index]) {
+        obj[key] = this.lists[idx].items[index][key];
+      }
+      let select = [];
+      if (this.showSelect) {
+        this.lists[idx].items[index].checked = !this.lists[idx].items[index].checked;
+        this.lists.forEach((value, idx) => {
+          value.items.forEach((item, index) => {
+            if (item.checked) {
+              let obj = {};
+              for (let key in this.lists[idx].items[index]) {
+                obj[key] = this.lists[idx].items[index][key];
+              }
+              select.push(obj);
+            }
+          });
+        });
+      }
+      this.$emit('click', {
+        item: obj,
+        select: select
+      });
+    }
+  }
+};
+</script>
+<style scoped>
+.uni-indexed-list {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+
+.uni-indexed-list__scroll {
+  flex: 1;
+}
+
+.uni-indexed-list__menu {
+  width: 24px;
+  background-color: lightgrey;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+}
+
+.uni-indexed-list__menu-item {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.uni-indexed-list__menu-text {
+  line-height: 20px;
+  font-size: 12px;
+  text-align: center;
+  color: #aaa;
+}
+
+.uni-indexed-list__menu--active {
+  background-color: #c8c8c8;
+}
+
+.uni-indexed-list__menu-text--active {
+  color: #007aff;
+}
+
+.uni-indexed-list__alert-wrapper {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.uni-indexed-list__alert {
+  width: 80px;
+  height: 80px;
+  border-radius: 80px;
+  text-align: center;
+  line-height: 80px;
+  font-size: 35px;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+</style>

package/ui-cv/cv-info/cv-info.vue

@@ -1,34 +1,19 @@
 <template>
-  <cv-form-item :label="label" :labelWidth="localLabelWidth" :layout="localLayout" :rtip="rtip">
-    <view class="cv-info-area" ref="onEmpty" v-bind:style="cvInfoArea">
-      <view class="cv-info-item">
-        <text>{{ info }}</text>
-      </view>
+  <view class="cv-info-area" ref="onEmpty" v-bind:style="cvInfoArea">
+    <view class="cv-info-item">
+      <text>{{ info }}</text>
     </view>
-  </cv-form-item>
+  </view>
 </template>
 
 <script>
-import MixinsCommon from '../mixins/mixins-common';
 export default {
-  mixins: [MixinsCommon],
   name: 'cvInfo',
-  inject: {
-    cvFormGroup: {
-      default() {
-        return null;
-      }
-    }
-  },
   props: {
     info: {
       type: [Number, String],
       default: ''
     },
-    rtip: {
-      type: String,
-      default: ''
-    },
     infoAlign: {
       type: String,
       default: 'right'
@@ -42,7 +27,7 @@ export default {
   watch: {
     value(newVal) {}
   },
-  created: function () {
+  created() {
     this._dealStyle();
   },
   methods: {

package/ui-cv/cv-input-btn/cv-input-btn.vue

@@ -1,41 +1,31 @@
 <template>
-  <cv-form-item
-    :tip="tip"
-    :label="label"
-    :message="message"
-    :messageDisplay="messageDisplay"
-    :labelWidth="localLabelWidth"
-    :layout="localLayout"
-  >
-    <view class="cv-code-area">
-      <view class="cv-code-input-area" v-bind:style="inputAreaStyle">
-        <input
-          class="cv-code-input-item"
-          placeholder-class="cv-code-input-item-placeholder"
-          v-model="localVal"
-          :maxlength="maxlength"
-          :placeholder="placeholder"
-          @input="updateInput"
-          @blur="onBlur"
-        />
-      </view>
-      <view class="cv-code-button-area" v-bind:style="buttonAreaStyle">
-        <button
-          class="cv-code-button-item"
-          :class="btnDisabled ? 'cv-code-button-wait' : ''"
-          :disabled="btnDisabled"
-          @tap="click"
-        >
-          {{ btnText }}
-        </button>
-      </view>
+  <view class="cv-code-area">
+    <view class="cv-code-input-area" v-bind:style="inputAreaStyle">
+      <input
+        class="cv-code-input-item"
+        placeholder-class="cv-code-input-item-placeholder"
+        v-model="localVal"
+        :maxlength="maxlength"
+        :placeholder="placeholder"
+        @input="funcOnInput"
+        @blur="onBlur"
+      />
     </view>
-  </cv-form-item>
+    <view class="cv-code-button-area" v-bind:style="buttonAreaStyle">
+      <button
+        size="mini"
+        class="cv-code-button-item"
+        :class="btnDisabled ? 'cv-code-button-wait' : ''"
+        :disabled="btnDisabled"
+        @tap="click"
+      >
+        {{ btnText }}
+      </button>
+    </view>
+  </view>
 </template>
 <script>
-import MixinsCommon from '../mixins/mixins-common.js';
 export default {
-  mixins: [MixinsCommon],
   name: 'cvInputBtn',
   inject: {
     cvFormGroup: {
@@ -65,14 +55,6 @@ export default {
       type: Number,
       default: 80
     },
-    message: {
-      type: String,
-      default: ''
-    },
-    messageDisplay: {
-      type: Boolean,
-      default: false
-    },
     btnDisabled: {
       type: Boolean,
       default: false
@@ -101,7 +83,7 @@ export default {
       }
       this.$emit('click', e);
     },
-    updateInput(e) {
+    funcOnInput(e) {
       this.$emit('input', this.localVal);
     },
     _initStyle() {
@@ -137,7 +119,7 @@ export default {
 .cv-code-button-item {
   height: 35px;
   line-height: 35px;
-  font-size: 14px;
+  font-size: 12px;
   background-color: #007aff;
   color: #ffffff;
 }

package/ui-cv/cv-input-digit/cv-input-digit.vue

@@ -1,30 +1,26 @@
 <template>
-  <cv-form-item
-    :label="label"
-    :message="message"
-    :messageDisplay="messageDisplay"
-    :labelWidth="localLabelWidth"
-    :layout="localLayout"
-    :onQClear="onQClear"
-    :tip="tip"
-    :rtip="rtip"
-    :must="must"
-    :input-value="localVal"
-  >
-    <view class="cv-input-text">
-      <input
-        class="cv-input-text-item"
-        placeholder-class="cv-input-text-item-placeholder"
-        v-model="localVal"
-        type="digit"
-        :placeholder="placeholder"
-        :maxlength="maxlength"
-        :disabled="disabled"
-        @input="updateInput"
-        @blur="onBlur"
-      />
+  <view class="cv-input-text">
+    <input
+      class="cv-input__content"
+      placeholder-class="cv-input__placeholder"
+      v-model="localVal"
+      type="digit"
+      :placeholder="placeholder"
+      :maxlength="maxlength"
+      :disabled="disabled"
+      @input="funcOnInput"
+      @blur="onBlur"
+    />
+    <!-- 输入框右侧信息 -->
+    <view class="cv-input__right">
+      <!-- 清空 -->
+      <view class="cv-input__clear" @click="onEmpty" v-if="clearable == true && localVal != ''">X</view>
+      <!-- 追加-->
+      <view class="cv-input__append" v-if="$slots['append']">
+        <slot name="append"></slot>
+      </view>
     </view>
-  </cv-form-item>
+  </view>
 </template>
 
 <script>
@@ -39,20 +35,57 @@ export default {
       }
     }
   },
-  props: {},
+  props: {
+    placeholder: {
+      type: [String],
+      default: '请输入数字'
+    }
+  },
   // 监听动态数据变化
   watch: {},
   data() {
     return {};
   },
-  created: function () {},
+  created() {},
   methods: {}
 };
 </script>
 <style>
-.cv-input-text-item {
+.cv-input__content {
   height: 35px;
   line-height: 35px;
   font-size: 14px;
 }
+
+.cv-input__placeholder {
+  font-size: 14px;
+}
+.cv-input__right {
+  height: 16px;
+  position: absolute;
+  bottom: 10px;
+  right: 0px;
+  z-index: 2;
+}
+.cv-input__clear {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.4);
+  font-size: 8px;
+  line-height: 16px;
+  text-align: center;
+  color: #fff;
+  float: left;
+  margin-left: 10px;
+}
+.cv-input__append {
+  color: rgba(0, 0, 0, 0.4);
+  width: 25px;
+  text-align: center;
+  overflow: hidden;
+  height: 16px;
+  font-size: 12px;
+  line-height: 16px;
+}
 </style>