Compare commits

...

3 Commits

Author SHA1 Message Date
奔跑的面条
4d075cff2f fix: 解决TS打包报错 2023-08-15 09:29:06 +08:00
奔跑的面条
6d5688693b
!197 新增输入框联动组件
Merge pull request !197 from 阿飞/dev1
2023-08-15 01:11:45 +00:00
luoyp
8d9041964c 新增输入框组件 2023-08-14 11:01:04 +08:00
8 changed files with 166 additions and 18 deletions

View File

@ -12,7 +12,7 @@ export const option = {
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = FullScreenConfig.key
public attr = { ...chartInitConfig, w: 150, h: 150 }
public attr = { ...chartInitConfig, w: 150, h: 150, zIndex: -1 }
public chartConfig = cloneDeep(FullScreenConfig)
public option = cloneDeep(option)
}

View File

@ -30,40 +30,40 @@ const isFullscreen = ref(false)
const checkFullscreen = () => {
isFullscreen.value = !!(
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
(document as any).webkitFullscreenElement ||
(document as any).mozFullScreenElement ||
(document as any).msFullscreenElement
)
}
checkFullscreen()
const requestFullscreen = element => {
const requestFullscreen = (element: Element) => {
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (element.mozRequestFullScreen) {
} else if ((document as any).mozRequestFullScreen) {
/* Firefox */
element.mozRequestFullScreen()
} else if (element.webkitRequestFullscreen) {
(document as any).mozRequestFullScreen()
} else if ((document as any).webkitRequestFullscreen) {
/* Chrome, Safari and Opera */
element.webkitRequestFullscreen()
} else if (element.msRequestFullscreen) {
(document as any).webkitRequestFullscreen()
} else if ((document as any).msRequestFullscreen) {
/* IE/Edge */
element.msRequestFullscreen()
(document as any).msRequestFullscreen()
}
}
const exitFullscreen = () => {
if (document.fullscreenElement && document.exitFullscreen) {
document.exitFullscreen()
} else if (document.mozFullScreenElement && document.mozCancelFullScreen) {
} else if ((document as any).mozFullScreenElement && (document as any).mozCancelFullScreen) {
/* Firefox */
document.mozCancelFullScreen()
} else if (document.webkitFullscreenElement && document.webkitExitFullscreen) {
(document as any).mozCancelFullScreen()
} else if ((document as any).webkitFullscreenElement && (document as any).webkitExitFullscreen) {
/* Chrome, Safari and Opera */
document.webkitExitFullscreen()
} else if (document.msFullscreenElement && document.msExitFullscreen) {
(document as any).webkitExitFullscreen()
} else if ((document as any).msFullscreenElement && (document as any).msExitFullscreen) {
/* IE/Edge */
document.msExitFullscreen()
(document as any).msExitFullscreen()
}
}

View File

@ -0,0 +1,24 @@
import cloneDeep from 'lodash/cloneDeep'
import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { chartInitConfig } from '@/settings/designSetting'
import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
import { interactActions, ComponentInteractEventEnum } from './interact'
import {InputsInputConfig} from "./index";
export const option = {
// 时间组件展示类型,必须和 interactActions 中定义的数据一致
[COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
// 默认值
inputValue: "0",
// 暴露配置内容给用户
dataset: ""
}
export default class Config extends PublicConfigClass implements CreateComponentType {
public key = InputsInputConfig.key
public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
public chartConfig = cloneDeep(InputsInputConfig)
public interactActions = interactActions
public option = cloneDeep(option)
}

View File

@ -0,0 +1,18 @@
<template>
<collapse-item name="输入框配置" :expanded="true">
<setting-item-box name="默认值" :alone="true">
<n-input v-model:value="optionData.dataset" placeholder="若未输入则默认值为0"/>
</setting-item-box>
</collapse-item>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { option } from './config'
defineProps({
optionData: {
type: Object as PropType<typeof option>,
required: true
}
})
</script>

View File

@ -0,0 +1,14 @@
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
export const InputsInputConfig: ConfigType = {
key: 'InputsInput',
chartKey: 'VInputsInput',
conKey: 'VCInputsInput',
title: '输入框',
category: ChatCategoryEnum.INPUTS,
categoryName: ChatCategoryEnumName.INPUTS,
package: PackagesCategoryEnum.INFORMATIONS,
chartFrame: ChartFrameEnum.STATIC,
image: 'inputs_select.png'
}

View File

@ -0,0 +1,64 @@
<template>
<div>
<n-input :style="`width:${w}px;`" type="text"
v-model:value="option.value.dataset"
placeholder="请输入"
@change="onChange">
</n-input>
</div>
</template>
<script lang="ts" setup>
import { PropType, toRefs, shallowReactive, watch } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartInteract } from '@/hooks'
import { InteractEventOn } from '@/enums/eventEnum'
import { ComponentInteractParamsEnum } from './interact'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const { w, h } = toRefs(props.chartConfig.attr)
const option = shallowReactive({
value: {
inputValue: props.chartConfig.option.inputValue,
dataset: props.chartConfig.option.dataset
}
})
const onChange = (v: string) => {
if(v == undefined) return;
//
useChartInteract(
props.chartConfig,
useChartEditStore,
{ [ComponentInteractParamsEnum.DATA]: v },
InteractEventOn.CHANGE
)
}
//
watch(
() => props.chartConfig.option,
(newData: any) => {
option.value = newData
onChange(newData.inputValue)
},
{
immediate: true,
deep: true
}
)
</script>

View File

@ -0,0 +1,27 @@
import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
// 时间组件类型
export enum ComponentInteractEventEnum {
DATA = 'data'
}
// 联动参数
export enum ComponentInteractParamsEnum {
DATA = 'data'
}
// 定义组件触发回调事件
export const interactActions: InteractActionsType[] = [
{
interactType: InteractEventOn.CHANGE,
interactName: '选择完成',
componentEmitEvents: {
[ComponentInteractEventEnum.DATA]: [
{
value: ComponentInteractParamsEnum.DATA,
label: '选择项'
}
]
}
}
]

View File

@ -2,5 +2,6 @@ import { InputsDateConfig } from './InputsDate/index'
import { InputsSelectConfig } from './InputsSelect/index'
import { InputsTabConfig } from './InputsTab/index'
import { InputsPaginationConfig } from "./InputsPagination/index";
import { InputsInputConfig} from "./InputsInput/index";
export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig,InputsPaginationConfig]
export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig,InputsPaginationConfig,InputsInputConfig]