优化collapse组件

src/collapse/index.js

@@ -4,7 +4,7 @@
  * @date 2023/03/26 16:14:10
  */
 
-import { css, html, Component } from '@bd/core'
+import { css, html, Component, styleMap, nextTick } from '@bd/core'
 import '../icon/index.js'
 
 class Collapse extends Component {
@@ -60,6 +60,7 @@ class Collapse extends Component {
   mounted() {
     this.$children = Array.from(this.children)
     this.updateView()
+    this.$on('updateValue', e => this.updateValue(e.name))
   }
 }
 class CollapseItem extends Component {
@@ -69,6 +70,7 @@ class CollapseItem extends Component {
     disabled: false
   }
   _show = false
+  contentHeight = 0
   static styles = [
     css`
       :host {
@@ -117,37 +119,40 @@ class CollapseItem extends Component {
     if (this.disabled) {
       return
     }
-    this.parentNode.updateValue(this.name)
+    this.$emit('updateValue', { name: this.name })
   }
   get show() {
     return this._show
   }
   set show(val) {
-    const { content, wrapper, icon } = this.$refs
-    if (!wrapper) {
-      this.onMounted = () => (this.show = val)
-      return
-    }
-    if (val) {
-      wrapper.style.height = content.offsetHeight + 'px'
-      icon.style.transform = 'rotate(90deg)'
-    } else {
-      wrapper.style.height = 0
-      icon.style.transform = 'rotate(0deg)'
-    }
     this._show = val
+    this.contentHeight = this.$refs.content?.offsetHeight || 0
+    this.$requestUpdate()
   }
   mounted() {
-    this.onMounted && this.onMounted()
+    nextTick(() => {
+      this.contentHeight = this.$refs.content.offsetHeight
+      this.$requestUpdate()
+    })
   }
   render() {
     return html`
       <div class=${this.disabled ? 'disabled' : ''}>
         <div class="title" @click=${this.onClick}>
           ${this.title ? this.title : html`<slot name="title"></slot>`}
-          <wc-icon name="right" ref="icon"></wc-icon>
+          <wc-icon
+            name="right"
+            style=${styleMap({
+              transform: `rotate(${this.show ? 90 : 0}deg)`
+            })}
+          ></wc-icon>
         </div>
-        <div class="wrapper" ref="wrapper">
+        <div
+          class="wrapper"
+          style=${styleMap({
+            height: this.show ? `${this.contentHeight}px` : 0
+          })}
+        >
           <div class="content" ref="content">
             <slot></slot>
           </div>

src/popconfirm/index.js

@@ -0,0 +1,82 @@
+/**
+ * {气泡确认框}
+ * @author chensbox<chensbox@foxmail.com>
+ * @date 2023/04/28 16:14:10
+ */
+
+import { css, html, Component } from '@bd/core'
+
+class Popconfirm extends Component {
+  static props = {
+    title: {
+      type: String,
+      default: '',
+      attribute: false
+    },
+    'confirm-button-text': {
+      type: String,
+      default: '',
+      attribute: false
+    },
+    'cancel-button-text': {
+      type: String,
+      default: '',
+      attribute: false
+    },
+    'confirm-button-type': {
+      type: String,
+      default: '',
+      attribute: false
+    },
+    'cancel-button-type': {
+      type: String,
+      default: '',
+      attribute: false
+    },
+    icon: {
+      type: String,
+      default: null,
+      attribute: false
+    },
+    'icon-color': {
+      type: Number,
+      default: null,
+      attribute: false
+    },
+    hidden: false
+  }
+
+  static styles = [
+    css`
+      :host {
+        position: relative;
+        display: inline-block;
+      }
+      .popover {
+        z-index: 10;
+        position: absolute;
+        padding: 12px;
+        min-width: 150px;
+        border-radius: 4px;
+        border: 1px solid #ebeef5;
+        color: #606266;
+        line-height: 1.4;
+        text-align: justify;
+        font-size: 14px;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+        word-break: break-all;
+        background: #fff;
+      }
+    `
+  ]
+  render() {
+    return html`
+      <div class="popconfirm">
+        <slot></slot>
+        <div class="popover"></div>
+      </div>
+    `
+  }
+}
+
+Popconfirm.reg('popconfirm')