mirror of
https://gitee.com/dromara/go-view.git
synced 2025-04-06 03:58:04 +08:00
feat:新增border13
This commit is contained in:
parent
d7185522c0
commit
7d5f607b92
BIN
src/assets/images/chart/decorates/border13.png
Normal file
BIN
src/assets/images/chart/decorates/border13.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.9 KiB |
15
src/packages/components/Decorates/Borders/Border13/config.ts
Normal file
15
src/packages/components/Decorates/Borders/Border13/config.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { publicConfig } from '@/packages/public'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { Border13Config } from './index'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
|
||||||
|
export const option = {
|
||||||
|
colors: ['#2862b7', '#4b77b7'],
|
||||||
|
backgroundColor: '#00000000'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends publicConfig implements CreateComponentType {
|
||||||
|
public key = Border13Config.key
|
||||||
|
public chartConfig = cloneDeep(Border13Config)
|
||||||
|
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/Border13/index.ts
Normal file
14
src/packages/components/Decorates/Borders/Border13/index.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import image from '@/assets/images/chart/decorates/border13.png'
|
||||||
|
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const Border13Config: ConfigType = {
|
||||||
|
key: 'Border13',
|
||||||
|
chartKey: 'VBorder13',
|
||||||
|
conKey: 'VCBorder13',
|
||||||
|
title: '边框-13',
|
||||||
|
category: ChatCategoryEnum.BORDER,
|
||||||
|
categoryName: ChatCategoryEnumName.BORDER,
|
||||||
|
package: PackagesCategoryEnum.DECORATES,
|
||||||
|
image
|
||||||
|
}
|
48
src/packages/components/Decorates/Borders/Border13/index.vue
Normal file
48
src/packages/components/Decorates/Borders/Border13/index.vue
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<div class="go-border-box">
|
||||||
|
<svg :width="w" :height="h">
|
||||||
|
<polygon
|
||||||
|
:fill="backgroundColor"
|
||||||
|
:points="`
|
||||||
|
7, 7 ${w - 7}, 7 ${w - 7}, ${h - 7} 7, ${h - 7}
|
||||||
|
`"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<polyline
|
||||||
|
:stroke="colors[0]"
|
||||||
|
:points="`2, 2 ${w - 2} ,2 ${w - 2}, ${h - 2} 2, ${h - 2} 2, 2`"
|
||||||
|
/>
|
||||||
|
<polyline
|
||||||
|
:stroke="colors[1]"
|
||||||
|
:points="`6, 6 ${w - 6}, 6 ${w - 6}, ${h - 6} 6, ${h - 6} 6, 6`"
|
||||||
|
/>
|
||||||
|
<circle :fill="colors[0]" cx="11" cy="11" r="1" />
|
||||||
|
<circle :fill="colors[0]" :cx="w - 11" cy="11" r="1" />
|
||||||
|
<circle :fill="colors[0]" :cx="w - 11" :cy="h - 11" r="1" />
|
||||||
|
<circle :fill="colors[0]" cx="11" :cy="h - 11" r="1" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType, toRefs } from 'vue'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<CreateComponentType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const { w, h } = toRefs(props.chartConfig.attr)
|
||||||
|
const { colors, backgroundColor } = toRefs(props.chartConfig.option)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@include go('border-box') {
|
||||||
|
polyline {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -10,6 +10,7 @@ import { Border09Config } from './Border09/index'
|
|||||||
import { Border10Config } from './Border10/index'
|
import { Border10Config } from './Border10/index'
|
||||||
import { Border11Config } from './Border11/index'
|
import { Border11Config } from './Border11/index'
|
||||||
import { Border12Config } from './Border12/index'
|
import { Border12Config } from './Border12/index'
|
||||||
|
import { Border13Config } from './Border13/index'
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
Border01Config,
|
Border01Config,
|
||||||
@ -23,5 +24,6 @@ export default [
|
|||||||
Border09Config,
|
Border09Config,
|
||||||
Border10Config,
|
Border10Config,
|
||||||
Border11Config,
|
Border11Config,
|
||||||
Border12Config
|
Border12Config,
|
||||||
|
Border13Config
|
||||||
]
|
]
|
||||||
|
Loading…
x
Reference in New Issue
Block a user