feat:点九图开发
liu.tao3
1 year ago
parent
05b2e310d4
commit
d54a18058d
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
style="width: 100%;height: 100%"
|
||||||
|
class="bs-design-wrap"
|
||||||
|
:style="{
|
||||||
|
'background-image-source':`url(${img})`,
|
||||||
|
border:'100px solid #000',
|
||||||
|
borderImageSlice:'100 100 100 100',
|
||||||
|
borderImageWidth:'100px 100px 100px 100px',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||||
|
export default {
|
||||||
|
name: 'Border14',
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
mixins: [refreshComponentMixin],
|
||||||
|
props: {
|
||||||
|
// 卡片的属性
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
img(){
|
||||||
|
return 'component.png'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.bs-design-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*滚动条样式*/
|
||||||
|
::v-deep ::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep ::-webkit-scrollbar-thumb {
|
||||||
|
background: #dddddd !important;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,255 @@
|
|||||||
|
|
||||||
|
const type = 'GcBorder15'
|
||||||
|
|
||||||
|
const name = '边框15'
|
||||||
|
|
||||||
|
const isTitle = true
|
||||||
|
|
||||||
|
const padding =[0,0,0,0]
|
||||||
|
// 右侧配置项
|
||||||
|
const setting = [
|
||||||
|
|
||||||
|
{
|
||||||
|
label:'标题区域背景色',
|
||||||
|
// 设置组件类型， select / input / colorPicker
|
||||||
|
type: 'gradual',
|
||||||
|
// 字段
|
||||||
|
field: 'fontGradientColor',
|
||||||
|
optionField: 'fontGradientColor', // 对应options中的字段
|
||||||
|
// 是否多选
|
||||||
|
multiple: false,
|
||||||
|
// 绑定的值
|
||||||
|
value: [],
|
||||||
|
},
|
||||||
|
// 背景色
|
||||||
|
// {
|
||||||
|
// label:'标题区域背景色一',
|
||||||
|
// // 设置组件类型， select / input / colorPicker
|
||||||
|
// type: 'colorPicker',
|
||||||
|
// // 字段
|
||||||
|
// field: 'fontGradientColor0',
|
||||||
|
// optionField: 'fontGradientColor0', // 对应options中的字段
|
||||||
|
// // 是否多选
|
||||||
|
// multiple: false,
|
||||||
|
// // 绑定的值
|
||||||
|
// value: '',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label:'标题区域背景色二',
|
||||||
|
// // 设置组件类型， select / input / colorPicker
|
||||||
|
// type: 'colorPicker',
|
||||||
|
// // 字段
|
||||||
|
// field: 'fontGradientColor1',
|
||||||
|
// optionField: 'fontGradientColor1', // 对应options中的字段
|
||||||
|
// // 是否多选
|
||||||
|
// multiple: false,
|
||||||
|
// // 绑定的值
|
||||||
|
// value: '',
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
label:'标题左侧颜色',
|
||||||
|
// 设置组件类型， select / input / colorPicker
|
||||||
|
type: 'colorPicker',
|
||||||
|
// 字段
|
||||||
|
field: 'fontLeftColor',
|
||||||
|
optionField: 'fontLeftColor', // 对应options中的字段
|
||||||
|
// 是否多选
|
||||||
|
multiple: false,
|
||||||
|
// 绑定的值
|
||||||
|
value: '#007aff',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'标题左侧宽度',
|
||||||
|
// 设置组件类型， select / input / colorPicker
|
||||||
|
type: 'inputNumber',
|
||||||
|
// 字段
|
||||||
|
field: 'fontLeftWidth',
|
||||||
|
optionField: 'fontLeftWidth', // 对应options中的字段
|
||||||
|
// 是否多选
|
||||||
|
multiple: false,
|
||||||
|
// 绑定的值
|
||||||
|
value: 4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'标题底部分割线颜色',
|
||||||
|
// 设置组件类型， select / input / colorPicker
|
||||||
|
type: 'colorPicker',
|
||||||
|
// 字段
|
||||||
|
field: 'fontBottomColor',
|
||||||
|
optionField: 'fontBottomColor', // 对应options中的字段
|
||||||
|
// 是否多选
|
||||||
|
multiple: false,
|
||||||
|
// 绑定的值
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'外边框线颜色',
|
||||||
|
// 设置组件类型， select / input / colorPicker
|
||||||
|
type: 'colorPicker',
|
||||||
|
// 字段
|
||||||
|
field: 'borderColor',
|
||||||
|
optionField: 'borderColor', // 对应options中的字段
|
||||||
|
// 是否多选
|
||||||
|
multiple: false,
|
||||||
|
// 绑定的值
|
||||||
|
value: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'外边框线宽度',
|
||||||
|
// 设置组件类型， select / input / colorPicker
|
||||||
|
type: 'inputNumber',
|
||||||
|
// 字段
|
||||||
|
field: 'borderWidth',
|
||||||
|
optionField: 'borderWidth', // 对应options中的字段
|
||||||
|
// 是否多选
|
||||||
|
multiple: false,
|
||||||
|
// 绑定的值
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'背景色',
|
||||||
|
// 设置组件类型， select / input / colorPicker
|
||||||
|
type: 'gradual',
|
||||||
|
// 字段
|
||||||
|
field: 'gradientColor',
|
||||||
|
optionField: 'gradientColor', // 对应options中的字段
|
||||||
|
// 是否多选
|
||||||
|
multiple: false,
|
||||||
|
// 绑定的值
|
||||||
|
value: [],
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// label:'背景色一',
|
||||||
|
// // 设置组件类型， select / input / colorPicker
|
||||||
|
// type: 'colorPicker',
|
||||||
|
// // 字段
|
||||||
|
// field: 'gradientColor0',
|
||||||
|
// optionField: 'gradientColor0', // 对应options中的字段
|
||||||
|
// // 是否多选
|
||||||
|
// multiple: false,
|
||||||
|
// // 绑定的值
|
||||||
|
// value: '',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label:'背景色二',
|
||||||
|
// // 设置组件类型， select / input / colorPicker
|
||||||
|
// type: 'colorPicker',
|
||||||
|
// // 字段
|
||||||
|
// field: 'gradientColor1',
|
||||||
|
// optionField: 'gradientColor1', // 对应options中的字段
|
||||||
|
// // 是否多选
|
||||||
|
// multiple: false,
|
||||||
|
// // 绑定的值
|
||||||
|
// value: '',
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
label: '渐变色方向',
|
||||||
|
// 设置组件类型
|
||||||
|
type: 'select',
|
||||||
|
// 字段
|
||||||
|
field: 'gradientDirection',
|
||||||
|
// 对应options中的字段
|
||||||
|
optionField: 'gradientDirection',
|
||||||
|
// 是否多选
|
||||||
|
multiple: false,
|
||||||
|
value: 'to right',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '从左到右',
|
||||||
|
value: 'to right'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '从右到左',
|
||||||
|
value: 'to left'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '从上到下',
|
||||||
|
value: 'to bottom'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '从下到上',
|
||||||
|
value: 'to top'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '从左上到右下',
|
||||||
|
value: 'to bottom right'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '从右上到左下',
|
||||||
|
value: 'to bottom left'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '从左下到右上',
|
||||||
|
value: 'to top right'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '从右下到左上',
|
||||||
|
value: 'to top left'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'左上圆角值',
|
||||||
|
// 设置组件类型， select / input / colorPicker
|
||||||
|
type: 'inputNumber',
|
||||||
|
// 字段
|
||||||
|
field: 'radiusLeftTop',
|
||||||
|
optionField: 'radiusLeftTop', // 对应options中的字段
|
||||||
|
// 是否多选
|
||||||
|
multiple: false,
|
||||||
|
// 绑定的值
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'左下圆角值',
|
||||||
|
// 设置组件类型， select / input / colorPicker
|
||||||
|
type: 'inputNumber',
|
||||||
|
// 字段
|
||||||
|
field: 'radiusLeftBottom',
|
||||||
|
optionField: 'radiusLeftBottom', // 对应options中的字段
|
||||||
|
// 是否多选
|
||||||
|
multiple: false,
|
||||||
|
// 绑定的值
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'右上圆角值',
|
||||||
|
// 设置组件类型， select / input / colorPicker
|
||||||
|
type: 'inputNumber',
|
||||||
|
// 字段
|
||||||
|
field: 'radiusRightTop',
|
||||||
|
optionField: 'radiusRightTop', // 对应options中的字段
|
||||||
|
// 是否多选
|
||||||
|
multiple: false,
|
||||||
|
// 绑定的值
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'右下圆角值',
|
||||||
|
// 设置组件类型， select / input / colorPicker
|
||||||
|
type: 'inputNumber',
|
||||||
|
// 字段
|
||||||
|
field: 'radiusRightBottom',
|
||||||
|
optionField: 'radiusRightBottom', // 对应options中的字段
|
||||||
|
// 是否多选
|
||||||
|
multiple: false,
|
||||||
|
// 绑定的值
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setting,
|
||||||
|
type,
|
||||||
|
name,
|
||||||
|
isTitle,
|
||||||
|
padding
|
||||||
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
@ -1,179 +0,0 @@
|
|||||||
const title = '卡片组件'
|
|
||||||
// 右侧配置项
|
|
||||||
const setting = [
|
|
||||||
{
|
|
||||||
label: '背景色',
|
|
||||||
// 设置组件类型， select / input / colorPicker
|
|
||||||
type: 'colorPicker',
|
|
||||||
// 字段
|
|
||||||
field: 'customize_backgroundColor',
|
|
||||||
optionField: 'customize.backgroundColor', // 对应options中的字段
|
|
||||||
// 是否多选
|
|
||||||
multiple: false,
|
|
||||||
// 绑定的值
|
|
||||||
value: 'rgba(0,0,0,.15)',
|
|
||||||
// tab页。 data: 数据， custom: 自定义
|
|
||||||
tabName: 'custom'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '边框宽度',
|
|
||||||
// 设置组件类型， select / input / colorPicker
|
|
||||||
type: 'inputNumber',
|
|
||||||
// 字段
|
|
||||||
field: 'customize_border',
|
|
||||||
optionField: 'customize.border', // 对应options中的字段
|
|
||||||
// 是否多选
|
|
||||||
multiple: false,
|
|
||||||
// 绑定的值
|
|
||||||
value: 1,
|
|
||||||
// tab页。 data: 数据， custom: 自定义
|
|
||||||
tabName: 'custom'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '边框颜色',
|
|
||||||
// 设置组件类型， select / input / colorPicker
|
|
||||||
type: 'colorPicker',
|
|
||||||
// 字段
|
|
||||||
field: 'customize_borderColor',
|
|
||||||
optionField: 'customize.borderColor', // 对应options中的字段
|
|
||||||
// 是否多选
|
|
||||||
multiple: false,
|
|
||||||
// 绑定的值
|
|
||||||
value: 'rgba(0,0,0,.15)',
|
|
||||||
// tab页。 data: 数据， custom: 自定义
|
|
||||||
tabName: 'custom'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '边框类型',
|
|
||||||
// 设置组件类型， select / input / colorPicker
|
|
||||||
type: 'select',
|
|
||||||
// 字段
|
|
||||||
field: 'customize_borderStyle',
|
|
||||||
optionField: 'customize.borderStyle', // 对应options中的字段
|
|
||||||
// 是否多选
|
|
||||||
multiple: false,
|
|
||||||
options: [
|
|
||||||
{ label: 'solid', value: 'solid' },
|
|
||||||
{ label: 'dashed', value: 'dashed' }
|
|
||||||
],
|
|
||||||
// 绑定的值
|
|
||||||
value: 'solid',
|
|
||||||
// tab页。 data: 数据， custom: 自定义
|
|
||||||
tabName: 'custom'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '标题颜色',
|
|
||||||
// 设置组件类型， select / input / colorPicker
|
|
||||||
type: 'colorPicker',
|
|
||||||
// 字段
|
|
||||||
field: 'customize_headerColor',
|
|
||||||
optionField: 'customize.headerColor', // 对应options中的字段
|
|
||||||
// 是否多选
|
|
||||||
multiple: false,
|
|
||||||
// 绑定的值
|
|
||||||
value: 'white',
|
|
||||||
// tab页。 data: 数据， custom: 自定义
|
|
||||||
tabName: 'custom'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '标题左边距',
|
|
||||||
// 设置组件类型， select / input / colorPicker
|
|
||||||
type: 'inputNumber',
|
|
||||||
// 字段
|
|
||||||
field: 'customize_titlePaddingLeft',
|
|
||||||
optionField: 'customize.titlePaddingLeft', // 对应options中的字段
|
|
||||||
// 是否多选
|
|
||||||
multiple: false,
|
|
||||||
// 绑定的值
|
|
||||||
value: 16,
|
|
||||||
// tab页。 data: 数据， custom: 自定义
|
|
||||||
tabName: 'custom'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '标题左线宽度',
|
|
||||||
// 设置组件类型， select / input / colorPicker
|
|
||||||
type: 'inputNumber',
|
|
||||||
// 字段
|
|
||||||
field: 'customize_titleLineWidth',
|
|
||||||
optionField: 'customize.titleLineWidth', // 对应options中的字段
|
|
||||||
// 是否多选
|
|
||||||
multiple: false,
|
|
||||||
// 绑定的值
|
|
||||||
value: 3,
|
|
||||||
// tab页。 data: 数据， custom: 自定义
|
|
||||||
tabName: 'custom'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '标题线颜色',
|
|
||||||
// 设置组件类型， select / input / colorPicker
|
|
||||||
type: 'colorPicker',
|
|
||||||
// 字段
|
|
||||||
field: 'customize_titleLineColor',
|
|
||||||
optionField: 'customize.titleLineColor', // 对应options中的字段
|
|
||||||
// 是否多选
|
|
||||||
multiple: false,
|
|
||||||
// 绑定的值
|
|
||||||
value: '#007aff',
|
|
||||||
// tab页。 data: 数据， custom: 自定义
|
|
||||||
tabName: 'custom'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '标题底边宽度',
|
|
||||||
// 设置组件类型， select / input / colorPicker
|
|
||||||
type: 'inputNumber',
|
|
||||||
// 字段
|
|
||||||
field: 'customize_titleBottomLineWidth',
|
|
||||||
optionField: 'customize.titleBottomLineWidth', // 对应options中的字段
|
|
||||||
// 是否多选
|
|
||||||
multiple: false,
|
|
||||||
// 绑定的值
|
|
||||||
value: 1,
|
|
||||||
// tab页。 data: 数据， custom: 自定义
|
|
||||||
tabName: 'custom'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '标题底边颜色',
|
|
||||||
// 设置组件类型， select / input / colorPicker
|
|
||||||
type: 'colorPicker',
|
|
||||||
// 字段
|
|
||||||
field: 'customize_titleBottomLineColor',
|
|
||||||
optionField: 'customize.titleBottomLineColor', // 对应options中的字段
|
|
||||||
// 是否多选
|
|
||||||
multiple: false,
|
|
||||||
// 绑定的值
|
|
||||||
value: '#0f131d',
|
|
||||||
// tab页。 data: 数据， custom: 自定义
|
|
||||||
tabName: 'custom'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
// 模拟数据
|
|
||||||
|
|
||||||
const option = {
|
|
||||||
// 自定义组件其他属性
|
|
||||||
customize: {
|
|
||||||
backgroundColor: 'rgba(0,0,0,.15)',
|
|
||||||
border: 1,
|
|
||||||
borderColor: 'rgba(0,0,0,.15)',
|
|
||||||
borderStyle: 'solid',
|
|
||||||
headerColor: 'white',
|
|
||||||
titlePaddingLeft: 16,
|
|
||||||
titleLineWidth: 3,
|
|
||||||
titleLineColor: '#007aff',
|
|
||||||
titleBottomLineWidth: 1,
|
|
||||||
titleBottomLineColor: '#0f131d'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title,
|
|
||||||
setting,
|
|
||||||
option: {
|
|
||||||
...option,
|
|
||||||
displayOption: {
|
|
||||||
dataAllocation: {
|
|
||||||
enable: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
:class="`bs-card`"
|
|
||||||
style="width: 100%;height: 100%;position: relative;"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
width: '100%',
|
|
||||||
height: '100%',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
boxSizing: 'border-box',
|
|
||||||
backgroundColor: customize.backgroundColor,
|
|
||||||
border:`${customize.border}px` + ' ' + customize.borderStyle + ' ' + customize.borderColor,
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<header
|
|
||||||
:style="{
|
|
||||||
color: customize.headerColor,
|
|
||||||
padding: '8px 0',
|
|
||||||
lineHeight: '16px',
|
|
||||||
borderBottom: `${customize.titleBottomLineWidth}px solid ${customize.titleBottomLineColor}`,
|
|
||||||
fontSize: '16px',
|
|
||||||
boxSizing: 'border-box',
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
:style="{
|
|
||||||
|
|
||||||
display: 'inline-block',
|
|
||||||
borderLeft: `${customize.titleLineWidth}px solid ${customize.titleLineColor}`,
|
|
||||||
paddingLeft: customize.titlePaddingLeft+'px'
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
{{ config.title }}
|
|
||||||
</span>
|
|
||||||
</header>
|
|
||||||
<div
|
|
||||||
:style="{
|
|
||||||
flex: 1,
|
|
||||||
position: 'relative'
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'Card',
|
|
||||||
components: {},
|
|
||||||
props: {
|
|
||||||
// 卡片的属性
|
|
||||||
config: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
customClass: {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted () {
|
|
||||||
},
|
|
||||||
watch: {},
|
|
||||||
computed: {
|
|
||||||
customize () {
|
|
||||||
return this.config.option.customize
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: { }
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue