From a2cd7b62a75cb3a50fd4704c732a81a6f53f7dc2 Mon Sep 17 00:00:00 2001
From: niunai <colonD.wny@gmail.com>
Date: Sun, 19 Mar 2017 16:17:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9cell=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0required=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/examples-docs/cell.md                 | 12 ++++++++++++
 packages/cell/src/cell.vue                 |  5 +++--
 packages/zanui-css/src/cell.css            | 21 ++++++++++++++++-----
 packages/zanui-css/src/mixins/clearfix.css |  7 +++++++
 4 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 packages/zanui-css/src/mixins/clearfix.css

diff --git a/docs/examples-docs/cell.md b/docs/examples-docs/cell.md
index 8c2f6ed9d..f58bc10e6 100644
--- a/docs/examples-docs/cell.md
+++ b/docs/examples-docs/cell.md
@@ -29,6 +29,18 @@ export default {
 ```
 :::
 
+### 带*号，标明必填
+
+传入`required`属性
+
+:::demo  带*号，标明必填
+```html
+<zan-cell-group>
+  <zan-cell title="单元格1" required></zan-cell>
+</zan-cell-group>
+```
+:::
+
 ### 标题带描述信息
 
 传入`label`属性，属性值为描述信息的值。
diff --git a/packages/cell/src/cell.vue b/packages/cell/src/cell.vue
index e4574d417..a618c7a33 100644
--- a/packages/cell/src/cell.vue
+++ b/packages/cell/src/cell.vue
@@ -1,6 +1,6 @@
 <template>
   <a class="zan-cell" :href="url" @click="handleClick">
-    <div class="zan-cell__title">
+    <div :class="{ 'zan-cell__title': true, 'zan-cell__required': required }">
       <slot name="icon">
         <i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i>
       </slot>
@@ -31,7 +31,8 @@ export default {
     value: [String, Number],
     url: String,
     label: String,
-    isLink: Boolean
+    isLink: Boolean,
+    required: Boolean
   },
 
   methods: {
diff --git a/packages/zanui-css/src/cell.css b/packages/zanui-css/src/cell.css
index 33cee8a48..a0c9fa223 100644
--- a/packages/zanui-css/src/cell.css
+++ b/packages/zanui-css/src/cell.css
@@ -3,7 +3,7 @@
 
 @component-namespace zan {
   @b cell-group {
-    padding-left: 10px;
+    padding-left: 15px;
     position: relative;
     background-color: #fff;
 
@@ -14,9 +14,8 @@
 
   @b cell {
     display: block;
-    overflow: hidden;
     position: relative;
-    padding: 10px 10px 10px 0;
+    padding: 10px 15px 10px 0;
     box-sizing: border-box;
     line-height: 22px;
     background-color: $c-white;
@@ -35,8 +34,20 @@
     }
 
     @e title {
-      float: left;
+      display: inline-block;
       overflow: hidden;
+      /* 清除空白字符对高度的影响 */
+      vertical-align: bottom;
+
+      &.zan-cell__required {
+        &::before {
+          content: '*';
+          position: absolute;
+          left: -7px;
+          font-size: 14px;
+          color: #f44;
+        }
+      }
     }
 
     @e label {
@@ -62,7 +73,7 @@
     .zan-icon-arrow {
       position: absolute;
       top: 50%;
-      right: 10px;
+      right: 15px;
       transform: translateY(-50%);
       color: $c-gray-dark;
       font-size: 12px;
diff --git a/packages/zanui-css/src/mixins/clearfix.css b/packages/zanui-css/src/mixins/clearfix.css
new file mode 100644
index 000000000..cb8ed0126
--- /dev/null
+++ b/packages/zanui-css/src/mixins/clearfix.css
@@ -0,0 +1,7 @@
+@define-mixin clearfix {
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}