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;
min-width: 64px;
height: 32px;
border-radius: 4px;
user-select: none;
-moz-user-select: none;
color: nth($cd, 2);
@ -26,7 +27,7 @@
padding: 0 5px;
margin: auto;
border: 1px solid nth($cp, 3);
border-radius: 4px;
border-radius: inherit;
white-space: nowrap;
background: #fff;
font-size: inherit;
@ -41,6 +42,7 @@
&:active {
border-color: nth($cgr, 1);
}
&::-moz-focus-inner {
border: none;
}
@ -52,14 +54,14 @@
}
}
:host([round]) button {
:host([round]) {
border-radius: 21px;
}
:host([circle]) {
min-width: 32px;
border-radius: 50%;
button {
padding: 0;
border-radius: 50%;
}
.icon {
margin-right: 0;
@ -230,6 +232,13 @@
:host([color='grey'][disabled]) button {
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>
<script>

View File

@ -127,6 +127,7 @@ export default class Icon {
set is(val) {
this.props.is = val
this.setAttribute('is', val)
this.drawPath()
}

View File

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