vue效果实例大全,vue特效怎么弄
这篇文章主要为大家详细介绍了某视频剪辑软件实现步骤条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现步骤条效果的具体代码，供大家参考，具体内容如下
步骤总数和初始选择步骤均可自定义设置，每个步骤标题和描述也均可自定义设置传入
效果图如下：
创建步骤条组件步骤。vue:
模板
div class=m-steps-area
div class=m-steps
差异
:class=[m-steps-item ，
{ 已完成：当前n，
process: current===n n！==总步骤数，
“最后一个流程”:当前===总步骤数n===总步骤数，
中间等待：当前不不！==总步骤数，
“最后等待”:当前n n===总步数，
}
]
v-for=n in totalSteps
:key=n
@click=onChange(n)
div class=m-steps-icon
span class= u-icon v-if= current=n { n } }/span
span class=u-icon v-else/span
/div
m-步骤-内容
div class= u-steps-title { { steps label[n-1] S n } }/div
div class= u-steps-description { steps desc[n-1] desc n } }/div
/div
/div
/div
/div
/模板
脚本
导出默认值{
名称："步骤",
道具：{
步骤标签:{ //步骤标题数组
类型：数组，
默认值：()={
return []
}
},
步骤描述：{ //步骤描述数组
类型：数组，
默认值：()={
return []
}
},
总步骤数：{ //总的步骤数
类型：数量，
默认值：3
},
当前步骤：{ //当前选中的步骤
类型：数量，
默认值：1
}
},
data () {
返回{
//若当前选中步骤超过总步骤数，则默认选择步骤一
当前：这个。当前步骤。总步数？1:这个。目前的步骤
}
},
方法：{
onChange (index) { //点击切换选择步骤
console.log(索引：,索引)
如果(this.current！==索引){
this.current=索引
这个发出(更改，索引)
}
}
}
}
/脚本
style lang=less 范围。间位步骤-区域{
宽度：1100像素
边距：0px自动；m步数{
填充：30px 0；
显示器：flex。间位步骤-项目{
显示：内嵌-块；
flex:1；//弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容
溢出：隐藏；
字体大小：16px
行高：32px。m-steps-icon {
显示：内嵌-块；
右边距：8px
宽度：32px
高度：32px
边界半径：50%;
文本对齐：居中；
}。间位步骤-内容{
显示：内嵌-块；
垂直对齐：顶部；
填充-右：16px。u型台阶-标题{
位置：相对；
显示：内嵌-块；
填充-右：16px
}。u型台阶-描述{
字体大小：14px
最大宽度：140像素；
}
}
}。已完成{
右边距：16px
光标：指针；
：悬停{。间位步骤-内容{。u型台阶-标题{
颜色：# 1890ff
}。u型台阶-描述{
颜色：# 1890ff
}
}
}。m-steps-icon {
背景：# fff
边框：1px实心rgba(0，0，0，25);
边框颜色：# 1890ff。u形图标{
颜色：# 1890ff
}
}。间位步骤-内容{
颜色：rgba(0，0，0，65);u型台阶-标题{
颜色：rgba(0，0，0，65);
：在{
背景：# 1890ff
位置：绝对；
top:16px；
左：100%;
显示：块；
宽度：9999像素
高度：1px
内容："";
}
}。u型台阶-描述{
颜色：rgba(0，0，0，45);
}
}
}。流程{
右边距：16px。m-steps-icon {
背景：# 1890ff
边框：1px实心rgba(0，0，0，25);
边框颜色：# 1890ff。u形图标{
颜色：# fff
}
}。间位步骤-内容{
颜色：rgba(0，0，0，65);u型台阶-标题{
字体粗细：600;
颜色：rgba(0，0，0，85);
：在{
背景：# e8e8e8
位置：绝对；
top:16px；
左：100%;
显示：块；
宽度：9999像素
高度：1px
内容："";
}
}。u型台阶-描述{
颜色：rgba(0，0，0，65);
}
}
}。最后一个进程{
右边距：0;m-steps-icon {
背景：# 1890ff
边框：1px实心rgba(0，0，0，25);
边框颜色：# 1890ff。u形图标{
颜色：# fff
}
}。间位步骤-内容{
颜色：rgba(0，0，0，65);u型台阶-标题{
字体粗细：600;
颜色：rgba(0，0，0，85);
}。u型台阶-描述{
颜色：rgba(0，0，0，65);
}
}
}。中间等待{
右边距：16px
光标：指针；
：悬停{。m-steps-icon {
边框：1px纯色# 1890ff。u形图标{
颜色：# 1890ff
}
}。间位步骤-内容{。u型台阶-标题{
颜色：# 1890ff
}。u型台阶-描述{
颜色：# 1890ff
}
}
}。m-steps-icon {
背景：# fff
边框：1px实心rgba(0，0，0，25);u形图标{
颜色：rgba(0，0，0，25);
}
}。间位步骤-内容{
颜色：rgba(0，0，0，65);u型台阶-标题{
颜色：rgba(0，0，0，45);
：在{
背景：# e8e8e8
位置：绝对；
top:16px；
左：100%;
显示：块；
宽度：9999像素
高度：1px
内容："";
}
}。u型台阶-描述{
颜色：rgba(0，0，0，45);
}
}
}。最后-等待{
右边距：0;
光标：指针；
：悬停{。m-steps-icon {
边框：1px纯色# 1890ff。u形图标{
颜色：# 1890ff
}
}。间位步骤-内容{。u型台阶-标题{
颜色：# 1890ff
}。u型台阶-描述{
颜色：# 1890ff
}
}
}。m-steps-icon {
背景：# fff
边框：1px实心rgba(0，0，0，25);u形图标{
颜色：rgba(0，0，0，25);
}
}。间位步骤-内容{
颜色：rgba(0，0，0，65);u型台阶-标题{
颜色：rgba(0，0，0，45);
}。u型台阶-描述{
颜色：rgba(0，0，0，45);
}
}
}
}
}
/风格
在要使用的页面引入步伐组件，并传入相关初始数据：
步骤：当前步骤= 1 :总步骤= 3 :步骤标签=步骤标签:步骤desc=步骤desc @ change= onChange /
从"@/组件/步骤"导入步骤
组件：{
步伐
},
data () {
返回{
步骤标签:[步骤1 ,步骤2 ,步骤3 ,步骤4 ,步骤5],
步骤描述：[描述1 ,描述2 ,描述3 ,描述4 ,描述5]
}
}
方法：{
onChange (index) { //父组件获取切换后的选中步骤
console.log(parentIndex:，Index)
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。