diff --git a/Readme.md b/Readme.md index c4caf68..b462303 100644 --- a/Readme.md +++ b/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` 代码沙盒组件 diff --git a/src/index.js b/src/index.js index e860cdc..a6a7688 100644 --- a/src/index.js +++ b/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' diff --git a/src/result/index.js b/src/result/index.js new file mode 100644 index 0000000..18fbd91 --- /dev/null +++ b/src/result/index.js @@ -0,0 +1,140 @@ +/** + * {结果} + * @author chensbox + * @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` +
+
+ +
+ +
+
+
+ +
+ + ${this.title} + +
+ +
+ + ${this['sub-title']} + +
+ +
+ +
+
+ ` + } +} + +Result.reg('result')