初始化
This commit is contained in:
砂糖
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
|
||||
}
|
||||
Reference in New Issue
Block a user