Skip to content

Commit

Permalink
dev：css panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@sparrow-js
sparrow-js committed Feb 7, 2021
1 parent 76c8c74 commit 33e9422
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 136 deletions.
27 changes: 26 additions & 1 deletion packages/sparrow-client/src/components/CssPanel/Border/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,32 @@
<css-item label="圆角">
<s-radio-group :list="borderRadiuslist" />
</css-item>
<css-item>
<border-radius></border-radius>
</css-item>
<css-item>
<el-slider v-model="value" show-input> </el-slider>
</css-item>
<css-item class="边框">
<border-model />
</css-item>
<css-item class="阴影">
<s-radio-group :list="shadowList" />
</css-item>
</div>
</template>
<script>
import SRadioGroup from '../RadioGroup';
import CssItem from '../CssItem';
import BorderModel from '../BorderModel';
import BorderRadius from '../BorderRadius';
export default {
components: {
SRadioGroup,
CssItem
BorderModel,
CssItem,
BorderRadius
},
data() {
return {
Expand All @@ -39,6 +52,18 @@ export default {
icon: '',
value: ''
}
],
shadowList: [
{
label: '外阴影',
icon: '',
value: ''
},
{
label: '内阴影',
icon: '',
value: 'inset'
}
]
};
}
Expand Down
98 changes: 89 additions & 9 deletions packages/sparrow-client/src/components/CssPanel/BorderModel/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,48 @@
<div>
<el-row>
<el-col :span="12">
<div></div>
<div class="quick-list">
<el-tooltip class="item" effect="dark" content="上" placement="top">
<div class="quick-item item-all">
<span>上</span>
</div>
</el-tooltip>

<el-tooltip class="item" effect="dark" content="左" placement="top">
<div class="quick-item item-3">
<span>左</span>
</div>
</el-tooltip>

<el-tooltip class="item" effect="dark" content="中" placement="top">
<div class="quick-item item-3">
<span>中</span>
</div>
</el-tooltip>

<el-tooltip class="item" effect="dark" content="右" placement="top">
<div class="quick-item item-3">
<span>右</span>
</div>
</el-tooltip>

<el-tooltip class="item" effect="dark" content="下" placement="top">
<div class="quick-item item-all">
<span>下</span>
</div>
</el-tooltip>
</div>
</el-col>
<el-col :span="12">
<div>
<el-input-number
v-model="num"
controls-position="right"
@change="handleChange"
></el-input-number>
<el-input-number controls-position="right"></el-input-number>
</div>
<div>
<el-input placeholder="请输入内容" v-model="input2">
<template slot="append">
<el-popover placement="bottom" width="225" trigger="click">
<chrome-picker
v-model="backgroundForm.backgroundColor"
v-model="borderForm.backgroundColor"
></chrome-picker>
<span slot="reference">color</span>
</el-popover>
Expand All @@ -26,15 +52,69 @@
</div>
</el-col>
</el-row>
<div>
<s-radio-group :list="borderStyleList"></s-radio-group>
</div>
</div>
</template>
<script>
import { Chrome } from 'vue-color';
import SRadioGroup from '../RadioGroup';
export default {
components: {
ChromePicker: Chrome
ChromePicker: Chrome,
SRadioGroup
},
data() {
return {
borderForm: {
backgroundColor: '#FFFFFF'
},
borderStyleList: [
{
label: 'none',
icon: '',
value: 'none',
},
{
label: 'solid',
icon: '',
value: 'solid',
},
{
label: 'dashed',
icon: '',
value: 'dashed',
},
{
label: 'dotted',
icon: '',
value: 'dotted',
},
]
};
}
};
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.quick-list{
display: flex;
flex-wrap: wrap;
.quick-item{
display: flex;
justify-content: center;
align-items: center;
span{
width: 20px;
height: 20px;
}
}
.item-all{
flex: 0 0 100%;
}
.item-3{
flex: 0 0 33.33%;
}
}
</style>
21 changes: 21 additions & 0 deletions packages/sparrow-client/src/components/CssPanel/BorderRadius/index.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<template>
<div>
<el-row :gutter="10">
<el-col :span="12">
<el-input-number controls-position="right" size="mini"></el-input-number>
</el-col>
<el-col :span="12">
<el-input-number controls-position="right" size="mini"></el-input-number>
</el-col>
<el-col :span="12">
<el-input-number controls-position="right" size="mini"></el-input-number>
</el-col>
<el-col :span="12">
<el-input-number controls-position="right" size="mini"></el-input-number>
</el-col>
</el-row>
</div>
</template>
<script>
export default {};
</script>
20 changes: 17 additions & 3 deletions packages/sparrow-client/src/components/CssPanel/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,38 @@
<template>
<div>
<div class="css-panel">
<layout />
<div>
<font />
</div>
<div>
<location />
</div>
<div>
<background />
</div>
<div>
<border />
</div>
</div>
</template>
<script>
import Layout from './Layout';
import Font from './Font';
import Location from './Location';
import Background from './Background';
import Border from './Border';
export default {
components: {
Layout,
Font,
Location
Location,
Background,
Border
}
};
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.css-panel{
width: 300px;
}
</style>
130 changes: 7 additions & 123 deletions packages/sparrow-view/src/views/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,134 +1,18 @@
<template>
<div class="home drag-box" data-id="ebd8a088" style="">
<div
class="drag-box clearfix"
data-design-mode="design-border-box"
data-instance-name="Container"
data-id="88a277c7"
style="display: block;flex-direction: column;"
data-empty="true"
/>

<div
class="root"
data-design-mode="design-border-box"
data-instance-name="Form"
data-id="5e6adecf"
data-type="box"
>
<box-form>
<el-form label-width="100px">
<div class="drag-box" data-id="5e6adecf">
<el-form-item
label=" "
data-design-mode="design-border-component"
data-instance-name="Input"
data-id="5ae61517"
data-type="component"
>
<edit-text-box slot="label" :clearClass="true" uuid="5ae61517">
文本框
</edit-text-box>

<el-input closable="true" />
</el-form-item>

<el-form-item
label=" "
data-design-mode="design-border-component"
data-instance-name="Input"
data-id="decf1590"
data-type="component"
>
<edit-text-box slot="label" :clearClass="true" uuid="decf1590">
文本框
</edit-text-box>

<el-input type="textarea" closable="true" rows="4" />
</el-form-item>

<el-form-item
label=" "
data-design-mode="design-border-component"
data-instance-name="InputNumber"
data-id="e61517bd"
data-type="component"
>
<edit-text-box slot="label" :clearClass="true" uuid="e61517bd">
数字文本框
</edit-text-box>

<el-input-number :min="1" :max="10" />
</el-form-item>

<el-form-item
label=" "
data-design-mode="design-border-component"
data-instance-name="Autocomplete"
data-id="44695ae6"
data-type="component"
>
<edit-text-box slot="label" :clearClass="true" uuid="44695ae6">
文本框
</edit-text-box>

<el-autocomplete
:fetch-suggestions="querySearch44695ae6"
@select="handleSelect44695ae6"
/>
</el-form-item>
</div>
</el-form>
</box-form>
</div>
</div>
<div
class="home drag-box"
data-id="510f0c50"
style="backgroundImage: url(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dded9db02e3f4052bbf451f04d3d9b5b~tplv-k3u1fbpfcp-zoom-1.image);"
/>
</template>

<script>
export default {
components: {},
methods: {
querySearch44695ae6(queryString, cb) {
var restaurants = this.restaurants;
var results = queryString
? restaurants.filter(this.createFilter(queryString))
: restaurants; // 调用 callback 返回建议列表的数据
cb(results);
},
createFilter(queryString) {
return restaurant => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
0
);
};
},
handleSelect44695ae6(item) {
console.log(item);
}
},
methods: {},
data() {
return {
restaurants: [
{
value: "三全鲜食（北新泾店）",
address: "长宁区新渔路144号"
},
{
value: "Hot honey 首尔炸鸡（仙霞路）",
address: "上海市长宁区淞虹路661号"
},
{
value: "新旺角茶餐厅",
address: "上海市普陀区真北路988号创邑金沙谷6号楼113"
}
],
state1: ""
};
return {};
}
};
</script>
Expand Down

0 comments on commit 33e9422

Please sign in to comment.