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

优化代码块

old
宇天 2021-04-25 19:15:53 +08:00
parent ea505b8ef8
commit 59076f2c54
5 changed files with 65 additions and 18 deletions

View File

@ -9,7 +9,12 @@ const TAG_START_EXP = /<([\w\-]+)([\w\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_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) {
code = code
@ -54,3 +59,19 @@ export function colorCss(code) {
.replace(/&/g, '<i class="r">&</i>')
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">'))
}

View File

@ -15,10 +15,10 @@
<style lang="scss">
:host {
display: flex;
border-radius: 3px;
}
.code-box {
overflow: hidden;
display: flex;
flex-direction: column;
position: relative;
@ -26,10 +26,10 @@
max-height: 610px;
margin: 10px 0;
padding-bottom: 8px;
border-radius: 6px;
border-radius: 3px;
background: #f7f8fb;
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 {
display: flex;
@ -121,6 +121,9 @@
.o {
color: var(--color-orange-2);
}
.pp {
color: #6a1ea8;
}
}
}
}
@ -154,7 +157,7 @@
import '../scroll/index'
import '../layer/index'
import $ from '../utils'
import { colorHtml, colorCss } from './colorful'
import { colorHtml, colorCss, colorJs } from './colorful'
export default class Code {
props = {
@ -186,7 +189,10 @@ export default class Code {
}
set code(txt) {
txt = txt.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>')
txt = txt
.replace(/&amp;/g, '&')
.replace(/&lt;/g, '<')
.replace(/&gt;/g, '>')
this.state.content = txt
@ -201,6 +207,13 @@ export default class Code {
txt = colorCss(txt)
break
case 'js':
case 'ts':
case 'javascript':
case 'typescript':
txt = colorJs(txt)
break
default:
txt = txt.replace(/</g, '&lt;').replace(/>/g, '&gt;')
break
@ -221,13 +234,13 @@ export default class Code {
txt = txt.slice(5, -6).trim()
}
if (txt) {
this.value = txt
this.code = txt
this.textContent = ''
}
this._cpFN = $.bind(this.__CP__, 'click', ev => {
try {
navigator.clipboard.writeText(this.value)
navigator.clipboard.writeText(this.code)
layer.toast('复制到粘贴板成功', 'success')
} catch (err) {
layer.toast('复制到粘贴板失败', 'error')
@ -237,7 +250,7 @@ export default class Code {
this._runFN = $.bind(this.__RUN__, 'click', ev => {
this.dispatchEvent(
new CustomEvent('run', {
detail: this.value
detail: this.code
})
)
})

View File

@ -1,7 +1,7 @@
<template>
<button>
<wc-icon class="icon"></wc-icon>
<slot></slot>
<slot />
</button>
</template>
@ -21,7 +21,7 @@
button {
display: flex;
justify-content: center;
justify-content: space-evenly;
align-items: center;
width: 100%;
height: inherit;
@ -45,7 +45,6 @@
.icon {
--size: var(--icon-size, 18px);
margin-right: 3px;
}
}

View File

@ -23,9 +23,14 @@ export default class CheckboxGroup {
/* render */
}
_updateChildrenStat() {
_updateChildrenStat(checkAll) {
Array.from(this.children).forEach(it => {
if (it.tagName === 'WC-CHECKBOX' && it.root) {
if (checkAll) {
it.disabled = this.disabled
it.readOnly = this.readOnly
}
if (this.value.includes(it.value)) {
it.checked = true
} else {
@ -64,6 +69,7 @@ export default class CheckboxGroup {
this.props.readonly = false
this.removeAttribute('readonly')
}
this._updateChildrenStat(true)
}
get disabled() {
@ -83,6 +89,7 @@ export default class CheckboxGroup {
this.props.disabled = false
this.removeAttribute('disabled')
}
this._updateChildrenStat(true)
}
mounted() {
@ -101,10 +108,20 @@ export default class CheckboxGroup {
this.value = tmp
this.dispatchEvent(new CustomEvent('input'))
})
this.__observer = new MutationObserver(_ => {
this._updateChildrenStat(true)
})
this.__observer.observe(this, {
childList: true,
subtree: true
})
}
unmount() {
$.unbind(this, 'child-picked', this._pickedFn)
this.__observer.disconnect()
}
watch() {
@ -121,11 +138,7 @@ export default class CheckboxGroup {
if (k === 'readonly') {
k = 'readOnly'
}
Array.from(this.children).forEach(it => {
if (it.tagName === 'WC-CHECKBOX' && it.root) {
it[k] = val !== null
}
})
this[k] = val !== null
break
}
}

View File

@ -506,6 +506,7 @@ class Tool {
}
}
}
// console.log(html)
delete this.list
delete this.__LINKS__
return html