写一个element UI风格的步骤条组件css js代码
下面是一个使用element UI风格的步骤条组件的示例代码:
HTML代码:
<div id="app">
<el-steps :active="activeStep" align-center>
<el-step title="步骤1"></el-step>
<el-step title="步骤2"></el-step>
<el-step title="步骤3"></el-step>
</el-steps>
</div>
CSS代码:
/* 引入element UI的样式文件 */
@import "~element-ui/lib/theme-chalk/index.css";
/* 自定义步骤条的样式 */
#app {
margin-top: 20px;
}
.el-steps {
background-color: #f5f7fa;
padding: 10px;
}
.el-step__title {
color: #909399 !important;
}
.el-step__title.is-process {
color: #409eff !important;
}
.el-step__title.is-finish {
color: #67c23a !important;
}
JavaScript代码:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
el: '#app',
data() {
return {
activeStep: 0
};
}
});
注意:上述代码是基于Vue框架和Element UI库的,你需要在项目中引入Vue和Element UI的相关文件才能正常运行
原文地址: https://www.cveoy.top/t/topic/ioQi 著作权归作者所有。请勿转载和采集!