Skip to content

Commit 2102688

Browse files
sparrow-jssparrow-js
committed
dev: css panel
1 parent 9724b35 commit 2102688

File tree

6 files changed

+321
-10
lines changed

6 files changed

+321
-10
lines changed

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<template>
2+
<div>
3+
<css-item label="背景类型">
4+
<s-radio-group :list="backgroundTypeList"></s-radio-group>
5+
</css-item>
6+
<css-item>
7+
<el-input placeholder="请输入内容" v-model="input2">
8+
<template slot="append">
9+
<el-popover placement="bottom" width="225" trigger="click">
10+
<chrome-picker
11+
v-model="backgroundForm.backgroundColor"
12+
></chrome-picker>
13+
<span slot="reference">color</span>
14+
</el-popover>
15+
</template>
16+
</el-input>
17+
</css-item>
18+
<css-item>
19+
<el-input
20+
placeholder="请输入URL"
21+
v-model="backgroundForm.backgroundImage"
22+
></el-input>
23+
</css-item>
24+
<css-item label="尺寸">
25+
<s-radio-group :list="backgroundSizeList"></s-radio-group>
26+
</css-item>
27+
<css-item label="重复显示">
28+
<s-radio-group :list="backgroundRepeatList"></s-radio-group>
29+
</css-item>
30+
</div>
31+
</template>
32+
<script>
33+
import CssItem from '../CssItem';
34+
import SRadioGroup from '../RadioGroup';
35+
import { Chrome } from 'vue-color';
36+
37+
export default {
38+
components: {
39+
CssItem,
40+
SRadioGroup,
41+
ChromePicker: Chrome
42+
},
43+
data() {
44+
return {
45+
backgroundForm: {
46+
backgroundColor: '',
47+
backgroundImage: '',
48+
backgroundSize: '',
49+
backgroundPosition: '',
50+
backgroundRepeat: ''
51+
},
52+
backgroundTypeList: [
53+
{
54+
label: 'color',
55+
icon: '',
56+
value: 'color'
57+
},
58+
{
59+
label: 'image',
60+
icon: '',
61+
value: 'image'
62+
}
63+
],
64+
backgroundSizeList: [
65+
{
66+
label: '默认',
67+
icon: '',
68+
value: ''
69+
},
70+
{
71+
label: 'contain',
72+
icon: '',
73+
value: 'contain'
74+
},
75+
{
76+
label: 'cover',
77+
icon: '',
78+
value: 'cover'
79+
}
80+
],
81+
backgroundRepeatList: [
82+
{
83+
label: 'repeat',
84+
icon: '',
85+
value: ''
86+
},
87+
{
88+
label: 'repeat-x',
89+
icon: '',
90+
value: ''
91+
},
92+
{
93+
label: 'repeat-y',
94+
icon: '',
95+
value: ''
96+
},
97+
{
98+
label: 'no-repeat',
99+
icon: '',
100+
value: ''
101+
}
102+
]
103+
};
104+
}
105+
};
106+
</script>
107+
<style lang="scss" scoped></style>

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<div>
3+
<div>
4+
<div></div>
5+
</div>
6+
<div>
7+
<div>
8+
<label><span>左</span></label>
9+
<el-input placeholder="请输入内容"></el-input>
10+
</div>
11+
<div>
12+
<label><span>顶</span></label>
13+
<el-input placeholder="请输入内容"></el-input>
14+
</div>
15+
</div>
16+
</div>
17+
</template>
18+
<script>
19+
export default {
20+
data () {
21+
return {
22+
quickList: [
23+
{
24+
icon: '',
25+
value: '',
26+
label: '左上'
27+
},
28+
{
29+
icon: '',
30+
value: '',
31+
label: '上'
32+
},{
33+
icon: '',
34+
value: '',
35+
label: '右上'
36+
},
37+
{
38+
icon: '',
39+
value: '',
40+
label: '左'
41+
},{
42+
icon: '',
43+
value: '',
44+
label: '中'
45+
},
46+
{
47+
icon: '',
48+
value: '',
49+
label: '右'
50+
},
51+
{
52+
icon: '',
53+
value: '',
54+
label: '左下'
55+
},
56+
{
57+
icon: '',
58+
value: '',
59+
label: '下'
60+
},
61+
{
62+
icon: '',
63+
value: '',
64+
label: '右下'
65+
}
66+
]
67+
}
68+
}
69+
};
70+
</script>
71+
<style lang="scss" scoped></style>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div></div>
3+
</template>
4+
<script>
5+
export default {
6+
7+
}
8+
</script>
9+
<style lang="scss" scoped>
10+
11+
</style>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -256,4 +256,10 @@ export default {
256256
text-align: center;
257257
padding: 0 13px;
258258
}
259+
260+
.next-input.next-medium input {
261+
border: none;
262+
background-color: transparent;
263+
outline: none;
264+
}
259265
</style>

‎packages/sparrow-client/src/components/setting/Toolbox.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -386,8 +386,8 @@ export default {
386386
list.forEach(item => {
387387
Sortable.create(item, {
388388
group: {
389-
name: 'nested'
390-
// pull: 'clone',
389+
name: 'nested',
390+
pull: 'clone',
391391
},
392392
forceFallback: false,
393393
animation: 150,
@@ -425,7 +425,7 @@ export default {
425425
item.nextElementSibling &&
426426
item.nextElementSibling.getAttribute('data-id');
427427
// item.remove();
428-
this.dragViewWidget(compId, boxId, nextSiblingId);
428+
// this.dragViewWidget(compId, boxId, nextSiblingId);
429429
}
430430
});
431431
});

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

Lines changed: 123 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,134 @@
11
<template>
2-
<div
3-
class="home drag-box"
4-
data-id="ebd8a088"
5-
style="backgroundImage: url(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dded9db02e3f4052bbf451f04d3d9b5b~tplv-k3u1fbpfcp-zoom-1.image);"
6-
/>
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>
785
</template>
886

987
<script>
1088
export default {
1189
components: {},
12-
methods: {},
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+
},
13113
14114
data() {
15-
return {};
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+
};
16132
}
17133
};
18134
</script>

0 commit comments

Comments
 (0)