style(description): add description default style

emqx · Jul 14, 2021 · 3505630 · 3505630
1 parent 18efcc1
commit 3505630
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 23 deletions.
diff --git a/example/App.vue b/example/App.vue
@@ -213,13 +213,17 @@
   </div>
   <h2>Descriptions</h2>
   <emqx-descriptions title="用户信息">
-    <emqx-descriptions-item label="用户名">
-      <template #label> 1243 </template>
+    <template #extra>
+      <emqx-button type="primary" size="small">操作</emqx-button>
+    </template>
+    <!-- <div>123</div> -->
+    <emqx-descriptions-item label="1234">
+      <template #label> 用户名：</template>
       900000
     </emqx-descriptions-item>
-    <emqx-descriptions-item label="手机号">18100000000</emqx-descriptions-item>
-    <emqx-descriptions-item label="居住地">苏州市</emqx-descriptions-item>
-    <emqx-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</emqx-descriptions-item>
+    <emqx-descriptions-item label="手机号：">18100000000</emqx-descriptions-item>
+    <emqx-descriptions-item label="居住地：">苏州市</emqx-descriptions-item>
+    <emqx-descriptions-item label="联系地址：">江苏省苏州市吴中区吴中大道 1188 号</emqx-descriptions-item>
   </emqx-descriptions>
 </template>
 

diff --git a/packages/Descriptions/src/descriptions.vue b/packages/Descriptions/src/descriptions.vue
@@ -24,36 +24,34 @@ export default defineComponent({
   components: {
     ElDescriptions,
   },
-  setup(props: any, { slots }) {
-    const setName = (item: Slot) => {
-      if (typeof item.type === 'string' || item.type?.name !== 'EmqxDescriptionsItem') {
+  setup(props, { slots }) {
+    const resetToNativeName = (node: Slot) => {
+      if (typeof node.type === 'string' || node.type?.name !== 'EmqxDescriptionsItem') {
         return
       }
-      if (!item.type || typeof item.type === 'string') {
-        item.type = {
+      if (!node.type) {
+        node.type = {
           name: '',
         }
       }
-      item.type.name = 'ElDescriptionsItem'
+      // Why we set the type name to 'ElDescriptionsItem'
+      // https://github.com/element-plus/element-plus/blob/dev/packages/descriptions/src/index.vue#L100
+      node.type.name = 'ElDescriptionsItem'
     }
 
-    const recursiveChange = (children: Array<Slot>) => {
-      const temp: any = Array.isArray(children) ? children : [children]
-      temp.forEach((child: Slot) => {
-        if (Array.isArray(child.children)) {
-          child.children.forEach((item: Slot) => {
-            setName(item)
+    const recursiveChangeName = (nodes: Array<Slot>) => {
+      nodes.forEach((node: Slot) => {
+        if (Array.isArray(node.children)) {
+          node.children.forEach((item: Slot) => {
+            resetToNativeName(item)
           })
-          recursiveChange(child.children)
+          recursiveChangeName(node.children)
         } else {
-          setName(child)
+          resetToNativeName(node)
         }
       })
     }
-    const changeName = () => {
-      recursiveChange(slots.default?.() as Array<Slot>)
-    }
-    changeName()
+    recursiveChangeName(slots.default?.() as Array<Slot>)
   },
 })
 </script>
diff --git a/packages/styles/components/description.scss b/packages/styles/components/description.scss
@@ -0,0 +1,10 @@
+.el-descriptions {
+  .el-descriptions__body {
+    .el-descriptions__label {
+      color: #96999C;
+    }
+    .el-descriptions__content {
+      color: #1D1D1D;
+    }
+  }
+}
diff --git a/packages/styles/components/index.scss b/packages/styles/components/index.scss
@@ -14,3 +14,4 @@
 @import "select.scss";
 @import "tags.scss";
 @import "dropdown.scss";
+@import "description.scss";