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

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

@@ -0,0 +1,154 @@
+<template>
+  <view>
+    <view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper">
+      <text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{{ list.key }}</text>
+    </view>
+    <view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list">
+      <view
+        v-for="(item, index) in list.items"
+        :key="index"
+        class="uni-indexed-list__item"
+        hover-class="uni-indexed-list__item--hover"
+      >
+        <view class="uni-indexed-list__item-container" @click="onClick(idx, index)">
+          <view
+            class="uni-indexed-list__item-border"
+            :class="{ 'uni-indexed-list__item-border--last': index === list.items.length - 1 }"
+          >
+            <view v-if="showSelect" style="margin-right: 20rpx">
+              <cv-icon2
+                :type="item.checked ? 'checkbox-filled' : 'circle'"
+                :color="item.checked ? '#007aff' : '#aaa'"
+                size="24"
+              />
+            </view>
+            <text class="uni-indexed-list__item-content">{{ item.name }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'UniIndexedList',
+  emits: ['itemClick'],
+  props: {
+    loaded: {
+      type: Boolean,
+      default: false
+    },
+    idx: {
+      type: Number,
+      default: 0
+    },
+    list: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    showSelect: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    onClick(idx, index) {
+      this.$emit('itemClick', {
+        idx,
+        index
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.uni-indexed-list__list {
+  background-color: #ffffff;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-top-color: #e5e5e5;
+}
+
+.uni-indexed-list__item {
+  font-size: 16px;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex: 1;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.uni-indexed-list__item-container {
+  padding-left: 15px;
+  flex: 1;
+  position: relative;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  box-sizing: border-box;
+  /* #endif */
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.uni-indexed-list__item-border {
+  flex: 1;
+  position: relative;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  box-sizing: border-box;
+  /* #endif */
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  padding: 15px;
+  padding-left: 0;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: #e5e5e5;
+}
+
+.uni-indexed-list__item-border--last {
+  border-bottom-width: 0px;
+}
+
+.uni-indexed-list__item-content {
+  flex: 1;
+  font-size: 14px;
+}
+
+.uni-indexed-list {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+
+.uni-indexed-list__title-wrapper {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  width: 100%;
+  /* #endif */
+  background-color: #f7f7f7;
+}
+
+.uni-indexed-list__title {
+  padding: 6px 12px;
+  line-height: 24px;
+  font-size: 12px;
+}
+</style>

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-input-password/cv-input-password.vue

@@ -17,14 +17,14 @@
       <!-- 清空 -->
       <view class="cv-input__clear" @click="onEmpty" v-if="clearable == true && localVal != ''">X</view>
       <!-- 眼睛-->
-      <cv-icons2
+      <cv-icon2
         class="cv-input__eyes"
         v-if="localVal != '' && passwordIcon"
         :type="showPassword ? 'eye-slash-filled' : 'eye-filled'"
         :size="18"
         color="rgba(0, 0, 0, 0.4)"
         @click="onEyes"
-      ></cv-icons2>
+      ></cv-icon2>
     </view>
   </view>
 </template>

package/ui-cv/{cv-link/uni-link.vue → cv-link2/cv-link2.vue}

@@ -35,7 +35,7 @@
  * @example * <uni-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn"></uni-link>
  */
 export default {
-  name: 'uniLink',
+  name: 'cvLink2',
   props: {
     href: {
       type: String,

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

@@ -0,0 +1,107 @@
+<template>
+  <!-- #ifndef APP-NVUE -->
+  <view class="uni-list uni-border-top-bottom">
+    <view v-if="border" class="uni-list--border-top"></view>
+    <slot />
+    <view v-if="border" class="uni-list--border-bottom"></view>
+  </view>
+  <!-- #endif -->
+  <!-- #ifdef APP-NVUE -->
+  <list class="uni-list" :class="{ 'uni-list--border': border }" :enableBackToTop="enableBackToTop" loadmoreoffset="15">
+    <slot />
+  </list>
+  <!-- #endif -->
+</template>
+
+<script>
+/**
+ * List 列表
+ * @description 列表组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=24
+ * @property {String} 	border = [true|false] 		标题
+ */
+export default {
+  name: 'cvList',
+  'mp-weixin': {
+    options: {
+      multipleSlots: false
+    }
+  },
+  props: {
+    enableBackToTop: {
+      type: [Boolean, String],
+      default: false
+    },
+    scrollY: {
+      type: [Boolean, String],
+      default: false
+    },
+    border: {
+      type: Boolean,
+      default: true
+    }
+  },
+  // provide() {
+  // 	return {
+  // 		list: this
+  // 	};
+  // },
+  created() {
+    this.firstChildAppend = false;
+  },
+  methods: {
+    loadMore(e) {
+      this.$emit('scrolltolower');
+    }
+  }
+};
+</script>
+<style scoped>
+.uni-list {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  background-color: #ffffff;
+  position: relative;
+  flex-direction: column;
+}
+
+.uni-list--border {
+  position: relative;
+  /* #ifdef APP-NVUE */
+  border-top-color: #e5e5e5;
+  border-top-style: solid;
+  border-top-width: 0.5px;
+  border-bottom-color: #e5e5e5;
+  border-bottom-style: solid;
+  border-bottom-width: 0.5px;
+  /* #endif */
+  z-index: -1;
+}
+
+/* #ifndef APP-NVUE */
+.uni-list--border-top {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 1px;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  background-color: #e5e5e5;
+  z-index: 1;
+}
+
+.uni-list--border-bottom {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 1px;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  background-color: #e5e5e5;
+}
+
+/* #endif */
+</style>