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

更新圆角半径为2px;增加代码块组件;优化滚动组件

old
宇天 2020-02-02 00:11:20 +08:00
parent 1ef2375874
commit 940f9acec8
10 changed files with 258 additions and 26 deletions

198
src/code/index.wc Normal file
View File

@ -0,0 +1,198 @@
<template>
<div class="code-box">
<header class="title">
<span><i></i><i></i><i></i></span>
<span>
<wc-icon title="运行" size="mini" class="act run" is="live"></wc-icon>
<wc-icon title="复制" size="mini" class="act cp" is="doc"></wc-icon>
</span>
</header>
<wc-scroll axis="y" class="code"></wc-scroll>
</div>
</template>
<style lang="scss">
:host {
display: flex;
}
.code-box {
display: flex;
flex-direction: column;
position: relative;
width: 400px;
min-height: 88px;
max-height: 210px;
border: 1px solid nth($cp, 2);
border-radius: 2px;
.title {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 24px;
padding: 0 12px;
line-height: 1;
font-size: 12px;
background: nth($cp, 2);
user-select: none;
i {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 6px;
border-radius: 50%;
background: nth($cr, 1);
}
i:nth-child(2) {
background: nth($co, 1);
}
i:nth-child(3) {
background: nth($cg, 1);
}
.act {
color: nth($cgr, 2);
cursor: pointer;
&:hover {
color: nth($cgr, 3);
}
&.run {
display: none;
}
}
}
.code {
flex: 1;
padding: 5px 0;
line-height: 18px;
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
font-size: 13px;
background: linear-gradient(to right, nth($cp, 1) 40px, #fff 40px);
color: nth($cd, 1);
cursor: text;
counter-reset: code;
p {
display: flex;
position: relative;
min-height: 18px;
padding: 0 8px 0 45px;
white-space: nowrap;
// white-space: pre-wrap;
// word-wrap: break-word;
&::before {
position: absolute;
left: 0;
width: 40px;
height: 100%;
padding-right: 5px;
text-align: right;
color: nth($cgr, 1);
content: counter(code);
counter-increment: code;
}
}
}
}
:host([exec]) {
.title {
.run {
display: inline-block;
}
}
}
:host([dark]) {
.code-box {
border-color: nth($cd, 2);
.title {
background: nth($cd, 2);
}
.code {
background: linear-gradient(to right, #596b7f 40px, nth($cd, 1) 40px);
color: nth($cp, 3);
p::before {
color: nth($cgr, 3);
}
}
}
}
</style>
<script>
import '../scroll/index'
import '../layer/index'
import $ from '../utils'
export default class Code {
props = {
dark: '',
inline: '',
content: ''
}
__init__() {
/* render */
var elem = this.root.children[1]
this.__CODE__ = elem.children[1]
this.__RUN__ = elem.children[0].children[1].firstElementChild
this.__CP__ = elem.children[0].children[1].lastElementChild
}
get value() {
return this.props.content
}
mounted() {
this._cpFN = $.bind(this.__CP__, 'click', ev => {
try {
navigator.clipboard.writeText(this.value)
layer.toast('复制到粘贴板成功', 'success')
} catch (err) {
layer.toast('复制到粘贴板失败', 'error')
}
})
// 运行按钮的点击, 内部不处理逻辑, 传递给外部的run事件
this._runFN = $.bind(this.__RUN__, 'click', ev => {
this.dispatchEvent(
new CustomEvent('run', {
detail: this.value
})
)
})
}
unmounted() {
$.unbind(this.__CP__, 'click', this._cpFN)
$.unbind(this.__RUN__, 'click', this._runFN)
}
watch() {
switch (name) {
case 'content':
this.props.content = val
val = val
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.split('\n')
val = val.map(s => `<p>${s}</p>`).join('')
this.__CODE__.innerHTML = val
this.removeAttribute('content')
break
default:
break
}
}
}
</script>

View File

@ -11,7 +11,7 @@
display: inline-block; display: inline-block;
min-width: 64px; min-width: 64px;
height: 32px; height: 32px;
border-radius: 4px; border-radius: 2px;
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
color: nth($cd, 2); color: nth($cd, 2);

View File

@ -24,7 +24,7 @@ li {
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
color: nth($cd, 2); color: nth($cd, 2);
border-radius: 4px; border-radius: 2px;
} }
.label { .label {
@ -81,11 +81,11 @@ li {
} }
.prepend { .prepend {
border-right: 1px solid nth($cp, 3); border-right: 1px solid nth($cp, 3);
border-radius: 4px 0 0 4px; border-radius: 2px 0 0 2px;
} }
.append { .append {
border-left: 1px solid nth($cp, 3); border-left: 1px solid nth($cp, 3);
border-radius: 0 4px 4px 0; border-radius: 0 2px 2px 0;
} }
&[prepend] .prepend, &[prepend] .prepend,
&[append] .append { &[append] .append {
@ -109,7 +109,7 @@ li {
max-height: 200px; max-height: 200px;
min-height: 46px; min-height: 46px;
padding: 8px 0; padding: 8px 0;
border-radius: 4px; border-radius: 2px;
background: #fff; background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);

View File

@ -17,7 +17,7 @@
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
color: nth($cd, 2); color: nth($cd, 2);
border-radius: 4px; border-radius: 2px;
} }
.label { .label {
@ -44,11 +44,11 @@
cursor: pointer; cursor: pointer;
&:first-child { &:first-child {
border-radius: 4px 0 0 4px; border-radius: 2px 0 0 2px;
border-right: 1px solid nth($cp, 3); border-right: 1px solid nth($cp, 3);
} }
&:last-child { &:last-child {
border-radius: 0 4px 4px 0; border-radius: 0 2px 2px 0;
border-left: 1px solid nth($cp, 3); border-left: 1px solid nth($cp, 3);
} }

View File

@ -19,7 +19,7 @@
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
color: nth($cd, 2); color: nth($cd, 2);
border-radius: 4px; border-radius: 2px;
} }
.label { .label {
display: flex; display: flex;
@ -70,11 +70,11 @@
} }
.prepend { .prepend {
border-right: 1px solid nth($cp, 3); border-right: 1px solid nth($cp, 3);
border-radius: 4px 0 0 4px; border-radius: 2px 0 0 2px;
} }
.append { .append {
border-left: 1px solid nth($cp, 3); border-left: 1px solid nth($cp, 3);
border-radius: 0 4px 4px 0; border-radius: 0 2px 2px 0;
} }
&[prepend] .prepend, &[prepend] .prepend,
&[append] .append { &[append] .append {
@ -99,7 +99,7 @@
height: auto; height: auto;
max-height: 200px; max-height: 200px;
padding: 8px 0; padding: 8px 0;
border-radius: 4px; border-radius: 2px;
background: #fff; background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
cursor: default; cursor: default;

View File

@ -42,7 +42,7 @@
flex: 0 auto; flex: 0 auto;
position: fixed; position: fixed;
z-index: 65535; z-index: 65535;
border-radius: 4px; border-radius: 2px;
color: #666; color: #666;
font-size: 14px; font-size: 14px;
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
@ -114,7 +114,7 @@
align-items: center; align-items: center;
width: 300px; width: 300px;
padding: 0 10px !important; padding: 0 10px !important;
border-radius: 4px; border-radius: 2px;
font-weight: normal; font-weight: normal;
--size: 16px; --size: 16px;
@ -129,7 +129,7 @@
::slotted(&__toast.style-success) { ::slotted(&__toast.style-success) {
border: 1px solid #b3e19d; border: 1px solid #b3e19d;
background: #f0f9eb; background: #f0f9eb;
color: nth($ct, 1); color: nth($cg, 2);
} }
::slotted(&__toast.style-warn) { ::slotted(&__toast.style-warn) {
border: 1px solid #faebb4; border: 1px solid #faebb4;
@ -160,7 +160,7 @@
padding: 0 10px; padding: 0 10px;
margin: 0 5px; margin: 0 5px;
border: 1px solid nth($cp, 3); border: 1px solid nth($cp, 3);
border-radius: 4px; border-radius: 2px;
white-space: nowrap; white-space: nowrap;
background: #fff; background: #fff;
font-size: inherit; font-size: inherit;

View File

@ -38,7 +38,7 @@
min-width: 200px; min-width: 200px;
min-height: 100px; min-height: 100px;
max-height: 360px; max-height: 360px;
border-radius: 4px; border-radius: 2px;
} }
table { table {

View File

@ -31,7 +31,7 @@
margin: 0 3px; margin: 0 3px;
background: nth($cp, 1); background: nth($cp, 1);
border: 0; border: 0;
border-radius: 4px; border-radius: 2px;
outline: none; outline: none;
font-size: inherit; font-size: inherit;
color: inherit; color: inherit;

View File

@ -34,7 +34,7 @@
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
color: nth($cd, 2); color: nth($cd, 2);
border-radius: 4px; border-radius: 2px;
} }
.input { .input {
@ -61,7 +61,7 @@
padding: 0 10px; padding: 0 10px;
font-size: 14px; font-size: 14px;
border-right: 1px solid nth($cp, 3); border-right: 1px solid nth($cp, 3);
border-radius: 4px 0 0 4px; border-radius: 2px 0 0 2px;
background: nth($cp, 1); background: nth($cp, 1);
} }
@ -94,7 +94,7 @@
width: 216px; width: 216px;
height: auto; height: auto;
padding: 8px 10px; padding: 8px 10px;
border-radius: 4px; border-radius: 2px;
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
background: #fff; background: #fff;
@ -199,7 +199,7 @@
background: #fffbed; background: #fffbed;
color: nth($co, 2); color: nth($co, 2);
border: 1px solid nth($co, 1); border: 1px solid nth($co, 1);
border-radius: 4px; border-radius: 2px;
} }
&.show { &.show {

View File

@ -25,15 +25,19 @@
.is-vertical { .is-vertical {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
display: flex;
justify-content: flex-end;
z-index: 10240; z-index: 10240;
opacity: 0; opacity: 0;
user-select: none;
transition: opacity 0.3s linear, visibility 0.3s linear; transition: opacity 0.3s linear, visibility 0.3s linear;
.thumb { .thumb {
display: block; display: block;
border-radius: 3px; border-radius: 5px;
background: rgba(44, 47, 53, 0.25); background: rgba(44, 47, 53, 0.25);
cursor: default; cursor: default;
transition: width 0.1s linear, height 0.1s linear;
&:hover { &:hover {
background: rgba(44, 47, 53, 0.5); background: rgba(44, 47, 53, 0.5);
@ -42,14 +46,19 @@
} }
.is-horizontal { .is-horizontal {
flex-direction: column;
left: 0; left: 0;
bottom: 1px; bottom: 1px;
width: 100%; width: 100%;
height: 6px; height: 10px;
.thumb { .thumb {
width: 0; width: 0;
height: 6px; height: 6px;
&:hover {
height: 10px;
}
} }
} }
@ -57,12 +66,16 @@
.is-vertical { .is-vertical {
top: 0; top: 0;
right: 1px; right: 1px;
width: 6px; width: 10px;
height: 100%; height: 100%;
.thumb { .thumb {
width: 6px; width: 6px;
height: 0; height: 0;
&:hover {
width: 10px;
}
} }
} }
@ -73,6 +86,17 @@
opacity: 1; opacity: 1;
} }
} }
:host([axis='x']) {
.is-vertical {
display: none;
}
}
:host([axis='y']) {
.is-horizontal {
display: none;
}
}
</style> </style>
<script> <script>
@ -82,7 +106,9 @@ const IS_FF = !!window.sidebar
/* */ /* */
export default class Scroll { export default class Scroll {
props = {} props = {
axis: 'xy' // 滚动方向, 默认x轴和y轴都可以滚动
}
__init__() { __init__() {
/* render */ /* render */
this.__BOX__ = this.root.children[1] this.__BOX__ = this.root.children[1]
@ -296,5 +322,13 @@ export default class Scroll {
$.unbind(this.__BOX__, 'mouseenter', this._initFn) $.unbind(this.__BOX__, 'mouseenter', this._initFn)
$.unbind(this.__BOX__, 'wheel', this._wheelFn) $.unbind(this.__BOX__, 'wheel', this._wheelFn)
} }
watch() {
switch (name) {
case 'axis':
this.props.axis = val
break
}
}
} }
</script> </script>