初始化
This commit is contained in:
砂糖
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,128 @@
|
||||
const title = '边框组件'
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
{
|
||||
label: '对齐类型',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'select',
|
||||
// 字段
|
||||
field: 'customize_diagonalType',
|
||||
optionField: 'customize.diagonalType', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
options: [
|
||||
{
|
||||
label: '左上右下',
|
||||
value: 'leftTopRightBottom'
|
||||
},
|
||||
{
|
||||
label: '右上左下',
|
||||
value: 'rightTopLeftBottom'
|
||||
}
|
||||
],
|
||||
// 绑定的值
|
||||
value: 'leftTopRightBottom',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '背景颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'customize_backgroundColor',
|
||||
optionField: 'customize.backgroundColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#D3D3D32B',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '长度',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'customize_borderLength',
|
||||
optionField: 'customize.borderLength', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '30',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '粗细',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'customize_borderWidth',
|
||||
optionField: 'customize.borderWidth', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '4',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '边框颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'customize_borderColor',
|
||||
optionField: 'customize.borderColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#409EFF',
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
},
|
||||
{
|
||||
label: '边框圆角',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'inputNumber',
|
||||
// 范围
|
||||
min: 0,
|
||||
max: 100,
|
||||
// 字段
|
||||
field: 'customize_borderRadius',
|
||||
optionField: 'customize.borderRadius', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: 4,
|
||||
// tab页。 data: 数据， custom: 自定义
|
||||
tabName: 'custom'
|
||||
}
|
||||
]
|
||||
|
||||
// 模拟数据
|
||||
|
||||
const option = {
|
||||
// 自定义组件其他属性
|
||||
customize: {
|
||||
diagonalType: 'leftTopRightBottom',
|
||||
borderLength: 30,
|
||||
borderWidth: 4,
|
||||
backgroundColor: '#D3D3D32B',
|
||||
borderRadius: 0,
|
||||
borderColor: '#409EFF'
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
title,
|
||||
setting,
|
||||
option: {
|
||||
...option,
|
||||
displayOption: {
|
||||
dataAllocation: {
|
||||
enable: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div
|
||||
class="border-box"
|
||||
:style="{
|
||||
backgroundColor: customize.backgroundColor
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-if="customize.diagonalType === 'leftTopRightBottom'"
|
||||
class="left-diagonal"
|
||||
>
|
||||
<div
|
||||
class="top"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopRightRadius: customize.borderRadius + 'px',
|
||||
borderBottomRightRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="left"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopRightRadius: customize.borderRadius + 'px',
|
||||
borderBottomRightRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="right"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopLeftRadius: customize.borderRadius + 'px',
|
||||
borderBottomLeftRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="bottom"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopLeftRadius: customize.borderRadius + 'px',
|
||||
borderBottomLeftRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="customize.diagonalType === 'rightTopLeftBottom'"
|
||||
class="right-diagonal"
|
||||
>
|
||||
<div
|
||||
class="top"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopLeftRadius: customize.borderRadius + 'px',
|
||||
borderBottomLeftRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="right"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopLeftRadius: customize.borderRadius + 'px',
|
||||
borderBottomLeftRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="left"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopRightRadius: customize.borderRadius + 'px',
|
||||
borderBottomRightRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="bottom"
|
||||
:style="{
|
||||
width: customize.borderLength + 'px',
|
||||
height: customize.borderWidth + 'px',
|
||||
borderTopRightRadius: customize.borderRadius + 'px',
|
||||
borderBottomRightRadius: customize.borderRadius + 'px',
|
||||
backgroundColor: customize.borderColor
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'DiagonalBorder',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
option () {
|
||||
return this.config.option
|
||||
},
|
||||
optionData () {
|
||||
return this.option.data
|
||||
},
|
||||
customize () {
|
||||
return this.option.customize
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.customize.diagonalType === 'leftTopRightBottom') {
|
||||
const leftDiagonal = document.querySelector('.left-diagonal').querySelector('.left')
|
||||
const rightDiagonal = document.querySelector('.left-diagonal').querySelector('.right')
|
||||
leftDiagonal.style.left = `${this.customize.borderWidth / 2}px`
|
||||
leftDiagonal.style.top = `${this.customize.borderWidth / 2}px`
|
||||
rightDiagonal.style.right = `${this.customize.borderWidth / 2}px`
|
||||
rightDiagonal.style.bottom = `${this.customize.borderWidth / 2}px`
|
||||
} else {
|
||||
const leftDiagonal = document.querySelector('.right-diagonal').querySelector('.left')
|
||||
const rightDiagonal = document.querySelector('.right-diagonal').querySelector('.right')
|
||||
leftDiagonal.style.left = `${this.customize.borderWidth / 2}px`
|
||||
leftDiagonal.style.bottom = `${this.customize.borderWidth / 2}px`
|
||||
rightDiagonal.style.right = `${this.customize.borderWidth / 2}px`
|
||||
rightDiagonal.style.top = `${this.customize.borderWidth / 2}px`
|
||||
}
|
||||
},
|
||||
methods: { }
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.border-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.left-diagonal {
|
||||
.top {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// 顺时针旋转90度
|
||||
.left {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: rotate(90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform: rotate(90deg);
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
|
||||
.right-diagonal {
|
||||
.top {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.right {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: right;
|
||||
}
|
||||
|
||||
.left {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform-origin: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user