This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

优化icon的is赋值;优化button的焦点样式;layer增加notify类型

old
宇天 2019-09-04 14:48:27 +08:00
parent bbbe22c48d
commit 823e17e5ba
3 changed files with 102 additions and 44 deletions

View File

@ -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>

View File

@ -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()
} }

View File

@ -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
}) })
} }
}) })