From d3eb76baef64b4e649a68a399c4311751f477d25 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Mon, 3 Apr 2023 19:07:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0layer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layer/index.js | 39 +++++++++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/layer/index.js b/src/layer/index.js
index 5a911cf..a0e42eb 100644
--- a/src/layer/index.js
+++ b/src/layer/index.js
@@ -22,7 +22,7 @@ class Layer extends Component {
     mask: false,
     title: { type: String, default: LANG_TITLE, attribute: false },
     content: { type: String, default: '', attribute: false },
-    btns: ['取消', '确定']
+    btns: []
   }
 
   static styles = [
@@ -54,7 +54,7 @@ class Layer extends Component {
       .layer {
         overflow: hidden;
         flex: 0 auto;
-        position: absolute;
+        position: relative;
         z-index: 65535;
         border-radius: 3px;
         color: #666;
@@ -149,7 +149,7 @@ class Layer extends Component {
         }
 
         &__ctrl {
-          display: none;
+          display: flex;
           justify-content: flex-end;
           width: 100%;
           height: 60px;
@@ -165,7 +165,7 @@ class Layer extends Component {
             padding: 0 10px;
             margin: 0 5px;
             border: 1px solid var(--color-plain-3);
-            border-radius: 2px;
+            border-radius: 3px;
             white-space: nowrap;
             background: #fff;
             font-size: inherit;
@@ -259,6 +259,15 @@ class Layer extends Component {
     this.$refs.box.$anim.start()
   }
 
+  close() {
+    //
+  }
+
+  handleBtnClick(ev) {
+    //
+    let idx = +ev.target.dataset.idx
+  }
+
   render() {
     return html`
       <div ref="box" #animation=${{ type: 'fade' }} class="layer">
@@ -274,7 +283,12 @@ class Layer extends Component {
           <slot></slot>
         </div>
         <div class="layer__ctrl noselect">
-          ${this.btns.map((s, i) => html`<button data-idx=${i}>${s}</button>`)}
+          ${this.btns.map(
+            (s, i) =>
+              html`<button data-idx=${i} @click=${this.handleBtnClick}>
+                ${s}
+              </button>`
+          )}
         </div>
       </div>
     `
@@ -362,7 +376,11 @@ function layer(opt = {}) {
   return layDom.promise
 }
 
-layer.alert = function (content, title = LANG_TITLE, btns) {
+layer.alert = function (
+  content,
+  title = LANG_TITLE,
+  btns = LANG_BTNS.slice(1)
+) {
   if (typeof title === 'object') {
     btns = title
     title = LANG_TITLE
@@ -376,7 +394,11 @@ layer.alert = function (content, title = LANG_TITLE, btns) {
   })
 }
 
-layer.confirm = function (content, title = LANG_TITLE, btns) {
+layer.confirm = function (
+  content,
+  title = LANG_TITLE,
+  btns = LANG_BTNS.concat()
+) {
   if (typeof title === 'object') {
     btns = title
     title = LANG_TITLE
@@ -408,7 +430,8 @@ layer.prompt = function (title = LANG_TITLE, defaultValue = '', intercept) {
     title,
     content: `<wc-input autofocus class="layer__content__input" value="${defaultValue}"></wc-input>`,
     mask: true,
-    intercept
+    intercept,
+    btns: LANG_BTNS.concat()
   })
 }