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

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

@@ -1,30 +1,22 @@
 <template>
-  <cv-form-item
-    :tip="tip"
-    :must="must"
-    :label="label"
-    :message="message"
-    :messageDisplay="messageDisplay"
-    :labelWidth="localLabelWidth"
-    :layout="localLayout"
-    :onQClear="onQClear"
-    :rtip="rtip"
-    :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="idcard"
-        :maxlength="maxlength"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        @input="updateInput"
-        @blur="onBlur"
-      />
+  <view class="cv-input-text">
+    <input
+      class="cv-input__content"
+      placeholder-class="cv-input__placeholder"
+      v-model="localVal"
+      type="idcard"
+      :maxlength="maxlength"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      @input="funcOnInput"
+      @blur="onBlur"
+    />
+    <!-- 输入框右侧信息 -->
+    <view class="cv-input__right">
+      <!-- 清空 -->
+      <view class="cv-input__clear" @click="onEmpty" v-if="clearable == true && localVal != ''">X</view>
     </view>
-  </cv-form-item>
+  </view>
 </template>
 
 <script>
@@ -39,20 +31,46 @@ export default {
       }
     }
   },
-  props: {},
+  props: {
+    placeholder: {
+      type: [String],
+      default: '请输入身份证'
+    }
+  },
   data() {
     return {};
   },
   watch: {},
-  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;
+}
 </style>

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

@@ -1,30 +1,26 @@
 <template>
-  <cv-form-item
-    :tip="tip"
-    :must="must"
-    :label="label"
-    :message="message"
-    :messageDisplay="messageDisplay"
-    :labelWidth="localLabelWidth"
-    :layout="localLayout"
-    :onQClear="onQClear"
-    :rtip="rtip"
-    :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="number"
-        :maxlength="maxlength"
-        :disabled="disabled"
-        :placeholder="placeholder"
-        @input="updateInput"
-        @blur="onBlur"
-      />
+  <view class="cv-input-text">
+    <input
+      class="cv-input__content"
+      placeholder-class="cv-input__placeholder"
+      v-model="localVal"
+      type="number"
+      :maxlength="maxlength"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      @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,7 +35,12 @@ export default {
       }
     }
   },
-  props: {},
+  props: {
+    placeholder: {
+      type: [String],
+      default: '请输入数字'
+    }
+  },
   data() {
     return {};
   },
@@ -48,7 +49,7 @@ export default {
       this.localVal = this._dealValue(newVal);
     }
   },
-  created: function () {
+  created() {
     this.localVal = this._dealValue(this.value);
   },
   methods: {
@@ -64,9 +65,40 @@ export default {
 </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>

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

@@ -1,30 +1,32 @@
 <template>
-  <cv-form-item
-    :tip="tip"
-    :must="must"
-    :label="label"
-    :message="message"
-    :messageDisplay="messageDisplay"
-    :labelWidth="localLabelWidth"
-    :layout="localLayout"
-    :onQClear="onQClear"
-    :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="text"
-        :maxlength="maxlength"
-        :disabled="disabled"
-        password
-        :placeholder="placeholder"
-        @input="updateInput"
-        @blur="onBlur"
-      />
+  <view class="cv-input-password">
+    <input
+      class="cv-input__content"
+      placeholder-class="cv-input__placeholder"
+      v-model="localVal"
+      type="text"
+      :maxlength="maxlength"
+      :disabled="disabled"
+      :password="!showPassword"
+      :placeholder="placeholder"
+      @input="funcOnInput"
+      @blur="onBlur"
+    />
+    <!-- 输入框右侧信息 -->
+    <view class="cv-input__right">
+      <!-- 清空 -->
+      <view class="cv-input__clear" @click="onEmpty" v-if="clearable == true && localVal != ''">X</view>
+      <!-- 眼睛-->
+      <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-icon2>
     </view>
-  </cv-form-item>
+  </view>
 </template>
 
 <script>
@@ -39,19 +41,67 @@ export default {
       }
     }
   },
-  props: {},
+  props: {
+    placeholder: {
+      type: [String],
+      default: '请输入密码'
+    },
+    passwordIcon: {
+      type: Boolean,
+      default: true
+    }
+  },
   watch: {},
   data() {
-    return {};
+    return {
+      showPassword: false
+    };
   },
-  created: function () {},
-  methods: {}
+  created() {},
+  methods: {
+    onEyes() {
+      this.showPassword = !this.showPassword;
+    }
+  }
 };
 </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__eyes {
+  color: rgba(0, 0, 0, 0.4);
+  width: 25px;
+  text-align: center;
+  overflow: hidden;
+  height: 16px;
+  font-size: 12px;
+  line-height: 16px;
+  padding: 0 5px;
+}
 </style>

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

@@ -1,31 +1,27 @@
 <template>
