鼠标移入、移出事件。跨页面复制、粘贴(还有显示问题
parent
8c749b933f
commit
6185ca6ced
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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[] = [
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue