修改cell required实现

docs/examples-docs/cell.md

@@ -61,18 +61,6 @@ export default {
 ```
 :::
 
-#### 带*号，标明必填
-
-传入`required`属性
-
-:::demo  带*号，标明必填
-```html
-<zan-cell-group>
-  <zan-cell title="单元格1" required></zan-cell>
-</zan-cell-group>
-```
-:::
-
 #### 标题带描述信息
 
 传入`label`属性，属性值为描述信息的值。

packages/cell/src/cell.vue

@@ -1,7 +1,7 @@
 <template>
-  <a class="zan-cell" :href="url" @click="handleClick">
+  <a :class="['zan-cell', { 'zan-cell--required': required }]" :href="url" @click="handleClick">
     <div
-      :class="{ 'zan-cell__title': true, 'zan-cell__required': required }"
+      class="zan-cell__title"
       v-if="this.$slots.title || title"
     >
       <i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i>
@@ -14,8 +14,8 @@
       class="zan-cell__value"
       v-if="value || this.$slots.default"
       :class="{
-        'is-link': isLink,
-        'is-alone': !this.$slots.title && !title && !label
+        'zan-cell__value--link': isLink,
+        'zan-cell__value--alone': !this.$slots.title && !title && !label
       }"
     >
       <slot>

packages/zanui-css/src/cell.css

@@ -36,16 +36,6 @@
 
     @e title {
       float: left;
-
-      &.zan-cell__required {
-        &::before {
-          content: '*';
-          position: absolute;
-          left: -7px;
-          font-size: 14px;
-          color: #f44;
-        }
-      }
     }
 
     @e label {
@@ -59,15 +49,32 @@
       float: right;
       overflow: hidden;
 
-      @when link {
+      @m link {
         margin-right: 20px;
       }
 
-      @when alone {
+      @m alone {
         float: none;
       }
     }
 
+    @m required {
+      overflow: visible;
+
+      &::before {
+        content: '*';
+        position: absolute;
+        left: -7px;
+        font-size: 14px;
+        color: #f44;
+      }
+
+      .zan-cell__title {
+        float: none;
+        display: inline-block;
+      }
+    }
+
     .zan-icon-arrow {
       position: absolute;
       top: 50%;