Showing
5 changed files
with
1 additions
and
139 deletions
src/packages/components/external/Composes/Mores/Button/config.ts
deleted
100644 → 0
1 | -import { PublicConfigClass } from '@/packages/public' | ||
2 | -import { CreateComponentType } from '@/packages/index.d' | ||
3 | -import { ButtonConfig } from './index' | ||
4 | -import cloneDeep from 'lodash/cloneDeep' | ||
5 | - | ||
6 | -export const option = { | ||
7 | - dataset: '默认', | ||
8 | - /** | ||
9 | - * Naive UI button部分属性 | ||
10 | - */ | ||
11 | - attribute:{ | ||
12 | - //尺寸 | ||
13 | - size:'medium', | ||
14 | - //透明 | ||
15 | - ghost:false, | ||
16 | - //加载 | ||
17 | - loading:false, | ||
18 | - //自定义颜色 | ||
19 | - color:'#ffffff', | ||
20 | - //文字背景 | ||
21 | - textColor:'black' | ||
22 | - } | ||
23 | -} | ||
24 | - | ||
25 | -export default class Config extends PublicConfigClass implements CreateComponentType { | ||
26 | - public key = ButtonConfig.key | ||
27 | - public chartConfig = cloneDeep(ButtonConfig) | ||
28 | - public option = cloneDeep(option) | ||
29 | -} |
src/packages/components/external/Composes/Mores/Button/config.vue
deleted
100644 → 0
1 | -<template> | ||
2 | - <CollapseItem name="按钮配置" :expanded="true"> | ||
3 | - <SettingItemBox name="信息"> | ||
4 | - <SettingItem name="文字"> | ||
5 | - <n-input size="small" v-model:value="optionData.dataset"></n-input> | ||
6 | - </SettingItem> | ||
7 | - <SettingItem name="文字颜色"> | ||
8 | - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.textColor"></n-color-picker> | ||
9 | - </SettingItem> | ||
10 | - <SettingItem> | ||
11 | - <n-button size="small" @click="optionData.attribute.textColor ='black'"> 恢复默认 </n-button> | ||
12 | - </SettingItem> | ||
13 | - </SettingItemBox> | ||
14 | - <SettingItemBox name="属性"> | ||
15 | - <SettingItem name="颜色"> | ||
16 | - <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.attribute.color"></n-color-picker> | ||
17 | - </SettingItem> | ||
18 | - <SettingItem> | ||
19 | - <n-button size="small" @click="optionData.attribute.color ='#ffffff'"> 恢复默认 </n-button> | ||
20 | - </SettingItem> | ||
21 | - <SettingItem name="是否透明"> | ||
22 | - <n-switch v-model:value="optionData.attribute.ghost" /> | ||
23 | - </SettingItem> | ||
24 | - <SettingItem name="是否加载"> | ||
25 | - <n-switch v-model:value="optionData.attribute.loading" /> | ||
26 | - </SettingItem> | ||
27 | - </SettingItemBox> | ||
28 | - </CollapseItem> | ||
29 | -</template> | ||
30 | - | ||
31 | -<script setup lang="ts"> | ||
32 | -import { PropType } from 'vue' | ||
33 | -import { option } from './config' | ||
34 | -import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' | ||
35 | - | ||
36 | -defineProps({ | ||
37 | - optionData: { | ||
38 | - type: Object as PropType<typeof option>, | ||
39 | - required: true | ||
40 | - } | ||
41 | -}) | ||
42 | -</script> |
src/packages/components/external/Composes/Mores/Button/index.ts
deleted
100644 → 0
1 | -import { ChartFrameEnum, ConfigType } from '@/packages/index.d' | ||
2 | -import { EPackagesCategoryEnum } from '@/packages/components/external/types' | ||
3 | -import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' | ||
4 | -import { useWidgetKey } from '@/packages/external/useWidgetKey' | ||
5 | - | ||
6 | -const { key, chartKey, conKey } = useWidgetKey('Button') | ||
7 | -export const ButtonConfig: ConfigType = { | ||
8 | - key, | ||
9 | - chartKey, | ||
10 | - conKey, | ||
11 | - title: '按钮', | ||
12 | - category: ChatCategoryEnum.MORE, | ||
13 | - categoryName: ChatCategoryEnumName.MORE, | ||
14 | - package: EPackagesCategoryEnum.COMPOSES, | ||
15 | - chartFrame: ChartFrameEnum.NAIVE_UI, | ||
16 | - image: 'button.png', | ||
17 | -} |
src/packages/components/external/Composes/Mores/Button/index.vue
deleted
100644 → 0
1 | -<template> | ||
2 | - <div class="go-content-box"> | ||
3 | - <n-button class="content" @click="handleClick" v-bind={...attribute}>{{dataset}}</n-button> | ||
4 | - </div> | ||
5 | -</template> | ||
6 | -<script setup lang="ts"> | ||
7 | -import { PropType, toRefs } from 'vue' | ||
8 | -import { CreateComponentType } from '@/packages/index.d' | ||
9 | -import {option as configOption} from './config' | ||
10 | - | ||
11 | - | ||
12 | -const props = defineProps({ | ||
13 | - chartConfig: { | ||
14 | - type: Object as PropType<CreateComponentType>, | ||
15 | - required: true | ||
16 | - } | ||
17 | -}) | ||
18 | - | ||
19 | -//修改默认宽高距离位置 | ||
20 | -props.chartConfig.attr.w = 100 | ||
21 | -props.chartConfig.attr.h = 50 | ||
22 | -props.chartConfig.attr.x = 200 | ||
23 | -props.chartConfig.attr.y = 200 | ||
24 | - | ||
25 | -const { dataset,attribute }= toRefs(props.chartConfig.option) as unknown as typeof configOption | ||
26 | - | ||
27 | -const { w, h } = toRefs(props.chartConfig.attr) | ||
28 | - | ||
29 | -const handleClick=()=>{ | ||
30 | - attribute.loading=true | ||
31 | - window['$message'].success('您点击了按钮') | ||
32 | - attribute.loading=false | ||
33 | -} | ||
34 | - | ||
35 | - | ||
36 | - | ||
37 | -</script> | ||
38 | - | ||
39 | -<style lang="scss" scoped> | ||
40 | -.go-content-box{ | ||
41 | - display: flex; | ||
42 | - align-items: center; | ||
43 | - justify-content: center; | ||
44 | - .content{ | ||
45 | - width:v-bind('w + "px"'); | ||
46 | - height:v-bind('h + "px"'); | ||
47 | - } | ||
48 | -} | ||
49 | -</style> |
1 | import { Title1Config } from './Title1/index' | 1 | import { Title1Config } from './Title1/index' |
2 | import { Title2Config } from './Title2/index' | 2 | import { Title2Config } from './Title2/index' |
3 | import { Title3Config } from './Title3/index' | 3 | import { Title3Config } from './Title3/index' |
4 | -import { ButtonConfig } from './Button/index' | ||
5 | import { CameraConfig } from './Camera/index' | 4 | import { CameraConfig } from './Camera/index' |
6 | 5 | ||
7 | -export default [Title1Config, Title2Config, Title3Config, CameraConfig, ButtonConfig] | 6 | +export default [Title1Config, Title2Config, Title3Config, CameraConfig] |