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 | 1 | import { Title1Config } from './Title1/index' |
2 | 2 | import { Title2Config } from './Title2/index' |
3 | 3 | import { Title3Config } from './Title3/index' |
4 | -import { ButtonConfig } from './Button/index' | |
5 | 4 | import { CameraConfig } from './Camera/index' |
6 | 5 | |
7 | -export default [Title1Config, Title2Config, Title3Config, CameraConfig, ButtonConfig] | |
6 | +export default [Title1Config, Title2Config, Title3Config, CameraConfig] | ... | ... |