Vue学习笔记:Vue中封装自定义步骤条 实现上下一步
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
Vue中封装自定义步骤条 实现上下一步
效果图:
如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了;
这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条组件;
设计原理:当点击下一步的,获取步骤的index, 通过绑定的class 给经过的步骤添加样式;
:class="index <= stepsIndex ? 'on' : ''"
定义步骤条的条数,数组定义在父组件,通过this.$parent 获取父组件的数组;
步骤条组件中只封装了步骤条的样式和dom,数据和方法均在父组件定义;
stepsData:[
{name:'第一步'},
{name:'第二步'},
{name:'第三步'},
{name:'第四步'}
]
循环渲染出步骤条
<div class="steps-box">
<div
v-for="(item, index) in stepsData"
class="steps-card"
:class="index <= stepsIndex ? 'on' : ''"
:key="index">
<span>{{ index + 1 }}</span>
<span>{{ item.name }}</span>
</div>
</div>
以上是封装步骤条组件的代码;
如下是父组件引用步骤条组件和上下一步的方法!
import steps from "../components/steps.vue";
components:{
steps
}
引用
<!--步骤条-->
<steps ref="stepsChild"></steps>
父组件定义的上下一步方法
//下一步
prevSteps(){
this.stepsIndex --
this.$refs.stepsChild.stepsFun()
},
nextSteps(){
this.stepsIndex ++
this.$refs.stepsChild.stepsFun()
}
===========================================================================
完整代码
步骤条组件
<template>
<div class="steps-box">
<div
v-for="(item, index) in stepsData"
class="steps-card"
:class="index <= stepsIndex ? 'on' : ''"
:key="index">
<span>{{ index + 1 }}</span>
<span>{{ item.name }}</span>
</div>
</div>
</template>
<script>
export default {
name: "steps",
data: function () {
return {
stepsIndex: "",
stepsData: [],
};
},
created() {
this.stepsIndex = this.$parent.stepsIndex;
this.stepsData = this.$parent.stepsData;
},
methods: {
//下一步
stepsFun() {
this.stepsIndex = this.$parent.stepsIndex;
},
},
};
</script>
<style lang="scss" scoped>
/* steps-box*/
.steps-box {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
margin-top: 200px;
.steps-card {
width: 300px;
cursor: pointer;
display: flex;
align-items: center;
color: rgba(0, 0, 0, 0.25);
position: relative;
span:nth-of-type(1) {
display: inline-block;
width: 26px;
height: 26px;
text-align: center;
line-height: 26px;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 50%;
margin-right: 10px;
i {
font-style: normal;
}
}
}
.steps-card:before {
width: 194px;
height: 1px;
content: "";
background: #e9e9e9;
margin: 0 15px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
.steps-card:last-of-type {
width: auto;
}
.steps-card:last-of-type:before {
width: 0;
}
.steps-card.on {
display: flex;
align-items: center;
color: rgba(0, 0, 0, 0.85);
span:nth-of-type(1) {
display: inline-block;
width: 26px;
height: 26px;
text-align: center;
line-height: 26px;
background: #1d73f6;
border: 1px solid #1d73f6;
color: #fff;
border-radius: 50%;
margin-right: 10px;
}
}
.steps-card.on:before {
background: #1d73f6;
}
}
</style>
父组件
<template>
<div class="addTask">
<!--步骤条-->
<steps ref="stepsChild"></steps>
<!--内容区域-->
<div class="task-main-box">
<div v-if="stepsIndex == 0" class="task-con-box"><h1>第一步</h1></div>
<div v-if="stepsIndex == 1" class="task-con-box"><h1>第二步</h1></div>
<div v-if="stepsIndex == 2" class="task-con-box"><h1>第三步</h1></div>
<div v-if="stepsIndex == 3" class="task-con-box"><h1>第四步</h1></div>
</div>
<!--操作按钮-->
<div class="button-box">
<div v-if="stepsIndex == 0">取消</div>
<div v-if="stepsIndex == 3">完成</div>
<div @click="prevSteps" v-if="stepsIndex != 0">上一步</div>
<div @click="nextSteps" v-if="stepsIndex != 3">下一步</div>
</div>
</div>
</template>
<script>
import steps from "../components/steps.vue";
export default {
name: "addTask",
data() {
return {
//新建任务
stepsIndex:0,
stepsData:[
{name:'第一步'},
{name:'第二步'},
{name:'第三步'},
{name:'第四步'}
]
};
},
methods: {
//返回数据采集页面
goback() {
this.$parent.addTask = false;
},
//下一步
prevSteps(){
this.stepsIndex --
this.$refs.stepsChild.stepsFun()
},
nextSteps(){
this.stepsIndex ++
this.$refs.stepsChild.stepsFun()
}
},
components:{
steps
}
};
</script>
<style lang="scss" scoped>
.addTask{
width: 100%;
height: 100%;
overflow: hidden;
.task-main-box{
width: 100%;
height:calc(100% - 45vh);
.task-con-box{
width: 100%;
height:100%;
}
}
.button-box{
display: flex;
justify-content: center;
div{
padding: 10px;
background: #2F86FF;
margin: 10px;
border-radius:4px;
cursor:pointer;
color:#ffffff;
}
}
}
</style>
END!
Vue笔记:以上方法仅供参考!感谢阅读,欢迎点赞!
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)