-  <cv-form-item
-    :tip="tip"
-    :label="label"
-    :message="message"
-    :must="must"
-    :messageDisplay="messageDisplay"
-    :labelWidth="localLabelWidth"
-    :layout="localLayout"
-    :onQClear="onQClear"
-    :rtip="rtip"
-    :inputValue="localVal"
-  >
-    <view class="cv-input-text" ref="onEmpty">
-      <input
-        class="cv-input-text-item"
-        :style="localItemStyle"
-        placeholder-class="cv-input-text-item-placeholder"
-        v-model="localVal"
-        type="text"
-        :placeholder="placeholder"
-        :maxlength="maxlength"
-        :disabled="disabled"
-        @input="updateInput"
-        @blur="onBlur"
-      />
+  <view class="cv-input-text">
+    <input
+      class="cv-input__content"
+      :style="localStyle"
+      placeholder-class="cv-input__placeholder"
+      v-model="localVal"
+      type="text"
+      :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>
@@ -37,31 +33,53 @@ export default {
     addGlobalClass: true
   },
   props: {
-    rtip: {
-      type: String,
-      default: ''
+    placeholder: {
+      type: [String],
+      default: '请输入文本'
     }
   },
   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-text-rtip {
-  color: #999;
-  width: 50rpx;
-  padding: 10rpx 0rpx 10rpx 0;
+.cv-input__placeholder {
+  font-size: 14px;
+}
+.cv-input__right {
+  height: 16px;
   position: absolute;
-  right: 0;
-  top: -7px;
+  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>

package/ui-cv/cv-link2/cv-link2.vue

@@ -0,0 +1,130 @@
+<template>
+  <a
+    v-if="isShowA"
+    class="uni-link"
+    :href="href"
+    :class="{ 'uni-link--withline': showUnderLine === true || showUnderLine === 'true' }"
+    :style="{ color, fontSize: fontSize + 'px' }"
+    :download="download"
+  >
+    <slot>{{ text }}</slot>
+  </a>
+  <text
+    v-else
+    class="uni-link"
+    :class="{ 'uni-link--withline': showUnderLine === true || showUnderLine === 'true' }"
+    :style="{ color, fontSize: fontSize + 'px' }"
+    @click="openURL"
+  >
+    <slot>{{ text }}</slot>
+  </text>
+</template>
+
+<script>
+/**
+ * Link 外部网页超链接组件
+ * @description uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=1182
+ * @property {String} href 点击后打开的外部网页url
+ * @property {String} text 显示的文字
+ * @property {String} downlaod H5平台下载文件名
+ * @property {Boolean} showUnderLine 是否显示下划线
+ * @property {String} copyTips 在小程序端复制链接时显示的提示语
+ * @property {String} color 链接文字颜色
+ * @property {String} fontSize 链接文字大小
+ * @example * <uni-link href="https://ext.dcloud.net.cn" text="https://ext.dcloud.net.cn"></uni-link>
+ */
+export default {
+  name: 'cvLink2',
+  props: {
+    href: {
+      type: String,
+      default: ''
+    },
+    text: {
+      type: String,
+      default: ''
+    },
+    download: {
+      type: String,
+      default: ''
+    },
+    showUnderLine: {
+      type: [Boolean, String],
+      default: true
+    },
+    copyTips: {
+      type: String,
+      default: '已自动复制网址，请在手机浏览器里粘贴该网址'
+    },
+    color: {
+      type: String,
+      default: '#999999'
+    },
+    fontSize: {
+      type: [Number, String],
+      default: 14
+    }
+  },
+  computed: {
+    isShowA() {
+      // #ifdef H5
+      this._isH5 = true;
+      // #endif
+      if ((this.isMail() || this.isTel()) && this._isH5 === true) {
+        return true;
+      }
+      return false;
+    }
+  },
+  created() {
+    this._isH5 = null;
+  },
+  methods: {
+    isMail() {
+      return this.href.startsWith('mailto:');
+    },
+    isTel() {
+      return this.href.startsWith('tel:');
+    },
+    openURL() {
+      // #ifdef APP-PLUS
+      if (this.isTel()) {
+        this.makePhoneCall(this.href.replace('tel:', ''));
+      } else {
+        plus.runtime.openURL(this.href);
+      }
+      // #endif
+      // #ifdef H5
+      window.open(this.href);
+      // #endif
+      // #ifdef MP
+      uni.setClipboardData({
+        data: this.href
+      });
+      uni.showModal({
+        content: this.copyTips,
+        showCancel: false
+      });
+      // #endif
+    },
+    makePhoneCall(phoneNumber) {
+      uni.makePhoneCall({
+        phoneNumber
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* #ifndef APP-NVUE */
+.uni-link {
+  cursor: pointer;
+}
+
+/* #endif */
+.uni-link--withline {
+  text-decoration: underline;
+}
+</style>

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>