调整多选修改标签功能

src/tool/guide.js

@@ -78,7 +78,7 @@ const driverObj__ = driver({
 		{ element: '.Guide_1_31', popover: { title: '', description: 'Click here to export the collection you just designed.' } },
 		{ element: '.Guide_1_99', popover: { title: 'Begin Your Design', description: 'Your guide is complete, and now the canvas is yours to create freely. For more insights and details, check out our demo video on the homepage at <a href="https://code-create.com.hk/aida/" style="pointer-events: auto;" target="_blank">https://code-create.com.hk/aida/</a><br>You can restart the tutorial at any time by simply telling the robot that you want to.' } },
 	  ],
-	  // showProgress: true,//控制总页数和当前页数是否显示
+	//   showProgress: true,//控制总页数和当前页数是否显示
 	allowClose:false,
 	showButtons:false,
 	stagePadding:10,//切口到元素的距离
@@ -91,9 +91,11 @@ const driverObj__ = driver({
 	// prevBtnText: '‹—',
 	doneBtnText: '✕',
 	onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
-		console.log(popover,options,element);	
+		// console.log(popover,options,element);	
+		// popover.closeButton.style.display = 'block'
+		// popover.closeButton.style.pointerEvents ='auto'
+		addClose()
 		popover.previousButton.style.display = 'none'
-		// let driver = document.querySelector('body')
 		driverIndex__ = driverObj__.getState().activeIndex
 		data = {
 			index : driverIndex__,
@@ -124,23 +126,15 @@ const driverObj__ = driver({
 		// 	options.config.stagePadding = 10
 		// }
 		if(
-			// options.state.activeIndex >=  2 && options.state.activeIndex < 3 || 
 			options.state.activeIndex >=  6 && options.state.activeIndex < 9 || 
 			options.state.activeIndex >= 14 && options.state.activeIndex < 15 || 
-			// options.state.activeIndex >= 24 && options.state.activeIndex < 25 ||
 			driverObj__.isLastStep()
 		){
 			popover.footer.style.display = 'block'
-			// popover.previousButton.style.display = 'block'
 			popover.footerButtons.style.pointerEvents = 'auto';
-			// driver.classList.add('showEvents')
-			// addDiv(options.state.activeElement)
 		}else{
 			popover.footer.style.display = 'none'
-			// popover.previousButton.style.display = 'none'
-			// removeDiv(options.state.activeElement)
 			popover.footerButtons.style.pointerEvents = 'none';
-			// driver.classList.remove('showEvents')
 		}
 		nextTick().then(()=>{
 			if(element){
@@ -149,12 +143,13 @@ const driverObj__ = driver({
 			element = options.state.activeElement
 			element.classList.add('Guide_')
 		})
-		
-		
 	},
 	//销毁前
 	onDestroyStarted:()=>{
-		setDestroy()
+		if (!driverObj__.hasNextStep() || confirm("Are you sure about turning off user guidance?")) {
+			setDestroy()
+		  }
+		  
 	},
 	//销毁前
 	onDestroyed:()=>{
@@ -187,6 +182,25 @@ function addDiv(element){
 		element.appendChild(mask);
 	}
 }
+function addClose(){
+	const body = document.querySelector('body')
+	const div = document.createElement('div');
+	if(document.getElementsByClassName('driver-close__').length == 0){
+		div.classList.add('driver-close__')
+		div.innerText = '×'
+		div.addEventListener('click',()=>{
+			setDestroy()
+		})
+		body.appendChild(div)
+	}
+}
+function removeClose(){
+	const body = document.querySelector('body')
+	if(document.getElementsByClassName('driver-close__').length > 0){
+		let div = document.getElementsByClassName('driver-close__')[0]
+		body.removeChild(div)
+	}
+}
 function removeDiv(element){
 	const mask = document.getElementsByClassName('driver-mask__')?.[0]
 	if(mask){
@@ -236,6 +250,8 @@ function setDestroy(){
 		index : driverIndex__,
 		driver : false,
 	}
+	removeClose()
+
 	store?.commit("setGuide", data);
 	setCookie("isBeginner", false);
 	driverObj__.destroy();//销毁方法