Element UI 风格步骤条组件 CSS 和 JS 代码示例

下面是一个使用 Element UI 风格的步骤条组件的示例代码：\n\nHTML 代码：\nhtml\n<div id="app">\n <el-steps :active="activeStep" align-center>\n <el-step title="步骤1"></el-step>\n <el-step title="步骤2"></el-step>\n <el-step title="步骤3"></el-step>\n </el-steps>\n</div>\n\n\nCSS 代码：\ncss\n/* 引入 element UI 的样式文件 */\n@import "~element-ui/lib/theme-chalk/index.css";\n\n/* 自定义步骤条的样式 */\n#app {\n margin-top: 20px;\n}\n\n.el-steps {\n background-color: #f5f7fa;\n padding: 10px;\n}\n\n.el-step__title {\n color: #909399 !important;\n}\n\n.el-step__title.is-process {\n color: #409eff !important;\n}\n\n.el-step__title.is-finish {\n color: #67c23a !important;\n}\n\n\nJavaScript 代码：\njavascript\nimport Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\n\nVue.use(ElementUI);\n\nnew Vue({\n el: '#app',\n data() {\n return {\n activeStep: 0\n };\n }\n});\n\n\n注意：上述代码是基于 Vue 框架和 Element UI 库的，你需要在项目中引入 Vue 和 Element UI 的相关文件才能正常运行。