From 7825cfdd83a39b65667720f74325f9f8e0dfdbba Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Fri, 13 Mar 2020 17:57:59 +0800
Subject: [PATCH] [修改] 单元格增加描述，调整单元格对齐

---
 examples/views/docs/component/cell.md |  9 ++++++---
 packages/cell/index.css               | 17 ++++++++++++++++-
 packages/cell/index.vue               | 19 +++++++++++++++++--
 packages/icon/index.css               |  2 --
 packages/icon/index.vue               | 10 ++--------
 packages/tag/index.vue                |  4 ++--
 6 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/examples/views/docs/component/cell.md b/examples/views/docs/component/cell.md
index 7a889c3..14ba935 100644
--- a/examples/views/docs/component/cell.md
+++ b/examples/views/docs/component/cell.md
@@ -11,8 +11,11 @@
 ```html
 <template>
   <div class="list">
-    <zui-cell title="单元格" value="内容"></zui-cell>
-    <zui-cell title="可点击" value="内容" is-link></zui-cell>
+    <zui-cell title="单元格" value="内容" label="描述"></zui-cell>
+    <zui-cell title="有图标" value="内容" icon="trendingup"></zui-cell>
+    <zui-cell title="可点击" value="内容" label="描述" is-link>
+      <zui-icon slot="icon" name="attachmoney" size="2rem" color="red" />
+    </zui-cell>
     <zui-cell>
       <div slot="title" class="aui-list-item-title aui-font-size-16">
         开启微信通知
@@ -38,7 +41,7 @@ export default {
 
 <style>
 .list {
-  width: 300px;
+  width: 400px;
 }
 </style>
 ```
diff --git a/packages/cell/index.css b/packages/cell/index.css
index 1b15480..080e2bf 100644
--- a/packages/cell/index.css
+++ b/packages/cell/index.css
@@ -3,6 +3,7 @@
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
+  align-items: center;
   box-sizing: border-box;
   width: 100%;
   padding: 10px 16px;
@@ -29,6 +30,13 @@
   margin-left: 5px;
 }
 
+.zui-cell__left-icon, .zui-cell__right-icon {
+  min-width: 1em;
+  height: 24px;
+  font-size: 16px;
+  line-height: 24px;
+}
+
 .zui-cell:not(:last-child)::after {
   position: absolute;
   box-sizing: border-box;
@@ -55,4 +63,11 @@
   text-align: right;
   vertical-align: middle;
   word-wrap: break-word;
-}
\ No newline at end of file
+}
+
+.zui-cell__label {
+  margin-top: 3px;
+  color: #969799;
+  font-size: 12px;
+  line-height: 18px;
+}
diff --git a/packages/cell/index.vue b/packages/cell/index.vue
index 09c6ef6..350b2b4 100644
--- a/packages/cell/index.vue
+++ b/packages/cell/index.vue
@@ -3,11 +3,25 @@
     <div v-if="$slots.icon" class="zui-cell__left-icon">
       <slot name="icon"></slot>
     </div>
-    <div v-else-if="icon" class="zui-cell__left-icon"></div>
+    <zui-icon v-else-if="icon" class="zui-cell__left-icon" :name="icon"></zui-icon>
     <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">
+        {{ label }}
+      </div>
+    </div>
+    <div v-else-if="title" class="zui-cell__title">
+      {{ title }}
+      <div v-if="$slots.label" class="zui-cell__label">
+        <slot name="label"></slot>
+      </div>
+      <div v-else-if="label" class="zui-cell__label">
+        {{ label }}
+      </div>
     </div>
-    <div v-else-if="title" class="zui-cell__title">{{ title }}</div>
     <div v-if="$slots.default" class="zui-cell__value">
       <slot></slot>
     </div>
@@ -26,6 +40,7 @@ export default {
     icon: String,
     title: String,
     value: String,
+    label: String,
     isLink: Boolean,
     rightIcon: String,
   },
diff --git a/packages/icon/index.css b/packages/icon/index.css
index 7bf3819..3bcb134 100644
--- a/packages/icon/index.css
+++ b/packages/icon/index.css
@@ -1,8 +1,6 @@
 .zui-icon {
   position: relative;
   display: inline-block;
-  font: normal normal normal 14px/1 "iconfont";
-  font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
 }
diff --git a/packages/icon/index.vue b/packages/icon/index.vue
index 7187928..ffc7db4 100644
--- a/packages/icon/index.vue
+++ b/packages/icon/index.vue
@@ -20,14 +20,8 @@ export default {
       type: String,
       default: 'icon-'
     },
-    size: {
-      type: String,
-      default: 'inherit'
-    },
-    color: {
-      type: String,
-      default: 'inherit'
-    },
+    size: String,
+    color: String,
     info: [Number, String]
   },
   computed: {
diff --git a/packages/tag/index.vue b/packages/tag/index.vue
index 10894c2..c9abb70 100644
--- a/packages/tag/index.vue
+++ b/packages/tag/index.vue
@@ -67,8 +67,8 @@ export default {
       sizeStyle: {}
     };
   },
-  mounted() {
-    this.$nextTick(() => {
+  mounted: function() {
+    this.$nextTick(function() {
       if (this.shape === "circle") {
         var radius = this.$el.offsetHeight / 2;
         this.$set(this.sizeStyle, "paddingLeft", radius / 2 + "px");
--
libgit2 0.21.0