mirror of
https://gitee.com/dromara/go-view.git
synced 2024-12-06 05:39:01 +08:00
feat: 新增边框8
This commit is contained in:
parent
91220d31a7
commit
7db9bc85f8
BIN
src/assets/images/chart/decorates/border08.png
Normal file
BIN
src/assets/images/chart/decorates/border08.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.9 KiB |
@ -28,6 +28,7 @@
|
|||||||
<SettingItem>
|
<SettingItem>
|
||||||
<n-input-number
|
<n-input-number
|
||||||
v-model:value="optionData.dur"
|
v-model:value="optionData.dur"
|
||||||
|
size="small"
|
||||||
:step="0.5"
|
:step="0.5"
|
||||||
:min="0.5"
|
:min="0.5"
|
||||||
></n-input-number>
|
></n-input-number>
|
||||||
@ -39,9 +40,9 @@
|
|||||||
<SettingItemBox name="颜色">
|
<SettingItemBox name="颜色">
|
||||||
<SettingItem>
|
<SettingItem>
|
||||||
<n-color-picker
|
<n-color-picker
|
||||||
|
v-model:value="optionData.backgroundColor"
|
||||||
size="small"
|
size="small"
|
||||||
:modes="['hex']"
|
:modes="['hex']"
|
||||||
v-model:value="optionData.backgroundColor"
|
|
||||||
></n-color-picker>
|
></n-color-picker>
|
||||||
</SettingItem>
|
</SettingItem>
|
||||||
</SettingItemBox>
|
</SettingItemBox>
|
||||||
|
17
src/packages/components/Decorates/Borders/Border08/config.ts
Normal file
17
src/packages/components/Decorates/Borders/Border08/config.ts
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { publicConfig } from '@/packages/public'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { Border08Config } from './index'
|
||||||
|
import cloneDeep from 'lodash/cloneDeep'
|
||||||
|
|
||||||
|
export const option = {
|
||||||
|
colors: ['#235fa7', '#4fd2dd'],
|
||||||
|
dur: 3,
|
||||||
|
reverse: false,
|
||||||
|
backgroundColor: '#00000000'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class Config extends publicConfig implements CreateComponentType {
|
||||||
|
public key = Border08Config.key
|
||||||
|
public chartConfig = cloneDeep(Border08Config)
|
||||||
|
public option = option
|
||||||
|
}
|
@ -0,0 +1,73 @@
|
|||||||
|
<template>
|
||||||
|
<CollapseItem name="动画" :expanded="true">
|
||||||
|
<SettingItemBox name="设置">
|
||||||
|
<SettingItem name="速度">
|
||||||
|
<n-input-number
|
||||||
|
v-model:value="optionData.dur"
|
||||||
|
size="small"
|
||||||
|
:step="0.5"
|
||||||
|
:min="0.5"
|
||||||
|
></n-input-number>
|
||||||
|
</SettingItem>
|
||||||
|
<SettingItem>
|
||||||
|
<n-space>
|
||||||
|
<n-text>开启反向</n-text>
|
||||||
|
<n-switch size="small" v-model:value="optionData.reverse" />
|
||||||
|
</n-space>
|
||||||
|
</SettingItem>
|
||||||
|
</SettingItemBox>
|
||||||
|
</CollapseItem>
|
||||||
|
|
||||||
|
<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/Border08/index.ts
Normal file
14
src/packages/components/Decorates/Borders/Border08/index.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import image from '@/assets/images/chart/decorates/border08.png'
|
||||||
|
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||||
|
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||||
|
|
||||||
|
export const Border08Config: ConfigType = {
|
||||||
|
key: 'Border08',
|
||||||
|
chartKey: 'VBorder08',
|
||||||
|
conKey: 'VCBorder08',
|
||||||
|
title: '边框-08',
|
||||||
|
category: ChatCategoryEnum.BORDER,
|
||||||
|
categoryName: ChatCategoryEnumName.BORDER,
|
||||||
|
package: PackagesCategoryEnum.DECORATES,
|
||||||
|
image
|
||||||
|
}
|
83
src/packages/components/Decorates/Borders/Border08/index.vue
Normal file
83
src/packages/components/Decorates/Borders/Border08/index.vue
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
<template>
|
||||||
|
<div class="go-border-box">
|
||||||
|
<svg class="bv-border-svg-container" :width="w" :height="h">
|
||||||
|
<defs>
|
||||||
|
<path :id="path" :d="pathD" fill="transparent" />
|
||||||
|
<radialGradient :id="gradient" cx="50%" cy="50%" r="50%">
|
||||||
|
<stop offset="0%" stop-color="#fff" stop-opacity="1" />
|
||||||
|
<stop offset="100%" stop-color="#fff" stop-opacity="0" />
|
||||||
|
</radialGradient>
|
||||||
|
|
||||||
|
<mask :id="mask">
|
||||||
|
<circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
|
||||||
|
<animateMotion
|
||||||
|
:dur="`${dur}s`"
|
||||||
|
:path="pathD"
|
||||||
|
rotate="auto"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</circle>
|
||||||
|
</mask>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<polygon
|
||||||
|
:fill="backgroundColor"
|
||||||
|
:points="`5, 5 ${w - 5}, 5 ${w - 5} ${h - 5} 5, ${
|
||||||
|
h - 5
|
||||||
|
}`"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<use :stroke="colors[0]" stroke-width="1" :xlink:href="`#${path}`" />
|
||||||
|
|
||||||
|
<use
|
||||||
|
:stroke="colors[1]"
|
||||||
|
stroke-width="3"
|
||||||
|
:xlink:href="`#${path}`"
|
||||||
|
:mask="`url(#${mask})`"
|
||||||
|
>
|
||||||
|
<animate
|
||||||
|
attributeName="stroke-dasharray"
|
||||||
|
:from="`0, ${length}`"
|
||||||
|
:to="`${length}, 0`"
|
||||||
|
:dur="`${dur}s`"
|
||||||
|
repeatCount="indefinite"
|
||||||
|
/>
|
||||||
|
</use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { PropType, toRefs, computed } from 'vue'
|
||||||
|
import { CreateComponentType } from '@/packages/index.d'
|
||||||
|
import { getUUID } from '@/utils'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
chartConfig: {
|
||||||
|
type: Object as PropType<CreateComponentType>,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const path = `border-box-08-path-${getUUID()}`
|
||||||
|
const gradient = `border-box-08-gradient-${getUUID()}`
|
||||||
|
const mask = `border-box-08-mask-${getUUID()}`
|
||||||
|
|
||||||
|
const { w, h } = toRefs(props.chartConfig.attr)
|
||||||
|
const { colors, dur, backgroundColor, reverse } = toRefs(props.chartConfig.option)
|
||||||
|
|
||||||
|
const length = computed(() => {
|
||||||
|
return (w.value + h.value - 5) * 2
|
||||||
|
})
|
||||||
|
|
||||||
|
const pathD = computed(() => {
|
||||||
|
if (reverse.value) return `M 2.5, 2.5 L 2.5, ${h.value - 2.5} L ${w.value - 2.5}, ${h.value - 2.5} L ${w.value - 2.5}, 2.5 L 2.5, 2.5`
|
||||||
|
return `M2.5, 2.5 L${w.value - 2.5}, 2.5 L${w.value - 2.5}, ${h.value - 2.5} L2.5, ${h.value - 2.5} L2.5, 2.5`
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@include go('border-box') {
|
||||||
|
}
|
||||||
|
</style>
|
@ -5,6 +5,7 @@ import { Border04Config } from './Border04/index'
|
|||||||
import { Border05Config } from './Border05/index'
|
import { Border05Config } from './Border05/index'
|
||||||
import { Border06Config } from './Border06/index'
|
import { Border06Config } from './Border06/index'
|
||||||
import { Border07Config } from './Border07/index'
|
import { Border07Config } from './Border07/index'
|
||||||
|
import { Border08Config } from './Border08/index'
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
Border01Config,
|
Border01Config,
|
||||||
@ -13,5 +14,6 @@ export default [
|
|||||||
Border04Config,
|
Border04Config,
|
||||||
Border05Config,
|
Border05Config,
|
||||||
Border06Config,
|
Border06Config,
|
||||||
Border07Config
|
Border07Config,
|
||||||
|
Border08Config
|
||||||
]
|
]
|
||||||
|
Loading…
Reference in New Issue
Block a user