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

package/ui-cv/cv-search-bar/cv-search-bar.vue

@@ -0,0 +1,280 @@
+<template>
+  <view class="uni-searchbar">
+    <view :style="{ borderRadius: radius + 'px', backgroundColor: bgColor }" class="uni-searchbar__box" @click="searchClick">
+      <view class="uni-searchbar__box-icon-search">
+        <slot name="searchIcon">
+          <cv-icon2 color="#999999" size="18" type="search" />
+        </slot>
+      </view>
+      <input
+        v-if="show || searchVal"
+        :focus="showSync"
+        :placeholder="placeholder"
+        :maxlength="maxlength"
+        class="uni-searchbar__box-search-input"
+        confirm-type="search"
+        type="text"
+        v-model="searchVal"
+        @confirm="confirm"
+        @blur="blur"
+        @focus="emitFocus"
+      />
+      <text v-else class="uni-searchbar__text-placeholder">{{ placeholder }}</text>
+      <view
+        v-if="show && (clearButton === 'always' || (clearButton === 'auto' && searchVal !== ''))"
+        class="uni-searchbar__box-icon-clear"
+        @click="clear"
+      >
+        <slot name="clearIcon">
+          <cv-icon2 color="#c0c4cc" size="15" type="clear" />
+        </slot>
+      </view>
+    </view>
+    <text @click="cancel" class="uni-searchbar__cancel" v-if="cancelButton === 'always' || (show && cancelButton === 'auto')">
+      {{ cancelText }}
+    </text>
+  </view>
+</template>
+
+<script>
+/**
+ * SearchBar 搜索栏
+ * @description 评分组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=866
+ * @property {Number} radius 搜索栏圆角
+ * @property {Number} maxlength 输入最大长度
+ * @property {String} placeholder 搜索栏Placeholder
+ * @property {String} clearButton = [always|auto|none] 是否显示清除按钮
+ * 	@value always 一直显示
+ * 	@value auto 输入框不为空时显示
+ * 	@value none 一直不显示
+ * @property {String} cancelButton = [always|auto|none] 是否显示取消按钮
+ * 	@value always 一直显示
+ * 	@value auto 输入框不为空时显示
+ * 	@value none 一直不显示
+ * @property {String} cancelText 取消按钮的文字
+ * @property {String} bgColor 输入框背景颜色
+ * @property {Boolean} focus 是否自动聚焦
+ * @event {Function} confirm uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value，e={value:Number}
+ * @event {Function} input uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value，e=value
+ * @event {Function} cancel 点击取消按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+ * @event {Function} clear 点击清除按钮时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+ * @event {Function} blur input失去焦点时触发事件，返回参数为uniSearchBar的value，e={value:Number}
+ */
+
+export default {
+  name: 'cvSearchBar',
+  emits: ['input', 'update:modelValue', 'clear', 'cancel', 'confirm', 'blur', 'focus'],
+  props: {
+    placeholder: {
+      type: String,
+      default: '请输入搜索内容'
+    },
+    radius: {
+      type: [Number, String],
+      default: 5
+    },
+    clearButton: {
+      type: String,
+      default: 'auto'
+    },
+    cancelButton: {
+      type: String,
+      default: 'auto'
+    },
+    cancelText: {
+      type: String,
+      default: '取消'
+    },
+    bgColor: {
+      type: String,
+      default: '#F8F8F8'
+    },
+    maxlength: {
+      type: [Number, String],
+      default: 100
+    },
+    value: {
+      type: [Number, String],
+      default: ''
+    },
+    modelValue: {
+      type: [Number, String],
+      default: ''
+    },
+    focus: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      show: false,
+      showSync: false,
+      searchVal: ''
+    };
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(newVal) {
+        this.searchVal = newVal;
+        if (newVal) {
+          this.show = true;
+        }
+      }
+    },
+    modelValue: {
+      immediate: true,
+      handler(newVal) {
+        this.searchVal = newVal;
+        if (newVal) {
+          this.show = true;
+        }
+      }
+    },
+    focus: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.show = true;
+          this.$nextTick(() => {
+            this.showSync = true;
+          });
+        }
+      }
+    },
+    searchVal(newVal, oldVal) {
+      this.$emit('input', newVal);
+      this.$emit('update:modelValue', newVal);
+    }
+  },
+  methods: {
+    searchClick() {
+      if (this.show) {
+        return;
+      }
+      this.show = true;
+      this.$nextTick(() => {
+        this.showSync = true;
+      });
+    },
+    clear() {
+      this.$emit('clear', {
+        value: this.searchVal
+      });
+      this.searchVal = '';
+    },
+    cancel() {
+      this.$emit('cancel', {
+        value: this.searchVal
+      });
+      this.searchVal = '';
+      this.show = false;
+      this.showSync = false;
+      // #ifndef APP-PLUS
+      uni.hideKeyboard();
+      // #endif
+      // #ifdef APP-PLUS
+      plus.key.hideSoftKeybord();
+      // #endif
+    },
+    confirm() {
+      // #ifndef APP-PLUS
+      uni.hideKeyboard();
+      // #endif
+      // #ifdef APP-PLUS
+      plus.key.hideSoftKeybord();
+      // #endif
+      this.$emit('confirm', {
+        value: this.searchVal
+      });
+    },
+    blur() {
+      // #ifndef APP-PLUS
+      uni.hideKeyboard();
+      // #endif
+      // #ifdef APP-PLUS
+      plus.key.hideSoftKeybord();
+      // #endif
+      this.$emit('blur', {
+        value: this.searchVal
+      });
+    },
+    emitFocus(e) {
+      this.$emit('focus', e.detail);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.uni-searchbar {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  position: relative;
+  padding: 8px;
+}
+
+.uni-searchbar__box {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  box-sizing: border-box;
+  /* #endif */
+  overflow: hidden;
+  position: relative;
+  flex: 1;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  height: 36px;
+  padding: 5px 8px 5px 0px;
+  border-width: 0.5px;
+  border-style: solid;
+  border-color: #e5e5e5;
+}
+
+.uni-searchbar__box-icon-search {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  padding: 0 8px;
+  justify-content: center;
+  align-items: center;
+  color: #808080;
+}
+
+.uni-searchbar__box-search-input {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+}
+
+.uni-searchbar__box-icon-clear {
+  align-items: center;
+  line-height: 24px;
+  padding-left: 8px;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+
+.uni-searchbar__text-placeholder {
+  font-size: 14px;
+  color: #808080;
+  margin-left: 5px;
+}
+
+.uni-searchbar__cancel {
+  padding-left: 10px;
+  line-height: 36px;
+  font-size: 14px;
+  color: #333;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
+}
+</style>

package/ui-cv/cv-steps/cv-steps.vue

@@ -0,0 +1,293 @@
+<template>
+  <view class="uni-steps">
+    <view :class="[direction === 'column' ? 'uni-steps__column' : 'uni-steps__row']">
+      <view :class="[direction === 'column' ? 'uni-steps__column-text-container' : 'uni-steps__row-text-container']">
+        <view
+          v-for="(item, index) in options"
+          :key="index"
+          :class="[direction === 'column' ? 'uni-steps__column-text' : 'uni-steps__row-text']"
+        >
+          <text
+            :style="{ color: index <= active ? activeColor : deactiveColor }"
+            :class="[direction === 'column' ? 'uni-steps__column-title' : 'uni-steps__row-title']"
+          >
+            {{ item.title }}
+          </text>
+          <text
+            :style="{ color: index <= active ? activeColor : deactiveColor }"
+            :class="[direction === 'column' ? 'uni-steps__column-desc' : 'uni-steps__row-desc']"
+          >
+            {{ item.desc }}
+          </text>
+        </view>
+      </view>
+      <view :class="[direction === 'column' ? 'uni-steps__column-container' : 'uni-steps__row-container']">
+        <view
+          :class="[direction === 'column' ? 'uni-steps__column-line-item' : 'uni-steps__row-line-item']"
+          v-for="(item, index) in options"
+          :key="index"
+        >
+          <view
+            :class="[
+              direction === 'column' ? 'uni-steps__column-line' : 'uni-steps__row-line',
+              direction === 'column' ? 'uni-steps__column-line--before' : 'uni-steps__row-line--before'
+            ]"
+            :style="{
+              backgroundColor: index <= active && index !== 0 ? activeColor : index === 0 ? 'transparent' : deactiveColor
+            }"
+          ></view>
+          <view :class="[direction === 'column' ? 'uni-steps__column-check' : 'uni-steps__row-check']" v-if="index === active">
+            <cv-icon2 :color="activeColor" type="checkbox-filled" size="14"></cv-icon2>
+          </view>
+          <view
+            :class="[direction === 'column' ? 'uni-steps__column-circle' : 'uni-steps__row-circle']"
+            v-else
+            :style="{ backgroundColor: index < active ? activeColor : deactiveColor }"
+          ></view>
+          <view
+            :class="[
+              direction === 'column' ? 'uni-steps__column-line' : 'uni-steps__row-line',
+              direction === 'column' ? 'uni-steps__column-line--after' : 'uni-steps__row-line--after'
+            ]"
+            :style="{
+              backgroundColor:
+                index < active && index !== options.length - 1
+                  ? activeColor
+                  : index === options.length - 1
+                  ? 'transparent'
+                  : deactiveColor
+            }"
+          ></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+/**
+ * Steps 步骤条
+ * @description 评分组件
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=34
+ * @property {Number} active 当前步骤
+ * @property {String} direction = [row|column] 当前步骤
+ * 	@value row 横向
+ * 	@value column 纵向
+ * @property {String} activeColor 选中状态的颜色
+ * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
+ */
+
+export default {
+  name: 'UniSteps',
+  props: {
+    direction: {
+      // 排列方向 row column
+      type: String,
+      default: 'row'
+    },
+    activeColor: {
+      // 激活状态颜色
+      type: String,
+      default: '#1aad19'
+    },
+    deactiveColor: {
+      // 未激活状态颜色
+      type: String,
+      default: '#999999'
+    },
+    active: {
+      // 当前步骤
+      type: Number,
+      default: 0
+    },
+    options: {
+      type: Array,
+      default() {
+        return [];
+      }
+    } // 数据
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+
+<style scoped>
+.uni-steps {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  width: 100%;
+  /* #endif */
+  /* #ifdef APP-NVUE */
+  flex: 1;
+  /* #endif */
+  flex-direction: column;
+}
+
+.uni-steps__row {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+}
+
+.uni-steps__column {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row-reverse;
+}
+
+.uni-steps__row-text-container {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: flex-end;
+  margin-bottom: 8px;
+}
+
+.uni-steps__column-text-container {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  flex: 1;
+}
+
+.uni-steps__row-text {
+  /* #ifndef APP-NVUE */
+  display: inline-flex;
+  /* #endif */
+  flex: 1;
+  flex-direction: column;
+}
+
+.uni-steps__column-text {
+  padding: 6px 0px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: #e5e5e5;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+}
+
+.uni-steps__row-title {
+  font-size: 14px;
+  line-height: 16px;
+  text-align: center;
+}
+
+.uni-steps__column-title {
+  font-size: 14px;
+  text-align: left;
+  line-height: 18px;
+}
+
+.uni-steps__row-desc {
+  font-size: 12px;
+  line-height: 14px;
+  text-align: center;
+}
+
+.uni-steps__column-desc {
+  font-size: 12px;
+  text-align: left;
+  line-height: 18px;
+}
+
+.uni-steps__row-container {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
+
+.uni-steps__column-container {
+  /* #ifndef APP-NVUE */
+  display: inline-flex;
+  /* #endif */
+  width: 30px;
+  flex-direction: column;
+}
+
+.uni-steps__row-line-item {
+  /* #ifndef APP-NVUE */
+  display: inline-flex;
+  /* #endif */
+  flex-direction: row;
+  flex: 1;
+  height: 14px;
+  line-height: 14px;
+  align-items: center;
+  justify-content: center;
+}
+
+.uni-steps__column-line-item {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+
+.uni-steps__row-line {
+  flex: 1;
+  height: 1px;
+  background-color: #999;
+}
+
+.uni-steps__column-line {
+  width: 1px;
+  background-color: #999;
+}
+
+.uni-steps__row-line--after {
+  transform: translateX(1px);
+}
+
+.uni-steps__column-line--after {
+  flex: 1;
+  transform: translate(0px, 1px);
+}
+
+.uni-steps__row-line--before {
+  transform: translateX(-1px);
+}
+
+.uni-steps__column-line--before {
+  height: 6px;
+  transform: translate(0px, -1px);
+}
+
+.uni-steps__row-circle {
+  width: 5px;
+  height: 5px;
+  border-radius: 100px;
+  background-color: #999;
+  margin: 0px 3px;
+}
+
+.uni-steps__column-circle {
+  width: 5px;
+  height: 5px;
+  border-radius: 100px;
+  background-color: #999;
+  margin: 4px 0px 5px 0px;
+}
+
+.uni-steps__row-check {
+  margin: 0px 6px;
+}
+
+.uni-steps__column-check {
+  height: 14px;
+  line-height: 14px;
+  margin: 2px 0px;
+}
+</style>