优化icon的is赋值;优化button的焦点样式;layer增加notify类型
parent
bbbe22c48d
commit
823e17e5ba
|
@ -11,6 +11,7 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-width: 64px;
|
min-width: 64px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
border-radius: 4px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
color: nth($cd, 2);
|
color: nth($cd, 2);
|
||||||
|
@ -26,7 +27,7 @@
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
border: 1px solid nth($cp, 3);
|
border: 1px solid nth($cp, 3);
|
||||||
border-radius: 4px;
|
border-radius: inherit;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
|
@ -41,6 +42,7 @@
|
||||||
&:active {
|
&:active {
|
||||||
border-color: nth($cgr, 1);
|
border-color: nth($cgr, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-moz-focus-inner {
|
&::-moz-focus-inner {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
@ -52,14 +54,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([round]) button {
|
:host([round]) {
|
||||||
border-radius: 21px;
|
border-radius: 21px;
|
||||||
}
|
}
|
||||||
:host([circle]) {
|
:host([circle]) {
|
||||||
min-width: 32px;
|
min-width: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
button {
|
button {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: 50%;
|
|
||||||
}
|
}
|
||||||
.icon {
|
.icon {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
@ -230,6 +232,13 @@
|
||||||
:host([color='grey'][disabled]) button {
|
:host([color='grey'][disabled]) button {
|
||||||
background: nth($cgr, 1);
|
background: nth($cgr, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host(:focus-within) {
|
||||||
|
box-shadow: 0 0 3px nth($ct, 1);
|
||||||
|
}
|
||||||
|
:host(:focus-within[disabled]) {
|
||||||
|
box-shadow: 0 0 3px nth($co, 1);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -127,6 +127,7 @@ export default class Icon {
|
||||||
|
|
||||||
set is(val) {
|
set is(val) {
|
||||||
this.props.is = val
|
this.props.is = val
|
||||||
|
this.setAttribute('is', val)
|
||||||
this.drawPath()
|
this.drawPath()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -53,12 +53,21 @@
|
||||||
|
|
||||||
&__title {
|
&__title {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
line-height: 30px;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: nth($cd, 2);
|
color: nth($cd, 2);
|
||||||
|
|
||||||
|
wc-icon {
|
||||||
|
--size: 14px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: nth($cr, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
|
@ -143,6 +152,10 @@
|
||||||
border-color: nth($cgr, 1);
|
border-color: nth($cgr, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: 0 0 3px nth($ct, 1);
|
||||||
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: nth($ct, 2);
|
background: nth($ct, 2);
|
||||||
|
@ -187,6 +200,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:host([type='notify']) {
|
||||||
|
.layer {
|
||||||
|
width: 300px;
|
||||||
|
height: 120px;
|
||||||
|
|
||||||
|
&__content {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
:host([type='toast']) {
|
:host([type='toast']) {
|
||||||
.layer {
|
.layer {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
@ -220,8 +243,8 @@ LANGUAGES['zh-CN'] = LANGUAGES.zh
|
||||||
const lang =
|
const lang =
|
||||||
LANGUAGES[window.__ENV_LANG__ || navigator.language] || LANGUAGES.en
|
LANGUAGES[window.__ENV_LANG__ || navigator.language] || LANGUAGES.en
|
||||||
|
|
||||||
let unique = null // 储存当前打开的alert/confirm/prompt类型的弹窗
|
let uniqueInstance = null // 缓存当前打开的alert/confirm/prompt类型的弹窗
|
||||||
let toastCount = 0
|
let toastInstance = null // 缓存toast的实例
|
||||||
|
|
||||||
// 要保证弹层唯一的类型
|
// 要保证弹层唯一的类型
|
||||||
const UNIQUE_TYPES = ['alert', 'confirm', 'prompt']
|
const UNIQUE_TYPES = ['alert', 'confirm', 'prompt']
|
||||||
|
@ -238,7 +261,7 @@ function renderBtns(list) {
|
||||||
class Layer {
|
class Layer {
|
||||||
props = {
|
props = {
|
||||||
btns: [],
|
btns: [],
|
||||||
type: 'msg',
|
type: '',
|
||||||
title: '',
|
title: '',
|
||||||
fixed: false //是否固定位置
|
fixed: false //是否固定位置
|
||||||
}
|
}
|
||||||
|
@ -257,6 +280,7 @@ class Layer {
|
||||||
}
|
}
|
||||||
|
|
||||||
set title(val) {
|
set title(val) {
|
||||||
|
this.props.title = val
|
||||||
if (val) {
|
if (val) {
|
||||||
this.__TITLE__.textContent = val
|
this.__TITLE__.textContent = val
|
||||||
this.__TITLE__.style.display = ''
|
this.__TITLE__.style.display = ''
|
||||||
|
@ -285,7 +309,13 @@ class Layer {
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
case 'toast':
|
case 'toast':
|
||||||
|
case 'notify':
|
||||||
case 'frame':
|
case 'frame':
|
||||||
|
if (val === 'notify') {
|
||||||
|
var _ico = document.createElement('wc-icon')
|
||||||
|
_ico.is = 'close'
|
||||||
|
this.__TITLE__.appendChild(_ico)
|
||||||
|
}
|
||||||
btns = []
|
btns = []
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
|
@ -344,30 +374,28 @@ class Layer {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
close() {
|
close(force) {
|
||||||
if (this._dragIns) {
|
if (this._dragIns) {
|
||||||
this._dragIns.destroy()
|
this._dragIns.destroy()
|
||||||
}
|
}
|
||||||
if (UNIQUE_TYPES.includes(this.props.type)) {
|
if (UNIQUE_TYPES.includes(this.props.type)) {
|
||||||
unique = null
|
uniqueInstance = null
|
||||||
}
|
}
|
||||||
delete this.promise
|
delete this.promise
|
||||||
unbind(this.__CTRL__, 'click', this._handleBtnClick)
|
unbind(this.__CTRL__, 'click', this._handleBtnClick)
|
||||||
|
|
||||||
// 离场动画
|
// 离场动画
|
||||||
if (this.props.from) {
|
if (this.props.from && !force) {
|
||||||
let _style = 'opacity:0;'
|
let _style = 'opacity:0;'
|
||||||
for (let k in this.props.from) {
|
for (let k in this.props.from) {
|
||||||
_style += `${k}:${this.props.from[k]};`
|
_style += `${k}:${this.props.from[k]};`
|
||||||
}
|
}
|
||||||
this.root.children[1].style.cssText += _style
|
this.root.children[1].style.cssText += _style
|
||||||
setTimeout(() => {
|
this.timer = setTimeout(() => {
|
||||||
this.parentNode.removeChild(this)
|
this.parentNode.removeChild(this)
|
||||||
if (this.props.type === 'toast') {
|
|
||||||
toastCount--
|
|
||||||
}
|
|
||||||
}, 200)
|
}, 200)
|
||||||
} else {
|
} else {
|
||||||
|
clearTimeout(this.timer)
|
||||||
this.parentNode.removeChild(this)
|
this.parentNode.removeChild(this)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -438,7 +466,7 @@ class Layer {
|
||||||
this.root.children[1].classList.toggle('blur', true)
|
this.root.children[1].classList.toggle('blur', true)
|
||||||
}
|
}
|
||||||
|
|
||||||
let _style = ''
|
let _style = this.props.from ? '' : 'opacity:1;'
|
||||||
|
|
||||||
if (this.props.background) {
|
if (this.props.background) {
|
||||||
_style += `background: ${this.props.background};`
|
_style += `background: ${this.props.background};`
|
||||||
|
@ -472,21 +500,33 @@ class Layer {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.props.type === 'toast') {
|
if (this.props.type === 'toast') {
|
||||||
setTimeout(() => {
|
this.timer = setTimeout(() => {
|
||||||
|
toastInstance = null
|
||||||
this.close()
|
this.close()
|
||||||
}, this.props.timeout)
|
}, 3000)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.props.type === 'notify') {
|
||||||
|
this._handleClose = bind(this.__TITLE__, 'click', ev => {
|
||||||
|
if (ev.target.tagName === 'WC-ICON') {
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmount() {
|
||||||
unbind(document, 'mousedown', this._handlMask)
|
unbind(document, 'mousedown', this._handlMask)
|
||||||
|
unbind(this.__TITLE__, 'click', this._handleClose)
|
||||||
}
|
}
|
||||||
|
|
||||||
watch() {
|
watch() {
|
||||||
switch (name) {
|
switch (name) {
|
||||||
case 'title':
|
case 'title':
|
||||||
case 'type':
|
case 'type':
|
||||||
|
if (val !== this.props[name]) {
|
||||||
this[name] = val
|
this[name] = val
|
||||||
|
}
|
||||||
break
|
break
|
||||||
case 'fixed':
|
case 'fixed':
|
||||||
this.fixed = true
|
this.fixed = true
|
||||||
|
@ -499,19 +539,20 @@ function createLayer(opt) {
|
||||||
var layDom = document.createElement('wc-layer')
|
var layDom = document.createElement('wc-layer')
|
||||||
|
|
||||||
if (opt.type === 'toast') {
|
if (opt.type === 'toast') {
|
||||||
var { timeout, type, content } = opt
|
var { type, content } = opt
|
||||||
timeout = timeout >>> 0
|
|
||||||
if (timeout < 1) {
|
|
||||||
timeout = 2500
|
|
||||||
}
|
|
||||||
opt = {
|
opt = {
|
||||||
timeout,
|
|
||||||
type,
|
type,
|
||||||
content,
|
content,
|
||||||
from: { top: `${toastCount * 50}px` },
|
fixed: true,
|
||||||
to: { top: `${(toastCount + 1) * 50 - 30}px` }
|
from: { top: 0 },
|
||||||
|
to: { top: '30px' }
|
||||||
}
|
}
|
||||||
toastCount++
|
|
||||||
|
if (toastInstance) {
|
||||||
|
toastInstance.close(true)
|
||||||
|
}
|
||||||
|
toastInstance = layDom
|
||||||
} else {
|
} else {
|
||||||
if (opt.mask) {
|
if (opt.mask) {
|
||||||
layDom.setAttribute('mask', '')
|
layDom.setAttribute('mask', '')
|
||||||
|
@ -547,10 +588,15 @@ function createLayer(opt) {
|
||||||
if (opt.size && typeof opt.size === 'object') {
|
if (opt.size && typeof opt.size === 'object') {
|
||||||
layDom.props.size = opt.size
|
layDom.props.size = opt.size
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
layDom.title = opt.title
|
// 这3种类型, 只允许同时存在1个, 如果之前有弹出则关闭
|
||||||
layDom.props.timeout = timeout
|
if (UNIQUE_TYPES.includes(opt.type)) {
|
||||||
|
if (uniqueInstance) {
|
||||||
|
uniqueInstance.close(true)
|
||||||
|
}
|
||||||
|
uniqueInstance = layDom
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (opt.to && typeof opt.to === 'object') {
|
if (opt.to && typeof opt.to === 'object') {
|
||||||
layDom.props.to = opt.to
|
layDom.props.to = opt.to
|
||||||
|
@ -561,17 +607,13 @@ function createLayer(opt) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
layDom.title = opt.title
|
||||||
layDom.type = opt.type
|
layDom.type = opt.type
|
||||||
|
layDom.fixed = opt.fixed
|
||||||
|
|
||||||
layDom.innerHTML = opt.content
|
layDom.innerHTML = opt.content
|
||||||
document.body.appendChild(layDom)
|
document.body.appendChild(layDom)
|
||||||
|
|
||||||
// 这3种类型, 只允许同时存在1个, 如果之前有弹出则关闭
|
|
||||||
if (UNIQUE_TYPES.includes(opt.type)) {
|
|
||||||
if (unique) {
|
|
||||||
unique.close()
|
|
||||||
}
|
|
||||||
unique = layDom
|
|
||||||
}
|
|
||||||
return layDom.promise
|
return layDom.promise
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -655,11 +697,18 @@ Object.assign(_layer, {
|
||||||
maskClose: true
|
maskClose: true
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
toast(txt, type = 'info', timeout = 2500) {
|
notify(content) {
|
||||||
if (typeof type === 'number') {
|
return createLayer({
|
||||||
timeout = type
|
type: 'notify',
|
||||||
type = 'info'
|
title: '通知',
|
||||||
}
|
content,
|
||||||
|
fixed: true,
|
||||||
|
blur: true,
|
||||||
|
from: { right: '-300px', top: 0 },
|
||||||
|
to: { right: 0 }
|
||||||
|
})
|
||||||
|
},
|
||||||
|
toast(txt, type = 'info') {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'info':
|
case 'info':
|
||||||
case 'warn':
|
case 'warn':
|
||||||
|
@ -675,8 +724,7 @@ Object.assign(_layer, {
|
||||||
<wc-icon size="mini" is="${type}"></wc-icon>
|
<wc-icon size="mini" is="${type}"></wc-icon>
|
||||||
${txt}
|
${txt}
|
||||||
</div>`,
|
</div>`,
|
||||||
type: 'toast',
|
type: 'toast'
|
||||||
timeout
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
Reference in New Issue