From 74d41a270a706986a4ab8c3f2b6dfb1fd7dfd086 Mon Sep 17 00:00:00 2001 From: yutent Date: Fri, 31 Mar 2023 18:50:08 +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 | 453 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 453 insertions(+) create mode 100644 src/layer/index.js diff --git a/src/layer/index.js b/src/layer/index.js new file mode 100644 index 0000000..5a911cf --- /dev/null +++ b/src/layer/index.js @@ -0,0 +1,453 @@ +/** + * {弹窗组件} + * @author yutent + * @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` +
+
+ ${this.title}${this.type === 'notify' + ? html`` + : ''} +
+
+ +
+
+ ${this.btns.map((s, i) => html``)} +
+
+ ` + } +} + +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: ``, + 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: ` +
+ + ${txt} +
`, + type: 'toast' + }) +} + +Layer.reg('layer') +window.layer = layer