优化样式
parent
de5fcb7765
commit
27afa2c5c5
|
@ -18,7 +18,7 @@ const BUILDIN2 = /\b(Object|String|Array|Boolean|Number|Function|class)\b/g
|
||||||
const STR = /(['"`])(.*?)\1/g
|
const STR = /(['"`])(.*?)\1/g
|
||||||
const NUM = /\b(\d+)\b/g
|
const NUM = /\b(\d+)\b/g
|
||||||
const FN = /([\.\s])([a-zA-Z$][\da-zA-Z_]*)(\(.*?\))/g
|
const FN = /([\.\s])([a-zA-Z$][\da-zA-Z_]*)(\(.*?\))/g
|
||||||
const CM = /(?=\s)([ ]*\/\/.*)|(^\/\/.*)/g
|
const CM = /(?=\s)?([ ]*\/\/.*)|(^\/\/.*)/g
|
||||||
const INLINE = {
|
const INLINE = {
|
||||||
code: /`([^`]*?[^`\\\s])`/g,
|
code: /`([^`]*?[^`\\\s])`/g,
|
||||||
codeBlock: /^```(.*?)$/gm,
|
codeBlock: /^```(.*?)$/gm,
|
||||||
|
@ -46,9 +46,13 @@ function parseJs(code) {
|
||||||
.replace(BUILDIN2, '[type]<strong><em>$1</em></strong>[/type]')
|
.replace(BUILDIN2, '[type]<strong><em>$1</em></strong>[/type]')
|
||||||
.replace(NUM, '[num]$1[/num]')
|
.replace(NUM, '[num]$1[/num]')
|
||||||
.replace(STR, (m, q, str) => {
|
.replace(STR, (m, q, str) => {
|
||||||
return `[str]${q}${str.replace(/\[\/?num\]/g, '')}${q}[/str]`
|
str = str.replace(/\[(\w+)\](.*?)\[\/\1\]/g, '$2')
|
||||||
|
return `[str]${q}${str}${q}[/str]`
|
||||||
|
})
|
||||||
|
.replace(CM, (m, str) => {
|
||||||
|
str = str.replace(/\[(\w+)\](.*?)\[\/\1\]/g, '$2')
|
||||||
|
return `[cm]${str}[/cm]`
|
||||||
})
|
})
|
||||||
.replace(CM, '[cm]$1[/cm]')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function rebuild(code) {
|
function rebuild(code) {
|
||||||
|
|
|
@ -40,42 +40,42 @@ code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
/* primary */
|
/* primary */
|
||||||
--color-teal-a: rgba(72, 201, 176, 0.5);
|
--color-teal-a: rgba(72, 201, 176, 0.35);
|
||||||
--color-teal-1: rgb(72, 201, 176);
|
--color-teal-1: rgb(72, 201, 176);
|
||||||
--color-teal-2: rgb(26, 188, 156);
|
--color-teal-2: rgb(26, 188, 156);
|
||||||
--color-teal-3: rgb(22, 160, 133);
|
--color-teal-3: rgb(22, 160, 133);
|
||||||
/* success */
|
/* success */
|
||||||
--color-green-a: rgba(88, 214, 141, 0.5);
|
--color-green-a: rgba(88, 214, 141, 0.35);
|
||||||
--color-green-1: rgb(88, 214, 141);
|
--color-green-1: rgb(88, 214, 141);
|
||||||
--color-green-2: rgb(46, 204, 113);
|
--color-green-2: rgb(46, 204, 113);
|
||||||
--color-green-3: rgb(39, 173, 96);
|
--color-green-3: rgb(39, 173, 96);
|
||||||
/* info */
|
/* info */
|
||||||
--color-blue-a: rgba(100, 181, 246, 0.5);
|
--color-blue-a: rgba(100, 181, 246, 0.35);
|
||||||
--color-blue-1: rgb(100, 181, 246);
|
--color-blue-1: rgb(100, 181, 246);
|
||||||
--color-blue-2: rgb(66, 165, 245);
|
--color-blue-2: rgb(66, 165, 245);
|
||||||
--color-blue-3: rgb(33, 150, 243);
|
--color-blue-3: rgb(33, 150, 243);
|
||||||
/* danger */
|
/* danger */
|
||||||
--color-red-a: rgba(255, 107, 129, 0.5);
|
--color-red-a: rgba(255, 107, 129, 0.35);
|
||||||
--color-red-1: rgb(255, 107, 129);
|
--color-red-1: rgb(255, 107, 129);
|
||||||
--color-red-2: rgb(255, 71, 87);
|
--color-red-2: rgb(255, 71, 87);
|
||||||
--color-red-3: rgb(230, 52, 67);
|
--color-red-3: rgb(230, 52, 67);
|
||||||
/* warning */
|
/* warning */
|
||||||
--color-orange-a: rgba(244, 211, 19, 0.5);
|
--color-orange-a: rgba(244, 211, 19, 0.35);
|
||||||
--color-orange-1: rgb(244, 211, 19);
|
--color-orange-1: rgb(244, 211, 19);
|
||||||
--color-orange-2: rgb(241, 196, 15);
|
--color-orange-2: rgb(241, 196, 15);
|
||||||
--color-orange-3: rgb(205, 167, 13);
|
--color-orange-3: rgb(205, 167, 13);
|
||||||
/* default1 */
|
/* default1 */
|
||||||
--color-plain-a: rgba(150, 204, 248, 0.5);
|
--color-plain-a: rgba(150, 204, 248, 0.35);
|
||||||
--color-plain-1: rgb(242, 245, 252);
|
--color-plain-1: rgb(242, 245, 252);
|
||||||
--color-plain-2: rgb(232, 235, 244);
|
--color-plain-2: rgb(232, 235, 244);
|
||||||
--color-plain-3: rgb(218, 225, 233);
|
--color-plain-3: rgb(218, 225, 233);
|
||||||
/* default2 */
|
/* default2 */
|
||||||
--color-grey-a: rgba(206, 214, 224, 0.5);
|
--color-grey-a: rgba(206, 214, 224, 0.35);
|
||||||
--color-grey-1: rgb(206, 214, 224);
|
--color-grey-1: rgb(206, 214, 224);
|
||||||
--color-grey-2: rgb(164, 176, 190);
|
--color-grey-2: rgb(164, 176, 190);
|
||||||
--color-grey-3: rgb(134, 144, 155);
|
--color-grey-3: rgb(134, 144, 155);
|
||||||
/* inverse */
|
/* inverse */
|
||||||
--color-dark-a: rgba(87, 96, 111, 0.5);
|
--color-dark-a: rgba(87, 96, 111, 0.35);
|
||||||
--color-dark-1: rgb(87, 96, 111);
|
--color-dark-1: rgb(87, 96, 111);
|
||||||
--color-dark-2: rgb(52, 73, 94);
|
--color-dark-2: rgb(52, 73, 94);
|
||||||
--color-dark-3: rgb(44, 62, 80);
|
--color-dark-3: rgb(44, 62, 80);
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
<div class="layer__ctrl noselect"></div>
|
<div class="layer__ctrl noselect"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
:host {
|
:host {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -114,32 +115,32 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
padding: 0 10px !important;
|
padding: 0 10px !important;
|
||||||
border-radius: 2px;
|
border-radius: 3px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
text-indent: 8px;
|
||||||
--size: 16px;
|
--size: 16px;
|
||||||
--pad: 0 8px 0 0;
|
color: var(--color-dark-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
::slotted(&__toast.style-info) {
|
::slotted(&__toast.style-info) {
|
||||||
border: 1px solid var(--color-plain-3);
|
// border: 1px solid var(--color-plain-3);
|
||||||
background: var(--color-plain-1);
|
background: var(--color-plain-a);
|
||||||
color: var(--color-grey-3);
|
// color: var(--color-grey-3);
|
||||||
}
|
}
|
||||||
::slotted(&__toast.style-success) {
|
::slotted(&__toast.style-success) {
|
||||||
border: 1px solid #b3e19d;
|
// border: 1px solid #b3e19d;
|
||||||
background: #f0f9eb;
|
background: var(--color-green-a);
|
||||||
color: var(--color-green-2);
|
// color: var(--color-green-3);
|
||||||
}
|
}
|
||||||
::slotted(&__toast.style-warn) {
|
::slotted(&__toast.style-warn) {
|
||||||
border: 1px solid #faebb4;
|
// border: 1px solid #faebb4;
|
||||||
background: #fffbed;
|
background: var(--color-orange-a);
|
||||||
color: var(--color-orange-3);
|
// color: var(--color-orange-3);
|
||||||
}
|
}
|
||||||
::slotted(&__toast.style-error) {
|
::slotted(&__toast.style-error) {
|
||||||
border: 1px solid #f5c4c4;
|
// border: 1px solid #f5c4c4;
|
||||||
background: #fef0f0;
|
background: var(--color-red-a);
|
||||||
color: var(--color-red-1);
|
// color: var(--color-red-3);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -251,14 +252,14 @@ const LANGUAGES = {
|
||||||
TITLE: 'Dialog',
|
TITLE: 'Dialog',
|
||||||
BTNS: ['Cancel', 'OK']
|
BTNS: ['Cancel', 'OK']
|
||||||
},
|
},
|
||||||
zh: {
|
cn: {
|
||||||
TITLE: '提示',
|
TITLE: '提示',
|
||||||
BTNS: ['取消', '确定']
|
BTNS: ['取消', '确定']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
LANGUAGES['zh-CN'] = LANGUAGES.zh
|
LANGUAGES['zh-CN'] = LANGUAGES.cn
|
||||||
const lang =
|
const lang =
|
||||||
LANGUAGES[window.__ENV_LANG__ || navigator.language] || LANGUAGES.en
|
LANGUAGES[window.__ENV_LANG__ || navigator.language] || LANGUAGES.cn
|
||||||
|
|
||||||
let uniqueInstance = null // 缓存当前打开的alert/confirm/prompt类型的弹窗
|
let uniqueInstance = null // 缓存当前打开的alert/confirm/prompt类型的弹窗
|
||||||
let toastInstance = null // 缓存toast的实例
|
let toastInstance = null // 缓存toast的实例
|
||||||
|
@ -574,7 +575,7 @@ export default class Layer {
|
||||||
this.timer = setTimeout(() => {
|
this.timer = setTimeout(() => {
|
||||||
toastInstance = null
|
toastInstance = null
|
||||||
this.close()
|
this.close()
|
||||||
}, 3000)
|
}, 3000000)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.props.type === 'notify') {
|
if (this.props.type === 'notify') {
|
||||||
|
@ -795,7 +796,7 @@ Object.assign(_layer, {
|
||||||
content: `
|
content: `
|
||||||
<div class="layer__content__toast style-${type}">
|
<div class="layer__content__toast style-${type}">
|
||||||
<wc-icon is="${ico}"></wc-icon>
|
<wc-icon is="${ico}"></wc-icon>
|
||||||
<span>${txt}</span>
|
<span class="toast-txt">${txt}</span>
|
||||||
</div>`,
|
</div>`,
|
||||||
type: 'toast'
|
type: 'toast'
|
||||||
})
|
})
|
||||||
|
|
Reference in New Issue