From da3117eff60e0573a381feb140fd0ac9444b76d3 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Fri, 10 Jul 2020 14:23:14 +0800
Subject: [PATCH] refactor: 重构Cell组件

---
 examples/assets/iconfont/iconfont.css |   1 -
 examples/styles/variables.scss        |   9 ++++-----
 examples/views/docs/component/cell.md |   8 ++++++--
 packages/button/index.vue             |   4 ++--
 packages/cell/index.css               |  84 ------------------------------------------------------------------------------------
 packages/cell/index.scss              |  99 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/cell/index.vue               | 121 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------
 packages/mixins/button.js             |   2 +-
 packages/mixins/event.js              |  12 ++++++++++++
 9 files changed, 202 insertions(+), 138 deletions(-)
 delete mode 100644 packages/cell/index.css
 create mode 100644 packages/cell/index.scss
 create mode 100644 packages/mixins/event.js

diff --git a/examples/assets/iconfont/iconfont.css b/examples/assets/iconfont/iconfont.css
index 00c4a87..fac8a75 100644
--- a/examples/assets/iconfont/iconfont.css
+++ b/examples/assets/iconfont/iconfont.css
@@ -9,7 +9,6 @@
 
 .iconfont {
   font-family: "iconfont" !important;
-  font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/examples/styles/variables.scss b/examples/styles/variables.scss
index dd901b7..376590f 100644
--- a/examples/styles/variables.scss
+++ b/examples/styles/variables.scss
@@ -54,19 +54,18 @@ $color-warning: #fa8c16;
 $color-error: #f5222d;
 
 $color-minor: #8c8c8c;
-$color-border: #f0f0f0;
 $color-disabled: #ccc;
 
 $bg-active: #f3f3f3;
 $bg-disabled: #f5f5f5;
 
 $font-lg: 1.25rem;
-$font-md: 1rem;
+$font-md: 0.9rem;
 $font-sm: 0.65rem;
 
-$h-gap-lg: 0.65rem;
-$h-gap-md: 0.45rem;
+$h-gap-lg: 0.75rem;
+$h-gap-md: 0.5rem;
 $h-gap-sm: 0.3rem;
 $v-gap-lg: 1.5rem;
 $v-gap-md: 1rem;
-$v-gap-sm: 0.65rem;
\ No newline at end of file
+$v-gap-sm: 0.6rem;
\ No newline at end of file
diff --git a/examples/views/docs/component/cell.md b/examples/views/docs/component/cell.md
index 8c19cdc..1ae5754 100644
--- a/examples/views/docs/component/cell.md
+++ b/examples/views/docs/component/cell.md
@@ -12,7 +12,11 @@
 <template>
   <div class="demo-cell">
     <zui-cell title="选项一" value="内容一"></zui-cell>
-    <zui-cell title="选项二" value="内容二" label="描述"></zui-cell>
+    <zui-cell title="选项二" value="内容二" short size="large"></zui-cell>
+    <zui-cell title="选项三" value="内容三" long></zui-cell>
+    <zui-cell title="选项四" value="内容四" label="副标题" is-link center></zui-cell>
+    <zui-cell title="选项五" value="内容五" is-link :clickable="false"></zui-cell>
+    <zui-cell title="选项六" value="内容六" label="描述" :border="false"></zui-cell>
   </div>
 </template>
 
@@ -95,7 +99,7 @@
           关注微信公众号，可获取运单到账信息关注微信公众号，可获取运单到账信息关注微信公众号，可获取运单到账信息关注微信公众号，可获取运单到账信息
         </div>
       </div>
-      <div slot="right" style="height: 100%; text-align: right; display: flex; flex-direction: column; justify-content: space-between;">
+      <div style="height: 100%; text-align: right; display: flex; flex-direction: column; justify-content: space-between; white-space: nowrap; word-break: break-all;">
         <div style="font-size: 12px; color: grey;">2020-03-18</div>
         <div><zui-tag size="tiny" shape="dot" type="fill"></zui-tag></div>
       </div>
diff --git a/packages/button/index.vue b/packages/button/index.vue
index e7b6f29..c233cf4 100644
--- a/packages/button/index.vue
+++ b/packages/button/index.vue
@@ -6,11 +6,11 @@
 
 <script>
 import color from 'color';
-import BUTTON_MIXIN from '../mixins/button';
+import MIX_BUTTON from '../mixins/button';
 
 export default {
   name: 'Button',
-  mixins: [BUTTON_MIXIN],
+  mixins: [MIX_BUTTON],
   props: {
     type: {
       type: String,
diff --git a/packages/cell/index.css b/packages/cell/index.css
deleted file mode 100644
index 565b8b6..0000000
--- a/packages/cell/index.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.zui-cell {
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  box-sizing: border-box;
-  width: 100%;
-  padding: 0.625rem 1rem;
-  overflow: hidden;
-  color: #323233;
-  font-size: 0.875rem;
-  background-color: #fff;
-}
-
-.zui-cell--clickable {
-  cursor: pointer;
-}
-
-.zui-cell--clickable:active {
-  background-color: #f2f3f5;
-}
-
-.zui-cell__left-icon {
-  display: flex;
-  align-items: center;
-  margin-right: 0.375rem;
-}
-
-.zui-cell__right-icon {
-  display: flex;
-  align-items: center;
-  margin-left: 0.375rem;
-}
-
-.zui-cell__left-icon, .zui-cell__right-icon {
-  min-width: 1em;
-  font-size: 1rem;
-}
-
-.zui-cell:not(:last-child)::after {
-  position: absolute;
-  box-sizing: border-box;
-  content: ' ';
-  pointer-events: none;
-  right: 0;
-  bottom: 0;
-  left: 1rem;
-  border-bottom: 1px solid #ebedf0;
-  -webkit-transform: scaleY(0.5);
-  transform: scaleY(0.5);
-}
-
-.zui-cell__title, .zui-cell__value {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-  flex: 1;
-}
-
-.zui-cell__title {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.zui-cell__value {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.zui-cell__value {
-  position: relative;
-  overflow: hidden;
-  color: #969799;
-  text-align: right;
-  vertical-align: middle;
-  word-wrap: break-word;
-}
-
-.zui-cell__label {
-  padding-top: 0.25rem;
-  color: #969799;
-  font-size: 0.75rem;
-}
diff --git a/packages/cell/index.scss b/packages/cell/index.scss
new file mode 100644
index 0000000..4db2184
--- /dev/null
+++ b/packages/cell/index.scss
@@ -0,0 +1,99 @@
+.zui-cell {
+  $v-cell-gap-sm: 0.35rem;
+  
+  display: flex;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+  font-size: $font-md;
+  background-color: $color-white;
+  padding-left: $v-gap-md;
+  &--border-short {
+    padding-left: $v-gap-md;
+    padding-right: $v-gap-md;
+    .zui-cell__content {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+  &--border-long {
+    padding-left: 0;
+    padding-right: 0;
+    .zui-cell__content {
+      padding-left: $v-gap-md;
+      padding-right: $v-gap-md;
+    }
+  }
+  &__content {
+    width: 100%;
+    padding: $h-gap-lg $v-gap-md $h-gap-lg 0;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    &.zui-cell--border {
+      border-bottom: 1px solid $color-field;
+    }
+    &.zui-cell--border-solid::after {
+      position: absolute; 
+      content: '';
+      width: 100%;
+      left: 0;
+      bottom: 0;
+      height: 1px;
+      background-color: $color-field;
+      -webkit-transform: scale(1, 0.5);
+      transform: scale(1, 0.5);
+      -webkit-transform-origin: center bottom;
+      transform-origin: center bottom;
+    }
+  }
+  &.large {
+    .zui-cell__content {
+      padding-top: $h-gap-lg * 1.2;
+      padding-bottom: $h-gap-lg * 1.2;
+    }
+    .zui-cell__icon {
+      padding-right: $v-gap-sm;
+    }
+    .zui-cell__right-icon {
+      font-size: $font-lg;
+    }
+  }
+  &__title, &__value {
+    flex: auto;
+  }
+  &__label {
+    font-size: $font-md * 0.8;
+    color: $color-text-minor;
+  }
+  &__value {
+    text-align: right;
+    color: $color-text-minor;
+  }
+  &__icon {
+    display: flex;
+    align-items: center;
+    padding-right: $v-cell-gap-sm;
+  }
+  &__right-icon {
+    display: flex;
+    align-items: center;
+    padding-left: $v-cell-gap-sm;
+    color: $color-disabled;
+    &, .zui-icon {
+      font-size: $font-md * 1.25;
+    }
+  }
+  &--clickable {
+    cursor: pointer;
+    &.zui-cell--hover {
+      background-color: $bg-active;
+    }
+  }
+  &--center {
+    align-items: center;
+    .zui-cell__title, .zui-cell__content {
+      align-items: center;
+    }
+  }
+}
diff --git a/packages/cell/index.vue b/packages/cell/index.vue
index d7d4af1..784649c 100644
--- a/packages/cell/index.vue
+++ b/packages/cell/index.vue
@@ -1,69 +1,104 @@
 <template>
-  <div class="zui-cell" :class="classRender" @click="onClick">
-    <div v-if="$slots.icon || icon" class="zui-cell__left-icon">
-      <slot v-if="$slots.icon" name="icon"></slot>
-      <zui-icon v-else-if="icon" class="zui-cell__left-icon" :name="icon"></zui-icon>
-    </div>
-    <div v-if="$slots.title" class="zui-cell__title">
-      <slot name="title"></slot>
-      <div v-if="$slots.label" class="zui-cell__label">
-        <slot name="label"></slot>
-      </div>
-      <div v-else-if="label" class="zui-cell__label">
-        <span>{{ label }}</span>
+  <div class="zui-cell" :class="bindClass" v-on="bindEvents">
+    <div class="zui-cell__content" :class="bindContentClass">
+      <!-- 左侧图标 -->
+      <template v-if="$slots['icon'] || icon">
+        <div class="zui-cell__icon">
+          <slot v-if="$slots.icon" name="icon"></slot>
+          <zui-icon v-else-if="icon" :name="icon"></zui-icon>
+        </div>
+      </template>
+      <!-- 标题 -->
+      <div class="zui-cell__title">
+        <slot v-if="$slots['title']" name="title"></slot>
+        <span v-else>{{ title }}</span>
+        <template v-if="$slots['label'] || label">
+          <div class="zui-cell__label">
+            <slot v-if="$slots['label']" name="label"></slot>
+            <span v-else>{{ label }}</span>
+          </div>
+        </template>
       </div>
-    </div>
-    <div v-else-if="title" class="zui-cell__title">
-      <span>{{ title }}</span>
-      <div v-if="$slots.label" class="zui-cell__label">
-        <slot name="label"></slot>
+      <!-- 内容 -->
+      <div class="zui-cell__value">
+        <slot v-if="$slots['default']"></slot>
+        <span v-else>{{ value }}</span>
       </div>
-      <div v-else-if="label" class="zui-cell__label">
-        <span>{{ label }}</span>
-      </div>
-    </div>
-    <div v-if="$slots.default" class="zui-cell__value">
-      <slot></slot>
-    </div>
-    <div v-else-if="value" class="zui-cell__value">{{ value }}</div>
-    <div v-if="$slots.right || rightIcon" class="zui-cell__right-icon">
-      <slot v-if="$slots.right" name="right"></slot>
-      <zui-icon v-else-if="rightIcon && isLink" class="zui-cell__right-icon" :name="rightIcon"></zui-icon>
+      <!-- 右侧图标 -->
+      <template v-if="$slots['right-icon'] || isLink">
+        <div class="zui-cell__right-icon">
+          <slot v-if="$slots['right-icon']" name="right-icon"></slot>
+          <zui-icon v-else :name="rightIcon || 'enter'"></zui-icon>
+        </div>
+      </template>
     </div>
   </div>
 </template>
 
 <script>
+import MIX_BUTTON from '../mixins/button';
+
 export default {
   name: 'Cell',
+  mixins: [MIX_BUTTON],
   props: {
-    icon: String,
     title: String,
-    value: String,
     label: String,
-    isLink: Boolean,
-    rightIcon: {
+    value: [String, Number],
+    icon: String,
+    rightIcon: String,
+    size: String,
+    border: {
+      type: Boolean,
+      default: true,
+    },
+    solid: Boolean,
+    long: Boolean,
+    short: Boolean,
+    isLink: {
+      type: Boolean,
+      default: undefined,
+    },
+    clickable: {
+      type: Boolean,
+      default: undefined,
+    },
+    hoverClass: {
       type: String,
-      default: 'enter',
+      default: 'zui-cell--hover',
+    },
+    center: {
+      type: Boolean,
+      default: true,
     },
   },
   computed: {
-    classRender: function () {
+    isClickable() {
+      if (this.isLink) {
+        return this.clickable !== false;
+      }
+      return this.clickable;
+    },
+    bindClass() {
       return {
-        'zui-cell--clickable': this.isLink,
+        'zui-cell--border-long': this.long,
+        'zui-cell--border-short': this.short,
+        'zui-cell--clickable': this.isClickable,
+        'zui-cell--center': this.center,
+        [this.hoverClass]: this.hover,
+        [this.size]: !!this.size,
       };
     },
-  },
-  methods: {
-    onClick: function () {
-      if (this.$listeners['click']) {
-        this.$emit('click');
-      }
+    bindContentClass() {
+      const borderClass = `zui-cell--border${this.solid ? '-solid' : ''}`;
+      return {
+        [borderClass]: this.border,
+      };
     },
   },
 };
 </script>
 
-<style>
-@import './index.css';
+<style lang="scss">
+@import './index.scss';
 </style>
diff --git a/packages/mixins/button.js b/packages/mixins/button.js
index f5ac696..4b6746c 100644
--- a/packages/mixins/button.js
+++ b/packages/mixins/button.js
@@ -1,5 +1,5 @@
 /**
- * @file 仿微信小程序按钮hover-class
+ * @description 仿微信小程序按钮hover-class
  */
 
 export default {
diff --git a/packages/mixins/event.js b/packages/mixins/event.js
new file mode 100644
index 0000000..503f8c7
--- /dev/null
+++ b/packages/mixins/event.js
@@ -0,0 +1,12 @@
+/**
+ * @description 处理组件内外事件
+ */
+
+export default {
+  computed: {
+    // 事件hack
+    bindEvents() {
+      return this.$listeners || {};
+    },
+  },
+};
--
libgit2 0.21.0