增加Result组件

Readme.md

@@ -16,7 +16,7 @@
 
 - @bd/core 针对`web components`的核心封装库, 以数据驱动, 可以更方便的开发 wc 组件
 
-### 开发进度 && 计划 (37/54)
+### 开发进度 && 计划 (39/54)
 
 - [x] `wc-card` 卡片组件
 - [x] `wc-space` 间隔组件
@@ -70,7 +70,7 @@
 - [ ] `wc-chatbubble` 聊天气泡组件
 - [x] `wc-divider` 分割线组件
 - [ ] `wc-table` 表格组件
-- [ ] `wc-result` 结果反馈组件
+- [x] `wc-result` 结果反馈组件
 - [ ] `wc-empty` 空状态组件
 - [x] `wc-sandbox` 代码沙盒组件
 

src/index.js

@@ -21,3 +21,5 @@ import './steps/index.js'
 import './swipe/index.js'
 import './tabs/index.js'
 import './timeline/index.js'
+import './result/index.js'
+import './progress/index.js'

src/result/index.js

@@ -0,0 +1,140 @@
+/**
+ * {结果}
+ * @author chensbox<chensbox@foxmail.com>
+ * @date 2023/04/28 16:14:10
+ */
+
+import { css, html, Component, styleMap } from '@bd/core'
+import '../icon/index.js'
+
+class Result extends Component {
+  static props = {
+    title: {
+      type: String,
+      default: '',
+      attribute: false
+    },
+    'sub-title': { type: String, default: '' },
+    type: {
+      type: String,
+      default: 'success'
+    },
+    icon: {
+      type: String,
+      default: ''
+    }
+  }
+
+  static styles = [
+    css`
+      :host {
+        position: relative;
+        display: inline-block;
+        text-align: center;
+      }
+      :host([type='warning']) .icon {
+        background: #e6a23c;
+        wc-icon {
+          transform: translateY(-2px);
+        }
+      }
+      :host([type='error']) .icon {
+        --size: 24px;
+        background: #f56c6c;
+      }
+      :host([type='info']) .icon {
+        background: #909399;
+      }
+      .result {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        text-align: center;
+        box-sizing: border-box;
+        padding: 40px 30px;
+      }
+      .icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 53px;
+        height: 53px;
+        border-radius: 50%;
+        color: #fff;
+        background: #67c23a;
+      }
+      .title {
+        margin-top: 20px;
+      }
+      .sub-title {
+        margin-top: 10px;
+      }
+      .extra {
+        margin-top: 30px;
+      }
+      span {
+        font-size: 14px;
+        color: #5e6d82;
+        line-height: 1.5em;
+      }
+    `
+  ]
+  get iconName() {
+    if (this.icon) {
+      return this.icon
+    }
+    if (this.type === 'success') {
+      return 'get'
+    }
+    if (this.type === 'error') {
+      return 'close'
+    }
+    return this.type
+  }
+  mounted() {
+    console.log(this.subTitle)
+  }
+
+  render() {
+    let styles = styleMap({
+      left: `${this.left}px`,
+      top: `${this.top}px`
+    })
+
+    return html`
+      <div class="result">
+        <div class="icon-wrapper">
+          <slot name="icon">
+            <div class="icon">
+              <wc-icon name=${this.iconName}></wc-icon>
+            </div>
+          </slot>
+        </div>
+
+        <div class="title">
+          <slot name="title">
+            <span>${this.title}</span>
+          </slot>
+        </div>
+
+        <div class="sub-title">
+          <slot name="sub-title">
+            <span>${this['sub-title']}</span>
+          </slot>
+        </div>
+
+        <div class="extra">
+          <slot name="extra"></slot>
+        </div>
+      </div>
+    `
+  }
+}
+
+Result.reg('result')