画布调整
This commit is contained in:
@@ -24,7 +24,7 @@
|
|||||||
<div
|
<div
|
||||||
v-for="(v, i) in menus"
|
v-for="(v, i) in menus"
|
||||||
:key="i"
|
:key="i"
|
||||||
:class="[v.isDivide ? 'divide' : 'item']"
|
:class="[v.isDivide ? 'divide' : 'item', { disabled: v.disabled }]"
|
||||||
@click="onMenuItem(v)"
|
@click="onMenuItem(v)"
|
||||||
>
|
>
|
||||||
<template v-if="!v.isDivide">
|
<template v-if="!v.isDivide">
|
||||||
@@ -39,6 +39,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref, onBeforeUnmount, useAttrs, inject, watch } from 'vue'
|
import { reactive, ref, onBeforeUnmount, useAttrs, inject, watch } from 'vue'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({})
|
||||||
|
},
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
@@ -59,17 +63,21 @@
|
|||||||
)
|
)
|
||||||
const menus = ref([
|
const menus = ref([
|
||||||
{ label: 'Copy', tip: 'Ctrl+C', on: () => emit('copy-node') },
|
{ label: 'Copy', tip: 'Ctrl+C', on: () => emit('copy-node') },
|
||||||
{ label: 'Paste', tip: 'Ctrl+V', on: () => {} },
|
{
|
||||||
{ label: 'Duplicate', tip: 'Ctrl+D', on: () => {} },
|
label: 'Delete',
|
||||||
{ label: 'Delete', tip: 'Del', on: () => emit('delete-node') },
|
tip: 'Del',
|
||||||
|
on: () => emit('delete-node'),
|
||||||
|
disabled: !!props.config?.disableDelete
|
||||||
|
},
|
||||||
{ isDivide: true },
|
{ isDivide: true },
|
||||||
{ label: 'Bring to font', tip: 'Del', on: () => {} },
|
{ label: 'Bring to font', tip: '', on: () => {} },
|
||||||
{ label: 'Send to back', tip: 'Del', on: () => {} },
|
{ label: 'Send to back', tip: '', on: () => {} },
|
||||||
{ isDivide: true },
|
{ isDivide: true },
|
||||||
{ label: 'Flip horizontal', tip: '', on: () => {} },
|
{ label: 'Flip horizontal', tip: '', on: () => {} },
|
||||||
{ label: 'Flip vertical', tip: '', on: () => {} }
|
{ label: 'Flip vertical', tip: '', on: () => {} }
|
||||||
])
|
])
|
||||||
const onMenuItem = (v) => {
|
const onMenuItem = (v) => {
|
||||||
|
if (v.disabled) return
|
||||||
v.on && v.on()
|
v.on && v.on()
|
||||||
hideMenu()
|
hideMenu()
|
||||||
}
|
}
|
||||||
@@ -181,7 +189,14 @@
|
|||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
&:hover {
|
&.disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
> .tip,
|
||||||
|
> .label {
|
||||||
|
color: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:not(.disabled):hover {
|
||||||
background: #f3f3f3;
|
background: #f3f3f3;
|
||||||
}
|
}
|
||||||
> .label {
|
> .label {
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
tabindex="0"
|
tabindex="0"
|
||||||
class="input"
|
class="input"
|
||||||
ref="inputRef"
|
ref="inputRef"
|
||||||
contenteditable="true"
|
:contenteditable="edit"
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
@blur="onBlur"
|
@blur="onBlur"
|
||||||
@paste.prevent
|
@paste.prevent
|
||||||
@@ -66,6 +66,7 @@
|
|||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.text {
|
.text {
|
||||||
|
user-select: none;
|
||||||
&.edit {
|
&.edit {
|
||||||
> .input {
|
> .input {
|
||||||
cursor: text;
|
cursor: text;
|
||||||
|
|||||||
@@ -28,6 +28,7 @@
|
|||||||
<component
|
<component
|
||||||
:is="components[node.data.component]"
|
:is="components[node.data.component]"
|
||||||
:node="node"
|
:node="node"
|
||||||
|
:config="node.data"
|
||||||
:data="node.data.data"
|
:data="node.data.data"
|
||||||
v-bind="node.data"
|
v-bind="node.data"
|
||||||
@delete-node="deleteNode(node.id)"
|
@delete-node="deleteNode(node.id)"
|
||||||
@@ -168,9 +169,9 @@
|
|||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// window['vueFlow'] = vueFlow
|
// window['vueFlow'] = vueFlow
|
||||||
// window['nodes'] = nodes
|
// window['nodes'] = nodes
|
||||||
console.log(props.config)
|
|
||||||
nodeManager.createResultNode({
|
nodeManager.createResultNode({
|
||||||
data: {
|
data: {
|
||||||
|
disableDelete: true,
|
||||||
isHeader: false,
|
isHeader: false,
|
||||||
data: {
|
data: {
|
||||||
url: props.config.url
|
url: props.config.url
|
||||||
|
|||||||
Reference in New Issue
Block a user