ElementUI的弹窗实现步骤条，步骤1，步骤二

最新推荐文章于 2024-08-17 03:16:16 发布
最新推荐文章于 2024-08-17 03:16:16 发布
阅读量3.6k 收藏 2
点赞数 3
分类专栏： ElemenUI 文章标签： ElementUI步骤条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houzhicongone/article/details/124370805
版权
  1. 使用组件 el-steps,里面有上一步和下下一步的方法
  2. 控制组件 的显示v-show 或者v-if
  3. 在他们的方法里面改变显示的状态
  4. 点击一下一步切换显示的表单
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="static/css/admin.css" rel="stylesheet" type="text/css">
    <link href="static/css/amazeui.css" rel="stylesheet" type="text/css">
    <link href="static/css/personal.css" rel="stylesheet" type="text/css">
    <link href="static/css/systyle.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="static/css/bootstrap.css" />
    <script type="text/javascript" src="static/js/jquery-3.4.1.min.js"></script>

    <!-- 引入样式 -->
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.5/dist/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.5/dist/layui.js">
        <script type="text/javascript" src="static/js/bootstrap.js" > </script>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js">
    </script>


</head>

<body>

    <div id="container">

        <div class="m-order" style="margin-bottom: 0px;height: 160px;">
            <div class="s-bar" style="height: 29px;"><i class="s-icon"></i>衣服列表
                <a @click="queryByStatus(0)" class="i-load-more-item-shadow">全部衣服</a>
            </div>
            <ul>
                <li style="width: 25%; ">
                    <a @click="queryByStatus(1)"><i><img src="static/images/send.png"></i> <span>男上装<em class="m-num"
                                style="display: none;">0</em></span></a>
                </li>
                <li style="width: 25%;">
                    <a @click="queryByStatus(2)"><i><img src="static/images/receive.png"></i> <span>男下装<em class="m-num"
                                style="display: none;">0</em></span></a>
                </li>
                <li style="width: 25%;">
                    <a @click="queryByStatus(3)"><i><img src="static/images/comment.png"></i> <span>女上装<em class="m-num"
                                style="display: none;">0</em></span></a>
                </li>
                <li style="width: 25%;">
                    <a @click="queryByStatus(4)"><i><img src="static/images/comment.png"></i> <span>女下装<em class="m-num"
                                style="display: none;">0</em></span></a>
                </li>
                <li style="width: 25%;">
                    <a @click="queryByStatus(5)"><i><img src="static/images/comment.png"></i> <span>童装专区<em
                                class="m-num" style="display: none;">0</em></span></a>
                </li>
                <li style="width: 25%;">
                    <a @click="queryByStatus(6)"><i><img src="static/images/comment.png"></i> <span>鞋靴<em class="m-num"
                                style="display: none;">0</em></span></a>
                </li>
                <li style="width: 25%;">
                    <a @click="queryByStatus(7)"><i><img src="static/images/comment.png"></i> <span>箱包<em class="m-num"
                                style="display: none;">0</em></span></a>
                </li>
            </ul>
        </div>

        <div class="box-container-bottom" style="margin-bottom: 15px;"></div>

        <div class="m-logistics">
            <!--<div class="s-bar" ><i class="s-icon"></i></div>-->
            <div class="s-content">
                <ul class="lg-list"></ul>
                <el-button type="danger" size="small" @click="add" style="float: right;">新增商品</el-button>
                <table class="table" style="height: 5px;">

                    <tr>
                        <td width="5%">序号</td>
                        <td width="20%">商品名</td>
                        <td width="10%">类别</td>
                        <td width="10%">销量</td>
                        <td width="20%">上架时间</td>
                        <td width="20%">更新时间</td>
                        <td width="20%">操作</td>
                    </tr>
                    <template v-for="product,index in products">
                        <tr>
                            <td>{{index+1}}</td>
                            <td>{{product.productName}}</td>
                            <td>{{product.categoryName}}</td>
                            <td>{{product.soldNum}}</td>
                            <td>{{product.createTime.replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ')}}</td>
                            <td>{{product.updateTime.replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ')}}</td>
                            <td>
                                <template>
                                    <button class="btn btn-danger btn-xs" @click="changeClothesinfo"
                                        :data-id="index">修改</button>
                                    <button class="btn btn-danger btn-xs" @click="deleteClothes"
                                        :data-id="index">下架</button>
                                </template>
                            </td>
                        </tr>
                    </template>
                    <tr>
                        <td colspan="5">
                            <!--分页 -->
                            <el-pagination background layout="prev, pager, next" :current-page="pageNum"
                                :page-size="limit" :total="count" @current-change="pager"> </el-pagination>
                        </td>
                    </tr>
                </table>




                <!-- 弹窗,新增 -->
                <el-dialog v-dialogDrag title="商品添加页面" :visible.sync="dialogFormVisible" class="dialog"
                    custom-class="dialogs">
                    <el-steps :space="800" :active="active" finish-status="success">
                        <el-step title="步骤 1">




                        </el-step>
                        <el-step title="步骤 2"></el-step>

                    </el-steps>



                    <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" v-show="show">

                        <h2 style="text-align: center;"> 商品信息添加</h2>
                        <el-form-item label="商品名：">
                            <el-input v-model="product1.productName"></el-input>
                        </el-form-item>
                        <el-form-item label="指导价：">
                            <el-input v-model="product1.productPrice"></el-input>
                        </el-form-item>

                        <el-form-item label="一级分类名称：">
                            <el-select v-model="product1.rootCategoryId" filterable placeholder="请选择">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>


                        </el-form-item>

                        <el-form-item label="二级分类名称：">


                            <el-select v-model="product1.categoryId" filterable placeholder="请选择">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>



                        <el-form-item label="细节大图:" labe-width="100">
                            <el-input type="file" v-model="product1.content"></el-input>
                        </el-form-item>



                        <el-form-item label="原价:" labe-width="100">
                            <el-input v-model="product1.originPrice"></el-input>
                        </el-form-item>

                        <el-form-item label="尺码:" labe-width="100">


                            <div style="margin: 15px 0;"></div>
                            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                            </el-checkbox-group>

                        </el-form-item>




                        <el-form-item label="库存:" labe-width="100">
                            <el-input v-model="product1.saveNum"></el-input>
                        </el-form-item>






                    </el-form>


                    <el-form label-width="100px" :model="formLabelAlign" v-show="!show">
                        <h2 style="text-align: center;"> 商品参数信息添加</h2>

                        <el-form-item label="品牌：">
                            <el-input v-model="product1.productBrand"></el-input>
                        </el-form-item>
                        <el-form-item label="适合年龄:">
                            <el-input v-model="product1.applicableAge"></el-input>
                        </el-form-item>


                        <el-form-item label="面料：">
                            <el-input v-model="product1.productFabric"></el-input>
                        </el-form-item>
                        <el-form-item label="图案：" labe-width="100">
                            <el-input v-model="product1.productPattern"></el-input>
                        </el-form-item>



                        <el-form-item label="袖型:">
                            <el-input v-model="product1.sleeveType"></el-input>
                        </el-form-item>

                        <el-form-item label="袖长:">
                            <el-input v-model="product1.clothingLength"></el-input>
                        </el-form-item>
                        <el-form-item label=" 衣长：">
                            <el-input v-model="product1.sleevLength"></el-input>
                        </el-form-item>


                        <el-form-item label="颜色分类：">
                            <el-input v-model="product1.productColor"></el-input>
                        </el-form-item>



                        <el-form-item label=" 年份季节:" labe-width="100">

                            <el-radio-group v-model="product1.radio">
                                <el-radio :label="1">春天</el-radio>
                                <el-radio :label="2">夏天</el-radio>
                                <el-radio :label="3">秋天</el-radio>
                                <el-radio :label="4">冬天</el-radio>
                            </el-radio-group>






                        </el-form-item>

                        <el-el-form-item style="float: right;">
                            <el-button @click="cancel"> 取消 </el-button>
                            <el-button type="danger" @click="saveProduct(product1)">保存</el-button>

                        </el-el-form-item>




                    </el-form>








                    <div slot="footer" class="dialog-footer">
                        <el-button style="margin-top: 12px;" @click="pre">上一步</el-button>
                        <el-button style="margin-top: 12px;" @click="next">下一步</el-button>

                    </div>
                </el-dialog>




                <div id="wrap" class="wrap">

                </div>
            </div>
        </div>

    </div>

    <script type="text/javascript" src="static/js/cookie_utils.js"></script>
    <script type="text/javascript" src="static/js/axios.min.js"></script>
    <script type="text/javascript" src="static/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="static/js/base.js"></script>
    <script type="text/javascript">
            var cityOptions = ['XL', 'M',"L"];
            var layer;
            layui.use('layer', function(){
                layer = layui.layer;
		});

            var v = new Vue({
                el:"#container",
            data:{
                // ------商品尺码
                checkAll: true,
            checkedCities: ['XL', 'M'],
            cities: cityOptions,
            isIndeterminate: true,
            // ----------

            //  一级分类
            options: [{
                value: '选项1',
            label: '黄金糕'
        }, {
                value: '选项2',
            label: '双皮奶'
        }, {
                value: '选项3',
            label: '蚵仔煎'
        }, {
                value: '选项4',
            label: '龙须面'
        }, {
                value: '选项5',
            label: '北京烤鸭'
        }],
            value: '',





            // ----
            radio: 3,
            dialogFormVisible:false,
            show:true,
            product1:{ },
            active: 0,
            token:"",
            pageNum:1,
            limit:5,
            userId:"",
            products:[],
            count:0,
            status:0,
            keyword:""
				},
            created:function(){
                this.token = getCookieValue("token");
            this.userId = getCookieValue("userId");
            //1.加载页面，请求订单信息
            var url1 = baseUrl+"admin/manageclothes";

            axios({
                url:url1,
            method:"get",
            headers:{
                token:this.token
						},
            params:{

                pageNum:this.pageNum,
            limit:this.limit,
            status:this.status,
            keyword:this.keyword,
						}
					}).then((res)=>{
                console.log(res.data.data);
            if(res.data.code == 10000){
                this.products = res.data.data.list;
            this.count = res.data.data.count;
						}
						
					});
				},
            methods:{

                // 保存商品
                saveProduct(productVO){
                    console.log(productVO,"product1-------");


                    var url5=baseUrl+"";

						axios({
							url:url5,
							method:"POST",
							data:productVO

						}).then(res=>{

							ELEMENT.Message.success("添加地址成功");
							this.disabled=true;
						



						})
                   
      


                },

                handleCheckAllChange(event) {
                this.checkedCities = event.target.checked ? cityOptions : [];
            this.isIndeterminate = false;
      },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
            cancel(){
                this.dialogFormVisible = false;
                    },
            add(){
                this.show = true;
            this.dialogFormVisible = true;

                    },
            next() {this.show = false;
        if (this.active++ > 2) this.active = 0;
      
      },
            pre() {this.show = true;
            if (this.active-- < 0) this.active = 0;
      
      },
            pager:function(page){
                this.pageNum = page;
            //1.加载页面，请求订单信息
            var url1 = baseUrl+"admin/manageclothes";
            var obj = {

                pageNum:this.pageNum,
            limit:this.limit,
            keyword:this.keyword,
            status:this.status
						};
            if(this.status!=null){
                obj.status = this.status;
						}
            axios({
                url:url1,
            method:"get",
            headers:{
                token:this.token
							},
            params:obj
						}).then((res)=>{
                console.log(res.data.data);
            if(res.data.code == 10000){
                this.products = res.data.data.list;
            this.count = res.data.data.count;
							}
						});
					},
            queryByStatus:function(status){
                this.pageNum = 1;
            this.status = status;
            console.log("插旗")
            console.log(this.status);
            var url1 = baseUrl+"admin/manageclothes";
						/* var parm = {
                "userId":this.userId,
            "pageNum":this.pageNum,
            "limit":this.limit,
            "status":this.status
						}; */
            axios({
                url:url1,
            method:"get",
            headers:{
                token:this.token
							},
            //data: parm
            params:{
                userId:this.userId,
            pageNum:this.pageNum,
            limit:this.limit,
            status:this.status
							}
						}).then((res)=>{
                console.log(res.data.data);
            if(res.data.code == 10000){
                this.products = res.data.data.list;

            console.log(res.data.data.list.productName)
            this.count = res.data.data.count;
							}
						});
					},
            deleteClothes:function(event){
						var index = event.srcElement.dataset.id;
            var pid = this.products[index].productId;
            var url = baseUrl+"admin/deleteclothes/"+pid;
            axios({
                url:url,
            method:"put",
            headers:{
                token:this.token
							}
						}).then((res)=>{
                console.log("下架衣服测试");
            //alert("取消成功！")
            layer.msg("成功！");
            window.location.href="admin-manageclothes.html";
						});
					
					},
            changeClothesinfo:function(event){
						var index = event.srcElement.dataset.id;
            var product = this.products[index];
            localStorage.setItem("product",JSON.stringify(product));
            window.location.href="admin-clothesinfo.html";
						
					
					},

			/* 		allOrder:function(){
                this.pageNum = 1;
            //this.status = status;
            //console.log(this.status);
            var url1 = baseUrl+"order/all";
            var parm = {
                "userId":this.userId,
            "pageNum":this.pageNum,
            "limit":this.limit,
            "status":this.status
						};
            axios({
                url:url1,
            method:"get",
            headers:{
                token:this.token
							},
            //data: parm
            params:{
                userId:this.userId,
            pageNum:this.pageNum,
            limit:this.limit,
								//status:this.status
							}
						}).then((res)=>{
                console.log(res.data.data);
            if(res.data.code == 10000){
                this.orders = res.data.data.list;
            console.log("插旗")
            console.log(res.data.data.list.productName)
            this.count = res.data.data.count;
							}
						});
					}, */
				}
				
			});

    </script>
</body>

</html>
有时间指导毕业设计
关注
专栏目录
layui-步骤条step-源码-导入即用
10-16
基于layui框架的前端步骤通条组件，项目中直接导入，复制demo源码就能使用，开发方便，样式美观
layui实现步骤条
qq_61196563的博客
08-18 1293
下一步步骤 1
layui step 步骤条（分步表单）的表单提交 配置
最新发布
weixin_41119019的博客
08-17 58
编辑灵感来源于个网站，感谢个位大佬写的layui步骤条（分步表单）的教学（2024.2.3 15:58）这里纯属个人理解，如有不足，请各位前端大佬进行评论批评（我是后端小白） 谅解一下！！！一、模板1、预览图编辑首先导入扩展 js和css 文件（可以直接引用官网里面的js，或者本地）编辑资源位置：【免费】step步骤...
layui组件步骤条step
for__future_的博客
06-10 2011
layui组件步骤条step
layui步骤条
九亿宅男的梦的博客
09-30 3426
1.新建文件夹 导入代码（里面自己修改了，引用了矢量图，可结合查看） layui.define(['jquery'], function (exports) { 'use strict'; var $ = layui.jquery; var obj = { make: function (data, ele, current) { var html = '' , data_length = data.length , percen
element的步骤条整合表单（steps+form）
热门推荐
suqinyi的博客
05-12 1万+
先上效果图： element ui 组件库官网 使用步骤： 1、页面组合步骤 ==> 5步 定义出4个步骤（看你自己需要几步） 定义form表单 定义4个盒子对象active属性 => 1 到 4 放置表单项 设置上一步和下一步的按钮 <template> //第一步:定义出4个步骤 <el-steps :active="active" finish-status="success"> <el-step title="第一步" />
【Vue2 + ElementUI】分页el-pagination 封装成公用组件
01-25
在Vue2框架中，ElementUI是一个非常流行的UI组件库，提供了丰富的组件，如表格、按钮、弹窗等，其中el-pagination是用于实现分页功能的组件。为了在多个页面上复用并统一分页样式，我们可以将其封装为一个公用组件。...
ElementUI离线文档（1.4-2.4）
11-01
1. **组件丰富**：ElementUI提供了大量的基础和复杂组件，如按钮、表格、轮播图、时间选择器、弹窗等，覆盖了网页开发中的多种需求。 2. **响应式设计**：所有组件都遵循响应式设计原则，能在不同屏幕尺寸下自动...
elementUI axsure 元件库
02-23
ElementUI是一款基于Vue.js的开源前端组件库，它提供了丰富的UI组件，如按钮、表单、表格、导航、弹窗等，用于快速构建优雅的Web应用界面。而Axure则是一款强大的原型设计工具，它允许设计师通过拖拽组件、设置交互...
ElementUI三级联动菜单特效代码
03-20
对于文件列表中的"使用帮助.txt"，可能包含了如何在项目中集成和使用这段代码的具体步骤，包括引入ElementUI库，配置数据源，以及绑定事件处理函数等。"谷普下载.url"和"说明.url"可能是指向更多相关资源或文档的...
ElementUI_v2.0.zip
05-12
4. **数据展示组件**：表格（Table）、卡片（Card）、轮播（Carousel）、步骤条（Steps）等，用于展示和组织数据。 5. **导航组件**：菜单（Menu）、面包屑（Breadcrumbs）、导航栏（Navbar）、侧边栏（Sidenav）、...
layui-steps
11-15
layui-steps 是一个 LayUI 实现的步骤条模板，可以切换步骤，跳转到指定步骤
初探 Element 页面弹窗效果实现
梦幻通灵
03-30 4583
最近在B站看Element的项目，动手跟着敲敲 vue文件包含三大部分 <template></template> <script></script> <style ></style>`
Element-UI源码学习——弹框组件
weixin_42936434的博客
07-17 7396
首先，分析一下Element-UI的对话框，点击，会弹出一个对话框。对话框由具体的弹框内容、关闭或确认按钮、外围的遮罩层组成。
使用element-ui中的步骤条实现表单分步填写
u012732909的博客
07-01 3794
之前的添加信息都是使用基本的表单，在工资账套的添加中使用到了步骤条，实现了比较高级的分步填写表单并最终提交的效果 <template> <div> <el-container> <el-header style="display: flex;justify-content: space-between;align-items: center;padding-left: 0px"> <el-button @cli
Layui 步骤条Step
weixin_43833100的博客
10-13 7130
效果图： step.js layui.define(['jquery'], function (exports) { var $ = layui.$ , step = { //设置全局项 set: function (options) { var that = this; that.config = $.extend({}, that.config, options);
扩展 LayUI 步骤条组件，示例演示
肖朋伟
04-10 1万+
扩展 LayUI 步骤条组件，示例演示 操作演示： 代码简介： 优点： 使用扩展 LayUI 的方式，把共用模块方法以组件形式添加在 LayUI js 中，我们以熟悉的 layui.use(['jquery', 'steps'], function(){ 这种方式去使用，相当于扩展组件 缺点： 我们一般不会把 node_models 上传到 Git 存储库，所以团队中其他人需要使用，也得手动添...
elementUi中steps步骤条的使用
ME_GIRL的博客
01-09 6035
elementUi中steps步骤条的使用 引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。 使用 <template> <div class="contentBox"> <div> <div class="stepContent"> <div class="stepBgBox"> <div class="stepBox">
elementUI实现弹窗
04-01
ElementUI是一套基于Vue.js的组件库，其中包含了弹窗组件。以下是实现弹窗的步骤： 1. 安装ElementUI 使用npm或yarn安装ElementUI： ``` npm install element-ui ``` 或者 ``` yarn add element-ui ``` 2. 引入ElementUI 在Vue项目的main.js文件中，引入ElementUI： ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 使用ElDialog组件 在需要弹窗的组件中，使用ElDialog组件： ```html <template> <div> <el-button @click="openDialog">打开弹窗</el-button> <el-dialog :visible.sync="dialogVisible"> <span>这是一个弹窗</span> </el-dialog> </div> </template> <script> export default { data() { return { dialogVisible: false } }, methods: { openDialog() { this.dialogVisible = true } } } </script> ``` 在上面的代码中，ElDialog组件的visible属性控制弹窗的显示与隐藏，使用.sync修饰符可以实现双向绑定。方法openDialog()用来打开弹窗，即将dialogVisible属性设为true。 4. 设置弹窗属性 ElDialog组件还有许多属性可以设置，例如弹窗的标题、大小、是否可以拖拽等。以下是一些常用的属性： ```html <el-dialog title="弹窗标题" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" :close-on-click-modal="false" > <span>这是一个弹窗</span> </el-dialog> ``` 其中，title属性设置弹窗的标题，width属性设置弹窗的宽度，before-close属性设置弹窗关闭前的回调函数，close-on-click-modal属性设置是否点击遮罩层关闭弹窗。 5. 自定义弹窗内容 ElDialog组件还可以自定义弹窗的内容，例如使用插槽来替换默认的底部按钮： ```html <el-dialog title="弹窗标题" :visible.sync="dialogVisible" > <span>这是一个弹窗</span> <template #footer> <el-button @click="dialogVisible = false">关闭</el-button> <el-button type="primary" @click="submitForm">提交</el-button> </template> </el-dialog> ``` 在上面的代码中，使用了插槽#footer来替换默认的底部按钮。其中，@click事件绑定了关闭弹窗和提交表单的方法。 至此，就完成了使用ElementUI实现弹窗的过程。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

有时间指导毕业设计

觉得写的好的话可以给我打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值