mirror of
https://gitee.com/dromara/go-view.git
synced 2025-10-13 22:12:11 +08:00
新增分页联动控件
This commit is contained in:
luoyp
parent
b841fe876d
commit
5449176f97
@ -0,0 +1,55 @@
|
||||
import { PublicConfigClass } from '@/packages/public'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import { InputsCharactersConfig } from './index'
|
||||
import { interactActions, ComponentInteractEventEnum } from './interact'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import {COMPONENT_INTERACT_EVENT_KET} from "@/enums/eventEnum";
|
||||
|
||||
export enum WritingModeEnum {
|
||||
HORIZONTAL = '水平',
|
||||
VERTICAL = '垂直'
|
||||
}
|
||||
|
||||
export const WritingModeObject = {
|
||||
[WritingModeEnum.HORIZONTAL]: 'horizontal-tb',
|
||||
[WritingModeEnum.VERTICAL]: 'vertical-rl'
|
||||
}
|
||||
|
||||
export enum FontWeightEnum {
|
||||
NORMAL = '常规',
|
||||
BOLD = '加粗',
|
||||
}
|
||||
|
||||
export const FontWeightObject = {
|
||||
[FontWeightEnum.NORMAL]: 'normal',
|
||||
[FontWeightEnum.BOLD]: 'bold',
|
||||
}
|
||||
|
||||
export const option = {
|
||||
[COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
|
||||
dataset: '我是展示文本',
|
||||
datasetValue:'我是联动值',
|
||||
fontSize: 20,
|
||||
fontColor: '#ffffff',
|
||||
paddingX: 10,
|
||||
paddingY: 10,
|
||||
textAlign: 'center', // 水平对齐方式
|
||||
fontWeight: 'normal',
|
||||
|
||||
// 边框
|
||||
borderWidth: 0,
|
||||
borderColor: '#ffffff',
|
||||
borderRadius: 5,
|
||||
|
||||
// 字间距
|
||||
letterSpacing: 5,
|
||||
writingMode: 'horizontal-tb',
|
||||
backgroundColor: '#00000000'
|
||||
}
|
||||
|
||||
export default class Config extends PublicConfigClass implements CreateComponentType {
|
||||
public key = InputsCharactersConfig.key
|
||||
public chartConfig = cloneDeep(InputsCharactersConfig)
|
||||
public interactActions = interactActions
|
||||
public option = cloneDeep(option)
|
||||
}
|
||||
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<collapse-item name="信息" :expanded="true">
|
||||
<setting-item-box name="展示文本" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
<setting-item-box name="联动值" :alone="true">
|
||||
<setting-item>
|
||||
<n-input v-model:value="optionData.datasetValue" size="small"></n-input>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
|
||||
<collapse-item name="样式" :expanded="true">
|
||||
<setting-item-box name="文字">
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="字体大小">
|
||||
<n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="字体粗细">
|
||||
<n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
|
||||
</setting-item>
|
||||
<setting-item name="X轴内边距">
|
||||
<n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="Y轴内边距">
|
||||
<n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number>
|
||||
</setting-item>
|
||||
|
||||
<setting-item name="水平对齐">
|
||||
<n-select v-model:value="optionData.textAlign" size="small" :options="textAlignOptions" />
|
||||
</setting-item>
|
||||
<setting-item name="文本方向">
|
||||
<n-select v-model:value="optionData.writingMode" size="small" :options="verticalOptions" />
|
||||
</setting-item>
|
||||
|
||||
<setting-item name="字间距">
|
||||
<n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
|
||||
<setting-item-box name="边框">
|
||||
<setting-item name="宽度">
|
||||
<n-input-number
|
||||
v-model:value="optionData.borderWidth"
|
||||
size="small"
|
||||
:min="0"
|
||||
placeholder="宽度"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
<setting-item name="颜色">
|
||||
<n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
|
||||
</setting-item>
|
||||
<setting-item name="圆角">
|
||||
<n-input-number
|
||||
v-model:value="optionData.borderRadius"
|
||||
size="small"
|
||||
:min="0"
|
||||
placeholder="圆角"
|
||||
></n-input-number>
|
||||
</setting-item>
|
||||
</setting-item-box>
|
||||
</collapse-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue'
|
||||
import { option, WritingModeEnum, WritingModeObject, FontWeightEnum, FontWeightObject } from './config'
|
||||
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||
const props = defineProps({
|
||||
optionData: {
|
||||
type: Object as PropType<typeof option>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const textAlignOptions = [
|
||||
{ label: '左对齐', value: 'start' },
|
||||
{ label: '居中', value: 'center' },
|
||||
{ label: '右对齐', value: 'end' }
|
||||
]
|
||||
|
||||
const verticalOptions = [
|
||||
{
|
||||
label: WritingModeEnum.HORIZONTAL,
|
||||
value: WritingModeObject[WritingModeEnum.HORIZONTAL]
|
||||
},
|
||||
{
|
||||
label: WritingModeEnum.VERTICAL,
|
||||
value: WritingModeObject[WritingModeEnum.VERTICAL]
|
||||
}
|
||||
]
|
||||
const fontWeightOptions = [
|
||||
{
|
||||
label: FontWeightEnum.NORMAL,
|
||||
value: FontWeightObject[FontWeightEnum.NORMAL]
|
||||
},
|
||||
{
|
||||
label: FontWeightEnum.BOLD,
|
||||
value: FontWeightObject[FontWeightEnum.BOLD]
|
||||
}
|
||||
]
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,14 @@
|
||||
import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
|
||||
import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
|
||||
|
||||
export const InputsCharactersConfig: ConfigType = {
|
||||
key: 'InputsCharacters',
|
||||
chartKey: 'VInputsCharacters',
|
||||
conKey: 'VCInputsCharacters',
|
||||
title: '联动文字',
|
||||
category: ChatCategoryEnum.INPUTS,
|
||||
categoryName: ChatCategoryEnumName.INPUTS,
|
||||
package: PackagesCategoryEnum.INFORMATIONS,
|
||||
chartFrame: ChartFrameEnum.COMMON,
|
||||
image: 'text_static.png'
|
||||
}
|
||||
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="go-text-box">
|
||||
<div class="content" @click="onChange(option.datasetValue)">
|
||||
<span style="white-space: pre-wrap" >{{ option.dataset }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType, toRefs, shallowReactive, watch } from 'vue'
|
||||
import { CreateComponentType } from '@/packages/index.d'
|
||||
import {useChartDataFetch, useChartInteract} from '@/hooks'
|
||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||
import { ComponentInteractParamsEnum } from './interact'
|
||||
import {InteractEventOn} from "@/enums/eventEnum";
|
||||
|
||||
const props = defineProps({
|
||||
chartConfig: {
|
||||
type: Object as PropType<CreateComponentType>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
|
||||
const {
|
||||
fontSize,
|
||||
fontColor,
|
||||
textAlign,
|
||||
letterSpacing,
|
||||
paddingY,
|
||||
paddingX,
|
||||
writingMode,
|
||||
borderWidth,
|
||||
borderColor,
|
||||
borderRadius,
|
||||
backgroundColor,
|
||||
fontWeight
|
||||
} = toRefs(props.chartConfig.option)
|
||||
|
||||
const option = shallowReactive({
|
||||
dataset: props.chartConfig.option.dataset,
|
||||
datasetValue:props.chartConfig.option.datasetValue
|
||||
})
|
||||
|
||||
const onChange = (v: string) => {
|
||||
if(v == undefined) return;
|
||||
// 存储到联动数据
|
||||
useChartInteract(
|
||||
props.chartConfig,
|
||||
useChartEditStore,
|
||||
{ [ComponentInteractParamsEnum.DATA]: v },
|
||||
InteractEventOn.CLICK
|
||||
)
|
||||
return v;
|
||||
}
|
||||
|
||||
// 手动更新
|
||||
watch(
|
||||
() => props.chartConfig.option.dataset,
|
||||
(newData: any) => {
|
||||
option.dataset = newData
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
deep: false
|
||||
}
|
||||
)
|
||||
|
||||
// 预览更新
|
||||
useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
|
||||
option.dataset = newData
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@include go('text-box') {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: v-bind('textAlign');
|
||||
|
||||
.content {
|
||||
color: v-bind('fontColor');
|
||||
padding: v-bind('`${paddingY}px ${paddingX}px`');
|
||||
font-size: v-bind('fontSize + "px"');
|
||||
letter-spacing: v-bind('letterSpacing + "px"');
|
||||
writing-mode: v-bind('writingMode');
|
||||
font-weight: v-bind('fontWeight');
|
||||
border-style: solid;
|
||||
border-width: v-bind('borderWidth + "px"');
|
||||
border-radius: v-bind('borderRadius + "px"');
|
||||
border-color: v-bind('borderColor');
|
||||
background-color: v-bind('backgroundColor');
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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.CLICK,
|
||||
interactName: '点击完成',
|
||||
componentEmitEvents: {
|
||||
[ComponentInteractEventEnum.DATA]: [
|
||||
{
|
||||
value: ComponentInteractParamsEnum.DATA,
|
||||
label: '文本内容'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -1,5 +1,6 @@
|
||||
import { InputsDateConfig } from './InputsDate/index'
|
||||
import { InputsSelectConfig } from './InputsSelect/index'
|
||||
import { InputsTabConfig } from './InputsTab/index'
|
||||
import { InputsCharactersConfig} from "./InputsCharacters/index";
|
||||
|
||||
export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig]
|
||||
export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig,InputsCharactersConfig]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user