タッチ操作でウィジェットの編集や削除ができるようにする (#8328)

This commit is contained in:
xianon 2022-02-20 16:07:29 +09:00 committed by GitHub
parent fcfb5ef0a3
commit ec632e6694
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -12,13 +12,14 @@
<XDraggable <XDraggable
v-model="widgets_" v-model="widgets_"
item-key="id" item-key="id"
handle=".handle"
animation="150" animation="150"
> >
<template #item="{element}"> <template #item="{element}">
<div class="customize-container"> <div class="customize-container">
<button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="fas fa-cog"></i></button> <button class="config _button" @click.prevent.stop="configWidget(element.id)"><i class="fas fa-cog"></i></button>
<button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="fas fa-times"></i></button> <button class="remove _button" @click.prevent.stop="removeWidget(element)"><i class="fas fa-times"></i></button>
<component :ref="el => widgetRefs[element.id] = el" :is="`mkw-${element.name}`" :widget="element" @updateProps="updateWidget(element.id, $event)"/> <component class="handle" :ref="el => widgetRefs[element.id] = el" :is="`mkw-${element.name}`" :widget="element" @updateProps="updateWidget(element.id, $event)"/>
</div> </div>
</template> </template>
</XDraggable> </XDraggable>
@ -121,10 +122,6 @@ export default defineComponent({
position: relative; position: relative;
cursor: move; cursor: move;
> *:not(.remove):not(.config) {
pointer-events: none;
}
> .config, > .config,
> .remove { > .remove {
position: absolute; position: absolute;