mirror of
https://gitee.com/dromara/go-view.git
synced 2025-02-24 00:02:51 +08:00
feat: 新增边框7
This commit is contained in:
MTrun
parent
09e402357a
commit
e146018f7d
BIN
src/assets/images/chart/decorates/border07.png
Normal file
BIN
src/assets/images/chart/decorates/border07.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
15
src/packages/components/Decorates/Borders/Border07/config.ts
Normal file
15
src/packages/components/Decorates/Borders/Border07/config.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Border07Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
colors: ['#11eefd', '#0078d2'],
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
public key = Border07Config.key
|
||||
public chartConfig = cloneDeep(Border07Config)
|
||||
public option = option
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<CollapseItem name="边框" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.colors"
|
||||
:key="index"
|
||||
>
|
||||
<SettingItem name="颜色">
|
||||
<n-color-picker
|
||||
size="small"
|
||||
:modes="['hex']"
|
||||
v-model:value="optionData.colors[index]"
|
||||
></n-color-picker>
|
||||
</SettingItem>
|
||||
<SettingItem>
|
||||
<n-button
|
||||
size="small"
|
||||
@click="optionData.colors[index] = option.colors[index]"
|
||||
>
|
||||
恢复默认
|
||||
</n-button>
|
||||
</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">
|
||||
import { PropType } from 'vue'
|
||||
import {
|
||||
CollapseItem,
|
||||
SettingItemBox,
|
||||
SettingItem
|
||||
} from '@/components/ChartItemSetting/index'
|
||||
import { option } from './config'
|
||||
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
14
src/packages/components/Decorates/Borders/Border07/index.ts
Normal file
14
src/packages/components/Decorates/Borders/Border07/index.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import image from '@/assets/images/chart/decorates/border07.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Border07Config: ConfigType = {
|
||||
key: 'Border07',
|
||||
chartKey: 'VBorder07',
|
||||
conKey: 'VCBorder07',
|
||||
title: '边框-07',
|
||||
category: ChatCategoryEnum.BORDER,
|
||||
categoryName: ChatCategoryEnumName.BORDER,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
}
|
||||
143
src/packages/components/Decorates/Borders/Border07/index.vue
Normal file
143
src/packages/components/Decorates/Borders/Border07/index.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div class="go-border-box">
|
||||
<svg :width="w" :height="h">
|
||||
<defs>
|
||||
<linearGradient :id="filterId" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<animate
|
||||
attributeName="x1"
|
||||
values="0%;100%;0%"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
|
||||
<animate
|
||||
attributeName="x2"
|
||||
values="100%;0%;100%"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
|
||||
<stop offset="0%" :stop-color="colors[0]">
|
||||
<animate
|
||||
attributeName="stop-color"
|
||||
:values="`${colors[0]};${colors[1]};${colors[0]}`"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</stop>
|
||||
<stop offset="100%" :stop-color="colors[1]">
|
||||
<animate
|
||||
attributeName="stop-color"
|
||||
:values="`${colors[1]};${colors[0]};${colors[1]}`"
|
||||
dur="10s"
|
||||
begin="0s"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
|
||||
<mask :id="maskId">
|
||||
<polyline
|
||||
stroke="#fff"
|
||||
stroke-width="3"
|
||||
fill="transparent"
|
||||
:points="`8, ${h * 0.4} 8, 3, ${w * 0.4 + 7}, 3`"
|
||||
/>
|
||||
<polyline
|
||||
fill="#fff"
|
||||
:points="
|
||||
`8, ${h * 0.15} 8, 3, ${w * 0.1 + 7}, 3
|
||||
${w * 0.1}, 8 14, 8 14, ${h * 0.15 - 7}
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
stroke="#fff"
|
||||
stroke-width="3"
|
||||
fill="transparent"
|
||||
:points="`${w * 0.5}, 3 ${w - 3}, 3, ${w - 3}, ${h * 0.25}`"
|
||||
/>
|
||||
<polyline
|
||||
fill="#fff"
|
||||
:points="`
|
||||
${w * 0.52}, 3 ${w * 0.58}, 3
|
||||
${w * 0.58 - 7}, 9 ${w * 0.52 + 7}, 9
|
||||
`"
|
||||
/>
|
||||
<polyline
|
||||
fill="#fff"
|
||||
:points="`
|
||||
${w * 0.9}, 3 ${w - 3}, 3 ${w - 3}, ${h * 0.1}
|
||||
${w - 9}, ${h * 0.1 - 7} ${w - 9}, 9 ${w * 0.9 + 7}, 9
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
stroke="#fff"
|
||||
stroke-width="3"
|
||||
fill="transparent"
|
||||
:points="`8, ${h * 0.5} 8, ${h - 3} ${w * 0.3 + 7}, ${h - 3}`"
|
||||
/>
|
||||
<polyline
|
||||
fill="#fff"
|
||||
:points="`
|
||||
8, ${h * 0.55} 8, ${h * 0.7}
|
||||
2, ${h * 0.7 - 7} 2, ${h * 0.55 + 7}
|
||||
`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
stroke="#fff"
|
||||
stroke-width="3"
|
||||
fill="transparent"
|
||||
:points="`${w * 0.35}, ${h - 3} ${w - 3}, ${h - 3} ${w - 3}, ${h * 0.35}`"
|
||||
/>
|
||||
<polyline
|
||||
fill="#fff"
|
||||
:points="`
|
||||
${w * 0.92}, ${h - 3} ${w - 3}, ${h - 3} ${w - 3}, ${h * 0.8}
|
||||
${w - 9}, ${h * 0.8 + 7} ${w - 9}, ${h - 9} ${w * 0.92 + 7}, ${h - 9}
|
||||
`"
|
||||
/>
|
||||
</mask>
|
||||
</defs>
|
||||
|
||||
<polygon :fill="backgroundColor" :points="`
|
||||
15, 9 ${w * 0.1 + 1}, 9 ${w * 0.1 + 4}, 6 ${w * 0.52 + 2}, 6
|
||||
${w * 0.52 + 6}, 10 ${w * 0.58 - 7}, 10 ${w * 0.58 - 2}, 6
|
||||
${w * 0.9 + 2}, 6 ${w * 0.9 + 6}, 10 ${w - 10}, 10 ${w - 10}, ${h * 0.1 - 6}
|
||||
${w - 6}, ${h * 0.1 - 1} ${w - 6}, ${h * 0.8 + 1} ${w - 10}, ${h * 0.8 + 6}
|
||||
${w - 10}, ${h - 10} ${w * 0.92 + 7}, ${h - 10} ${w * 0.92 + 2}, ${h - 6}
|
||||
11, ${h - 6} 11, ${h * 0.15 - 2} 15, ${h * 0.15 - 7}
|
||||
`"/>
|
||||
|
||||
<rect x="0" y="0" :width="w" :height="h" :fill="`url(#${filterId})`" :mask="`url(#${maskId})`"/>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { getUUID } from '@/utils'
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const filterId = `border-box-07-filter-${getUUID()}`
|
||||
const maskId = `border-box-07-mask-${getUUID()}`
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const { colors, backgroundColor } = toRefs(props.chartConfig.option)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('border-box') {
|
||||
}
|
||||
</style>
|
||||
@ -4,6 +4,7 @@ import { Border03Config } from './Border03/index'
|
||||
import { Border04Config } from './Border04/index'
|
||||
import { Border05Config } from './Border05/index'
|
||||
import { Border06Config } from './Border06/index'
|
||||
import { Border07Config } from './Border07/index'
|
||||
|
||||
export default [
|
||||
Border01Config,
|
||||
@ -11,5 +12,6 @@ export default [
|
||||
Border03Config,
|
||||
Border04Config,
|
||||
Border05Config,
|
||||
Border06Config
|
||||
Border06Config,
|
||||
Border07Config
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user