vue2 使用组件实现步骤条

原创

已于 2023-02-16 10:04:25 修改 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #html #vue #javascript

于 2023-02-16 09:51:11 首次发布

文章展示了一个使用Vue.js编写的步骤条组件，当点击按钮时，步骤条会按顺序改变激活状态。代码中定义了组件模板、数据和方法，通过active属性控制当前步骤，并用CSS定义了不同状态下的样式。

效果图
单击按钮逐次进行下一步
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>步骤条</title>
    <script src='./js/vue.js'></script>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        #app {
     
     
            position: relative;
            width: 880px;
            height: 400px;
            padding: 100px;
            margin: 100px auto;
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
            box-sizing: border-box;
        }
        #app button {
     
     
            width: 100px;
            height: 40px