aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2023-11-28-用户指引功能

Browse Source
This commit is contained in:
X1627315083
2023-11-28 16:21:00 +08:00
parent d206509d93
commit 1987ed7f15
26 changed files with 658 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/tool/guide.js
View File

@@ -11,7 +11,7 @@ let data = {
}
const driverObj__ = driver({
steps: [
{ element: '#Guide_1_1', popover: { title: 'Title', description: 'Description' } },
{ 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' } },
@@ -31,8 +31,18 @@ const driverObj__ = driver({
{ 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' } },
{ element: '.Guide_1_20', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_21', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_22', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_23', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_24', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_25', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_26', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_27', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_28', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_29', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_30', popover: { title: 'Title', description: 'Description' } },
{ element: '.Guide_1_16', popover: { title: 'Title', description: 'Description' } },
],
// showProgress: true,//控制总页数和当前页数是否显示
allowClose:false,
@@ -42,26 +52,34 @@ const driverObj__ = driver({
allowKeyboardControl:true,//控制是否可以键盘控制下一步
disableActiveInteraction:false,//是否禁用显示元素的交互
overlayOpacity:.4,
allowKeyboardControl:false,
overlay: true,
onPopoverRender: (popover, options) => {//每个步骤的元素和所有信息
console.log(popover,options);
// console.log(popover,options);
if(element){
element.classList.remove('Guide_')
}
popover.previousButton.style.display = 'none'
let driver = document.getElementsByClassName('driver-active')[0]
if(
options.state.activeIndex >= 1 && options.state.activeIndex <= 2 ||
options.state.activeIndex >= 18 && options.state.activeIndex <= 19
options.state.activeIndex >= 18 && options.state.activeIndex < 19 ||
options.state.activeIndex >= 24 && options.state.activeIndex < 25
){
popover.footer.style.display = 'block'
driver.classList.add('showEvents')
addDiv(options.state.activeElement)
}else{
popover.footer.style.display = 'none'
removeDiv(options.state.activeElement)
driver.classList.remove('showEvents')
}
// console.log(options.state.activeIndex);
driverIndex__ = driverObj__.getState().activeIndex
data.index = driverIndex__
data = {
index : driverIndex__,
driver : true,
}
store?.commit("setGuide", data);
element = options.state.activeElement
element.classList.add('Guide_')
@@ -69,7 +87,7 @@ const driverObj__ = driver({
},
//销毁前
onDestroyStarted:()=>{
// data.driver = false
data.driver = false
store?.commit("setGuide", data);
driverObj__.destroy();//销毁方法
},
@@ -119,12 +137,12 @@ function removeDiv(element){
}
}
const openGuide = () =>{
// driverObj__.drive();
driverObj__.drive();
store = useStore()
// driverObj__.moveTo(18);
let data = {
index:driverIndex__,
// driver:true,
driver:true,
}
store?.commit("setGuide", data);
// driverObj__.moveNext();