Skip to content

Commit 488bcee

Browse files
leezngleezng
committed
vue文件与样式代码分离
1 parent 45b4ad4 commit 488bcee

File tree

7 files changed

+99
-102
lines changed

7 files changed

+99
-102
lines changed

‎example/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</template>
2323

2424
<script>
25-
import VueJsonPretty from 'src/components/tree'
25+
import VueJsonPretty from 'src'
2626
2727
export default {
2828
name: 'app',

‎src/assets/less/checkbox.less‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.vjs-checkbox {
2+
color: #1f2d3d;
3+
user-select: none;
4+
.vjs-checkbox__input {
5+
outline: 0;
6+
line-height: 1;
7+
vertical-align: middle;
8+
cursor: pointer;
9+
display: inline-block;
10+
position: relative;
11+
white-space: nowrap;
12+
&.is-checked .vjs-checkbox__inner {
13+
background-color: #20a0ff;
14+
border-color: #0190fe;
15+
&:after {
16+
transform: rotate(45deg) scaleY(1);
17+
}
18+
}
19+
}
20+
.vjs-checkbox__inner {
21+
display: inline-block;
22+
position: relative;
23+
border: 1px solid #bfcbd9;
24+
border-radius: 4px;
25+
box-sizing: border-box;
26+
width: 18px;
27+
height: 18px;
28+
background-color: #fff;
29+
z-index: 1;
30+
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
31+
&:after {
32+
box-sizing: content-box;
33+
content: "";
34+
border: 2px solid #fff;
35+
border-left: 0;
36+
border-top: 0;
37+
height: 8px;
38+
left: 5px;
39+
position: absolute;
40+
top: 1px;
41+
transform: rotate(45deg) scaleY(0);
42+
width: 4px;
43+
transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
44+
transform-origin: center;
45+
}
46+
}
47+
.vjs-checkbox__original {
48+
opacity: 0;
49+
outline: 0;
50+
position: absolute;
51+
margin: 0;
52+
width: 0;
53+
height: 0;
54+
left: -999px;
55+
}
56+
}

‎src/assets/less/index.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "./checkbox.less";
2+
@import "./tree.less";

‎src/assets/less/tree.less‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@content-padding: 15px; /* 树的内容区域左留空*/
2+
3+
.vjs__tree {
4+
font-family: "Monaco", "Menlo", "Consolas", "Bitstream Vera Sans Mono";
5+
line-height: 1.5;
6+
.vjs__tree__content {
7+
padding-left: @content-padding;
8+
border-left: 1px dotted #ccc;
9+
}
10+
.vjs__tree__node {
11+
cursor: pointer;
12+
&:hover {
13+
color: #20a0ff;
14+
}
15+
}
16+
.vjs__not__lastIndex:after {
17+
content: ",";
18+
}
19+
.vjs-checkbox {
20+
position: absolute;
21+
left: -30px;
22+
}
23+
.vjs__value__null {
24+
font-weight: bold;
25+
color: #ff4949;
26+
}
27+
.vjs__value__number,
28+
.vjs__value__boolean {
29+
font-weight: bold;
30+
color: #1d8ce0;
31+
}
32+
.vjs__value__string {
33+
color: #13ce66;
34+
&:before,
35+
&:after {
36+
content: "\""
37+
}
38+
}
39+
}

‎src/components/checkbox.vue‎

Lines changed: 0 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -43,62 +43,3 @@
4343
}
4444
}
4545
</script>
46-
47-
<style lang="less">
48-
.vjs-checkbox {
49-
color: #1f2d3d;
50-
user-select: none;
51-
.vjs-checkbox__input {
52-
outline: 0;
53-
line-height: 1;
54-
vertical-align: middle;
55-
cursor: pointer;
56-
display: inline-block;
57-
position: relative;
58-
white-space: nowrap;
59-
&.is-checked .vjs-checkbox__inner {
60-
background-color: #20a0ff;
61-
border-color: #0190fe;
62-
&:after {
63-
transform: rotate(45deg) scaleY(1);
64-
}
65-
}
66-
}
67-
.vjs-checkbox__inner {
68-
display: inline-block;
69-
position: relative;
70-
border: 1px solid #bfcbd9;
71-
border-radius: 4px;
72-
box-sizing: border-box;
73-
width: 18px;
74-
height: 18px;
75-
background-color: #fff;
76-
z-index: 1;
77-
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
78-
&:after {
79-
box-sizing: content-box;
80-
content: "";
81-
border: 2px solid #fff;
82-
border-left: 0;
83-
border-top: 0;
84-
height: 8px;
85-
left: 5px;
86-
position: absolute;
87-
top: 1px;
88-
transform: rotate(45deg) scaleY(0);
89-
width: 4px;
90-
transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
91-
transform-origin: center;
92-
}
93-
}
94-
.vjs-checkbox__original {
95-
opacity: 0;
96-
outline: 0;
97-
position: absolute;
98-
margin: 0;
99-
width: 0;
100-
height: 0;
101-
left: -999px;
102-
}
103-
}
104-
</style>

‎src/components/tree.vue‎

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -170,45 +170,3 @@
170170
}
171171
}
172172
</script>
173-
174-
<style lang="less">
175-
@content-padding: 15px; /* 树的内容区域左留空*/
176-
177-
.vjs__tree {
178-
font-family: "Monaco", "Menlo", "Consolas", "Bitstream Vera Sans Mono";
179-
line-height: 1.5;
180-
.vjs__tree__content {
181-
padding-left: @content-padding;
182-
border-left: 1px dotted #ccc;
183-
}
184-
.vjs__tree__node {
185-
cursor: pointer;
186-
&:hover {
187-
color: #20a0ff;
188-
}
189-
}
190-
.vjs__not__lastIndex:after {
191-
content: ",";
192-
}
193-
.vjs-checkbox {
194-
position: absolute;
195-
left: -30px;
196-
}
197-
.vjs__value__null {
198-
font-weight: bold;
199-
color: #ff4949;
200-
}
201-
.vjs__value__number,
202-
.vjs__value__boolean {
203-
font-weight: bold;
204-
color: #1d8ce0;
205-
}
206-
.vjs__value__string {
207-
color: #13ce66;
208-
&:before,
209-
&:after {
210-
content: "\""
211-
}
212-
}
213-
}
214-
</style>

‎src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import VueJsonPretty from './components/tree.vue'
2+
import './assets/less/index.less'
23

34
export default Object.assign({}, VueJsonPretty, {
45
version: '1.3.2'

0 commit comments

Comments
 (0)