blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-04-06 03:58:04 +08:00
Code Issues Projects Releases Wiki Activity

feat: 新增边框背景色修改

Browse Source
This commit is contained in:
MTrun 2022-03-26 22:52:03 +08:00
parent 7d744bb621
commit 06f80a4645
18 changed files with 109 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/packages/components/Decorates/Borders/Border01/config.ts
View File

@ -5,7 +5,8 @@ import cloneDeep from 'lodash/cloneDeep'
export const option = {
dur: 0.5,
colors: ['#4fd2dd', '#235fa7']
colors: ['#4fd2dd', '#235fa7'],
backgroundColor: '#00000000'
}
export default class Config extends publicConfig implements CreateComponentType {

12
src/packages/components/Decorates/Borders/Border01/config.vue
View File

@ -34,6 +34,18 @@
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="背景" :expanded="true">
<SettingItemBox name="颜色">
<SettingItem>
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.backgroundColor"
></n-color-picker>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">

4
src/packages/components/Decorates/Borders/Border01/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="go-border-box">
<svg :width="w" :height="h">
<polygon fill="transparent" :points="`10, 27 10, ${h - 27} 13, ${h - 24} 13, ${h - 21} 24, ${h - 11}
<polygon :fill="backgroundColor" :points="`10, 27 10, ${h - 27} 13, ${h - 24} 13, ${h - 21} 24, ${h - 11}
38, ${h - 11} 41, ${h - 8} 73, ${h - 8} 75, ${h - 10} 81, ${h - 10}
85, ${h - 6} ${w - 85}, ${h - 6} ${w - 81}, ${h - 10} ${w - 75}, ${h - 10}
${w - 73}, ${h - 8} ${w - 41}, ${h - 8} ${w - 38}, ${h - 11}
@ -72,7 +72,7 @@ const props = defineProps({
const borders = ['left-top', 'right-top', 'left-bottom', 'right-bottom']
const { w, h } = toRefs(props.chartConfig.attr)
const { colors, dur } = toRefs(props.chartConfig.option)
const { colors, dur, backgroundColor } = toRefs(props.chartConfig.option)
</script>
<style lang="scss" scoped>

3
src/packages/components/Decorates/Borders/Border02/config.ts
View File

@ -4,7 +4,8 @@ import { Border02Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
colors: ['#6586ec', '#2cf7fe']
colors: ['#6586ec', '#2cf7fe'],
backgroundColor: '#00000000'
}
export default class Config extends publicConfig

12
src/packages/components/Decorates/Borders/Border02/config.vue
View File

@ -22,6 +22,18 @@
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="背景" :expanded="true">
<SettingItemBox name="颜色">
<SettingItem>
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.backgroundColor"
></n-color-picker>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">

4
src/packages/components/Decorates/Borders/Border02/index.vue
View File

@ -2,7 +2,7 @@
<div class="go-border-box">
<svg :width="w" :height="h">
<path
fill="transparent"
:fill="backgroundColor"
:stroke="colors[0]"
:d="`
M 5 20 L 5 10 L 12 3 L 60 3 L 68 10
@ -48,7 +48,7 @@ const props = defineProps({
})
const { w, h } = toRefs(props.chartConfig.attr)
const { colors } = toRefs(props.chartConfig.option)
const { colors, backgroundColor } = toRefs(props.chartConfig.option)
</script>
<style lang="scss" scoped>

3
src/packages/components/Decorates/Borders/Border03/config.ts
View File

@ -4,7 +4,8 @@ import { Border03Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
colors: ['#6586ec', '#2cf7fe']
colors: ['#6586ec', '#2cf7fe'],
backgroundColor: '#00000000'
}
export default class Config extends publicConfig implements CreateComponentType {

12
src/packages/components/Decorates/Borders/Border03/config.vue
View File

@ -22,6 +22,18 @@
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="背景" :expanded="true">
<SettingItemBox name="颜色">
<SettingItem>
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.backgroundColor"
></n-color-picker>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">

4
src/packages/components/Decorates/Borders/Border03/index.vue
View File

@ -38,7 +38,7 @@
<path
v-if="w && h"
fill="transparent"
:fill="backgroundColor"
stroke-width="2"
:stroke="colors[0]"
:d="`
@ -112,7 +112,7 @@ const props = defineProps({
const filterId = `border-box-03-filterId-${getUUID()}`
const { w, h } = toRefs(props.chartConfig.attr)
const { colors } = toRefs(props.chartConfig.option)
const { colors, backgroundColor } = toRefs(props.chartConfig.option)
</script>

3
src/packages/components/Decorates/Borders/Border04/config.ts
View File

@ -9,7 +9,8 @@ export const option = {
borderTitleHeight: 32,
borderTitleSize: 18,
borderTitleColor: '#fff',
colors: ['#8aaafb', '#1f33a2']
colors: ['#8aaafb', '#1f33a2'],
backgroundColor: '#00000000'
}
export default class Config extends publicConfig implements CreateComponentType {

12
src/packages/components/Decorates/Borders/Border04/config.vue
View File

@ -22,6 +22,18 @@
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="背景" :expanded="true">
<SettingItemBox name="颜色">
<SettingItem>
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.backgroundColor"
></n-color-picker>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">

14
src/packages/components/Decorates/Borders/Border04/index.vue
View File

@ -25,7 +25,7 @@
</defs>
<polygon
fill="transparent"
:fill="backgroundColor"
:points="`
20, 32 ${w * 0.5 - borderTitleWidth / 2}, 32 ${w * 0.5 - borderTitleWidth / 2 + 20}, 53
${w * 0.5 + borderTitleWidth / 2 - 20}, 53 ${w * 0.5 + borderTitleWidth / 2}, 32
@ -35,7 +35,7 @@
/>
<polyline
fill="transparent"
:fill="backgroundColor"
:stroke="colors[0]"
:filter="`url(#${filterId})`"
:points="`
@ -236,7 +236,15 @@ const props = defineProps({
const filterId = `border-box-04-filterId-${getUUID()}`
const { w, h } = toRefs(props.chartConfig.attr)
const { colors, borderTitle, borderTitleColor, borderTitleSize, borderTitleHeight, borderTitleWidth} = toRefs(props.chartConfig.option)
const {
colors,
borderTitle,
borderTitleColor,
borderTitleSize,
borderTitleHeight,
borderTitleWidth,
backgroundColor
} = toRefs(props.chartConfig.option)
</script>
<style lang="scss" scoped>

3
src/packages/components/Decorates/Borders/Border05/config.ts
View File

@ -4,7 +4,8 @@ import { Border05Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
colors: ['#1d48c4', '#d3e1f8']
colors: ['#1d48c4', '#d3e1f8'],
backgroundColor: '#00000000'
}
export default class Config extends publicConfig implements CreateComponentType {

12
src/packages/components/Decorates/Borders/Border05/config.vue
View File

@ -22,6 +22,18 @@
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="背景" :expanded="true">
<SettingItemBox name="颜色">
<SettingItem>
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.backgroundColor"
></n-color-picker>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">

4
src/packages/components/Decorates/Borders/Border05/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="go-border-box" :style="`box-shadow: inset 0 0 25px 3px ${colors[0]}`">
<svg :width="w" :height="h">
<polygon fill="transparent" :points="`
<polygon :fill="backgroundColor" :points="`
4, 0 ${w - 4}, 0 ${w}, 4 ${w}, ${h - 4} ${w - 4}, ${h}
4, ${h} 0, ${h - 4} 0, 4
`"/>
@ -35,7 +35,7 @@ const props = defineProps({
const border = ['left-top', 'right-top', 'left-bottom', 'right-bottom']
const { w, h } = toRefs(props.chartConfig.attr)
const { colors } = toRefs(props.chartConfig.option)
const { colors, backgroundColor } = toRefs(props.chartConfig.option)
</script>
<style lang="scss" scoped>

3
src/packages/components/Decorates/Borders/Border06/config.ts
View File

@ -4,7 +4,8 @@ import { Border06Config } from './index'
import cloneDeep from 'lodash/cloneDeep'
export const option = {
colors: ['#3140ad', '#1089ff']
colors: ['#3140ad', '#1089ff'],
backgroundColor: '#00000000'
}
export default class Config extends publicConfig implements CreateComponentType {

12
src/packages/components/Decorates/Borders/Border06/config.vue
View File

@ -22,6 +22,18 @@
</SettingItem>
</SettingItemBox>
</CollapseItem>
<CollapseItem name="背景" :expanded="true">
<SettingItemBox name="颜色">
<SettingItem>
<n-color-picker
size="small"
:modes="['hex']"
v-model:value="optionData.backgroundColor"
></n-color-picker>
</SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
<script setup lang="ts">

8
src/packages/components/Decorates/Borders/Border06/index.vue
View File

@ -1,7 +1,11 @@
<template>
<div
class="go-border-box"
:style="`box-shadow: inset 0 0 40px ${colors[0]}; border: 1px solid ${colors[1]};`"
:style="`
box-shadow: inset 0 0 40px ${colors[0]};
border: 1px solid ${colors[1]};
background-color: ${backgroundColor};
`"
>
<svg :width="w" :height="h">
<polyline
@ -61,7 +65,7 @@ const props = defineProps({
})
const { w, h } = toRefs(props.chartConfig.attr)
const { colors } = toRefs(props.chartConfig.option)
const { colors, backgroundColor } = toRefs(props.chartConfig.option)
</script>
<style lang="scss" scoped>