bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

更新layer

master
yutent 2023-04-03 19:07:49 +08:00
parent 74d41a270a
commit d3eb76baef
1 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/layer/index.js
View File

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