更新layer
parent
9d013c9762
commit
74d41a270a
|
|
@ -0,0 +1,453 @@
|
||||||
|
/**
|
||||||
|
* {弹窗组件}
|
||||||
|
* @author yutent<yutent.io@gmail.com>
|
||||||
|
* @date 2023/03/06 15:17:25
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { css, html, Component, nextTick, styleMap } from '@bd/core'
|
||||||
|
import '../form/input.js'
|
||||||
|
import Drag from '../drag/core.js'
|
||||||
|
|
||||||
|
let uniqueInstance = null // 缓存当前打开的alert/confirm/prompt类型的弹窗
|
||||||
|
let toastInstance = null // 缓存toast的实例
|
||||||
|
|
||||||
|
const LANG_TITLE = '提示'
|
||||||
|
const LANG_BTNS = ['取消', '确定']
|
||||||
|
// 要保证弹层唯一的类型
|
||||||
|
const UNIQUE_TYPES = ['alert', 'confirm', 'prompt']
|
||||||
|
|
||||||
|
class Layer extends Component {
|
||||||
|
static props = {
|
||||||
|
type: '',
|
||||||
|
mask: false,
|
||||||
|
title: { type: String, default: LANG_TITLE, attribute: false },
|
||||||
|
content: { type: String, default: '', attribute: false },
|
||||||
|
btns: ['取消', '确定']
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = [
|
||||||
|
css`
|
||||||
|
:host {
|
||||||
|
display: none;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 65534;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
:host([type]) {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.noselect {
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
user-select: none;
|
||||||
|
img,
|
||||||
|
a {
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
css`
|
||||||
|
.layer {
|
||||||
|
overflow: hidden;
|
||||||
|
flex: 0 auto;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 65535;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
|
||||||
|
transition: opacity 0.2s ease-in-out, left 0.2s ease-in-out,
|
||||||
|
right 0.2s ease-in-out, top 0.2s ease-in-out, bottom 0.2s ease-in-out;
|
||||||
|
|
||||||
|
&.scale {
|
||||||
|
transform: scale(1.01);
|
||||||
|
transition: transform 0.1s linear;
|
||||||
|
}
|
||||||
|
&.blur {
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
z-index: 65536;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
/* 弹层样式 */
|
||||||
|
css`
|
||||||
|
.layer {
|
||||||
|
&__title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
padding: 15px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--color-dark-2);
|
||||||
|
|
||||||
|
wc-icon {
|
||||||
|
--size: 14px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--color-red-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
min-height: 50px;
|
||||||
|
word-break: break-all;
|
||||||
|
word-wrap: break-word;
|
||||||
|
|
||||||
|
::slotted(&__input) {
|
||||||
|
flex: 1;
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::slotted(&__toast) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 300px;
|
||||||
|
padding: 0 10px !important;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-weight: normal;
|
||||||
|
text-indent: 8px;
|
||||||
|
--size: 16px;
|
||||||
|
color: var(--color-dark-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
::slotted(&__toast.style-info) {
|
||||||
|
border: 1px solid #ebeef5;
|
||||||
|
background: #edf2fc;
|
||||||
|
color: var(--color-grey-3);
|
||||||
|
}
|
||||||
|
::slotted(&__toast.style-success) {
|
||||||
|
border: 1px solid #e1f3d8;
|
||||||
|
background: #f0f9eb;
|
||||||
|
color: var(--color-green-3);
|
||||||
|
}
|
||||||
|
::slotted(&__toast.style-warning) {
|
||||||
|
border: 1px solid #faebb4;
|
||||||
|
background: #faecd8;
|
||||||
|
color: var(--color-red-1);
|
||||||
|
}
|
||||||
|
::slotted(&__toast.style-error) {
|
||||||
|
border: 1px solid #f5c4c4;
|
||||||
|
background: #fde2e2;
|
||||||
|
color: var(--color-red-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__ctrl {
|
||||||
|
display: none;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
height: 60px;
|
||||||
|
padding: 15px;
|
||||||
|
line-height: 30px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #454545;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
button {
|
||||||
|
min-width: 64px;
|
||||||
|
height: 30px;
|
||||||
|
padding: 0 10px;
|
||||||
|
margin: 0 5px;
|
||||||
|
border: 1px solid var(--color-plain-3);
|
||||||
|
border-radius: 2px;
|
||||||
|
white-space: nowrap;
|
||||||
|
background: #fff;
|
||||||
|
font-size: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
outline: none;
|
||||||
|
color: inherit;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--color-plain-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
border-color: var(--color-grey-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-plain-a);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
color: #fff;
|
||||||
|
background: var(--color-teal-2);
|
||||||
|
border-color: transparent;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--color-teal-1);
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background: var(--color-teal-3);
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-teal-a);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-moz-focus-inner {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
|
||||||
|
css`
|
||||||
|
:host([mask]) {
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(255, 255, 255, 0.15);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([type='alert']),
|
||||||
|
:host([type='confirm']),
|
||||||
|
:host([type='prompt']) {
|
||||||
|
.layer {
|
||||||
|
max-width: 600px;
|
||||||
|
min-width: 300px;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([type='notify']) {
|
||||||
|
.layer {
|
||||||
|
width: 300px;
|
||||||
|
height: 120px;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([type='toast']) {
|
||||||
|
.layer {
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
min-height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
]
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.$refs.box.$anim.start()
|
||||||
|
}
|
||||||
|
|
||||||
|
updated() {
|
||||||
|
this.$refs.box.$anim.start()
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return html`
|
||||||
|
<div ref="box" #animation=${{ type: 'fade' }} class="layer">
|
||||||
|
<div
|
||||||
|
class="layer__title noselect"
|
||||||
|
style=${styleMap({ display: !!this.title ? '' : 'none' })}
|
||||||
|
>
|
||||||
|
${this.title}${this.type === 'notify'
|
||||||
|
? html`<wc-icon name="close"></wc-icon>`
|
||||||
|
: ''}
|
||||||
|
</div>
|
||||||
|
<div class="layer__content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
<div class="layer__ctrl noselect">
|
||||||
|
${this.btns.map((s, i) => html`<button data-idx=${i}>${s}</button>`)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function layer(opt = {}) {
|
||||||
|
let layDom = document.createElement('wc-layer')
|
||||||
|
let { type = 'common', content = '' } = opt
|
||||||
|
|
||||||
|
if (type === 'toast') {
|
||||||
|
opt = {
|
||||||
|
type,
|
||||||
|
content,
|
||||||
|
from: { top: 0 },
|
||||||
|
to: { top: '30px' }
|
||||||
|
}
|
||||||
|
|
||||||
|
if (toastInstance) {
|
||||||
|
toastInstance.close(true)
|
||||||
|
}
|
||||||
|
toastInstance = layDom
|
||||||
|
} else {
|
||||||
|
layDom.mask = opt.mask
|
||||||
|
|
||||||
|
if (opt.btns === false) {
|
||||||
|
layDom.btns = []
|
||||||
|
} else if (opt.btns && opt.btns.length) {
|
||||||
|
layDom.btns = opt.btns
|
||||||
|
} else {
|
||||||
|
layDom.btns = LANG_BTNS.concat()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (opt.intercept && typeof opt.intercept === 'function') {
|
||||||
|
layDom.intercept = opt.intercept
|
||||||
|
}
|
||||||
|
|
||||||
|
layDom.mask = opt.mask
|
||||||
|
layDom['mask-close'] = opt['mask-close']
|
||||||
|
|
||||||
|
if (opt.hasOwnProperty('overflow')) {
|
||||||
|
layDom.overflow = opt.overflow
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 额外样式 */
|
||||||
|
layDom['mask-color'] = opt['mask-color']
|
||||||
|
|
||||||
|
layDom.blur = opt.blur
|
||||||
|
|
||||||
|
layDom.radius = opt.radius
|
||||||
|
layDom.background = opt.background
|
||||||
|
|
||||||
|
if (opt.size && typeof opt.size === 'object') {
|
||||||
|
layDom.size = opt.size
|
||||||
|
}
|
||||||
|
|
||||||
|
// 这3种类型, 只允许同时存在1个, 如果之前有弹出则关闭
|
||||||
|
if (UNIQUE_TYPES.includes(opt.type)) {
|
||||||
|
if (uniqueInstance) {
|
||||||
|
uniqueInstance.close(true)
|
||||||
|
}
|
||||||
|
uniqueInstance = layDom
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (opt.to && typeof opt.to === 'object') {
|
||||||
|
layDom.to = opt.to
|
||||||
|
if (opt.from && typeof opt.from === 'object') {
|
||||||
|
layDom.from = opt.from
|
||||||
|
} else {
|
||||||
|
layDom.from = opt.to
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
layDom.type = opt.type
|
||||||
|
layDom.title = opt.title
|
||||||
|
if (opt.hasOwnProperty('fixed')) {
|
||||||
|
layDom.fixed = opt.fixed
|
||||||
|
}
|
||||||
|
|
||||||
|
layDom.innerHTML = content
|
||||||
|
layDom.wrapped = false // 用于区分是API创建的还是包裹现有的节点
|
||||||
|
document.body.appendChild(layDom)
|
||||||
|
|
||||||
|
return layDom.promise
|
||||||
|
}
|
||||||
|
|
||||||
|
layer.alert = function (content, title = LANG_TITLE, btns) {
|
||||||
|
if (typeof title === 'object') {
|
||||||
|
btns = title
|
||||||
|
title = LANG_TITLE
|
||||||
|
}
|
||||||
|
return this({
|
||||||
|
type: 'alert',
|
||||||
|
title,
|
||||||
|
content,
|
||||||
|
mask: true,
|
||||||
|
btns
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
layer.confirm = function (content, title = LANG_TITLE, btns) {
|
||||||
|
if (typeof title === 'object') {
|
||||||
|
btns = title
|
||||||
|
title = LANG_TITLE
|
||||||
|
}
|
||||||
|
return this({
|
||||||
|
type: 'confirm',
|
||||||
|
title,
|
||||||
|
content,
|
||||||
|
mask: true,
|
||||||
|
btns
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
layer.prompt = function (title = LANG_TITLE, defaultValue = '', intercept) {
|
||||||
|
if (typeof defaultValue === 'function') {
|
||||||
|
intercept = defaultValue
|
||||||
|
defaultValue = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!intercept) {
|
||||||
|
intercept = function (val, done) {
|
||||||
|
if (val) {
|
||||||
|
done()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return this({
|
||||||
|
type: 'prompt',
|
||||||
|
title,
|
||||||
|
content: `<wc-input autofocus class="layer__content__input" value="${defaultValue}"></wc-input>`,
|
||||||
|
mask: true,
|
||||||
|
intercept
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
layer.notify = function (content) {
|
||||||
|
return this({
|
||||||
|
type: 'notify',
|
||||||
|
title: '通知',
|
||||||
|
content,
|
||||||
|
blur: true,
|
||||||
|
from: { right: '-300px', top: 0 },
|
||||||
|
to: { right: 0 }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
layer.toast = function (txt, type = 'info') {
|
||||||
|
var ico = type
|
||||||
|
switch (type) {
|
||||||
|
case 'info':
|
||||||
|
case 'warning':
|
||||||
|
break
|
||||||
|
case 'error':
|
||||||
|
ico = 'deny'
|
||||||
|
break
|
||||||
|
case 'success':
|
||||||
|
ico = 'get'
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
ico = 'info'
|
||||||
|
}
|
||||||
|
|
||||||
|
return this({
|
||||||
|
content: `
|
||||||
|
<div class="layer__content__toast style-${type}">
|
||||||
|
<wc-icon is="${ico}"></wc-icon>
|
||||||
|
<span class="toast-txt">${txt}</span>
|
||||||
|
</div>`,
|
||||||
|
type: 'toast'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
Layer.reg('layer')
|
||||||
|
window.layer = layer
|
||||||
Loading…
Reference in New Issue