feat:新增border13

This commit is contained in:
MTrun 2022-03-27 01:18:22 +08:00
parent d7185522c0
commit 7d5f607b92
6 changed files with 134 additions and 1 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View 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
}

View File

@ -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>

View 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
}

View 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>

View File

@ -10,6 +10,7 @@ import { Border09Config } from './Border09/index'
import { Border10Config } from './Border10/index'
import { Border11Config } from './Border11/index'
import { Border12Config } from './Border12/index'
import { Border13Config } from './Border13/index'
export default [
Border01Config,
@ -23,5 +24,6 @@ export default [
Border09Config,
Border10Config,
Border11Config,
Border12Config
Border12Config,
Border13Config
]