修改看板
parent
bec1fe819b
commit
a2ab17ebb4
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div
|
||||
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||
<NodeResizer color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected"
|
||||
@resize="resize" />
|
||||
<div class="custom-node"
|
||||
:style="{color:'#fff',width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
||||
<vue-number-roll-plus
|
||||
style="display: inline-block;margin-right: 4px;"
|
||||
:number="item"
|
||||
:background="props.data.options.backgroundColor"
|
||||
:style="{border:props.data.options.isBorder? ` 1px solid ${props.data.options.borderColor}` :''}"
|
||||
v-for="(item, index) in list"
|
||||
></vue-number-roll-plus>
|
||||
</div>
|
||||
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import { defineEmits, defineProps, ref } from 'vue';
|
||||
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||
import { Handle, Position } from '@vue-flow/core';
|
||||
import VueNumberRollPlus from 'vue3-number-roll-plus';
|
||||
import 'vue3-number-roll-plus/main.css';
|
||||
|
||||
const list = ref([]);
|
||||
const props = defineProps({
|
||||
isView: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
inputData: {
|
||||
type: Object,
|
||||
required: false
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
isHideHandle: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
dimensions: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['resize']);
|
||||
const resize = (e) => {
|
||||
emit('resize', e, props.id);
|
||||
};
|
||||
watch(() => JSON.parse(JSON.stringify(props.data?.options?.number)), (obj1, obj2) => {
|
||||
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||
list.value = (props.data.options.number || 0).toString().split('');
|
||||
}
|
||||
}, { deep: true, immediate: true });
|
||||
</script>
|
||||
<style scoped>
|
||||
.custom-node {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
:deep(.real-time-num) {
|
||||
margin-left: 0;
|
||||
vertical-align: top;
|
||||
height: var(--number-roll-plus-height);
|
||||
width: var(--number-roll-plus-width);
|
||||
line-height: var(--number-roll-plus-height);
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
:root {
|
||||
--number-roll-plus-width: 30px;
|
||||
--number-roll-plus-height: 40px;
|
||||
}
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue