89 lines
2.6 KiB
Vue
89 lines
2.6 KiB
Vue
<template>
|
|
<q-page>
|
|
|
|
<div class="q-pa-md column content-center items-center">
|
|
<div>
|
|
<q-btn label="アクション選択" color="primary" @click="showDg()" v-if="addshow" />
|
|
<show-dialog v-model:visible="show" name="アクション" @close="closeDg">
|
|
<action-select ref="appDg" name="アクション" type="single"></action-select>
|
|
</show-dialog>
|
|
</div>
|
|
<div id="action"></div>
|
|
</div>
|
|
</q-page>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import ShowDialog from 'components/ShowDialog.vue';
|
|
import ActionSelect from 'components/ActionSelect.vue';
|
|
|
|
const show = ref(false);
|
|
const addshow = ref(true);
|
|
const appDg = ref();
|
|
|
|
const showDg = () => {
|
|
show.value = true;
|
|
};
|
|
|
|
const closeDg = (val: string) => {
|
|
if (val == 'OK') {
|
|
//alert(JSON.stringify(appDg.value.selected[0].content));
|
|
let oDiv1 = document.getElementById('action');
|
|
let oDiv2 = document.createElement('div');
|
|
oDiv2.setAttribute('class', 'action');
|
|
if (oDiv1 !== null) {
|
|
oDiv2.innerHTML = appDg.value.selected[0].content;
|
|
oDiv1?.append(oDiv2);
|
|
// let oAdd = oDiv2.getElementsByClassName('next')[0];
|
|
// oAdd.addEventListener('mouseenter', mouseenter);
|
|
// oAdd.addEventListener('mouseleave', mouseleave);
|
|
// let oDel = oDiv2.getElementsByClassName('del')[0];
|
|
// oDel.addEventListener('click', clickdel);
|
|
}
|
|
|
|
if (document.getElementsByClassName('action').length > 0) {
|
|
addshow.value = false;
|
|
}
|
|
};
|
|
};
|
|
|
|
const mouseenter = (event: Event) => {
|
|
console.log('1');
|
|
let oAdd = "<div style='display: table-cell;'><button type='button' onclick='clickadd(this.parentElement.parentElement.parentElement.parentElement)'>+</button></div>";
|
|
let oDiv1 = event.target as Element
|
|
let oDivs = oDiv1?.getElementsByClassName('add');
|
|
if (oDivs.length === 0) {
|
|
let oDiv2 = document.createElement('div');
|
|
oDiv2.className = "add";
|
|
oDiv2.setAttribute("style", "display:table-row;height:inherit;position: absolute;left:calc(50% - 19px);");
|
|
oDiv2.innerHTML = oAdd;
|
|
oDiv1?.append(oDiv2);
|
|
}
|
|
};
|
|
|
|
const mouseleave = (event: Event) => {
|
|
console.log('2');
|
|
let oDiv2 = (event.target as Element)?.parentElement?.getElementsByClassName('add');
|
|
oDiv2[0]?.remove();
|
|
|
|
};
|
|
|
|
const clickadd = (pdiv: Element) => {
|
|
console.log('3');
|
|
show.value = true;
|
|
};
|
|
|
|
const clickdel = (pdiv: Element) => {
|
|
pdiv.remove();
|
|
if (document.getElementsByClassName('action').length == 0) {
|
|
addshow.value = true;
|
|
}
|
|
};
|
|
|
|
window.clickadd = clickadd;
|
|
window.clickdel = clickdel;
|
|
window.mouseenter = mouseenter;
|
|
window.mouseleave = mouseleave;
|
|
|
|
</script>
|