mirror of
https://gitee.com/dromara/go-view.git
synced 2024-12-12 12:45:15 +08:00
feat: 新增装饰4 -5
This commit is contained in:
parent
a573cd2391
commit
aca79071b9
BIN
src/assets/images/chart/decorates/decorates04.png
Normal file
BIN
src/assets/images/chart/decorates/decorates04.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.8 KiB |
@ -24,7 +24,7 @@
|
||||
</SettingItemBox>
|
||||
</CollapseItem>
|
||||
|
||||
<CollapseItem name="装饰" :expanded="true">
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox
|
||||
:name="`颜色-${index + 1}`"
|
||||
v-for="(item, index) in optionData.colors"
|
||||
|
@ -0,0 +1,16 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Decorates04Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
colors: ['#1dc1f5', '#1dc1f5'],
|
||||
// 是否翻转
|
||||
reverse: false
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
public key = Decorates04Config.key
|
||||
public chartConfig = cloneDeep(Decorates04Config)
|
||||
public option = option
|
||||
}
|
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<CollapseItem name="样式" :expanded="true">
|
||||
<SettingItemBox name="方向">
|
||||
<SettingItem >
|
||||
<n-space>
|
||||
<n-switch v-model:value="optionData.reverse" size="small" />
|
||||
<n-text>开启反向</n-text>
|
||||
</n-space>
|
||||
</SettingItem>
|
||||
</SettingItemBox>
|
||||
|
||||
<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>
|
||||
</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>
|
@ -0,0 +1,14 @@
|
||||
import image from '@/assets/images/chart/decorates/decorates04.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Decorates04Config: ConfigType = {
|
||||
key: 'Decorates04',
|
||||
chartKey: 'VDecorates04',
|
||||
conKey: 'VCDecorates04',
|
||||
title: '装饰-04',
|
||||
category: ChatCategoryEnum.DECORATES,
|
||||
categoryName: ChatCategoryEnumName.DECORATES,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
}
|
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="go-border-04">
|
||||
<svg :width="w" :height="h">
|
||||
<polyline
|
||||
:stroke="colors[0]"
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
:points="`${xPos(0)}, 0 ${xPos(30)}, ${h / 2}`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
:stroke="colors[0]"
|
||||
stroke-width="2"
|
||||
fill="transparent"
|
||||
:points="`${xPos(20)}, 0 ${xPos(50)}, ${h / 2} ${xPos(w)}, ${
|
||||
h / 2
|
||||
}`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
:stroke="colors[1]"
|
||||
fill="transparent"
|
||||
stroke-width="3"
|
||||
:points="`${xPos(0)}, ${h - 3}, ${xPos(200)}, ${h - 3}`"
|
||||
/>
|
||||
</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, reverse } = toRefs(props.chartConfig.option)
|
||||
|
||||
const xPos = (pos: number) => {
|
||||
if (!reverse.value) return pos
|
||||
return w.value - pos
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('border-04') {
|
||||
}
|
||||
</style>
|
@ -0,0 +1,15 @@
|
||||
import { publicConfig } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { Decorates05Config } from './index'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
|
||||
export const option = {
|
||||
colors: ['#00c2ff', '#00c2ff4d'],
|
||||
dur: 3,
|
||||
}
|
||||
|
||||
export default class Config extends publicConfig implements CreateComponentType {
|
||||
public key = Decorates05Config.key
|
||||
public chartConfig = cloneDeep(Decorates05Config)
|
||||
public option = option
|
||||
}
|
@ -0,0 +1,55 @@
|
||||
<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="速度(s)">
|
||||
<SettingItem>
|
||||
<n-input-number
|
||||
v-model:value="optionData.dur"
|
||||
size="small"
|
||||
:step="1"
|
||||
:min="2"
|
||||
></n-input-number>
|
||||
</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>
|
@ -0,0 +1,14 @@
|
||||
import image from '@/assets/images/chart/decorates/decorates05.png'
|
||||
import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const Decorates05Config: ConfigType = {
|
||||
key: 'Decorates05',
|
||||
chartKey: 'VDecorates05',
|
||||
conKey: 'VCDecorates05',
|
||||
title: '装饰-05',
|
||||
category: ChatCategoryEnum.DECORATES,
|
||||
categoryName: ChatCategoryEnumName.DECORATES,
|
||||
package: PackagesCategoryEnum.DECORATES,
|
||||
image
|
||||
}
|
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="go-border-05">
|
||||
<svg :width="w" :height="h">
|
||||
<polyline
|
||||
:stroke="colors[1]"
|
||||
stroke-width="2"
|
||||
:points="`0, ${h / 2} ${w}, ${h / 2}`"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
:stroke="colors[0]"
|
||||
stroke-width="2"
|
||||
:points="`5, ${h / 2} ${w * 0.2 - 3}, ${h / 2}`"
|
||||
:stroke-dasharray="`0, ${w * 0.2}`"
|
||||
fill="freeze"
|
||||
>
|
||||
<animate
|
||||
:id="animationId2"
|
||||
attributeName="stroke-dasharray"
|
||||
:values="`0, ${w * 0.2};${w * 0.2}, 0;`"
|
||||
:dur="dur"
|
||||
:begin="`${animationId1}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
:values="`${w * 0.2}, 0;0, ${w * 0.2}`"
|
||||
dur="0.01s"
|
||||
:begin="`${animationId7}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
</polyline>
|
||||
|
||||
<polyline
|
||||
:stroke="colors[0]"
|
||||
stroke-width="2"
|
||||
:points="`${w * 0.2 + 3}, ${h / 2} ${w * 0.8 - 3}, ${h / 2}`"
|
||||
:stroke-dasharray="`0, ${w * 0.6}`"
|
||||
>
|
||||
<animate
|
||||
:id="animationId4"
|
||||
attributeName="stroke-dasharray"
|
||||
:values="`0, ${w * 0.6};${w * 0.6}, 0`"
|
||||
:dur="dur"
|
||||
:begin="`${animationId3}.end + 1s`"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
:values="`${w * 0.6}, 0;0, ${w * 0.6}`"
|
||||
dur="0.01s"
|
||||
:begin="`${animationId7}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
</polyline>
|
||||
|
||||
<polyline
|
||||
:stroke="colors[0]"
|
||||
stroke-width="2"
|
||||
:points="`${w * 0.8 + 3}, ${h / 2} ${w - 5}, ${h / 2}`"
|
||||
:stroke-dasharray="`0, ${w * 0.2}`"
|
||||
>
|
||||
<animate
|
||||
:id="animationId6"
|
||||
attributeName="stroke-dasharray"
|
||||
:values="`0, ${w * 0.2};${w * 0.2}, 0`"
|
||||
:dur="dur"
|
||||
:begin="`${animationId5}.end + 1s`"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="stroke-dasharray"
|
||||
:values="`${w * 0.2}, 0;0, ${w * 0.3}`"
|
||||
dur="0.01s"
|
||||
:begin="`${animationId7}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
</polyline>
|
||||
|
||||
<circle cx="2" :cy="h / 2" r="2" :fill="colors[1]">
|
||||
<animate
|
||||
:id="animationId1"
|
||||
attributeName="fill"
|
||||
:values="`${colors[1]};${colors[0]}`"
|
||||
:begin="`0s;${animationId7}.end`"
|
||||
dur="0.3s"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle :cx="w * 0.2" :cy="h / 2" r="2" :fill="colors[1]">
|
||||
<animate
|
||||
:id="animationId3"
|
||||
attributeName="fill"
|
||||
:values="`${colors[1]};${colors[0]}`"
|
||||
:begin="`${animationId2}.end`"
|
||||
dur="0.3s"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${colors[1]};${colors[1]}`"
|
||||
dur="0.01s"
|
||||
:begin="`${animationId7}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle :cx="w * 0.8" :cy="h / 2" r="2" :fill="colors[1]">
|
||||
<animate
|
||||
:id="animationId5"
|
||||
attributeName="fill"
|
||||
:values="`${colors[1]};${colors[0]}`"
|
||||
:begin="`${animationId4}.end`"
|
||||
dur="0.3s"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${colors[1]};${colors[1]}`"
|
||||
dur="0.01s"
|
||||
:begin="`${animationId7}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
|
||||
<circle :cx="w - 2" :cy="h / 2" r="2" :fill="colors[1]">
|
||||
<animate
|
||||
:id="animationId7"
|
||||
attributeName="fill"
|
||||
:values="`${colors[1]};${colors[0]}`"
|
||||
:begin="`${animationId6}.end`"
|
||||
dur="0.3s"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="fill"
|
||||
:values="`${colors[1]};${colors[1]}`"
|
||||
dur="0.01s"
|
||||
:begin="`${animationId7}.end`"
|
||||
fill="freeze"
|
||||
/>
|
||||
</circle>
|
||||
</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 id = getUUID()
|
||||
const { w, h } = toRefs(props.chartConfig.attr)
|
||||
const { colors, dur } = toRefs(props.chartConfig.option)
|
||||
const animationId1 = `d10ani1${id}`
|
||||
const animationId2 = `d10ani2${id}`
|
||||
const animationId3 = `d10ani3${id}`
|
||||
const animationId4 = `d10ani4${id}`
|
||||
const animationId5 = `d10ani5${id}`
|
||||
const animationId6 = `d10ani6${id}`
|
||||
const animationId7 = `d10ani7${id}`
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('border-04') {
|
||||
}
|
||||
</style>
|
@ -1,5 +1,13 @@
|
||||
import { Decorates01Config } from './Decorates01/index'
|
||||
import { Decorates02Config } from './Decorates02/index'
|
||||
import { Decorates03Config } from './Decorates03/index'
|
||||
import { Decorates04Config } from './Decorates04/index'
|
||||
import { Decorates05Config } from './Decorates05/index'
|
||||
|
||||
export default [Decorates01Config, Decorates02Config, Decorates03Config]
|
||||
export default [
|
||||
Decorates01Config,
|
||||
Decorates02Config,
|
||||
Decorates03Config,
|
||||
Decorates04Config,
|
||||
Decorates05Config,
|
||||
]
|
||||
|
Loading…
Reference in New Issue
Block a user