如何使用ElementUI中的步骤条并进行改变

 时间:2024-10-24 23:37:48

1、双击打开HBuilderX开发工具,创建vue项目并打开

如何使用ElementUI中的步骤条并进行改变

2、在项目根目录下,打开Git命令窗口,输入安装element-ui命令

如何使用ElementUI中的步骤条并进行改变

3、打开项目中的main.js文件,导入element-ui以及对应的样式

如何使用ElementUI中的步骤条并进行改变

4、在components文件夹下,新建vue组件StepData.vue

如何使用ElementUI中的步骤条并进行改变

5、打开已新建的vue文件,插入el-steps标签并添加子项el-step

如何使用ElementUI中的步骤条并进行改变

6、在script标签中,data对象初始化变量active,然后定义方法nextStep

如何使用ElementUI中的步骤条并进行改变

7、打开App.vue文件,导入StepData组件,并在界面代码中引用

如何使用ElementUI中的步骤条并进行改变

8、保存代码并运行项目,打开浏览器,查看界面效果

如何使用ElementUI中的步骤条并进行改变

9、点击下一步按钮,查看步骤条的变化

如何使用ElementUI中的步骤条并进行改变
  • Win10防火墙无法更改某些设置
  • 如何使用腾讯电脑管家的网速保护功能
  • 汉家江湖怎样进入桃花坞
  • SQL Sever各版本下载教程
  • VHD虚拟硬盘创建方法以及自动挂载方式
  • 热门搜索
    尊老爱幼手抄报 安全文明手抄报 关于爱的手抄报 英语手抄报版面设计 我爱祖国手抄报内容 环保手抄报文字 珍爱生命手抄报内容 世界遗产手抄报 珍惜生命手抄报 抗美援朝手抄报简单又漂亮