鼠标移入、移出事件。跨页面复制、粘贴(还有显示问题

main
刘妍 2025-02-18 17:01:15 +08:00
parent 8c749b933f
commit 6185ca6ced
3 changed files with 39 additions and 4 deletions

View File

@ -7,14 +7,15 @@
:rotate="rotate" :rotate="rotate"
@click="clickBtn" @click="clickBtn"
@dblclick="dblclickBtn" @dblclick="dblclickBtn"
@rightclick="rightclickBtn"
@contextmenu="rightclickBtn" @contextmenu="rightclickBtn"
@mouseenter="mouseenterBtn"
@mouseleave="mouseleaveBtn"
/> />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType, toRefs, ref } from 'vue'; import { PropType, toRefs, ref, watch, onMounted } from 'vue';
import { CreateComponentType } from '@/packages/index.d'; import { CreateComponentType } from '@/packages/index.d';
import { GoIconify } from '@/components/GoIconify'; import { GoIconify } from '@/components/GoIconify';
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'; import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
@ -27,7 +28,7 @@
required: true, required: true,
}, },
}); });
console.log(props.chartConfig.option);
const { w, h } = toRefs(props.chartConfig.attr); const { w, h } = toRefs(props.chartConfig.attr);
const { dataset, color, size, rotate } = toRefs(props.chartConfig.option); const { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
// //
@ -36,6 +37,11 @@
const dbclickElementItem = ref([]); const dbclickElementItem = ref([]);
// //
const rightclickElementItem = ref([]); const rightclickElementItem = ref([]);
//
const mouseenterElementItem = ref([]);
//
const mouseleaveElementItem = ref([]);
const list = props.chartConfig.events.interactConfigEvents; const list = props.chartConfig.events.interactConfigEvents;
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
if (list[i].type == 'click') { if (list[i].type == 'click') {
@ -50,6 +56,14 @@
for (let j = 0; j < list[i].movementList.length; j++) { for (let j = 0; j < list[i].movementList.length; j++) {
rightclickElementItem.value.push(list[i].movementList[j]); rightclickElementItem.value.push(list[i].movementList[j]);
} }
} else if (list[i].type == 'mousein') {
for (let j = 0; j < list[i].movementList.length; j++) {
mouseenterElementItem.value.push(list[i].movementList[j]);
}
} else if (list[i].type == 'mouseout') {
for (let j = 0; j < list[i].movementList.length; j++) {
mouseleaveElementItem.value.push(list[i].movementList[j]);
}
} }
} }
const clickBtn = () => { const clickBtn = () => {
@ -65,6 +79,14 @@
event.preventDefault(); // event.preventDefault(); //
eventHandlerHook(chartEditStore.getComponentList, rightclickElementItem.value); eventHandlerHook(chartEditStore.getComponentList, rightclickElementItem.value);
}; };
const mouseenterBtn = () => {
console.log('鼠标移入');
eventHandlerHook(chartEditStore.getComponentList, mouseenterElementItem.value);
};
const mouseleaveBtn = () => {
console.log('鼠标移出');
eventHandlerHook(chartEditStore.getComponentList, mouseleaveElementItem.value);
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -528,6 +528,7 @@ export const useChartEditStore = defineStore({
type: isCut ? HistoryActionTypeEnum.CUT : HistoryActionTypeEnum.COPY, type: isCut ? HistoryActionTypeEnum.CUT : HistoryActionTypeEnum.COPY,
}; };
this.setRecordChart(copyData); this.setRecordChart(copyData);
localStorage.setItem('copyData', JSON.stringify(copyData));
window['$message'].success(isCut ? '剪切图表成功' : '复制图表成功!'); window['$message'].success(isCut ? '剪切图表成功' : '复制图表成功!');
loadingFinish(); loadingFinish();
} }
@ -541,9 +542,13 @@ export const useChartEditStore = defineStore({
}, },
// * 粘贴 // * 粘贴
setParse() { setParse() {
console.log('setParse');
try { try {
loadingStart(); loadingStart();
const recordCharts = this.getRecordChart; const recordCharts = this.getRecordChart
? this.getRecordChart
: JSON.parse(localStorage.getItem('copyData'));
if (recordCharts === undefined) { if (recordCharts === undefined) {
loadingFinish(); loadingFinish();
return; return;

View File

@ -14,6 +14,14 @@ export const eventTypeOptions: EventOptionsItemType[] = [
label: '右击', label: '右击',
value: 'rightclick', value: 'rightclick',
}, },
{
label: '鼠标移入',
value: 'mousein',
},
{
label: '鼠标移出',
value: 'mouseout',
},
]; ];
// * 动作类型 // * 动作类型
export const movementTypeOptions: EventOptionsItemType[] = [ export const movementTypeOptions: EventOptionsItemType[] = [