优化代码块
parent
ea505b8ef8
commit
59076f2c54
|
@ -9,7 +9,12 @@ const TAG_START_EXP = /<([\w\-]+)([\w\W]*?)>/g
|
||||||
const TAG_END_EXP = /<\/([\w\-]+)>/g
|
const TAG_END_EXP = /<\/([\w\-]+)>/g
|
||||||
const TAG_ATTR_EXP = /[@a-zA-Z\-.]+=(["'])[^"]+\1|[@a-zA-Z\-.]+=[a-zA-Z0-9]+|[@a-zA-Z\-.]+/g
|
const TAG_ATTR_EXP = /[@a-zA-Z\-.]+=(["'])[^"]+\1|[@a-zA-Z\-.]+=[a-zA-Z0-9]+|[@a-zA-Z\-.]+/g
|
||||||
const TAG_CM_EXP = /<!--([\w\W]*?)-->/g
|
const TAG_CM_EXP = /<!--([\w\W]*?)-->/g
|
||||||
// const TAGS = 'a,b,i'
|
const KEYWOWRD1 = /\b(var|const|let|function|for|switch|with|if|else|export|import|async|await|break|continue|return|class|try|catch|throw|new|while|this|super|default|case|debugger|delete|do|goto|in|public|private|protected|package|typeof)\b/g
|
||||||
|
const KEYWOWRD2 = /\b\s(=|-|\+|\/|\*|<|>|%)\s\b/g
|
||||||
|
const KEYWOWRD3 = /(\+\=|-=|\/=|\*=|--|\+\+|==|===)/g
|
||||||
|
const STR = /(['"`])(.*?)\1/g
|
||||||
|
const NUM = /\b(\d+)\b/g
|
||||||
|
const FN = /([\.\s])([a-zA-Z$][\da-zA-Z_]*)(\(.*?\))/g
|
||||||
|
|
||||||
export function colorHtml(code) {
|
export function colorHtml(code) {
|
||||||
code = code
|
code = code
|
||||||
|
@ -54,3 +59,19 @@ export function colorCss(code) {
|
||||||
.replace(/&/g, '<i class="r">&</i>')
|
.replace(/&/g, '<i class="r">&</i>')
|
||||||
return code
|
return code
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function colorJs(code) {
|
||||||
|
code = code
|
||||||
|
.replace(FN, '$1[fn]$2[/fn]$3')
|
||||||
|
.replace(KEYWOWRD1, '[key]$1[/key]')
|
||||||
|
.replace(KEYWOWRD2, '[key] $1 [/key]')
|
||||||
|
.replace(KEYWOWRD3, '[key]$1[/key]')
|
||||||
|
.replace(STR, '[str]$1$2$1[/str]')
|
||||||
|
.replace(NUM, '[num]$1[/num]')
|
||||||
|
|
||||||
|
return code
|
||||||
|
.replace(/\[(\/?)key\]/g, (m, s) => (s ? '</i>' : '<i class="r">'))
|
||||||
|
.replace(/\[(\/?)str\]/g, (m, s) => (s ? '</i>' : '<i class="g">'))
|
||||||
|
.replace(/\[(\/?)num\]/g, (m, s) => (s ? '</i>' : '<i class="pp">'))
|
||||||
|
.replace(/\[(\/?)fn\]/g, (m, s) => (s ? '</i>' : '<i class="b">'))
|
||||||
|
}
|
||||||
|
|
|
@ -15,10 +15,10 @@
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
:host {
|
:host {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.code-box {
|
.code-box {
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -26,10 +26,10 @@
|
||||||
max-height: 610px;
|
max-height: 610px;
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
border-radius: 6px;
|
border-radius: 3px;
|
||||||
background: #f7f8fb;
|
background: #f7f8fb;
|
||||||
color: var(--color-dark-1);
|
color: var(--color-dark-1);
|
||||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -121,6 +121,9 @@
|
||||||
.o {
|
.o {
|
||||||
color: var(--color-orange-2);
|
color: var(--color-orange-2);
|
||||||
}
|
}
|
||||||
|
.pp {
|
||||||
|
color: #6a1ea8;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -154,7 +157,7 @@
|
||||||
import '../scroll/index'
|
import '../scroll/index'
|
||||||
import '../layer/index'
|
import '../layer/index'
|
||||||
import $ from '../utils'
|
import $ from '../utils'
|
||||||
import { colorHtml, colorCss } from './colorful'
|
import { colorHtml, colorCss, colorJs } from './colorful'
|
||||||
|
|
||||||
export default class Code {
|
export default class Code {
|
||||||
props = {
|
props = {
|
||||||
|
@ -186,7 +189,10 @@ export default class Code {
|
||||||
}
|
}
|
||||||
|
|
||||||
set code(txt) {
|
set code(txt) {
|
||||||
txt = txt.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
txt = txt
|
||||||
|
.replace(/&/g, '&')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>')
|
||||||
|
|
||||||
this.state.content = txt
|
this.state.content = txt
|
||||||
|
|
||||||
|
@ -201,6 +207,13 @@ export default class Code {
|
||||||
txt = colorCss(txt)
|
txt = colorCss(txt)
|
||||||
break
|
break
|
||||||
|
|
||||||
|
case 'js':
|
||||||
|
case 'ts':
|
||||||
|
case 'javascript':
|
||||||
|
case 'typescript':
|
||||||
|
txt = colorJs(txt)
|
||||||
|
break
|
||||||
|
|
||||||
default:
|
default:
|
||||||
txt = txt.replace(/</g, '<').replace(/>/g, '>')
|
txt = txt.replace(/</g, '<').replace(/>/g, '>')
|
||||||
break
|
break
|
||||||
|
@ -221,13 +234,13 @@ export default class Code {
|
||||||
txt = txt.slice(5, -6).trim()
|
txt = txt.slice(5, -6).trim()
|
||||||
}
|
}
|
||||||
if (txt) {
|
if (txt) {
|
||||||
this.value = txt
|
this.code = txt
|
||||||
this.textContent = ''
|
this.textContent = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
this._cpFN = $.bind(this.__CP__, 'click', ev => {
|
this._cpFN = $.bind(this.__CP__, 'click', ev => {
|
||||||
try {
|
try {
|
||||||
navigator.clipboard.writeText(this.value)
|
navigator.clipboard.writeText(this.code)
|
||||||
layer.toast('复制到粘贴板成功', 'success')
|
layer.toast('复制到粘贴板成功', 'success')
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
layer.toast('复制到粘贴板失败', 'error')
|
layer.toast('复制到粘贴板失败', 'error')
|
||||||
|
@ -237,7 +250,7 @@ export default class Code {
|
||||||
this._runFN = $.bind(this.__RUN__, 'click', ev => {
|
this._runFN = $.bind(this.__RUN__, 'click', ev => {
|
||||||
this.dispatchEvent(
|
this.dispatchEvent(
|
||||||
new CustomEvent('run', {
|
new CustomEvent('run', {
|
||||||
detail: this.value
|
detail: this.code
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<button>
|
<button>
|
||||||
<wc-icon class="icon"></wc-icon>
|
<wc-icon class="icon"></wc-icon>
|
||||||
<slot></slot>
|
<slot />
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -21,7 +21,7 @@
|
||||||
|
|
||||||
button {
|
button {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: space-evenly;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
|
@ -45,7 +45,6 @@
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
--size: var(--icon-size, 18px);
|
--size: var(--icon-size, 18px);
|
||||||
margin-right: 3px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -23,9 +23,14 @@ export default class CheckboxGroup {
|
||||||
/* render */
|
/* render */
|
||||||
}
|
}
|
||||||
|
|
||||||
_updateChildrenStat() {
|
_updateChildrenStat(checkAll) {
|
||||||
Array.from(this.children).forEach(it => {
|
Array.from(this.children).forEach(it => {
|
||||||
if (it.tagName === 'WC-CHECKBOX' && it.root) {
|
if (it.tagName === 'WC-CHECKBOX' && it.root) {
|
||||||
|
if (checkAll) {
|
||||||
|
it.disabled = this.disabled
|
||||||
|
it.readOnly = this.readOnly
|
||||||
|
}
|
||||||
|
|
||||||
if (this.value.includes(it.value)) {
|
if (this.value.includes(it.value)) {
|
||||||
it.checked = true
|
it.checked = true
|
||||||
} else {
|
} else {
|
||||||
|
@ -64,6 +69,7 @@ export default class CheckboxGroup {
|
||||||
this.props.readonly = false
|
this.props.readonly = false
|
||||||
this.removeAttribute('readonly')
|
this.removeAttribute('readonly')
|
||||||
}
|
}
|
||||||
|
this._updateChildrenStat(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
get disabled() {
|
get disabled() {
|
||||||
|
@ -83,6 +89,7 @@ export default class CheckboxGroup {
|
||||||
this.props.disabled = false
|
this.props.disabled = false
|
||||||
this.removeAttribute('disabled')
|
this.removeAttribute('disabled')
|
||||||
}
|
}
|
||||||
|
this._updateChildrenStat(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
|
@ -101,10 +108,20 @@ export default class CheckboxGroup {
|
||||||
this.value = tmp
|
this.value = tmp
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
this.dispatchEvent(new CustomEvent('input'))
|
||||||
})
|
})
|
||||||
|
|
||||||
|
this.__observer = new MutationObserver(_ => {
|
||||||
|
this._updateChildrenStat(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
this.__observer.observe(this, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmount() {
|
||||||
$.unbind(this, 'child-picked', this._pickedFn)
|
$.unbind(this, 'child-picked', this._pickedFn)
|
||||||
|
this.__observer.disconnect()
|
||||||
}
|
}
|
||||||
|
|
||||||
watch() {
|
watch() {
|
||||||
|
@ -121,11 +138,7 @@ export default class CheckboxGroup {
|
||||||
if (k === 'readonly') {
|
if (k === 'readonly') {
|
||||||
k = 'readOnly'
|
k = 'readOnly'
|
||||||
}
|
}
|
||||||
Array.from(this.children).forEach(it => {
|
this[k] = val !== null
|
||||||
if (it.tagName === 'WC-CHECKBOX' && it.root) {
|
|
||||||
it[k] = val !== null
|
|
||||||
}
|
|
||||||
})
|
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -506,6 +506,7 @@ class Tool {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// console.log(html)
|
||||||
delete this.list
|
delete this.list
|
||||||
delete this.__LINKS__
|
delete this.__LINKS__
|
||||||
return html
|
return html
|
||||||
|
|
Reference in New Issue