vue3 锚点定位双向滚动加v-show-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3 锚点定位双向滚动加v-show。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

onMounted(() => {
getversion()//版本数据
gettreeData()//左侧树的数据
})

// 更新日志
const conview = ref(true)
const updatedata = ref()
const updatelog = () => {
let aparams = {
versionId: versionValue.value
}
queryDocumentUpdateLog(aparams).then(({ data, status, message }) => {
if (status == 200) {
updatedata.value = data.body
conview.value = false
} else {
ElMessage({
type: ‘error’,
message,
})
}
})
}

// 左侧选择版本选择
const versionValue = ref()
// 版本数据
const versionOptions = ref()
const getversion = () => {
queryVersion({}).then(({ data, status, message }) => {
versionOptions.value = data.body
versionValue.value = data.body[data.body.length - 1].id
}).then(() => {
getdoc()//右侧文档数据
})
}

// 左侧树的数据
const treeData = ref()
const gettreeData = () => {
queryDocumentDirectory({}).then(({ data, status, message }) => {
if (status == 200) {
treeData.value = data.body
} else {
ElMessage({
type: ‘error’,
message,
})
}
})
}
// 左侧树结构
const oneshow = ref(‘1-1’)//第一层
const openonelevel = (num) => {
if (num == oneshow.value) {
oneshow.value = ‘1’
twoshow.value = ‘2’
threeshow.value = ‘3’
} else {
oneshow.value = num
twoshow.value = ‘2’
threeshow.value = ‘3’
}
}
const twoshow = ref(‘2-1’)//第二层
const opentwolevel = (num) => {
if (num == twoshow.value) {
twoshow.value = ‘2’
threeshow.value = ‘3’
} else {
twoshow.value = num
threeshow.value = ‘3’
}
}
const threeshow = ref(‘3-1’)//第三层
const openthreelevel = (num, id) => {
if (!conview.value) {
conview.value = true
}

if (num == threeshow.value) {
    threeshow.value = '3'
} else {
    threeshow.value = num
    let aa = `#anchor_${id}`

    setTimeout(() => {
        document.querySelector(aa).scrollIntoView({
            behavior: "smooth",
            block: 'start'
        });
    }, 100);
}

}
// 文档回显
const anchorRef = ref()
const handleScroll = () => {
const navContents = document.querySelectorAll(‘.anchor_item’)
const offsetTopArr = []
const offsetTopids = []
navContents.forEach((item) => {
offsetTopArr.push(item.offsetTop)
offsetTopids.push(item.id)
})
const scrollTop = anchorRef.value.scrollTop
let aindex = null
offsetTopArr.forEach((item, index) => {
if (scrollTop >= item - 170) {
aindex = index
}
})
for (let x = 0; x < treeData.value.length; x++) {
for (let y = 0; y < treeData.value[x].children.length; y++) {
for (let z = 0; z < treeData.value[x].children[y].children.length; z++) {
let aname = ‘anchor_’ + treeData.value[x].children[y].children[z].id
let bname = offsetTopids[aindex]
if (aname == bname) {
oneshow.value = treeData.value[x].level
twoshow.value = treeData.value[x].children[y].level
threeshow.value = treeData.value[x].children[y].children[z].level
}
}
}
}
}
// 返回
const backmata = () => {
conview.value = true
}

// 右侧文档数据
const matadoc = ref()
const getdoc = () => {
let aparams = {
versionId: versionValue.value
}
queryDocumentDetail(aparams).then(({ data, status, message }) => {
if (status == 200) {
matadoc.value = data.body
} else {
ElMessage({
type: ‘error’,
message,
})
}
})
}
// 表格头部的颜色
const tabstyle = () => {
let aa = {
background: ‘#F3F5FF’, color: ‘#000’, fontSize: ‘14px’, fontFamily: ‘PingFang SC-Medium, PingFang SC’, fontWeight: 600, color: ‘#292A2E’,
}
return aa
}

// 下载文档
const downpdf = () => {
//超出canvas限度打印
var pages = document.querySelector(‘#pdfContent’).children;
exportHTMLToPDF(pages, ‘模板’)

//正常打印
// htmlToPdf('#pdfContent', '模板')

// window打印
// window.print();

}
const exportHTMLToPDF = (pages, name) => {
//超出canvas限度打印函数
const opt = {
margin: [0, 0],
filename: name + ‘.pdf’,
image: {
type: ‘jpeg’,
quality: 0.98
},
html2canvas: {
dpi: 192,
scale: 2,
letterRendering: true
},
jsPDF: {
unit: ‘mm’,
format: ‘a3’,
orientation: ‘landscape’
}
};
var worker = html2pdf()
for (let i = 0; i < pages.length; i++) {
console.log(pages[i]);
worker = worker.set(opt).from(pages[i]).toContainer().toCanvas().toPdf().get(‘pdf’).then((pdf) => {
if (i < pages.length - 1) { // Bump cursor ahead to new page until on last page
pdf.addPage();
}
});
}
worker.save();
}
// const htmlToPdf = (el, name) => {
// //正常打印
// let ele = document.querySelector(el);

// let opt = {
// margin: 1,
// filename: name + ‘.pdf’,
// image: {
// type: ‘jpeg’,
// quality: 0.98
// },
// html2canvas: {
// scale: 2,
// dpi: 92,
// },
// jsPDF: {
// unit: ‘in’,
// format: ‘letter’,
// orientation: ‘portrait’
// }
// };
// html2pdf().set(opt).from(ele).save();