Skip to content

Commit 33e9422

Browse files
sparrow-jssparrow-js
committed
dev：css panel
1 parent 76c8c74 commit 33e9422

File tree

5 files changed

+160
-136
lines changed

5 files changed

+160
-136
lines changed

‎packages/sparrow-client/src/components/CssPanel/Border/index.vue

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,32 @@
33
<css-item label="圆角">
44
<s-radio-group :list="borderRadiuslist" />
55
</css-item>
6+
<css-item>
7+
<border-radius></border-radius>
8+
</css-item>
69
<css-item>
710
<el-slider v-model="value" show-input> </el-slider>
811
</css-item>
12+
<css-item class="边框">
13+
<border-model />
14+
</css-item>
15+
<css-item class="阴影">
16+
<s-radio-group :list="shadowList" />
17+
</css-item>
918
</div>
1019
</template>
1120
<script>
1221
import SRadioGroup from '../RadioGroup';
1322
import CssItem from '../CssItem';
23+
import BorderModel from '../BorderModel';
24+
import BorderRadius from '../BorderRadius';
1425
1526
export default {
1627
components: {
1728
SRadioGroup,
18-
CssItem
29+
BorderModel,
30+
CssItem,
31+
BorderRadius
1932
},
2033
data() {
2134
return {
@@ -39,6 +52,18 @@ export default {
3952
icon: '',
4053
value: ''
4154
}
55+
],
56+
shadowList: [
57+
{
58+
label: '外阴影',
59+
icon: '',
60+
value: ''
61+
},
62+
{
63+
label: '内阴影',
64+
icon: '',
65+
value: 'inset'
66+
}
4267
]
4368
};
4469
}

‎packages/sparrow-client/src/components/CssPanel/BorderModel/index.vue

Lines changed: 89 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,48 @@
22
<div>
33
<el-row>
44
<el-col :span="12">
5-
<div></div>
5+
<div class="quick-list">
6+
<el-tooltip class="item" effect="dark" content="上" placement="top">
7+
<div class="quick-item item-all">
8+
<span>上</span>
9+
</div>
10+
</el-tooltip>
11+
12+
<el-tooltip class="item" effect="dark" content="左" placement="top">
13+
<div class="quick-item item-3">
14+
<span>左</span>
15+
</div>
16+
</el-tooltip>
17+
18+
<el-tooltip class="item" effect="dark" content="中" placement="top">
19+
<div class="quick-item item-3">
20+
<span>中</span>
21+
</div>
22+
</el-tooltip>
23+
24+
<el-tooltip class="item" effect="dark" content="右" placement="top">
25+
<div class="quick-item item-3">
26+
<span>右</span>
27+
</div>
28+
</el-tooltip>
29+
30+
<el-tooltip class="item" effect="dark" content="下" placement="top">
31+
<div class="quick-item item-all">
32+
<span>下</span>
33+
</div>
34+
</el-tooltip>
35+
</div>
636
</el-col>
737
<el-col :span="12">
838
<div>
9-
<el-input-number
10-
v-model="num"
11-
controls-position="right"
12-
@change="handleChange"
13-
></el-input-number>
39+
<el-input-number controls-position="right"></el-input-number>
1440
</div>
1541
<div>
1642
<el-input placeholder="请输入内容" v-model="input2">
1743
<template slot="append">
1844
<el-popover placement="bottom" width="225" trigger="click">
1945
<chrome-picker
20-
v-model="backgroundForm.backgroundColor"
46+
v-model="borderForm.backgroundColor"
2147
></chrome-picker>
2248
<span slot="reference">color</span>
2349
</el-popover>
@@ -26,15 +52,69 @@
2652
</div>
2753
</el-col>
2854
</el-row>
55+
<div>
56+
<s-radio-group :list="borderStyleList"></s-radio-group>
57+
</div>
2958
</div>
3059
</template>
3160
<script>
3261
import { Chrome } from 'vue-color';
62+
import SRadioGroup from '../RadioGroup';
3363
3464
export default {
3565
components: {
36-
ChromePicker: Chrome
66+
ChromePicker: Chrome,
67+
SRadioGroup
68+
},
69+
data() {
70+
return {
71+
borderForm: {
72+
backgroundColor: '#FFFFFF'
73+
},
74+
borderStyleList: [
75+
{
76+
label: 'none',
77+
icon: '',
78+
value: 'none',
79+
},
80+
{
81+
label: 'solid',
82+
icon: '',
83+
value: 'solid',
84+
},
85+
{
86+
label: 'dashed',
87+
icon: '',
88+
value: 'dashed',
89+
},
90+
{
91+
label: 'dotted',
92+
icon: '',
93+
value: 'dotted',
94+
},
95+
]
96+
};
3797
}
3898
};
3999
</script>
40-
<style lang="scss" scoped></style>
100+
<style lang="scss" scoped>
101+
.quick-list{
102+
display: flex;
103+
flex-wrap: wrap;
104+
.quick-item{
105+
display: flex;
106+
justify-content: center;
107+
align-items: center;
108+
span{
109+
width: 20px;
110+
height: 20px;
111+
}
112+
}
113+
.item-all{
114+
flex: 0 0 100%;
115+
}
116+
.item-3{
117+
flex: 0 0 33.33%;
118+
}
119+
}
120+
</style>

