Vue进阶(贰零壹):el-steps 实现页面内导航

在前端开发过程中,当页面内容分为若干栏目后,通过增加导航栏位定位至相应栏目不失为一种良好的用户体验。

应用el-steps可实现页面内栏目跳转。el-steps基本用法如下:

<el-steps :active="active" finish-status="success">
   <el-step title="步骤 1"></el-step>
   <el-step title="步骤 2"></el-step>
   <el-step title="步骤 3"></el-step>
</el-steps>
<el-button style="margin-top:12px;" @click="next">下一步</el-button>

data:{
    active:0
},
methods:{
    next(){
        if(this.active++ >2){
            this.active = 0
        }
    }
}

二、属性介绍

下面重点介绍el-stepsdirectionspaceactiveprocess-statusalign-center属性,如下:
在这里插入图片描述

通过查看Element手册,需要定宽的步骤条时,设置space属性即可,单位为px,如果不设置为自适应(若不确定步骤条中每一步骤中内容高度或宽度,可设置为自适应;为使界面美观,可修改el-step属性:

.el-step__main {
	width: 100%!important;
	padding-left: 3%!important;
	margin-bottom: 3%!important;
}


el-step属性如下图所示:
在这里插入图片描述

这里重点介绍下如何应用el-steps动态展示所需信息。

三、Demo

<div>
	<el-steps direction="vertical" :align-center="true" :active="arr.length" finish-status="success">
	<el-step :title="item.title" :description="item.description" v-for="(item, index) in arr" :key="index" @click.native="onCLick(index)">
		<template slot="description">
			<!--表单内容-->
		</template>
	</el-step>
</el-steps>
</div>
<div>
	<transition name="slide-fade">
		<div v-if="shownav" class="rightList">
			<span class="line\_prev"></span>
			<ul>
				<li v-for="(item, index) in navArr" :key="index" @click="crollTo(index)" :class="{active: active====index}">
					<img src="cue.png" v-if="active === index">
				</li>
			</ul>
			<span class="line\_next"></span>
		</div>
	</transition>
</div>

以上只是实现了步骤条内容的动态展示,若需实现根据用户浏览内容定位导航栏目或者根据导航栏目快速定位至相关栏目处,需通过动态监听页面内容实现。

<!--流程流转处理节点导航栏位-->
<div v-if="flowopinoin.length > 4" :class="[flowopinoin.length > 10 ? 'navConst' : 'nav']">
  <div :class="[flowopinoin.length > 10 ? 'navStyleConst' : 'navStyle']">
    <transition name="slide-fade">
      <div v-if="shownav" class="rightList">
        <span class="line\_prev"></span>
        <ul>
          <li v-for="(item, index) in flowopinoin" :key="index" @click="scrollTo(index)" :class="{active: active===index}">
            <img src="../../../assets/img/cur.png" width="20" v-if="active === index"/>
            <span>{{item.nodename}}</span>
          </li>
        </ul>
        <span class="line\_next"></span>
      </div>
    </transition>
  </div>
  <el-button @click="shownav = !shownav" type="primary" :class="[flowopinoin.length > 10 ? 'shownavConst' : 'shownav']">
    <i style="margin-left: -6px;" :class="[shownav ? 'el-icon-d-arrow-right': 'el-icon-d-arrow-left']"></i>
  </el-button>
</div>
<script>
 this.$nextTick(() => {
 // 监听滚动事件
 window.addEventListener('scroll', this.onScroll, false)
 })


// 滚动监听器
onScroll () {
 // 获取所有锚点元素
 const navContents = document.querySelectorAll('.el-steps>.el-step')
 // console.log('navContents:', navContents)
 // 所有锚点元素的 offsetTop
 const offsetTopArr = []
 for (let i = 0; i < navContents.length; i++) {
 offsetTopArr.push(navContents[i].offsetTop)
 }
 // navContents.forEach(item => {
 // offsetTopArr.push(item.offsetTop)
 // })
 // 获取当前文档流的 scrollTop
 const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
 // 定义当前点亮的导航下标
 for (let n = 0; n < offsetTopArr.length; n++) {
 // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
 // 那么此时导航索引就应该是n了
 // console.log('scrollTop:', scrollTop)
 // console.log('offsetTopArr[n]:', offsetTopArr[n])
 if (scrollTop >= offsetTopArr[n]) {
 this.navIndex = n
 }
 }
 this.active = this.navIndex
},
// 跳转到指定索引的元素
scrollTo (index) {
 // 获取目标的 offsetTop
 // css选择器是从 1 开始计数,我们是从 0 开始,所以要 +1
 const targetOffsetTop = document.querySelector(`.el-steps>.el-step:nth-child(${index + 1})`).offsetTop
 // 获取当前 offsetTop
 let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
 // 定义一次跳 50 个像素,数字越大跳得越快,但是会有掉帧得感觉,步子迈大了会扯到蛋
 const STEP = 50
 // 判断是往下滑还是往上滑
 // console.log('scrollTop:', scrollTop)
 // console.log('targetOffsetTop:', targetOffsetTop)
 if (scrollTop >= targetOffsetTop) {
 // 往上滑
 smoothUp()
 } else {
 // 往下滑
 smoothDown()
 }
 // 定义往下滑函数
 function smoothDown () {
 // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
 if (scrollTop < targetOffsetTop) {
 // 如果和目标相差距离大于等于 STEP 就跳 STEP
 // 否则直接跳到目标点,目标是为了防止跳过了。
 if (targetOffsetTop - scrollTop >= STEP) {
 scrollTop += STEP
 } else {
 scrollTop = targetOffsetTop
 }
 document.body.scrollTop = scrollTop
 document.documentElement.scrollTop = scrollTop
 // 关于 requestAnimationFrame 可以自己查一下,在这种场景下,相比 setInterval 性价比更高
 requestAnimationFrame(smoothDown)
 }
}
// 定义往上滑函数
function smoothUp () {
 if (scrollTop > targetOffsetTop) {
 if (scrollTop - targetOffsetTop >= STEP) {
 scrollTop -= STEP
 } else {
 scrollTop = targetOffsetTop
 }
 document.body.scrollTop = scrollTop
 document.documentElement.scrollTop = scrollTop
 requestAnimationFrame(smoothUp)
 }
}
}
</script>
<style>
 @charset "UTF-8";
 .navConst {
 position:fixed;
 right: 3%;
 top:15%;
 }
 .nav {
 position:fixed;
 right: 2%;
 top:15%;
 }
 .navStyleConst {
 position:fixed;
 top:15%;
 cursor: pointer;
 right: 3%;
 width: 7%;
 height: auto;
 max-height:800px;
 overflow: scroll;
 overflow-x: hidden;
 }
 .navStyle {
 position:fixed;
 top:51%;
 cursor: pointer;
 right: 2%;
 width: 7%;
 height: auto;
 }
 .shownavConst {
 position:absolute;
 right: -37px;
 top: 50%;
 width: 10px;
 height: 100px;
 }
 .shownav {
 position: fixed;
 right:18px;
 top: 57%;
 }
 .shownav2 {
 position: fixed;
 right:18px;
 top: 38%;
 }
 ul {
 list-style: none;
 }
 .active img {
 position: absolute;
 left: -26px;
 top: 5px;
 z-index: 2;
 }
 .line\_prev{
 display:inline-block;
 width: 1px;
 height:20px;
 background:#ccc;
 position:relative;
 left:20px;
 bottom:-8px;
 }
 .line\_prev:before{
 content: '';
 position:absolute;
 width:9px;
 height:9px;
 border-radius:50%;
 border:2px solid #EDEDED;
 z-index:1;
 left:-4px;
 top:-8px;
 }
 .rightList li{
 position:relative;
 line-height:25px;
 cursor:pointer;
 padding-bottom:16px;
 }
 .rightList li span{
 padding-left:5px;
 border-bottom: 1px solid #e3e5eb;
 }
 .rightList li:before{


### 基础学习:

前端最基础的就是 HTML , CSS 和 JavaScript 。

##### 网页设计:HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。



![](https://img-blog.csdnimg.cn/img_convert/39276007b42e173feca6269bc19e1cbe.webp?x-oss-process=image/format,png)


CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

![](https://img-blog.csdnimg.cn/img_convert/cb09e9b7807e0490a89fc65b3eaefca8.webp?x-oss-process=image/format,png)


##### 动态交互:JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

图片、视频等。



[外链图片转存中...(img-KmaufE6t-1718770565702)]


CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

[外链图片转存中...(img-1GfR9RRV-1718770565703)]


##### 动态交互:JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

![](https://img-blog.csdnimg.cn/img_convert/3578a0bd75e6c5d777fae6ce7f6f5459.webp?x-oss-process=image/format,png)
  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
作为一款前端MVVM框架,Vue能够方便地创建复杂的UI组件。在Vue的丰富生态中,有许多可用的扩展组件库,可以大大减轻开发者的开发难度。其中,一个非常实用的组件是下拉表格组件,也称为combo grid。在这里,我们介绍一个基于Vue的下拉表格组件el-combo-grid。 简介 el-combo-grid是一个基于Vue的下拉表格组件,它可以方便地实现下拉选择和表格展示的功能。使用el-combo-grid,我们可以将表格数据作为下拉列表的选项,用户可以通过下拉列表选择一行数据,也可以通过表格展示更多的数据信息。同时,el-combo-grid还支持简单的分页和过滤功能,可以更好地展示大量数据。 特性 - 支持下拉选择和表格展示两种模式 - 支持分页和过滤功能 - 支持自定义模板和样式 - 支持异步数据加载 安装 el-combo-grid可以通过npm安装: npm install el-combo-grid 引入 在vue组件中引入el-combo-grid: import ElComboGrid from 'el-combo-grid'; Vue.component('el-combo-grid', ElComboGrid); 使用 el-combo-grid的使用非常简单,只需要将数据作为props传入即可。以下是一个简单的例子: <template> <div> <el-combo-grid v-model="selected" :data="data" :columns="columns"></el-combo-grid> </div> </template> <script> export default { data() { return { selected: {}, data: [ {id: 1, name: 'apple', price: 5.99}, {id: 2, name: 'banana', price: 2.99}, {id: 3, name: 'orange', price: 3.99}, {id: 4, name: 'pear', price: 4.99}, ], columns: [ {field: 'id', title: 'ID'}, {field: 'name', title: 'Name'}, {field: 'price', title: 'Price'}, ], }; }, }; </script> 在这个例子中,我们将一个包含4行数据的数组作为数据传入el-combo-grid组件中。同时,我们定义了3列字段,用于展示id、name、price三个属性。在页面上,我们可以通过下拉列表选择一行数据,也可以通过表格展示所有的数据。当用户选择数据时,会将选择的数据绑定到selected变量中。 总结 el-combo-grid是一个非常实用的下拉表格组件,可以方便地实现下拉选择和表格展示的功能。它支持分页和过滤功能,也支持自定义模板和样式。如果你需要在Vue项目中使用下拉表格组件,不妨试试el-combo-grid。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值