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