初始化
This commit is contained in:
砂糖
BIN
frontend/packages/BorderComponents/GcBorder1/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder1/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
170
frontend/packages/BorderComponents/GcBorder1/index.vue
Normal file
170
frontend/packages/BorderComponents/GcBorder1/index.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<dv-border-box-1
|
||||
:id="'dataV' + config.code"
|
||||
:background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
|
||||
:color='borderColor'
|
||||
:key="updateKey"
|
||||
>
|
||||
<div class="element"
|
||||
v-if="config.border.isTitle"
|
||||
:style="`
|
||||
color:${color};
|
||||
font-size:${config.border.fontSize}px;
|
||||
line-height:${config.border.titleHeight}px;
|
||||
height:${config.border.titleHeight};
|
||||
padding:0 0 0 20px`"
|
||||
>
|
||||
{{config.title}}</div>
|
||||
</dv-border-box-1>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||
import DvBorderBox1 from '@jiaminghi/data-view/lib/components/borderBox1/src/main.vue'
|
||||
import '@jiaminghi/data-view/lib/components/borderBox1/src/main.css'
|
||||
export default {
|
||||
name: 'Border1',
|
||||
components: {
|
||||
DvBorderBox1
|
||||
},
|
||||
mixins: [refreshComponentMixin],
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
borderBgId: `borderBg${this.config.code}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
borderColor () {
|
||||
return this.config.border.borderMainColor ||
|
||||
this.config.border.borderSecondaryColor
|
||||
? [
|
||||
this.config.border.borderMainColor||this.config.border.borderSecondaryColor,
|
||||
this.config.border.borderSecondaryColor||this.config.border.borderMainColor
|
||||
]
|
||||
: null
|
||||
},
|
||||
color () {
|
||||
return this.config.border.fontColor ? this.config.border.fontColor
|
||||
: '#fff'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
updateKey:{
|
||||
handler (val) {
|
||||
this.$nextTick(()=>{
|
||||
this.changeColor()
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'config.border.gradientColor':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.gradientDirection':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.opacity':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeColor()
|
||||
},
|
||||
methods: {
|
||||
changeColor(){
|
||||
if(!this.config.border.opacity){
|
||||
this.config.border.opacity=100
|
||||
}
|
||||
if(!this.config.border.gradientColor) return
|
||||
if (document.querySelector(`#dataV${this.config.code}`)) {
|
||||
const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
|
||||
if (borderElement) {
|
||||
borderElement.style.opacity = (this.config.border.opacity / 100)
|
||||
let gradientDirection = ''
|
||||
switch (this.config.border.gradientDirection) {
|
||||
case 'to right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
|
||||
break
|
||||
case 'to bottom left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top right':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to top left':
|
||||
gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
default:
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
}
|
||||
// 在目标元素内的第一个位置插入 <defs> 和其中的内容
|
||||
borderElement.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
`<defs>
|
||||
<linearGradient id="${this.borderBgId}" ${gradientDirection}>
|
||||
<stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
|
||||
<stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
|
||||
</linearGradient>
|
||||
</defs>`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
109
frontend/packages/BorderComponents/GcBorder1/setting.js
Normal file
109
frontend/packages/BorderComponents/GcBorder1/setting.js
Normal file
@@ -0,0 +1,109 @@
|
||||
|
||||
const type = 'GcBorder1'
|
||||
|
||||
const name = '边框1'
|
||||
|
||||
const isTitle = false
|
||||
|
||||
const padding =[16,16,16,16]
|
||||
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
// 背景色
|
||||
|
||||
{
|
||||
label:'边框主颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderMainColor',
|
||||
optionField: 'borderMainColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#83bff6',
|
||||
},
|
||||
{
|
||||
label:'边框副颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderSecondaryColor',
|
||||
optionField: 'borderSecondaryColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#00CED1',
|
||||
},
|
||||
{
|
||||
label:'背景色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'gradientColor',
|
||||
optionField: 'gradientColor', // 对应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'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
setting,
|
||||
type,
|
||||
name,
|
||||
isTitle,
|
||||
padding
|
||||
}
|
||||
BIN
frontend/packages/BorderComponents/GcBorder10/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder10/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
169
frontend/packages/BorderComponents/GcBorder10/index.vue
Normal file
169
frontend/packages/BorderComponents/GcBorder10/index.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<dv-border-box-10
|
||||
:id="'dataV' + config.code"
|
||||
:background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
|
||||
:color='borderColor'
|
||||
:key="updateKey"
|
||||
>
|
||||
<div class="element"
|
||||
v-if="config.border.isTitle"
|
||||
:style="`
|
||||
color:${color};
|
||||
font-size:${config.border.fontSize}px;
|
||||
line-height:${config.border.titleHeight}px;
|
||||
height:${config.border.titleHeight};
|
||||
padding:0 0 0 20px`"
|
||||
>
|
||||
{{config.title}}</div>
|
||||
</dv-border-box-10>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||
import DvBorderBox10 from '@jiaminghi/data-view/lib/components/borderBox10/src/main.vue'
|
||||
import '@jiaminghi/data-view/lib/components/borderBox10/src/main.css'
|
||||
export default {
|
||||
name: 'Border10',
|
||||
components: {
|
||||
DvBorderBox10
|
||||
},
|
||||
mixins: [refreshComponentMixin],
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
borderBgId: `borderBg${this.config.code}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
borderColor () {
|
||||
return this.config.border.borderMainColor ||
|
||||
this.config.border.borderSecondaryColor
|
||||
? [
|
||||
this.config.border.borderMainColor,
|
||||
this.config.border.borderSecondaryColor
|
||||
]
|
||||
: null
|
||||
},
|
||||
color () {
|
||||
return this.config.border.fontColor ? this.config.border.fontColor
|
||||
: '#fff'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
updateKey:{
|
||||
handler (val) {
|
||||
this.$nextTick(()=>{
|
||||
this.changeColor()
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'config.border.gradientColor':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.gradientDirection':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.opacity':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeColor()
|
||||
},
|
||||
methods: {
|
||||
changeColor(){
|
||||
if(!this.config.border.opacity){
|
||||
this.config.border.opacity=100
|
||||
}
|
||||
if(!this.config.border.gradientColor) return
|
||||
if (document.querySelector(`#dataV${this.config.code}`)) {
|
||||
const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
|
||||
if (borderElement) {
|
||||
borderElement.style.opacity = (this.config.border.opacity / 100)
|
||||
let gradientDirection = ''
|
||||
switch (this.config.border.gradientDirection) {
|
||||
case 'to right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
|
||||
break
|
||||
case 'to bottom left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top right':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to top left':
|
||||
gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
default:
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
}
|
||||
// 在目标元素内的第一个位置插入 <defs> 和其中的内容
|
||||
borderElement.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
`<defs>
|
||||
<linearGradient id="${this.borderBgId}" ${gradientDirection}>
|
||||
<stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
|
||||
<stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
|
||||
</linearGradient>
|
||||
</defs>`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
108
frontend/packages/BorderComponents/GcBorder10/setting.js
Normal file
108
frontend/packages/BorderComponents/GcBorder10/setting.js
Normal file
@@ -0,0 +1,108 @@
|
||||
|
||||
const type = 'GcBorder10'
|
||||
|
||||
const name = '边框10'
|
||||
|
||||
const padding =[16,16,16,16]
|
||||
|
||||
const isTitle=false
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
// 背景色
|
||||
|
||||
{
|
||||
label:'边框主颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderMainColor',
|
||||
optionField: 'borderMainColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#83bff6',
|
||||
},
|
||||
{
|
||||
label:'边框副颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderSecondaryColor',
|
||||
optionField: 'borderSecondaryColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#00CED1',
|
||||
},
|
||||
{
|
||||
label:'背景色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'gradientColor',
|
||||
optionField: 'gradientColor', // 对应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'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
setting,
|
||||
type,
|
||||
name,
|
||||
isTitle,
|
||||
padding
|
||||
}
|
||||
BIN
frontend/packages/BorderComponents/GcBorder11/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder11/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
172
frontend/packages/BorderComponents/GcBorder11/index.vue
Normal file
172
frontend/packages/BorderComponents/GcBorder11/index.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<dv-border-box-11
|
||||
:id="'dataV' + config.code"
|
||||
:background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
|
||||
:color='borderColor'
|
||||
:key="updateKey"
|
||||
:title="config.border.isTitle?config.title:''"
|
||||
:title-width="config.border.titleWidth"
|
||||
>
|
||||
<!-- <div class="element"
|
||||
v-if="config.border.isTitle"
|
||||
:style="`
|
||||
color:${color};
|
||||
font-size:${config.border.fontSize}px;
|
||||
line-height:${config.border.titleHeight}px;
|
||||
height:${config.border.titleHeight};
|
||||
padding:0 0 0 20px`"
|
||||
>
|
||||
{{config.title}}</div> -->
|
||||
</dv-border-box-11>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||
import DvBorderBox11 from '@jiaminghi/data-view/lib/components/borderBox11/src/main.vue'
|
||||
import '@jiaminghi/data-view/lib/components/borderBox11/src/main.css'
|
||||
export default {
|
||||
name: 'Border11',
|
||||
components: {
|
||||
DvBorderBox11
|
||||
},
|
||||
mixins: [refreshComponentMixin],
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
borderBgId: `borderBg${this.config.code}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
borderColor () {
|
||||
return this.config.border.borderMainColor ||
|
||||
this.config.border.borderSecondaryColor
|
||||
? [
|
||||
this.config.border.borderMainColor,
|
||||
this.config.border.borderSecondaryColor
|
||||
]
|
||||
: null
|
||||
},
|
||||
color () {
|
||||
return this.config.border.fontColor ? this.config.border.fontColor
|
||||
: '#fff'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
updateKey:{
|
||||
handler (val) {
|
||||
this.$nextTick(()=>{
|
||||
this.changeColor()
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'config.border.gradientColor':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.gradientDirection':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.opacity':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeColor()
|
||||
},
|
||||
methods: {
|
||||
changeColor(){
|
||||
if(!this.config.border.opacity){
|
||||
this.config.border.opacity=100
|
||||
}
|
||||
if(!this.config.border.gradientColor) return
|
||||
if (document.querySelector(`#dataV${this.config.code}`)) {
|
||||
const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
|
||||
if (borderElement) {
|
||||
borderElement.style.opacity = (this.config.border.opacity / 100)
|
||||
let gradientDirection = ''
|
||||
switch (this.config.border.gradientDirection) {
|
||||
case 'to right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
|
||||
break
|
||||
case 'to bottom left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top right':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to top left':
|
||||
gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
default:
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
}
|
||||
// 在目标元素内的第一个位置插入 <defs> 和其中的内容
|
||||
borderElement.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
`<defs>
|
||||
<linearGradient id="${this.borderBgId}" ${gradientDirection}>
|
||||
<stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
|
||||
<stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
|
||||
</linearGradient>
|
||||
</defs>`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
118
frontend/packages/BorderComponents/GcBorder11/setting.js
Normal file
118
frontend/packages/BorderComponents/GcBorder11/setting.js
Normal file
@@ -0,0 +1,118 @@
|
||||
|
||||
const type = 'GcBorder11'
|
||||
|
||||
const name = '边框11'
|
||||
|
||||
const padding =[36,16,16,16]
|
||||
|
||||
const isTitle=true
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
// 背景色
|
||||
{
|
||||
label:'标题区域宽度',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'titleWidth',
|
||||
optionField: 'titleWidth', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: 250,
|
||||
},
|
||||
{
|
||||
label:'边框主颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderMainColor',
|
||||
optionField: 'borderMainColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#83bff6',
|
||||
},
|
||||
{
|
||||
label:'边框副颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderSecondaryColor',
|
||||
optionField: 'borderSecondaryColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#00CED1',
|
||||
},
|
||||
{
|
||||
label:'背景色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'gradientColor',
|
||||
optionField: 'gradientColor', // 对应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'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
setting,
|
||||
type,
|
||||
name,
|
||||
isTitle,
|
||||
padding
|
||||
}
|
||||
BIN
frontend/packages/BorderComponents/GcBorder12/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder12/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
170
frontend/packages/BorderComponents/GcBorder12/index.vue
Normal file
170
frontend/packages/BorderComponents/GcBorder12/index.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<dv-border-box-12
|
||||
:id="'dataV' + config.code"
|
||||
:background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
|
||||
:color='borderColor'
|
||||
:key="updateKey"
|
||||
>
|
||||
<div class="element"
|
||||
v-if="config.border.isTitle"
|
||||
:style="`
|
||||
color:${color};
|
||||
font-size:${config.border.fontSize}px;
|
||||
line-height:${config.border.titleHeight}px;
|
||||
height:${config.border.titleHeight};
|
||||
padding:0 0 0 20px`"
|
||||
>
|
||||
{{config.title}}</div>
|
||||
</dv-border-box-12>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||
import DvBorderBox12 from '@jiaminghi/data-view/lib/components/borderBox12/src/main.vue'
|
||||
import '@jiaminghi/data-view/lib/components/borderBox12/src/main.css'
|
||||
export default {
|
||||
name: 'Border12',
|
||||
components: {
|
||||
DvBorderBox12
|
||||
},
|
||||
mixins: [refreshComponentMixin],
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
borderBgId: `borderBg${this.config.code}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
borderColor () {
|
||||
return this.config.border.borderMainColor ||
|
||||
this.config.border.borderSecondaryColor
|
||||
? [
|
||||
this.config.border.borderMainColor,
|
||||
this.config.border.borderSecondaryColor
|
||||
]
|
||||
: null
|
||||
},
|
||||
color () {
|
||||
return this.config.border.fontColor ? this.config.border.fontColor
|
||||
: '#fff'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
updateKey:{
|
||||
handler (val) {
|
||||
this.$nextTick(()=>{
|
||||
this.changeColor()
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'config.border.gradientColor':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.gradientDirection':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.opacity':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeColor()
|
||||
},
|
||||
methods: {
|
||||
changeColor(){
|
||||
if(!this.config.border.opacity){
|
||||
this.config.border.opacity=100
|
||||
}
|
||||
if(!this.config.border.gradientColor) return
|
||||
if (document.querySelector(`#dataV${this.config.code}`)) {
|
||||
const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
|
||||
if (borderElement) {
|
||||
borderElement.style.opacity = (this.config.border.opacity / 100)
|
||||
let gradientDirection = ''
|
||||
switch (this.config.border.gradientDirection) {
|
||||
case 'to right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
|
||||
break
|
||||
case 'to bottom left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top right':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to top left':
|
||||
gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
default:
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
}
|
||||
// 在目标元素内的第一个位置插入 <defs> 和其中的内容
|
||||
borderElement.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
`<defs>
|
||||
<linearGradient id="${this.borderBgId}" ${gradientDirection}>
|
||||
<stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
|
||||
<stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
|
||||
</linearGradient>
|
||||
</defs>`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
109
frontend/packages/BorderComponents/GcBorder12/setting.js
Normal file
109
frontend/packages/BorderComponents/GcBorder12/setting.js
Normal file
@@ -0,0 +1,109 @@
|
||||
|
||||
const type = 'GcBorder12'
|
||||
|
||||
const name = '边框12'
|
||||
|
||||
const padding =[16,16,16,16]
|
||||
|
||||
const isTitle=false
|
||||
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
// 背景色
|
||||
|
||||
{
|
||||
label:'边框主颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderMainColor',
|
||||
optionField: 'borderMainColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#83bff6',
|
||||
},
|
||||
{
|
||||
label:'边框副颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderSecondaryColor',
|
||||
optionField: 'borderSecondaryColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#00CED1',
|
||||
},
|
||||
{
|
||||
label:'背景色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'gradientColor',
|
||||
optionField: 'gradientColor', // 对应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'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
setting,
|
||||
type,
|
||||
name,
|
||||
isTitle,
|
||||
padding
|
||||
}
|
||||
BIN
frontend/packages/BorderComponents/GcBorder13/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder13/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
170
frontend/packages/BorderComponents/GcBorder13/index.vue
Normal file
170
frontend/packages/BorderComponents/GcBorder13/index.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<dv-border-box-13
|
||||
:id="'dataV' + config.code"
|
||||
:background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
|
||||
:color='borderColor'
|
||||
:key="updateKey"
|
||||
>
|
||||
<div class="element"
|
||||
v-if="config.border.isTitle"
|
||||
:style="`
|
||||
color:${color};
|
||||
font-size:${config.border.fontSize}px;
|
||||
line-height:${config.border.titleHeight}px;
|
||||
height:${config.border.titleHeight};
|
||||
padding:0 0 0 20px`"
|
||||
>
|
||||
{{config.title}}</div>
|
||||
</dv-border-box-13>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||
import DvBorderBox13 from '@jiaminghi/data-view/lib/components/borderBox13/src/main.vue'
|
||||
import '@jiaminghi/data-view/lib/components/borderBox13/src/main.css'
|
||||
export default {
|
||||
name: 'Border13',
|
||||
components: {
|
||||
DvBorderBox13
|
||||
},
|
||||
mixins: [refreshComponentMixin],
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
borderBgId: `borderBg${this.config.code}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
borderColor () {
|
||||
return this.config.border.borderMainColor ||
|
||||
this.config.border.borderSecondaryColor
|
||||
? [
|
||||
this.config.border.borderMainColor,
|
||||
this.config.border.borderSecondaryColor
|
||||
]
|
||||
: null
|
||||
},
|
||||
color () {
|
||||
return this.config.border.fontColor ? this.config.border.fontColor
|
||||
: '#fff'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
updateKey:{
|
||||
handler (val) {
|
||||
this.$nextTick(()=>{
|
||||
this.changeColor()
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'config.border.gradientColor':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.gradientDirection':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.opacity':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeColor()
|
||||
},
|
||||
methods: {
|
||||
changeColor(){
|
||||
if(!this.config.border.opacity){
|
||||
this.config.border.opacity=100
|
||||
}
|
||||
if(!this.config.border.gradientColor) return
|
||||
if (document.querySelector(`#dataV${this.config.code}`)) {
|
||||
const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
|
||||
if (borderElement) {
|
||||
borderElement.style.opacity = (this.config.border.opacity / 100)
|
||||
let gradientDirection = ''
|
||||
switch (this.config.border.gradientDirection) {
|
||||
case 'to right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
|
||||
break
|
||||
case 'to bottom left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top right':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to top left':
|
||||
gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
default:
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
}
|
||||
// 在目标元素内的第一个位置插入 <defs> 和其中的内容
|
||||
borderElement.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
`<defs>
|
||||
<linearGradient id="${this.borderBgId}" ${gradientDirection}>
|
||||
<stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
|
||||
<stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
|
||||
</linearGradient>
|
||||
</defs>`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
108
frontend/packages/BorderComponents/GcBorder13/setting.js
Normal file
108
frontend/packages/BorderComponents/GcBorder13/setting.js
Normal file
@@ -0,0 +1,108 @@
|
||||
|
||||
const type = 'GcBorder13'
|
||||
|
||||
const name = '边框13'
|
||||
|
||||
const padding =[16,16,16,16]
|
||||
|
||||
const isTitle=false
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
// 背景色
|
||||
|
||||
{
|
||||
label:'边框主颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderMainColor',
|
||||
optionField: 'borderMainColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#83bff6',
|
||||
},
|
||||
{
|
||||
label:'边框副颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderSecondaryColor',
|
||||
optionField: 'borderSecondaryColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#00CED1',
|
||||
},
|
||||
{
|
||||
label:'背景色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'gradientColor',
|
||||
optionField: 'gradientColor', // 对应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'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
setting,
|
||||
type,
|
||||
name,
|
||||
isTitle,
|
||||
padding
|
||||
}
|
||||
BIN
frontend/packages/BorderComponents/GcBorder14/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder14/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
134
frontend/packages/BorderComponents/GcBorder14/index.vue
Normal file
134
frontend/packages/BorderComponents/GcBorder14/index.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<div
|
||||
:key="updateKey"
|
||||
class="custom-border-box"
|
||||
:style="`
|
||||
border-top-left-radius: ${radiusLeftTop}px;
|
||||
border-top-right-radius: ${radiusRightTop}px;
|
||||
border-bottom-left-radius: ${radiusLeftBottom}px;
|
||||
border-bottom-right-radius: ${radiusRightBottom}px;
|
||||
border: ${width}px solid ${color};
|
||||
opacity: ${opacity/ 100};
|
||||
background-image: linear-gradient(${gradientDirection}, ${
|
||||
gradientColor0 ? gradientColor0 : gradientColor1
|
||||
} , ${gradientColor1 ? gradientColor1 : gradientColor0})
|
||||
`"
|
||||
>
|
||||
<div
|
||||
v-if="config.border.isTitle"
|
||||
class="element"
|
||||
:style="`
|
||||
color:${fontColor};
|
||||
font-size:${config.border.fontSize}px;
|
||||
line-height:${config.border.titleHeight}px;
|
||||
height:${config.border.titleHeight};
|
||||
padding:0 0 0 20px`"
|
||||
>
|
||||
{{ config.title }}
|
||||
</div>
|
||||
</div>
|
||||
</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: {
|
||||
fontColor () {
|
||||
return this.config.border.fontColor ? this.config.border.fontColor
|
||||
: '#fff'
|
||||
},
|
||||
color () {
|
||||
return this.config.border.borderColor || ''
|
||||
},
|
||||
width () {
|
||||
return this.config.border.borderWidth || 0
|
||||
},
|
||||
gradientColor0 () {
|
||||
if (this.config.border.gradientColor&&this.config.border.gradientColor.length) {
|
||||
return this.config.border.gradientColor[0] || this.config.border.gradientColor[1]
|
||||
} else {
|
||||
return 'transparent'
|
||||
}
|
||||
},
|
||||
gradientColor1 () {
|
||||
if (this.config.border.gradientColor&&this.config.border.gradientColor.length) {
|
||||
return this.config.border.gradientColor[1] || this.config.border.gradientColor[0]
|
||||
} else {
|
||||
return 'transparent'
|
||||
}
|
||||
},
|
||||
radiusLeftTop () {
|
||||
return this.config.border.radiusLeftTop || 2
|
||||
},
|
||||
radiusRightTop () {
|
||||
return this.config.border.radiusRightTop || 2
|
||||
},
|
||||
radiusLeftBottom () {
|
||||
return this.config.border.radiusLeftBottom || 2
|
||||
},
|
||||
radiusRightBottom () {
|
||||
return this.config.border.radiusRightBottom || 2
|
||||
},
|
||||
gradientDirection () {
|
||||
return this.config.border.gradientDirection || 'to right'
|
||||
},
|
||||
opacity () {
|
||||
return this.config.border.opacity || 100
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 0px 0px !important;
|
||||
box-sizing: border-box;
|
||||
.custom-border-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
159
frontend/packages/BorderComponents/GcBorder14/setting.js
Normal file
159
frontend/packages/BorderComponents/GcBorder14/setting.js
Normal file
@@ -0,0 +1,159 @@
|
||||
|
||||
const type = 'GcBorder14'
|
||||
|
||||
const name = '边框14'
|
||||
|
||||
const padding =[16,16,16,16]
|
||||
|
||||
const isTitle=false
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
// 背景色
|
||||
|
||||
{
|
||||
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: 2,
|
||||
},
|
||||
{
|
||||
label:'背景色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'gradientColor',
|
||||
optionField: 'gradientColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: ['#83bff6','#188df0'],
|
||||
},
|
||||
{
|
||||
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
|
||||
}
|
||||
BIN
frontend/packages/BorderComponents/GcBorder15/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder15/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
164
frontend/packages/BorderComponents/GcBorder15/index.vue
Normal file
164
frontend/packages/BorderComponents/GcBorder15/index.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<div
|
||||
:key="updateKey"
|
||||
class="custom-border-box"
|
||||
:style="`
|
||||
border-top-left-radius: ${radiusLeftTop}px;
|
||||
border-top-right-radius: ${radiusRightTop}px;
|
||||
border-bottom-left-radius: ${radiusLeftBottom}px;
|
||||
border-bottom-right-radius: ${radiusRightBottom}px;
|
||||
border: ${width}px solid ${color};
|
||||
background-image: linear-gradient(${gradientDirection}, ${
|
||||
gradientColor0 ? gradientColor0 : gradientColor1
|
||||
} , ${gradientColor1 ? gradientColor1 : gradientColor0})
|
||||
`"
|
||||
>
|
||||
<div class="element"
|
||||
v-if="config.border.isTitle"
|
||||
:style="`
|
||||
line-height:${config.border.titleHeight}px;
|
||||
height:${config.border.titleHeight};
|
||||
border-bottom:${fontBottomColor?3:0}px solid ${fontBottomColor};
|
||||
background-image: linear-gradient(${gradientDirection}, ${
|
||||
fontGradientColor0 ? fontGradientColor0 : fontGradientColor1
|
||||
} , ${fontGradientColor1 ? fontGradientColor1 : fontGradientColor0})
|
||||
`"
|
||||
>
|
||||
<span
|
||||
:style="`
|
||||
width:100%;
|
||||
padding:0 0 0 20px;
|
||||
color:${fontColor};
|
||||
font-size:${config.border.fontSize}px;
|
||||
border-left:${fontLeftWidth}px solid ${fontLeftColor};
|
||||
`"
|
||||
>
|
||||
{{config.title}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</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: {
|
||||
fontColor () {
|
||||
return this.config.border.fontColor ? this.config.border.fontColor
|
||||
: '#fff'
|
||||
},
|
||||
color () {
|
||||
return this.config.border.borderColor || ''
|
||||
},
|
||||
width () {
|
||||
return this.config.border.borderWidth!=null?this.config.border.borderWidth : 0
|
||||
},
|
||||
gradientColor0 () {
|
||||
if(this.config.border.gradientColor&&this.config.border.gradientColor.length){
|
||||
return this.config.border.gradientColor[0] ||this.config.border.gradientColor[1]
|
||||
}else{
|
||||
return 'transparent'
|
||||
}
|
||||
},
|
||||
gradientColor1 () {
|
||||
if(this.config.border.gradientColor&&this.config.border.gradientColor.length){
|
||||
return this.config.border.gradientColor[1] ||this.config.border.gradientColor[0]
|
||||
}else{
|
||||
return 'transparent'
|
||||
}
|
||||
},
|
||||
fontGradientColor0 () {
|
||||
if(this.config.border.fontGradientColor&&this.config.border.fontGradientColor.length){
|
||||
return this.config.border.fontGradientColor[0] ||this.config.border.fontGradientColor[1]
|
||||
}else{
|
||||
return 'transparent'
|
||||
}
|
||||
},
|
||||
fontGradientColor1 () {
|
||||
if(this.config.border.fontGradientColor&&this.config.border.fontGradientColor.length){
|
||||
return this.config.border.fontGradientColor[1]||this.config.border.fontGradientColor[0]
|
||||
}else{
|
||||
return 'transparent'
|
||||
}
|
||||
},
|
||||
fontLeftColor(){
|
||||
return this.config.border.fontLeftColor || ''
|
||||
},
|
||||
fontBottomColor(){
|
||||
return this.config.border.fontBottomColor || ''
|
||||
},
|
||||
fontLeftWidth(){
|
||||
return (this.config.border.fontLeftWidth || String(this.config.border.fontLeftWidth) === '0') ? this.config.border.fontLeftWidth : 6
|
||||
},
|
||||
radiusLeftTop () {
|
||||
return this.config.border.radiusLeftTop || 2
|
||||
},
|
||||
radiusRightTop () {
|
||||
return this.config.border.radiusRightTop || 2
|
||||
},
|
||||
radiusLeftBottom () {
|
||||
return this.config.border.radiusLeftBottom || 2
|
||||
},
|
||||
radiusRightBottom () {
|
||||
return this.config.border.radiusRightBottom || 2
|
||||
},
|
||||
gradientDirection () {
|
||||
return this.config.border.gradientDirection || 'to right'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 0px 0px !important;
|
||||
box-sizing: border-box;
|
||||
.custom-border-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
255
frontend/packages/BorderComponents/GcBorder15/setting.js
Normal file
255
frontend/packages/BorderComponents/GcBorder15/setting.js
Normal file
@@ -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
|
||||
}
|
||||
BIN
frontend/packages/BorderComponents/GcBorder16/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder16/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
115
frontend/packages/BorderComponents/GcBorder16/index.vue
Normal file
115
frontend/packages/BorderComponents/GcBorder16/index.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%;object-fit: cover"
|
||||
class="bs-design-wrap"
|
||||
:id="'border'+ config.code"
|
||||
:style="{
|
||||
opacity: opacity,
|
||||
borderImageSlice:`${borderImageArray[0]} ${borderImageArray[1]} ${borderImageArray[2]} ${borderImageArray[3]} fill`,
|
||||
borderImageWidth:`${borderImageArray[0]}px ${borderImageArray[1]}px ${borderImageArray[2]}px ${borderImageArray[3]}px`,
|
||||
}"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||
import { getFileUrl } from 'data-room-ui/js/utils/file'
|
||||
export default {
|
||||
name: 'Border14',
|
||||
components: {
|
||||
},
|
||||
mixins: [refreshComponentMixin],
|
||||
props: {
|
||||
id:{
|
||||
type: String,
|
||||
default: 'name'
|
||||
},
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
borderWidth: 0,
|
||||
borderHeight: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
url () {
|
||||
return require('data-room-ui/BorderComponents/GcBorder16/component.png')
|
||||
},
|
||||
opacity () {
|
||||
return this.config.border.opacity || 100
|
||||
},
|
||||
borderImageArray () {
|
||||
const borderArr = this.config.border.borderArray ? this.config.border.borderArray
|
||||
: [10, 10, 10, 10]
|
||||
const arr = []
|
||||
arr[0] = borderArr[0] * this.borderHeight / 100
|
||||
arr[1] = borderArr[1] * this.borderWidth / 100
|
||||
arr[2] = borderArr[2] * this.borderHeight / 100
|
||||
arr[3] = borderArr[3] * this.borderWidth / 100
|
||||
return arr
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'config.border.imgUrl': {
|
||||
handler (val) {
|
||||
if(val){
|
||||
let ur=val
|
||||
if(!val.startsWith('http')){
|
||||
ur = getFileUrl(val)
|
||||
}
|
||||
const a =document.getElementById('border'+ this.config.code)
|
||||
a.style['border-image-source']=`url(${ur})`
|
||||
}else{
|
||||
const a =document.getElementById('border'+ this.config.code)
|
||||
a.style['border-image-source']=`url(${this.url})`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 获取边框大小
|
||||
const element = document.querySelector('.bs-design-wrap')
|
||||
this.borderWidth = element.offsetWidth
|
||||
this.borderHeight = element.offsetHeight
|
||||
if(this.config.border.imgUrl){
|
||||
let ur=this.config.border.imgUrl
|
||||
if(!this.config.border.imgUrl.startsWith('http')){
|
||||
ur = getFileUrl(this.config.border.imgUrl)
|
||||
}
|
||||
const a =document.getElementById('border'+ this.config.code)
|
||||
a.style['border-image-source']=`url(${ur})`
|
||||
}else{
|
||||
const a =document.getElementById('border'+ this.config.code)
|
||||
a.style['border-image-source']=`url(${this.url})`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
// border-image-source:url(component.png);
|
||||
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>
|
||||
70
frontend/packages/BorderComponents/GcBorder16/setting.js
Normal file
70
frontend/packages/BorderComponents/GcBorder16/setting.js
Normal file
@@ -0,0 +1,70 @@
|
||||
|
||||
const type = 'GcBorder16'
|
||||
|
||||
const name = '边框16'
|
||||
|
||||
const isTitle = false
|
||||
|
||||
const padding =[0,0,0,0]
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
|
||||
// 背景色
|
||||
// {
|
||||
// label:'背景色二',
|
||||
// // 设置组件类型， select / input / colorPicker
|
||||
// type: 'colorPicker',
|
||||
// // 字段
|
||||
// field: 'gradientColor1',
|
||||
// optionField: 'gradientColor1', // 对应options中的字段
|
||||
// // 是否多选
|
||||
// multiple: false,
|
||||
// // 绑定的值
|
||||
// value: '',
|
||||
// },
|
||||
{
|
||||
label:'选择背景图',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'background',
|
||||
// 字段
|
||||
field: 'imgUrl',
|
||||
optionField: 'imgUrl', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '',
|
||||
},
|
||||
{
|
||||
label: '不透明度',
|
||||
// 设置组件类型
|
||||
type: 'slider',
|
||||
// 字段
|
||||
field: 'opacity',
|
||||
// 对应options中的字段
|
||||
optionField: 'opacity.fillOpacity',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label:'点九图背景切割',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'move',
|
||||
// 字段
|
||||
field: 'borderArray',
|
||||
optionField: 'borderArray', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: [10, 10, 10, 10]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
setting,
|
||||
type,
|
||||
name,
|
||||
isTitle,
|
||||
padding
|
||||
}
|
||||
BIN
frontend/packages/BorderComponents/GcBorder2/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder2/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
170
frontend/packages/BorderComponents/GcBorder2/index.vue
Normal file
170
frontend/packages/BorderComponents/GcBorder2/index.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<dv-border-box-2
|
||||
:id="'dataV' + config.code"
|
||||
:background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
|
||||
:color='borderColor'
|
||||
:key="updateKey"
|
||||
>
|
||||
<div class="element"
|
||||
v-if="config.border.isTitle"
|
||||
:style="`
|
||||
color:${color};
|
||||
font-size:${config.border.fontSize}px;
|
||||
line-height:${config.border.titleHeight}px;
|
||||
height:${config.border.titleHeight};
|
||||
padding:0 0 0 20px`"
|
||||
>
|
||||
{{config.title}}</div>
|
||||
</dv-border-box-2>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||
import DvBorderBox2 from '@jiaminghi/data-view/lib/components/borderBox2/src/main.vue'
|
||||
import '@jiaminghi/data-view/lib/components/borderBox2/src/main.css'
|
||||
export default {
|
||||
name: 'Border2',
|
||||
components: {
|
||||
DvBorderBox2
|
||||
},
|
||||
mixins: [refreshComponentMixin],
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
borderBgId: `borderBg${this.config.code}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
borderColor () {
|
||||
return this.config.border.borderMainColor ||
|
||||
this.config.border.borderSecondaryColor
|
||||
? [
|
||||
this.config.border.borderMainColor,
|
||||
this.config.border.borderSecondaryColor
|
||||
]
|
||||
: null
|
||||
},
|
||||
color () {
|
||||
return this.config.border.fontColor ? this.config.border.fontColor
|
||||
: '#fff'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
updateKey:{
|
||||
handler (val) {
|
||||
this.$nextTick(()=>{
|
||||
this.changeColor()
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'config.border.gradientColor':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.gradientDirection':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.opacity':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeColor()
|
||||
},
|
||||
methods: {
|
||||
changeColor(){
|
||||
if(!this.config.border.opacity){
|
||||
this.config.border.opacity=100
|
||||
}
|
||||
if(!this.config.border.gradientColor) return
|
||||
if (document.querySelector(`#dataV${this.config.code}`)) {
|
||||
const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
|
||||
if (borderElement) {
|
||||
borderElement.style.opacity = (this.config.border.opacity / 100)
|
||||
let gradientDirection = ''
|
||||
switch (this.config.border.gradientDirection) {
|
||||
case 'to right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
|
||||
break
|
||||
case 'to bottom left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top right':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to top left':
|
||||
gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
default:
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
}
|
||||
// 在目标元素内的第一个位置插入 <defs> 和其中的内容
|
||||
borderElement.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
`<defs>
|
||||
<linearGradient id="${this.borderBgId}" ${gradientDirection}>
|
||||
<stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
|
||||
<stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
|
||||
</linearGradient>
|
||||
</defs>`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
107
frontend/packages/BorderComponents/GcBorder2/setting.js
Normal file
107
frontend/packages/BorderComponents/GcBorder2/setting.js
Normal file
@@ -0,0 +1,107 @@
|
||||
|
||||
const type = 'GcBorder2'
|
||||
|
||||
const name = '边框2'
|
||||
|
||||
const padding =[16,16,16,16]
|
||||
|
||||
const isTitle=false
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
|
||||
{
|
||||
label:'边框主颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderMainColor',
|
||||
optionField: 'borderMainColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#83bff6',
|
||||
},
|
||||
{
|
||||
label:'边框副颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderSecondaryColor',
|
||||
optionField: 'borderSecondaryColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#00CED1',
|
||||
},
|
||||
{
|
||||
label:'背景色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'gradientColor',
|
||||
optionField: 'gradientColor', // 对应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'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
setting,
|
||||
type,
|
||||
name,
|
||||
isTitle,
|
||||
padding
|
||||
}
|
||||
BIN
frontend/packages/BorderComponents/GcBorder3/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder3/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
170
frontend/packages/BorderComponents/GcBorder3/index.vue
Normal file
170
frontend/packages/BorderComponents/GcBorder3/index.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<dv-border-box-3
|
||||
:id="'dataV' + config.code"
|
||||
:background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
|
||||
:color='borderColor'
|
||||
:key="updateKey"
|
||||
>
|
||||
<div class="element"
|
||||
v-if="config.border.isTitle"
|
||||
:style="`
|
||||
color:${color};
|
||||
font-size:${config.border.fontSize}px;
|
||||
line-height:${config.border.titleHeight}px;
|
||||
height:${config.border.titleHeight};
|
||||
padding:0 0 0 20px`"
|
||||
>
|
||||
{{config.title}}</div>
|
||||
</dv-border-box-3>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||
import DvBorderBox3 from '@jiaminghi/data-view/lib/components/borderBox3/src/main.vue'
|
||||
import '@jiaminghi/data-view/lib/components/borderBox3/src/main.css'
|
||||
export default {
|
||||
name: 'Border2',
|
||||
components: {
|
||||
DvBorderBox3
|
||||
},
|
||||
mixins: [refreshComponentMixin],
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
borderBgId: `borderBg${this.config.code}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
borderColor () {
|
||||
return this.config.border.borderMainColor ||
|
||||
this.config.border.borderSecondaryColor
|
||||
? [
|
||||
this.config.border.borderMainColor,
|
||||
this.config.border.borderSecondaryColor
|
||||
]
|
||||
: null
|
||||
},
|
||||
color () {
|
||||
return this.config.border.fontColor ? this.config.border.fontColor
|
||||
: '#fff'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
updateKey:{
|
||||
handler (val) {
|
||||
this.$nextTick(()=>{
|
||||
this.changeColor()
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'config.border.gradientColor':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.gradientDirection':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.opacity':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeColor()
|
||||
},
|
||||
methods: {
|
||||
changeColor(){
|
||||
if(!this.config.border.opacity){
|
||||
this.config.border.opacity=100
|
||||
}
|
||||
if(!this.config.border.gradientColor) return
|
||||
if (document.querySelector(`#dataV${this.config.code}`)) {
|
||||
const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
|
||||
if (borderElement) {
|
||||
borderElement.style.opacity = (this.config.border.opacity / 100)
|
||||
let gradientDirection = ''
|
||||
switch (this.config.border.gradientDirection) {
|
||||
case 'to right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
|
||||
break
|
||||
case 'to bottom left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top right':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to top left':
|
||||
gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
default:
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
}
|
||||
// 在目标元素内的第一个位置插入 <defs> 和其中的内容
|
||||
borderElement.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
`<defs>
|
||||
<linearGradient id="${this.borderBgId}" ${gradientDirection}>
|
||||
<stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
|
||||
<stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
|
||||
</linearGradient>
|
||||
</defs>`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
108
frontend/packages/BorderComponents/GcBorder3/setting.js
Normal file
108
frontend/packages/BorderComponents/GcBorder3/setting.js
Normal file
@@ -0,0 +1,108 @@
|
||||
|
||||
const type = 'GcBorder3'
|
||||
|
||||
const name = '边框3'
|
||||
|
||||
const padding =[16,16,16,16]
|
||||
|
||||
const isTitle=false
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
// 背景色
|
||||
|
||||
{
|
||||
label:'边框主颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderMainColor',
|
||||
optionField: 'borderMainColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#83bff6',
|
||||
},
|
||||
{
|
||||
label:'边框副颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderSecondaryColor',
|
||||
optionField: 'borderSecondaryColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#00CED1',
|
||||
},
|
||||
{
|
||||
label:'背景色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'gradientColor',
|
||||
optionField: 'gradientColor', // 对应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'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
setting,
|
||||
type,
|
||||
name,
|
||||
isTitle,
|
||||
padding
|
||||
}
|
||||
BIN
frontend/packages/BorderComponents/GcBorder4/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder4/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
171
frontend/packages/BorderComponents/GcBorder4/index.vue
Normal file
171
frontend/packages/BorderComponents/GcBorder4/index.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<dv-border-box-4
|
||||
:id="'dataV' + config.code"
|
||||
:background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
|
||||
:color='borderColor'
|
||||
:key="updateKey"
|
||||
:reverse='config.border.reverse'
|
||||
>
|
||||
<div class="element"
|
||||
v-if="config.border.isTitle"
|
||||
:style="`
|
||||
color:${color};
|
||||
font-size:${config.border.fontSize}px;
|
||||
line-height:${config.border.titleHeight}px;
|
||||
height:${config.border.titleHeight};
|
||||
padding:0 0 0 20px`"
|
||||
>
|
||||
{{config.title}}</div>
|
||||
</dv-border-box-4>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||
import DvBorderBox4 from '@jiaminghi/data-view/lib/components/borderBox4/src/main.vue'
|
||||
import '@jiaminghi/data-view/lib/components/borderBox4/src/main.css'
|
||||
export default {
|
||||
name: 'Border4',
|
||||
components: {
|
||||
DvBorderBox4
|
||||
},
|
||||
mixins: [refreshComponentMixin],
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
borderBgId: `borderBg${this.config.code}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
borderColor () {
|
||||
return this.config.border.borderMainColor ||
|
||||
this.config.border.borderSecondaryColor
|
||||
? [
|
||||
this.config.border.borderMainColor,
|
||||
this.config.border.borderSecondaryColor
|
||||
]
|
||||
: null
|
||||
},
|
||||
color () {
|
||||
return this.config.border.fontColor ? this.config.border.fontColor
|
||||
: '#fff'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
updateKey:{
|
||||
handler (val) {
|
||||
this.$nextTick(()=>{
|
||||
this.changeColor()
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'config.border.gradientColor':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.gradientDirection':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.opacity':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeColor()
|
||||
},
|
||||
methods: {
|
||||
changeColor(){
|
||||
if(!this.config.border.opacity){
|
||||
this.config.border.opacity=100
|
||||
}
|
||||
if(!this.config.border.gradientColor) return
|
||||
if (document.querySelector(`#dataV${this.config.code}`)) {
|
||||
const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
|
||||
if (borderElement) {
|
||||
borderElement.style.opacity = (this.config.border.opacity / 100)
|
||||
let gradientDirection = ''
|
||||
switch (this.config.border.gradientDirection) {
|
||||
case 'to right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
|
||||
break
|
||||
case 'to bottom left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top right':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to top left':
|
||||
gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
default:
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
}
|
||||
// 在目标元素内的第一个位置插入 <defs> 和其中的内容
|
||||
borderElement.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
`<defs>
|
||||
<linearGradient id="${this.borderBgId}" ${gradientDirection}>
|
||||
<stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
|
||||
<stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
|
||||
</linearGradient>
|
||||
</defs>`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
119
frontend/packages/BorderComponents/GcBorder4/setting.js
Normal file
119
frontend/packages/BorderComponents/GcBorder4/setting.js
Normal file
@@ -0,0 +1,119 @@
|
||||
|
||||
const type = 'GcBorder4'
|
||||
|
||||
const isTitle=false
|
||||
|
||||
const name = '边框4'
|
||||
const padding =[16,16,16,16]
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
// 背景色
|
||||
|
||||
{
|
||||
label:'边框主颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderMainColor',
|
||||
optionField: 'borderMainColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#83bff6',
|
||||
},
|
||||
{
|
||||
label:'边框副颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderSecondaryColor',
|
||||
optionField: 'borderSecondaryColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#00CED1',
|
||||
},
|
||||
{
|
||||
label:'背景色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'gradientColor',
|
||||
optionField: 'gradientColor', // 对应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: 'switch',
|
||||
// 字段
|
||||
field: 'reverse',
|
||||
optionField: 'reverse', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: false,
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
setting,
|
||||
type,
|
||||
name,
|
||||
isTitle,
|
||||
padding
|
||||
}
|
||||
BIN
frontend/packages/BorderComponents/GcBorder5/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder5/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
171
frontend/packages/BorderComponents/GcBorder5/index.vue
Normal file
171
frontend/packages/BorderComponents/GcBorder5/index.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<dv-border-box-5
|
||||
:id="'dataV' + config.code"
|
||||
:background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
|
||||
:color='borderColor'
|
||||
:key="updateKey"
|
||||
:reverse='config.border.reverse'
|
||||
>
|
||||
<div class="element"
|
||||
v-if="config.border.isTitle"
|
||||
:style="`
|
||||
color:${color};
|
||||
font-size:${config.border.fontSize}px;
|
||||
line-height:${config.border.titleHeight}px;
|
||||
height:${config.border.titleHeight};
|
||||
padding:0 0 0 20px`"
|
||||
>
|
||||
{{config.title}}</div>
|
||||
</dv-border-box-5>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||
import DvBorderBox5 from '@jiaminghi/data-view/lib/components/borderBox5/src/main.vue'
|
||||
import '@jiaminghi/data-view/lib/components/borderBox5/src/main.css'
|
||||
export default {
|
||||
name: 'Border5',
|
||||
components: {
|
||||
DvBorderBox5
|
||||
},
|
||||
mixins: [refreshComponentMixin],
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
borderBgId: `borderBg${this.config.code}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
borderColor () {
|
||||
return this.config.border.borderMainColor ||
|
||||
this.config.border.borderSecondaryColor
|
||||
? [
|
||||
this.config.border.borderMainColor,
|
||||
this.config.border.borderSecondaryColor
|
||||
]
|
||||
: null
|
||||
},
|
||||
color () {
|
||||
return this.config.border.fontColor ? this.config.border.fontColor
|
||||
: '#fff'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
updateKey:{
|
||||
handler (val) {
|
||||
this.$nextTick(()=>{
|
||||
this.changeColor()
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'config.border.gradientColor':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.gradientDirection':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.opacity':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeColor()
|
||||
},
|
||||
methods: {
|
||||
changeColor(){
|
||||
if(!this.config.border.opacity){
|
||||
this.config.border.opacity=100
|
||||
}
|
||||
if(!this.config.border.gradientColor) return
|
||||
if (document.querySelector(`#dataV${this.config.code}`)) {
|
||||
const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
|
||||
if (borderElement) {
|
||||
borderElement.style.opacity = (this.config.border.opacity / 100)
|
||||
let gradientDirection = ''
|
||||
switch (this.config.border.gradientDirection) {
|
||||
case 'to right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
|
||||
break
|
||||
case 'to bottom left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top right':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to top left':
|
||||
gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
default:
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
}
|
||||
// 在目标元素内的第一个位置插入 <defs> 和其中的内容
|
||||
borderElement.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
`<defs>
|
||||
<linearGradient id="${this.borderBgId}" ${gradientDirection}>
|
||||
<stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
|
||||
<stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
|
||||
</linearGradient>
|
||||
</defs>`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
119
frontend/packages/BorderComponents/GcBorder5/setting.js
Normal file
119
frontend/packages/BorderComponents/GcBorder5/setting.js
Normal file
@@ -0,0 +1,119 @@
|
||||
|
||||
const type = 'GcBorder5'
|
||||
|
||||
const name = '边框5'
|
||||
|
||||
const padding =[16,16,16,16]
|
||||
|
||||
const isTitle=false
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
// 背景色
|
||||
|
||||
{
|
||||
label:'边框主颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderMainColor',
|
||||
optionField: 'borderMainColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#83bff6',
|
||||
},
|
||||
{
|
||||
label:'边框副颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderSecondaryColor',
|
||||
optionField: 'borderSecondaryColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#00CED1',
|
||||
},
|
||||
{
|
||||
label:'背景色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'gradientColor',
|
||||
optionField: 'gradientColor', // 对应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: 'switch',
|
||||
// 字段
|
||||
field: 'reverse',
|
||||
optionField: 'reverse', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: false,
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
setting,
|
||||
type,
|
||||
name,
|
||||
isTitle,
|
||||
padding
|
||||
}
|
||||
BIN
frontend/packages/BorderComponents/GcBorder6/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder6/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
170
frontend/packages/BorderComponents/GcBorder6/index.vue
Normal file
170
frontend/packages/BorderComponents/GcBorder6/index.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<dv-border-box-6
|
||||
:id="'dataV' + config.code"
|
||||
:background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
|
||||
:color='borderColor'
|
||||
:key="updateKey"
|
||||
>
|
||||
<div class="element"
|
||||
v-if="config.border.isTitle"
|
||||
:style="`
|
||||
color:${color};
|
||||
font-size:${config.border.fontSize}px;
|
||||
line-height:${config.border.titleHeight}px;
|
||||
height:${config.border.titleHeight};
|
||||
padding:0 0 0 20px`"
|
||||
>
|
||||
{{config.title}}</div>
|
||||
</dv-border-box-6>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||
import DvBorderBox6 from '@jiaminghi/data-view/lib/components/borderBox6/src/main.vue'
|
||||
import '@jiaminghi/data-view/lib/components/borderBox6/src/main.css'
|
||||
export default {
|
||||
name: 'Border6',
|
||||
components: {
|
||||
DvBorderBox6
|
||||
},
|
||||
mixins: [refreshComponentMixin],
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
borderBgId: `borderBg${this.config.code}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
borderColor () {
|
||||
return this.config.border.borderMainColor ||
|
||||
this.config.border.borderSecondaryColor
|
||||
? [
|
||||
this.config.border.borderMainColor,
|
||||
this.config.border.borderSecondaryColor
|
||||
]
|
||||
: null
|
||||
},
|
||||
color () {
|
||||
return this.config.border.fontColor ? this.config.border.fontColor
|
||||
: '#fff'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
updateKey:{
|
||||
handler (val) {
|
||||
this.$nextTick(()=>{
|
||||
this.changeColor()
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'config.border.gradientColor':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.gradientDirection':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.opacity':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeColor()
|
||||
},
|
||||
methods: {
|
||||
changeColor(){
|
||||
if(!this.config.border.opacity){
|
||||
this.config.border.opacity=100
|
||||
}
|
||||
if(!this.config.border.gradientColor) return
|
||||
if (document.querySelector(`#dataV${this.config.code}`)) {
|
||||
const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
|
||||
if (borderElement) {
|
||||
borderElement.style.opacity = (this.config.border.opacity / 100)
|
||||
let gradientDirection = ''
|
||||
switch (this.config.border.gradientDirection) {
|
||||
case 'to right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
|
||||
break
|
||||
case 'to bottom left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top right':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to top left':
|
||||
gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
default:
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
}
|
||||
// 在目标元素内的第一个位置插入 <defs> 和其中的内容
|
||||
borderElement.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
`<defs>
|
||||
<linearGradient id="${this.borderBgId}" ${gradientDirection}>
|
||||
<stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
|
||||
<stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
|
||||
</linearGradient>
|
||||
</defs>`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
107
frontend/packages/BorderComponents/GcBorder6/setting.js
Normal file
107
frontend/packages/BorderComponents/GcBorder6/setting.js
Normal file
@@ -0,0 +1,107 @@
|
||||
|
||||
const type = 'GcBorder6'
|
||||
|
||||
const name = '边框6'
|
||||
|
||||
const padding =[16,16,16,16]
|
||||
|
||||
const isTitle=false
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
// 背景色
|
||||
|
||||
{
|
||||
label:'边框主颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderMainColor',
|
||||
optionField: 'borderMainColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#83bff6',
|
||||
},
|
||||
{
|
||||
label:'边框副颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderSecondaryColor',
|
||||
optionField: 'borderSecondaryColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#00CED1',
|
||||
},
|
||||
{
|
||||
label:'背景色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'gradientColor',
|
||||
optionField: 'gradientColor', // 对应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'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
setting,
|
||||
type,
|
||||
name,
|
||||
isTitle,
|
||||
padding
|
||||
}
|
||||
BIN
frontend/packages/BorderComponents/GcBorder7/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder7/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
136
frontend/packages/BorderComponents/GcBorder7/index.vue
Normal file
136
frontend/packages/BorderComponents/GcBorder7/index.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<dv-border-box-7
|
||||
:id="'dataV' + config.code"
|
||||
:key="updateKey"
|
||||
:background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
|
||||
:color="borderColor"
|
||||
>
|
||||
<div
|
||||
v-if="config.border.isTitle"
|
||||
class="element"
|
||||
:style="`
|
||||
color:${color};
|
||||
font-size:${config.border.fontSize}px;
|
||||
line-height:${config.border.titleHeight}px;
|
||||
height:${config.border.titleHeight};
|
||||
padding:0 0 0 20px`"
|
||||
>
|
||||
{{ config.title }}
|
||||
</div>
|
||||
</dv-border-box-7>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||
import DvBorderBox7 from '@jiaminghi/data-view/lib/components/borderBox7/src/main.vue'
|
||||
import '@jiaminghi/data-view/lib/components/borderBox7/src/main.css'
|
||||
export default {
|
||||
name: 'Border7',
|
||||
components: {
|
||||
DvBorderBox7
|
||||
},
|
||||
mixins: [refreshComponentMixin],
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
borderBgId: `borderBg${this.config.code}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
borderColor () {
|
||||
return this.config.border.borderMainColor ||
|
||||
this.config.border.borderSecondaryColor
|
||||
? [
|
||||
this.config.border.borderMainColor,
|
||||
this.config.border.borderSecondaryColor
|
||||
]
|
||||
: null
|
||||
},
|
||||
color () {
|
||||
return this.config.border.fontColor ? this.config.border.fontColor
|
||||
: '#fff'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
updateKey: {
|
||||
handler (val) {
|
||||
this.$nextTick(() => {
|
||||
this.changeColor()
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'config.border.gradientColor': {
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
'config.border.gradientDirection': {
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
'config.border.opacity': {
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeColor()
|
||||
},
|
||||
methods: {
|
||||
changeColor () {
|
||||
if (!this.config.border.opacity) {
|
||||
this.config.border.opacity = 100
|
||||
}
|
||||
if (!this.config.border.gradientColor) return
|
||||
if (document.querySelector(`#dataV${this.config.code}`)) {
|
||||
const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
|
||||
if (borderElement) {
|
||||
borderElement.style.opacity = (this.config.border.opacity / 100)
|
||||
borderElement.style.background = `linear-gradient(${this.config.border.gradientDirection},${this.config.border.gradientColor[0] ? this.config.border.gradientColor[0] : this.config.border.gradientColor[1]}, ${this.config.border.gradientColor[1] ? this.config.border.gradientColor[1] : this.config.border.gradientColor[0]})`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
107
frontend/packages/BorderComponents/GcBorder7/setting.js
Normal file
107
frontend/packages/BorderComponents/GcBorder7/setting.js
Normal file
@@ -0,0 +1,107 @@
|
||||
|
||||
const type = 'GcBorder7'
|
||||
|
||||
const name = '边框7'
|
||||
|
||||
const padding =[16,16,16,16]
|
||||
|
||||
const isTitle=false
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
// 背景色
|
||||
|
||||
{
|
||||
label:'边框主颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderMainColor',
|
||||
optionField: 'borderMainColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#83bff6',
|
||||
},
|
||||
{
|
||||
label:'边框副颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderSecondaryColor',
|
||||
optionField: 'borderSecondaryColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#00CED1',
|
||||
},
|
||||
{
|
||||
label:'背景色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'gradientColor',
|
||||
optionField: 'gradientColor', // 对应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'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
setting,
|
||||
type,
|
||||
name,
|
||||
isTitle,
|
||||
padding
|
||||
}
|
||||
BIN
frontend/packages/BorderComponents/GcBorder8/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder8/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 614 B |
172
frontend/packages/BorderComponents/GcBorder8/index.vue
Normal file
172
frontend/packages/BorderComponents/GcBorder8/index.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<dv-border-box-8
|
||||
:id="'dataV' + config.code"
|
||||
:background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
|
||||
:color='borderColor'
|
||||
:key="updateKey"
|
||||
:reverse='config.border.reverse'
|
||||
:dur="config.border.dur"
|
||||
>
|
||||
<div class="element"
|
||||
v-if="config.border.isTitle"
|
||||
:style="`
|
||||
color:${color};
|
||||
font-size:${config.border.fontSize}px;
|
||||
line-height:${config.border.titleHeight}px;
|
||||
height:${config.border.titleHeight};
|
||||
padding:0 0 0 20px`"
|
||||
>
|
||||
{{config.title}}</div>
|
||||
</dv-border-box-8>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||
import DvBorderBox8 from '@jiaminghi/data-view/lib/components/borderBox8/src/main.vue'
|
||||
import '@jiaminghi/data-view/lib/components/borderBox8/src/main.css'
|
||||
export default {
|
||||
name: 'Border8',
|
||||
components: {
|
||||
DvBorderBox8
|
||||
},
|
||||
mixins: [refreshComponentMixin],
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
borderBgId: `borderBg${this.config.code}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
borderColor () {
|
||||
return this.config.border.borderMainColor ||
|
||||
this.config.border.borderSecondaryColor
|
||||
? [
|
||||
this.config.border.borderMainColor,
|
||||
this.config.border.borderSecondaryColor
|
||||
]
|
||||
: null
|
||||
},
|
||||
color () {
|
||||
return this.config.border.fontColor ? this.config.border.fontColor
|
||||
: '#fff'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
updateKey:{
|
||||
handler (val) {
|
||||
this.$nextTick(()=>{
|
||||
this.changeColor()
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'config.border.gradientColor':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.gradientDirection':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.opacity':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeColor()
|
||||
},
|
||||
methods: {
|
||||
changeColor(){
|
||||
if(!this.config.border.opacity){
|
||||
this.config.border.opacity=100
|
||||
}
|
||||
if(!this.config.border.gradientColor) return
|
||||
if (document.querySelector(`#dataV${this.config.code}`)) {
|
||||
const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
|
||||
if (borderElement) {
|
||||
borderElement.style.opacity = (this.config.border.opacity / 100)
|
||||
let gradientDirection = ''
|
||||
switch (this.config.border.gradientDirection) {
|
||||
case 'to right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
|
||||
break
|
||||
case 'to bottom left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top right':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to top left':
|
||||
gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
default:
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
}
|
||||
// 在目标元素内的第一个位置插入 <defs> 和其中的内容
|
||||
borderElement.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
`<defs>
|
||||
<linearGradient id="${this.borderBgId}" ${gradientDirection}>
|
||||
<stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
|
||||
<stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
|
||||
</linearGradient>
|
||||
</defs>`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
133
frontend/packages/BorderComponents/GcBorder8/setting.js
Normal file
133
frontend/packages/BorderComponents/GcBorder8/setting.js
Normal file
@@ -0,0 +1,133 @@
|
||||
|
||||
const type = 'GcBorder8'
|
||||
|
||||
const name = '边框8'
|
||||
|
||||
const padding =[16,16,16,16]
|
||||
|
||||
const isTitle=false
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
// 背景色
|
||||
|
||||
{
|
||||
label:'边框主颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderMainColor',
|
||||
optionField: 'borderMainColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#83bff6',
|
||||
},
|
||||
{
|
||||
label:'边框副颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderSecondaryColor',
|
||||
optionField: 'borderSecondaryColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#00CED1',
|
||||
},
|
||||
{
|
||||
label:'背景色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'gradientColor',
|
||||
optionField: 'gradientColor', // 对应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: 'switch',
|
||||
// 字段
|
||||
field: 'reverse',
|
||||
optionField: 'reverse', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
label:'单次动画时长',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'inputNumber',
|
||||
// 字段
|
||||
field: 'dur',
|
||||
optionField: 'dur', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: 3,
|
||||
},
|
||||
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
setting,
|
||||
type,
|
||||
name,
|
||||
isTitle,
|
||||
padding
|
||||
}
|
||||
BIN
frontend/packages/BorderComponents/GcBorder9/component.png
Normal file
BIN
frontend/packages/BorderComponents/GcBorder9/component.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
170
frontend/packages/BorderComponents/GcBorder9/index.vue
Normal file
170
frontend/packages/BorderComponents/GcBorder9/index.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div
|
||||
style="width: 100%;height: 100%"
|
||||
class="bs-design-wrap"
|
||||
>
|
||||
<dv-border-box-9
|
||||
:id="'dataV' + config.code"
|
||||
:background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
|
||||
:color='borderColor'
|
||||
:key="updateKey"
|
||||
>
|
||||
<div class="element"
|
||||
v-if="config.border.isTitle"
|
||||
:style="`
|
||||
color:${color};
|
||||
font-size:${config.border.fontSize}px;
|
||||
line-height:${config.border.titleHeight}px;
|
||||
height:${config.border.titleHeight};
|
||||
padding:0 0 0 20px`"
|
||||
>
|
||||
{{config.title}}</div>
|
||||
</dv-border-box-9>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
|
||||
import DvBorderBox9 from '@jiaminghi/data-view/lib/components/borderBox9/src/main.vue'
|
||||
import '@jiaminghi/data-view/lib/components/borderBox9/src/main.css'
|
||||
export default {
|
||||
name: 'Border9',
|
||||
components: {
|
||||
DvBorderBox9
|
||||
},
|
||||
mixins: [refreshComponentMixin],
|
||||
props: {
|
||||
// 卡片的属性
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
borderBgId: `borderBg${this.config.code}`
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
borderColor () {
|
||||
return this.config.border.borderMainColor ||
|
||||
this.config.border.borderSecondaryColor
|
||||
? [
|
||||
this.config.border.borderMainColor||this.config.border.borderSecondaryColor,
|
||||
this.config.border.borderSecondaryColor||this.config.border.borderMainColor
|
||||
]
|
||||
: null
|
||||
},
|
||||
color () {
|
||||
return this.config.border.fontColor ? this.config.border.fontColor
|
||||
: '#fff'
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
updateKey:{
|
||||
handler (val) {
|
||||
this.$nextTick(()=>{
|
||||
this.changeColor()
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
'config.border.gradientColor':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.gradientDirection':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
},
|
||||
'config.border.opacity':{
|
||||
handler (val) {
|
||||
this.changeColor()
|
||||
},immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.changeColor()
|
||||
},
|
||||
methods: {
|
||||
changeColor(){
|
||||
if(!this.config.border.opacity){
|
||||
this.config.border.opacity=100
|
||||
}
|
||||
if(!this.config.border.gradientColor) return
|
||||
if (document.querySelector(`#dataV${this.config.code}`)) {
|
||||
const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
|
||||
if (borderElement) {
|
||||
borderElement.style.opacity = (this.config.border.opacity / 100)
|
||||
let gradientDirection = ''
|
||||
switch (this.config.border.gradientDirection) {
|
||||
case 'to right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
case 'to bottom right':
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="100%"'
|
||||
break
|
||||
case 'to bottom left':
|
||||
gradientDirection = 'x1="100%" y1="0%" x2="0%" y2="100%"'
|
||||
break
|
||||
case 'to top right':
|
||||
gradientDirection = 'x1="0%" y1="100%" x2="100%" y2="0%"'
|
||||
break
|
||||
case 'to top left':
|
||||
gradientDirection = 'x1="100%" y1="100%" x2="0%" y2="0%"'
|
||||
break
|
||||
default:
|
||||
gradientDirection = 'x1="0%" y1="0%" x2="100%" y2="0%"'
|
||||
break
|
||||
}
|
||||
// 在目标元素内的第一个位置插入 <defs> 和其中的内容
|
||||
borderElement.insertAdjacentHTML(
|
||||
'afterbegin',
|
||||
`<defs>
|
||||
<linearGradient id="${this.borderBgId}" ${gradientDirection}>
|
||||
<stop offset="0%" stop-color="${this.config.border.gradientColor[0]?this.config.border.gradientColor[0]:this.config.border.gradientColor[1]}" />
|
||||
<stop offset="100%" stop-color="${this.config.border.gradientColor[1]?this.config.border.gradientColor[1]:this.config.border.gradientColor[0]}" />
|
||||
</linearGradient>
|
||||
</defs>`
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bs-design-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// padding: 0 16px;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/*滚动条样式*/
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar-thumb {
|
||||
background: #dddddd !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
107
frontend/packages/BorderComponents/GcBorder9/setting.js
Normal file
107
frontend/packages/BorderComponents/GcBorder9/setting.js
Normal file
@@ -0,0 +1,107 @@
|
||||
|
||||
const type = 'GcBorder9'
|
||||
|
||||
const name = '边框9'
|
||||
|
||||
const padding =[16,16,16,16]
|
||||
|
||||
const isTitle=false
|
||||
// 右侧配置项
|
||||
const setting = [
|
||||
// 背景色
|
||||
|
||||
{
|
||||
label:'边框主颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderMainColor',
|
||||
optionField: 'borderMainColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#83bff6',
|
||||
},
|
||||
{
|
||||
label:'边框副颜色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'colorPicker',
|
||||
// 字段
|
||||
field: 'borderSecondaryColor',
|
||||
optionField: 'borderSecondaryColor', // 对应options中的字段
|
||||
// 是否多选
|
||||
multiple: false,
|
||||
// 绑定的值
|
||||
value: '#00CED1',
|
||||
},
|
||||
{
|
||||
label:'背景色',
|
||||
// 设置组件类型， select / input / colorPicker
|
||||
type: 'gradual',
|
||||
// 字段
|
||||
field: 'gradientColor',
|
||||
optionField: 'gradientColor', // 对应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'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
export default {
|
||||
setting,
|
||||
type,
|
||||
name,
|
||||
isTitle,
|
||||
padding
|
||||
}
|
||||
16
frontend/packages/BorderComponents/bordersList.js
Normal file
16
frontend/packages/BorderComponents/bordersList.js
Normal file
@@ -0,0 +1,16 @@
|
||||
// 得到边框组件的远程列表
|
||||
// import _ from 'lodash'
|
||||
|
||||
const files = require.context('../BorderComponents/', true, /index.vue$/)
|
||||
const borderComponents = []
|
||||
|
||||
files.keys().forEach(key => {
|
||||
const title = key.split('/')[1].replace('.vue', '')
|
||||
const img = require(`../BorderComponents/${title}/component.png`)
|
||||
borderComponents.push({
|
||||
title:title,
|
||||
img,
|
||||
})
|
||||
})
|
||||
// 抛出边框组件
|
||||
export default borderComponents
|
||||
18
frontend/packages/BorderComponents/settingList.js
Normal file
18
frontend/packages/BorderComponents/settingList.js
Normal file
@@ -0,0 +1,18 @@
|
||||
const files = require.context('../BorderComponents/', true, /setting.js$/)
|
||||
const plotList = []
|
||||
// 获取plot配置
|
||||
files.keys().forEach((key) => {
|
||||
// ./折线图/基础折线图.js
|
||||
// 取到 "基础折线图"
|
||||
const config = files(key).default
|
||||
plotList.push({
|
||||
type: config.type,
|
||||
setting: config.setting,
|
||||
name: config.name,
|
||||
isTitle: config.isTitle,
|
||||
padding: config.padding
|
||||
})
|
||||
})
|
||||
export default plotList
|
||||
|
||||
|
||||
Reference in New Issue
Block a user