84 lines
3.5 KiB
Vue
84 lines
3.5 KiB
Vue
<template>
|
|
<div id="action1">
|
|
<q-card class="my-card">
|
|
<q-card-section class="bg-primary text-white">
|
|
<div class="text-h6">Our Changing Planet</div>
|
|
<div class="text-subtitle2">by John Doe</div>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-card-actions align="right">
|
|
<q-btn flat>設定</q-btn>
|
|
<q-btn class="del" flat @click="clickdel">削除</q-btn>
|
|
</q-card-actions>
|
|
</q-card>
|
|
<div class="next" style="display: table;width: 100%;height:40px;" @mouseenter="showAdd = true" @mouseleave="()=>{if(!showMenu) showAdd = false;}">
|
|
<div aria-hidden="false" style="display: table-row;">
|
|
<div
|
|
style="display: table-cell;background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEzIDMwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojNUI1QjVDO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkuc3Qxe2ZpbGw6IzVCNUI1Qzt9PC9zdHlsZT4NCiA8cmVjdCB4PSI5IiB3aWR0aD0iMiIgaGVpZ2h0PSIzNy45NzQiIGZpbGw9IiM1MTUxNTEiIHN0cm9rZS13aWR0aD0iNC41MDYyIi8+DQogPHBvbHlnb24gdHJhbnNmb3JtPSJtYXRyaXgoMS4xNzg1IDAgMCAxLjE3ODUgLS42MDY5MiAyMy41NDQpIiBwb2ludHM9IjEuOTI4IDQuMDY1IDguOTk5IDExLjEzNiAxNi4wNzIgNC4wNjUgMTcuNDg2IDUuNDc5IDguOTk5IDEzLjk2NCAwLjUxNSA1LjQ3OSIgZmlsbD0iIzUxNTE1MSIvPg0KPC9zdmc+DQo=") center center no-repeat;">
|
|
</div>
|
|
</div>
|
|
<div v-if="showAdd" style="display:table-row;height:inherit;position:absolute;left:50%;">
|
|
<div style="display:table-cell;">
|
|
<q-btn round size="xs" color="primary" label="+">
|
|
<q-menu v-model="showMenu">
|
|
<q-list style="min-width: 100px">
|
|
<q-item clickable v-close-popup>
|
|
<q-item-section @click="clickadd">New tab</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-menu>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { ref,watch } from 'vue'
|
|
export default {
|
|
emits: [
|
|
'addaction'
|
|
],
|
|
setup(props,context) {
|
|
const showAdd = ref(false)
|
|
const showMenu = ref(false)
|
|
|
|
watch(showMenu,(newVal) =>{
|
|
console.log('3');
|
|
if(!newVal)
|
|
{
|
|
showAdd.value = false;
|
|
}
|
|
});
|
|
|
|
const clickadd = () => {
|
|
console.log('3');
|
|
context.emit('addaction');
|
|
//let oDiv1 = pdiv;
|
|
// let oDiv1 = document.getElementById('action1');
|
|
// let oDiv2 = document.createElement('div');
|
|
// if (oDiv1 !== null) {
|
|
// oDiv2.innerHTML = oDiv1?.innerHTML;
|
|
// oDiv1?.after(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);
|
|
// }
|
|
};
|
|
const clickdel = (event: Event) => {
|
|
let oBtn = event.target as Element;
|
|
oBtn.parentElement?.parentElement?.parentElement?.parentElement?.remove();
|
|
};
|
|
// window.clickadd = clickadd;
|
|
// window.clickdel = clickdel;
|
|
// window.mouseenter = mouseenter;
|
|
// window.mouseleave = mouseleave;
|
|
|
|
return {clickadd, clickdel, showAdd, showMenu }
|
|
}
|
|
|
|
}
|
|
</script>
|