‎packages/sparrow-client/src/components/CssPanel/BorderRadius/index.vue

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div>
3+
<el-row :gutter="10">
4+
<el-col :span="12">
5+
<el-input-number controls-position="right" size="mini"></el-input-number>
6+
</el-col>
7+
<el-col :span="12">
8+
<el-input-number controls-position="right" size="mini"></el-input-number>
9+
</el-col>
10+
<el-col :span="12">
11+
<el-input-number controls-position="right" size="mini"></el-input-number>
12+
</el-col>
13+
<el-col :span="12">
14+
<el-input-number controls-position="right" size="mini"></el-input-number>
15+
</el-col>
16+
</el-row>
17+
</div>
18+
</template>
19+
<script>
20+
export default {};
21+
</script>

‎packages/sparrow-client/src/components/CssPanel/index.vue

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,38 @@
11
<template>
2-
<div>
2+
<div class="css-panel">
33
<layout />
44
<div>
55
<font />
66
</div>
77
<div>
88
<location />
99
</div>
10+
<div>
11+
<background />
12+
</div>
13+
<div>
14+
<border />
15+
</div>
1016
</div>
1117
</template>
1218
<script>
1319
import Layout from './Layout';
1420
import Font from './Font';
1521
import Location from './Location';
22+
import Background from './Background';
23+
import Border from './Border';
1624
export default {
1725
components: {
1826
Layout,
1927
Font,
20-
Location
28+
Location,
29+
Background,
30+
Border
2131
}
2232
};
2333
</script>
24-
<style lang="scss" scoped></style>
34+
<style lang="scss" scoped>
35+
.css-panel{
36+
width: 300px;
37+
}
38+
</style>

‎packages/sparrow-view/src/views/index.vue

Lines changed: 7 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,18 @@
11
<template>
2-
<div class="home drag-box" data-id="ebd8a088" style="">
3-
<div
4-
class="drag-box clearfix"
5-
data-design-mode="design-border-box"
6-
data-instance-name="Container"
7-
data-id="88a277c7"
8-
style="display: block;flex-direction: column;"
9-
data-empty="true"
10-
/>
11-
12-
<div
13-
class="root"
14-
data-design-mode="design-border-box"
15-
data-instance-name="Form"
16-
data-id="5e6adecf"
17-
data-type="box"
18-
>
19-
<box-form>
20-
<el-form label-width="100px">
21-
<div class="drag-box" data-id="5e6adecf">
22-
<el-form-item
23-
label=" "
24-
data-design-mode="design-border-component"
25-
data-instance-name="Input"
26-
data-id="5ae61517"
27-
data-type="component"
28-
>
29-
<edit-text-box slot="label" :clearClass="true" uuid="5ae61517">
30-
文本框
31-
</edit-text-box>
32-
33-
<el-input closable="true" />
34-
</el-form-item>
35-
36-
<el-form-item
37-
label=" "
38-
data-design-mode="design-border-component"
39-
data-instance-name="Input"
40-
data-id="decf1590"
41-
data-type="component"
42-
>
43-
<edit-text-box slot="label" :clearClass="true" uuid="decf1590">
44-
文本框
45-
</edit-text-box>
46-
47-
<el-input type="textarea" closable="true" rows="4" />
48-
</el-form-item>
49-
50-
<el-form-item
51-
label=" "
52-
data-design-mode="design-border-component"
53-
data-instance-name="InputNumber"
54-
data-id="e61517bd"
55-
data-type="component"
56-
>
57-
<edit-text-box slot="label" :clearClass="true" uuid="e61517bd">
58-
数字文本框
59-
</edit-text-box>
60-
61-
<el-input-number :min="1" :max="10" />
62-
</el-form-item>
63-
64-
<el-form-item
65-
label=" "
66-
data-design-mode="design-border-component"
67-
data-instance-name="Autocomplete"
68-
data-id="44695ae6"
69-
data-type="component"
70-
>
71-
<edit-text-box slot="label" :clearClass="true" uuid="44695ae6">
72-
文本框
73-
</edit-text-box>
74-
75-
<el-autocomplete
76-
:fetch-suggestions="querySearch44695ae6"
77-
@select="handleSelect44695ae6"
78-
/>
79-
</el-form-item>
80-
</div>
81-
</el-form>
82-
</box-form>
83-
</div>
84-
</div>
2+
<div
3+
class="home drag-box"
4+
data-id="510f0c50"
5+
style="backgroundImage: url(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dded9db02e3f4052bbf451f04d3d9b5b~tplv-k3u1fbpfcp-zoom-1.image);"
6+
/>
857
</template>
868

879
<script>
8810
export default {
8911
components: {},
90-
methods: {
91-
querySearch44695ae6(queryString, cb) {
92-
var restaurants = this.restaurants;
93-
var results = queryString
94-
? restaurants.filter(this.createFilter(queryString))
95-
: restaurants; // 调用 callback 返回建议列表的数据
96-
97-
cb(results);
98-
},
99-
100-
createFilter(queryString) {
101-
return restaurant => {
102-
return (
103-
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
104-
0
105-
);
106-
};
107-
},
108-
109-
handleSelect44695ae6(item) {
110-
console.log(item);
111-
}
112-
},
12+
methods: {},
11313
11414
data() {
115-
return {
116-
restaurants: [
117-
{
118-
value: "三全鲜食（北新泾店）",
119-
address: "长宁区新渔路144号"
120-
},
121-
{
122-
value: "Hot honey 首尔炸鸡（仙霞路）",
123-
address: "上海市长宁区淞虹路661号"
124-
},
125-
{
126-
value: "新旺角茶餐厅",
127-
address: "上海市普陀区真北路988号创邑金沙谷6号楼113"
128-
}
129-
],
130-
state1: ""
131-
};
15+
return {};
13216
}
13317
};
13418
</script>

0 commit comments

Comments
 (0)