feat: 新增组件变换demo
parent
f3952c4c7c
commit
897723c1c9
@ -0,0 +1,5 @@
|
|||||||
|
<svg t="1683299647629" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" width="200" height="200">
|
||||||
|
<path d="M735.2 792.4H287.6C136.9 792.4 14.2 669.8 14.2 519c0-150.9 122.6-273.5 273.4-273.5h447.6c150.7 0 273.4 122.6 273.4 273.4 0 150.9-122.7 273.5-273.4 273.5zM287.6 300.2c-120.6 0-218.7 98.1-218.7 218.7 0 120.8 98.1 218.9 218.7 218.9h447.6c120.6 0 218.7-98.1 218.7-218.7 0-120.8-98.1-218.9-218.7-218.9H287.6z" fill="#666666"></path>
|
||||||
|
<path d="M724.7 687.1c-92.7 0-168.1-75.4-168.1-168.1S632 350.9 724.7 350.9 892.8 426.3 892.8 519s-75.4 168.1-168.1 168.1z m0-278.6c-60.9 0-110.5 49.6-110.5 110.5s49.5 110.5 110.5 110.5S835.1 579.9 835.1 519s-49.5-110.5-110.4-110.5z" fill="#666666"></path>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 746 B |
@ -0,0 +1,42 @@
|
|||||||
|
<!-- eslint-disable vue/html-indent -->
|
||||||
|
<template>
|
||||||
|
<g :id="props.id">
|
||||||
|
<symbol viewBox="0 0 1024 1024" :id="`${props.id}switch-demo-open`">
|
||||||
|
<path
|
||||||
|
d="M735.2 792.4H287.6C136.9 792.4 14.2 669.8 14.2 519c0-150.9 122.6-273.5 273.4-273.5h447.6c150.7 0 273.4 122.6 273.4 273.4 0 150.9-122.7 273.5-273.4 273.5zM287.6 300.2c-120.6 0-218.7 98.1-218.7 218.7 0 120.8 98.1 218.9 218.7 218.9h447.6c120.6 0 218.7-98.1 218.7-218.7 0-120.8-98.1-218.9-218.7-218.9H287.6z"
|
||||||
|
fill="#666666"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
d="M724.7 687.1c-92.7 0-168.1-75.4-168.1-168.1S632 350.9 724.7 350.9 892.8 426.3 892.8 519s-75.4 168.1-168.1 168.1z m0-278.6c-60.9 0-110.5 49.6-110.5 110.5s49.5 110.5 110.5 110.5S835.1 579.9 835.1 519s-49.5-110.5-110.4-110.5z"
|
||||||
|
fill="#666666"
|
||||||
|
></path>
|
||||||
|
</symbol>
|
||||||
|
<symbol viewBox="0 0 1024 1024" :id="`${props.id}switch-demo-close`">
|
||||||
|
<path
|
||||||
|
d="M704 224H320C161.216 224 32 353.216 32 512c0 158.816 129.216 288 288 288h384c158.816 0 288-129.184 288-288 0-158.784-129.184-288-288-288z m0 512H320C196.48 736 96 635.488 96 512c0-123.52 100.48-224 224-224h384c123.488 0 224 100.48 224 224 0 123.488-100.512 224-224 224z"
|
||||||
|
></path>
|
||||||
|
<path
|
||||||
|
d="M320 320c-105.888 0-192 86.112-192 192s86.112 192 192 192 192-86.112 192-192-86.112-192-192-192z m0 320c-70.592 0-128-57.408-128-128s57.408-128 128-128 128 57.408 128 128-57.408 128-128 128z"
|
||||||
|
></path>
|
||||||
|
</symbol>
|
||||||
|
<use
|
||||||
|
v-if="props.isOpen"
|
||||||
|
:xlink:href="`#${props.id}switch-demo-open`"
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
></use>
|
||||||
|
<use v-else :xlink:href="`#${props.id}switch-demo-close`" width="100" height="100"></use>
|
||||||
|
</g>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
const props = defineProps({
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
isOpen: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
@ -1,8 +1,8 @@
|
|||||||
import { IConfigComponentGroup } from '../../types';
|
import { IConfigComponentGroup } from '../../types';
|
||||||
import { custom_svg_text } from './custom-svg-text';
|
import { custom_svg_text } from './custom-svg-text';
|
||||||
|
import { switch_demo } from './switch-demo';
|
||||||
export const custom_svg_group: IConfigComponentGroup = {
|
export const custom_svg_group: IConfigComponentGroup = {
|
||||||
groupType: 'custom_svg_group',
|
groupType: 'custom_svg_group',
|
||||||
title: '自定义svg',
|
title: '自定义svg',
|
||||||
list: [custom_svg_text]
|
list: [custom_svg_text, switch_demo]
|
||||||
};
|
};
|
||||||
|
@ -0,0 +1,27 @@
|
|||||||
|
import { EConfigItemPropsType, EDoneJsonType, IConfigItem } from '@/config-center/types';
|
||||||
|
|
||||||
|
export const switch_demo: IConfigItem = {
|
||||||
|
name: 'switch-demo',
|
||||||
|
title: '开关演示',
|
||||||
|
tag: 'switch-demo',
|
||||||
|
type: EDoneJsonType.CustomSvg,
|
||||||
|
display: true,
|
||||||
|
config: {
|
||||||
|
can_zoom: true,
|
||||||
|
have_anchor: true,
|
||||||
|
actual_rect: true
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
isOpen: {
|
||||||
|
title: '开关',
|
||||||
|
type: EConfigItemPropsType.Switch,
|
||||||
|
val: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
common_animations: {
|
||||||
|
val: '',
|
||||||
|
delay: 'delay-0s',
|
||||||
|
speed: 'slow',
|
||||||
|
repeat: 'infinite'
|
||||||
|
}
|
||||||
|
};
|
Loading…
Reference in New Issue