aida_front/src/tool/guide.js

import { driver } from "driver.js";
import "driver.js/dist/driver.css";
import { useStore } from "vuex";
//版本一
let driverIndex__ = 0
let store
let element
let data = {
	index:driverIndex__,
	driver:true,
}
const driverObj__ = driver({
	steps: [
		{ element: '#Guide_1_1', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_4', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_5', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_6', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_7', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_8', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_8', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_10', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_11', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_8', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_2', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_14', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_15', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_16', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_17', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_18', popover: { title: 'Title', description: 'Description' } },
		{ element: '.Guide_1_19', popover: { title: 'Title', description: 'Description' } },
		// { element: '.Guide_1_20', popover: { title: 'Title', description: 'Description' } },

	  ],
	  // showProgress: true,//控制总页数和当前页数是否显示
	allowClose:false,
	showButtons:false,
	stagePadding:10,//切口到元素的距离
	stageRadius:5,//切口圆弧度
	allowKeyboardControl:true,//控制是否可以键盘控制下一步
	disableActiveInteraction:false,//是否禁用显示元素的交互
	overlayOpacity:.4,
	overlay: true,
	onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
		console.log(popover,options);	
		if(element){
			element.classList.remove('Guide_')
		}
		popover.previousButton.style.display = 'none'
		if(
			options.state.activeIndex >= 1 && options.state.activeIndex <= 2 || 
			options.state.activeIndex >= 18 && options.state.activeIndex <= 19
		){
			popover.footer.style.display = 'block'
			addDiv(options.state.activeElement)
		}else{
			popover.footer.style.display = 'none'
			removeDiv(options.state.activeElement)
		}
		// console.log(options.state.activeIndex);
		driverIndex__ = driverObj__.getState().activeIndex
		data.index = driverIndex__
		store?.commit("setGuide", data);
		element = options.state.activeElement
		element.classList.add('Guide_')

	},
	//销毁前
	onDestroyStarted:()=>{
		// data.driver = false
		store?.commit("setGuide", data);
		driverObj__.destroy();//销毁方法
	},
	//销毁前
	onDestroyed:()=>{
	},
	
	

	// onNextClick:(element, step, options) =>{
	// 	console.log(element,step,options);
	// 	driverObj__.moveNext()
	// 	// element.style.posiiton = 'relative'
	// 	// const mask = document.createElement('div');
	// 	// mask.style.position = 'absolute';
	// 	// mask.style.top = '0';
	// 	// mask.style.left = '0';
	// 	// mask.style.width = '100%';
	// 	// mask.style.height = '100%';
	// 	// mask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
	// 	// mask.style.zIndex = '9999';
	// 	// element.appendChild(mask);
	// }
});
function addDiv(element){
	element.style.posiiton = 'relative'
	const mask = document.getElementsByClassName('driver-mask__')?.[0]
	if(mask){
	}else{
		const mask = document.createElement('div');
		mask.style.position = 'absolute';
		mask.style.top = '0';
		mask.style.left = '0';
		mask.style.width = '100%';
		mask.style.height = '100%';
		mask.style.backgroundColor = 'rgba(0, 0, 0, 0)';
		mask.style.zIndex = '9999';
		mask.classList.add('driver-mask__')
		element.appendChild(mask);
	}
}
function removeDiv(element){
	const mask = document.getElementsByClassName('driver-mask__')?.[0]
	if(mask){
		// element.removeChild(mask);
		mask.remove()
	}
}
const openGuide = () =>{
	// driverObj__.drive();
	store = useStore()
	// driverObj__.moveTo(18);
	let data = {
		index:driverIndex__,
		// driver:true,
	}
	store?.commit("setGuide", data);
	// driverObj__.moveNext();
	// driverObj__.movePrevious();
}	

export{
    openGuide,
	driverObj__,
	driverIndex__,
}