Skip to content

Commit

Permalink
样式面板移除字体样式，边框和边距两者大小刻度改为拖动，单位默认成px，增加阴影项
Browse files Browse the repository at this point in the history
  • Loading branch information
Y0009955 committed Nov 15, 2019
1 parent 1e57a72 commit b7ff8d0
Show file tree
Hide file tree
Showing 2 changed files with 166 additions and 42 deletions.
169 changes: 142 additions & 27 deletions src/components/style/Base.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,6 @@
</el-collapse-item>
<el-collapse-item title="边框" name="border">
<el-form size="mini" label-position="left" label-width="80px" :model="info">
<el-form-item label="宽度">
<num :styleAttr.sync="info['border-width']" :min="0" :max="50"></num>
</el-form-item>
<el-form-item label="样式">
<el-select v-model="info['border-style']" placeholder="边框类型">
<el-option v-for='item in Metadata.style.borderStyle' :key="item.value" :label="item.label || item.value" :value="item.value" :title="item.desc">
Expand All @@ -46,51 +43,94 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="颜色">
<el-color-picker v-model="info['border-color']" @active-change="colorChange" show-alpha></el-color-picker>
<el-form-item label="宽度">
<el-slider class="slider" size="mini" :min="0" :max="50" v-model.number="style.borderWidth" :step="1"></el-slider>
<el-input class="input" type='number' :min="0" :max="50" :step='1' size="mini" v-model.number="style.borderWidth" placeholder="0-50"></el-input>
</el-form-item>
<!--<el-form-item label="宽度">-->
<!--<num :styleAttr.sync="info['border-width']" :min="0" :max="50"></num>-->
<!--</el-form-item>-->
<!--<el-form-item label="圆角">-->
<!--<num :styleAttr.sync="info['border-radius']" :max="500"></num>-->
<!--</el-form-item>-->
<el-form-item label="圆角">
<num :styleAttr.sync="info['border-radius']" :max="500"></num>
<el-slider class="slider" size="mini" :min="0" :max="25" v-model.number="style.borderRadius" :step="1"></el-slider>
<el-input class="input" type='number' :min="0" :max="25" :step='1' size="mini" v-model.number="style.borderRadius" placeholder="0-25"></el-input>
</el-form-item>
<el-form-item label="颜色">
<el-color-picker v-model="info['border-color']" @active-change="colorChange" show-alpha></el-color-picker>
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="文字样式" name="text">
<editor-text :info="info"></editor-text>
<!--<el-collapse-item title="文字样式" name="text">-->
<!--<editor-text :info="info"></editor-text>-->
<!--</el-collapse-item>-->
<el-collapse-item title="阴影" name="boxShadow">
<el-form size="mini" label-position="left" label-width="80px" :model="info">
<el-form-item label="阴影大小">
<el-slider class="slider" size="mini" :min="0" :max="25" v-model.number="boxShadow.shadow" :step="1"></el-slider>
<el-input class="input" type='number' :min="0" :max="25" :step='1' size="mini" v-model.number="boxShadow.shadow" placeholder="0-25"></el-input>
</el-form-item>
<el-form-item label="阴影模糊">
<el-slider class="slider" size="mini" :min="0" :max="25" v-model.number="boxShadow.blur" :step="1"></el-slider>
<el-input class="input" type='number' :min="0" :max="25" :step='1' size="mini" v-model.number="boxShadow.blur" placeholder="0-25"></el-input>
</el-form-item>
<el-form-item label="阴影方向">
<el-slider class="slider" size="mini" :min="0" :max="359" v-model.number="boxShadow.angle" :step="10"></el-slider>
<el-input class="input" type='number' :min="0" :max="359" :step='1' size="mini" v-model.number="boxShadow.angle" placeholder="0-359"></el-input>
</el-form-item>
<el-form-item label="阴影颜色">
<el-color-picker v-model="boxShadow.color" @active-change="colorChange" show-alpha></el-color-picker>
</el-form-item>
<!--<el-form-item label="内边距">-->
<!--<num :styleAttr.sync="info['padding']" :min="0" :max="400"></num>-->
<!--</el-form-item>-->
<!--<el-form-item label="外边距">-->
<!--<num :styleAttr.sync="info['margin']" :min="0" :max="400"></num>-->
<!--</el-form-item>-->
</el-form>
</el-collapse-item>
<el-collapse-item title="内外边距" name="margin">
<el-form size="mini" label-position="left" label-width="80px" :model="info">
<el-form-item label="内边距">
<num :styleAttr.sync="info['padding']" :min="0" :max="400"></num>
<el-slider class="slider" size="mini" :min="0" :max="25" v-model.number="style.padding" :step="1"></el-slider>
<el-input class="input" type='number' :min="0" :max="25" :step='1' size="mini" v-model.number="style.padding" placeholder="0-25"></el-input>
</el-form-item>
<el-form-item label="外边距">
<num :styleAttr.sync="info['margin']" :min="0" :max="400"></num>
<el-slider class="slider" size="mini" :min="0" :max="25" v-model.number="style.margin" :step="1"></el-slider>
<el-input class="input" type='number' :min="0" :max="25" :step='1' size="mini" v-model.number="style.margin" placeholder="0-25"></el-input>
</el-form-item>
<!--<el-form-item label="内边距">-->
<!--<num :styleAttr.sync="info['padding']" :min="0" :max="400"></num>-->
<!--</el-form-item>-->
<!--<el-form-item label="外边距">-->
<!--<num :styleAttr.sync="info['margin']" :min="0" :max="400"></num>-->
<!--</el-form-item>-->
</el-form>
</el-collapse-item>
</el-collapse>
</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" scoped type="text/stylus">
.styleEditor {
.input {
width: 68px;
}
.slider {
width: 90px;
float: left;
margin-right: 15px;
margin-left: 10px;
position: relative;
bottom: 5px;
display: inline-block;
.styleEditor {
.input {
width: 68px;
}
.slider {
width: 90px;
float: left;
margin-right: 15px;
margin-left: 10px;
position: relative;
bottom: 5px;
display: inline-block;
}
}
}
</style>

<script type="text/ecmascript-6">
import BaseComponent from 'src/extend/BaseComponent'
import EditorText from './Text'
import EditorBackground from './Background'
import Align from './Align'
import Num from './Num'
Expand All @@ -99,7 +139,7 @@
export default {
mixins: [BaseComponent],
name: 'BaseStyleEditor',
components: {Num, EditorText, EditorBackground, Align},
components: {Num, EditorBackground, Align},
props: {
info: {
required: true,
Expand All @@ -112,7 +152,19 @@
data: function () {
return {
fixed: false,
activeNames: ['size', 'border', 'align', 'background', 'border', 'margin', 'text']
activeNames: ['size', 'border', 'align', 'background', 'border', 'boxShadow', 'margin', 'text'],
style: {
borderWidth: 0,
borderRadius: 0,
margin: 0,
padding: 0
},
boxShadow: {
shadow: 10,
blur: 10,
angle: 0,
color: 'rgba(0,0,0,1)'
}
}
},
computed: {
Expand All @@ -121,9 +173,64 @@
}
},
watch: {
style: {
deep: true,
handler: function (newVal) {
if (newVal.borderWidth === '') newVal.borderWidth = 0
if (newVal.borderRadius === '') newVal.borderRadius = 0
if (newVal.margin === '') newVal.margin = 0
if (newVal.padding === '') newVal.padding = 0
this.$set(this.info, 'border-width', `${newVal.borderWidth}px`)
this.$set(this.info, 'border-radius', `${newVal.borderRadius}px`)
this.$set(this.info, 'margin', `${newVal.margin}px`)
this.$set(this.info, 'padding', `${newVal.padding}px`)
}
},
boxShadow: {
deep: true,
handler: function (newVal) {
let shadowH
let shadowV
let shadow = newVal.shadow
let angle = newVal.angle
if (angle === '') newVal.angle = 0
if (shadow === '') newVal.shadow = 0
if (newVal.blur === '') newVal.blur = 0
let PIangle = function(num) {
return 2 * Math.PI / 360 * num
}
if (angle == 0) {
shadowH = 0
shadowV = shadow
} else if (angle > 0 && angle < 90) {
shadowH = -parseInt(Math.sin(PIangle(angle)) * shadow)
shadowV = parseInt(Math.sin(PIangle(90 - angle)) * shadow)
} else if (angle == 90) {
shadowH = -shadow
shadowV = 0
} else if (angle > 90 && angle < 180) {
shadowH = -parseInt(Math.sin(PIangle(180 - angle)) * shadow)
shadowV = -parseInt(Math.sin(PIangle(angle - 90)) * shadow)
} else if (angle == 180) {
shadowH = 0
shadowV = -shadow
} else if (angle > 180 && angle < 270) {
shadowH = parseInt(Math.sin(PIangle(angle - 180)) * shadow)
shadowV = -parseInt(Math.sin(PIangle(270 - angle)) * shadow)
} else if (angle == 270) {
shadowH = shadow
shadowV = 0
} else if (angle > 270 && angle < 360) {
shadowH = parseInt(Math.sin(PIangle(360 - angle)) * shadow)
shadowV = parseInt(Math.sin(PIangle(angle - 270)) * shadow)
}
this.$set(this.info, 'box-shadow', `${newVal.color} ${shadowH}px ${shadowV}px ${newVal.blur}px`)
}
},
info: {
deep: true,
handler: function (newVal, oldVal) {
if (newVal.opacity === '') newVal.opacity = 0
this.makeCssCode()
this.makeFixed()
},
Expand All @@ -141,7 +248,15 @@
}
}
},
mounted: function () {},
mounted: function () {
this.style = {
borderWidth: this.info['border-width'] ? parseFloat(this.info['border-width']) : 0,
borderRadius: this.info['border-radius'] ? parseFloat(this.info['border-radius']) : 0,
margin: this.info['margin'] ? parseFloat(this.info['margin']) : 0,
padding: this.info['padding'] ? parseFloat(this.info['padding']) : 0
}
if (!this.info['border-style']) this.info['border-style'] = 'solid'
},
methods: {
makeFixed: function () {
this.fixed = this.info && this.info.position == 'fixed'
Expand Down
39 changes: 24 additions & 15 deletions src/store/metadata.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,49 +139,58 @@ const map = {
}
],
borderStyle: [{
value: 'none',
desc: '定义无边框。'
},
{
value: 'hidden',
desc: '与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。'
},
label: '--无--',
value: 'none',
desc: '定义无边框。'
},
{
value: 'dotted',
desc: '定义点状边框。在大多数浏览器中呈现为实线。'
label: '实线',
value: 'solid',
desc: '定义实线。'
},
{
label: '虚线',
value: 'dashed',
desc: '定义虚线。在大多数浏览器中呈现为实线。'
},
// {
// value: 'hidden',
// desc: '与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。'
// },
{
value: 'solid',
desc: '定义实线。'
label: '点状线',
value: 'dotted',
desc: '定义点状边框。在大多数浏览器中呈现为实线。'
},
{
label: '双划线',
value: 'double',
desc: '定义双线。双线的宽度等于 border-width 的值。'
},
{
label: '3D凹槽',
value: 'groove',
desc: '定义 3D 凹槽边框。其效果取决于 border-color 的值。'
},
{
label: '3D垄状',
value: 'ridge',
desc: '定义 3D 垄状边框。其效果取决于 border-color 的值。'
},
{
label: '3D内嵌',
value: 'inset',
desc: '定义 3D inset 边框。其效果取决于 border-color 的值。'
},
{
label: '3D外嵌',
value: 'outset',
desc: '定义 3D outset 边框。其效果取决于 border-color 的值。'
},
{
value: 'inherit',
desc: '规定应该从父元素继承边框样式。'
}
// {
// value: 'inherit',
// desc: '规定应该从父元素继承边框样式。'
// }
],
fontWeight: [{
value: 'normal',
Expand Down

0 comments on commit b7ff8d0

Please sign in to comment.