jsp与网站开发期末试题,手机怎么自己做网页,友情链接检测,网站建设需要些什么东西项目场景
客户要求做一个表单页面#xff0c;表单数据分为三步#xff0c;每一步骤是一个单独的 Vue 组件#xff0c;表单上方需要使用锚点组件实现锚点定位到每一步的功能。 代码总览
templatediv classguided-form-content-wrapper!-- …项目场景
客户要求做一个表单页面表单数据分为三步每一步骤是一个单独的 Vue 组件表单上方需要使用锚点组件实现锚点定位到每一步的功能。 代码总览
templatediv classguided-form-content-wrapper!-- Anchor 锚点 --a-anchor :affixfalse :target-offset16 :get-containergetContainer clickhandleClickAnchora-anchor-link v-for(item, $index) in steps :key$index :href# item.id :titleitem.title //a-anchora-form refformRef :modelform v-bindlayout classform-wrapperDemoFormStep1 :idsteps[0].id /DemoFormStep2 :idsteps[1].id /DemoFormStep3 :idsteps[2].id //a-form/div
/template
script langts setup
import DemoFormStep1 from ./DemoFormStep1.vue;
import DemoFormStep2 from ./DemoFormStep2.vue;
import DemoFormStep3 from ./DemoFormStep3.vue;const form refFormDataDto({});
const layout {labelCol: { flex: 0 0 140px },wrapperCol: { flex: 1 1 0 }
};
const steps [{ id: step1, title: 步骤一, description: 第一步描述 },{ id: step2, title: 步骤二, description: 第二步描述 },{ id: step3, title: 步骤三, description: 第三步描述 }
];/** Anchor 锚点指定滚动的容器 */
function getContainer() {// 给组件指定渲染的容器解决锚点不会随页面滚动而移动的问题return document.querySelector(.form-wrapper);
}
/** Anchor 锚点形式点击锚点 */
function handleClickAnchor(e, link) {// 阻止点击的默认事件修改路由e.preventDefault();if (link.href) {const element document.querySelector(link.href);element element.scrollIntoView({ block: start, behavior: smooth, alignToTop: false });}
}
/script
style langless scoped
.guided-form-content-wrapper {height: 100%;display: flex;flex-direction: column;:deep(.ant-anchor) {display: flex;}.form-wrapper {flex: 1 0 0;overflow: auto;padding: 16px;background-color: #f0f2f5;}
}
/style
踩坑点
1. 锚点组件水平展示
Anchor 组件默认锚点 title 垂直显示通过写 CSS 样式的方式使锚点 title 水平展示。 2. 设置锚点
首先使用 Anchor 组件设置锚点。
a-anchor :affixfalse :target-offset16 :get-containergetContainer clickhandleClickAnchora-anchor-link v-for(item, $index) in steps :key$index :href# item.id :titleitem.title /
/a-anchor
href 为锚点链接# item.id 表示锚点链接对应的是 id 为 item.id 的元素例如#step1 表示 id 为 step1 的 DOM 元素。
其次跳转的位置要有一个id注意点是 这个 id 和上一步设置的 # 号后面的内容是一致的。 注意# 号后面不能为纯数字否则无法正常定位浏览器报错。 3. 点击锚点 title 页面路由发生变化。
由于使用 href 设置了锚点链接点击锚点的时候页面 url 发生了变化。这是由于 Anchor 组件的点击默认事件会修改路由。 为了防止这种现象的发生需要在点击锚点 title 时阻止路由跳转。因此这里定义 click 事件的 handler阻止修改路由并通过 JavaScript 实现点击锚点 tilte 定位到相应的锚点。
/** Anchor 锚点形式点击锚点 */
function handleClickAnchor(e, link) {// 阻止点击的默认事件修改路由e.preventDefault();if (link.href) {const element document.querySelector(link.href);element element.scrollIntoView({ block: start, behavior: smooth, alignToTop: false });}
}
4. 锚点 title 没有随着页面滚动高亮变化
Anchor 锚点组件的锚点 title 没办法随着页面滚动而高亮变化但是点击 title 跳转具体锚定位置的功能却是没有问题的。经分析Anchor 组件有一个 getContainer 属性需要使用该属性来指定 Anchor 组件指定滚动的容器默认情况下是window但是在本业务场景下是与 Anchor 同级的表单组件进行滚动所以通过 getContainer 属性来解决页面滚动时上方锚点 title 没有高亮的问题。 /** Anchor 锚点指定滚动的容器 */
function getContainer() {// 给组件指定渲染的容器解决锚点不会随页面滚动而移动的问题return document.querySelector(.form-wrapper);
}
