增加popconfirm组件

src/popconfirm/index.js

@@ -4,7 +4,9 @@
  * @date 2023/04/28 16:14:10
  */
 
-import { css, html, Component } from '@bd/core'
+import { css, html, Component, nextTick, styleMap } from '@bd/core'
+import '../form/button.js'
+import '../icon/index.js'
 
 class Popconfirm extends Component {
   static props = {
@@ -15,17 +17,17 @@ class Popconfirm extends Component {
     },
     'confirm-button-text': {
       type: String,
-      default: '',
+      default: '确定',
       attribute: false
     },
     'cancel-button-text': {
       type: String,
-      default: '',
+      default: '取消',
       attribute: false
     },
     'confirm-button-type': {
       type: String,
-      default: '',
+      default: 'primary',
       attribute: false
     },
     'cancel-button-type': {
@@ -35,15 +37,36 @@ class Popconfirm extends Component {
     },
     icon: {
       type: String,
-      default: null,
+      default: 'info',
       attribute: false
     },
     'icon-color': {
-      type: Number,
+      type: String,
-      default: null,
+      default: '#ff9900',
       attribute: false
     },
-    hidden: false
+    'hide-icon': {
+      type: Boolean,
+      default: false,
+      attribute: false
+    },
+
+    //组件状态
+    left: {
+      type: Number,
+      default: 0,
+      attribute: false
+    },
+    top: {
+      type: Number,
+      default: 0,
+      attribute: false
+    },
+    show: {
+      type: Boolean,
+      default: false,
+      attribute: false
+    }
   }
 
   static styles = [
@@ -54,26 +77,160 @@ class Popconfirm extends Component {
       }
       .popover {
         z-index: 10;
-        position: absolute;
+        position: fixed;
         padding: 12px;
         min-width: 150px;
         border-radius: 4px;
         border: 1px solid #ebeef5;
         color: #606266;
         line-height: 1.4;
-        text-align: justify;
+        text-align: left;
         font-size: 14px;
         box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
         word-break: break-all;
         background: #fff;
+        transition: opacity 0.15s linear;
+        .btns {
+          display: flex;
+          justify-content: flex-end;
+          .cancel {
+            margin-right: 15px;
+            cursor: pointer;
+            color: var(--color-teal-2);
+          }
+        }
+      }
+      .content {
+        padding: 8px 0;
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        color: #606266;
+        line-height: 1.4;
+        text-align: justify;
+        word-break: break-all;
+        white-space: nowrap;
+        wc-icon {
+          margin-right: 5px;
+          --size: 14px;
+        }
+      }
+
+      .arrow {
+        position: absolute;
+        z-index: 12;
+        left: 50%;
+        top: 100%;
+        transform: translateX(-50%);
+        border: 6px solid transparent;
+        border-bottom-color: #fff;
+        &[top] {
+          border-bottom-color: transparent;
+          top: 0;
+          border-top-color: #fff;
+          transform: translateY(-100%);
+        }
+      }
+
+      .show {
+        visibility: visible;
+        opacity: 1;
+      }
+      .hide {
+        visibility: hidden;
+        opacity: 0;
       }
     `
   ]
+  mounted() {
+    this.$slot = this.$refs.slot.assignedElements().shift()
+    this.$popover = this.$refs.popover
+    this.$arrow = this.$refs.arrow
+    nextTick(() => this.showPopover())
+  }
+
+  showPopover() {
+    const slotRect = this.$slot.getBoundingClientRect()
+    const popoverRect = this.$popover.getBoundingClientRect()
+    const halfSlotWidth = slotRect.width / 2
+    const halfPopoverWidth = popoverRect.width / 2
+    const left = slotRect.left + halfSlotWidth - halfPopoverWidth
+
+    if (left < 0) {
+      this.left = slotRect.left
+    } else if (left + popoverRect.width > window.innerWidth) {
+      this.left = slotRect.right - popoverRect.width
+    } else {
+      this.left = left
+    }
+
+    if (slotRect.bottom + 10 + popoverRect.height > window.innerHeight) {
+      this.top = slotRect.top - 10 - popoverRect.height
+      this.$arrow.setAttribute('top', '')
+    } else {
+      this.top = slotRect.bottom + 10
+    }
+
+    this.show = true
+  }
+  hide({ target }) {
+    this.show = false
+    if (target.hasAttribute('solid')) {
+      this.$emit('confirm')
+    } else {
+      this.$emit('cancel')
+    }
+  }
+
   render() {
+    let styles = styleMap({
+      left: `${this.left}px`,
+      top: `${this.top}px`
+    })
+
     return html`
       <div class="popconfirm">
-        <slot></slot>
+        <slot ref="slot" @click=${this.showPopover}></slot>
-        <div class="popover"></div>
+
+        <div class=${`arrow ${this.show ? 'show' : 'hide'}`} ref="arrow"></div>
+
+        <div
+          class=${`popover ${this.show ? 'show' : 'hide'}`}
+          style=${styles}
+          ref="popover"
+        >
+          <p class="content">
+            ${this['hide-icon']
+              ? ''
+              : html`<wc-icon
+                  name=${this.icon}
+                  style=${`color:${this['icon-color']}`}
+                ></wc-icon>`}
+            ${this.title}
+          </p>
+
+          <div class="btns">
+            ${!this['cancel-button-type']
+              ? html`<span class="cancel" @click=${this.hide}
+                  >${this['cancel-button-text']}</span
+                >`
+              : html`<wc-button
+                  type=${this['cancel-button-type']}
+                  class="cancel"
+                  size="s"
+                  @click=${this.hide}
+                  >${this['cancel-button-text']}</wc-button
+                >`}
+
+            <wc-button
+              type=${this['confirm-button-type']}
+              size="s"
+              solid
+              @click=${this.hide}
+              >${this['confirm-button-text']}</wc-button
+            >
+          </div>
+        </div>
       </div>
     `
   }