vue新增弹窗

最新推荐文章于 2024-05-05 08:00:00 发布
最新推荐文章于 2024-05-05 08:00:00 发布
阅读量2.5k 收藏 8
点赞数
分类专栏： JavaScript 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sunshinedada/article/details/110371977
版权

vue新增弹窗

新增弹窗加校验

html:

<!-- 添加规则 -->
    <el-dialog
      title="签到--添加规则"
      :visible.sync="addRule.addDialog"
      width="50%"
      :before-close="handleaddRule"
      class="addbox"
      center
    >
      <el-form
        :model="addRule.ruleForm"
        ref="addRuleF"
        label-width="100px"
        class="demo-ruleForm"
        :rules="addRule.rules"
      >
        <!--  -->
        <!-- <el-form-item>
          <el-row :gutter="24" style="margin-left: -90px">
            <el-col :span="23">
              <el-button
                size="small"
                type="primary"
                class="right-btnone"
                @click="addRulesF"
                >添加规则</el-button
              >
            </el-col>
          </el-row>
        </el-form-item> -->
        <!--1.任务名称  -->
        <el-row :gutter="24" class="checkRule_cellList">
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item label="任务名称:" prop="ruleName">
                <el-row :gutter="4">
                  <el-col :span="12" class="checkRule_list">
                    <el-input
                      v-model="addRule.ruleForm.ruleName"
                      placeholder="请输入任务名称"
                    ></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
		<!--2.任务内容  -->
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="任务内容:" prop="signNumber">
                <el-col :span="6" class="checkRule_list">连续签到</el-col>
                <el-col :span="14" class="checkRule_list">
                  <el-input
                    placeholder="请输入"
                    v-model="addRule.ruleForm.signNumber"
                  ></el-input>
                </el-col>
                <el-col :span="3" class="checkRule_list">天</el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="可获积分:" prop="integral">
                <el-col :span="4" class="checkRule_list">可获得</el-col>
                <el-col :span="14" class="checkRule_list">
                  <el-input
                    placeholder="请输入"
                    v-model="addRule.ruleForm.integral"
                  ></el-input>
                </el-col>
                <el-col :span="3" class="checkRule_list">积分</el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <!--3.选择优惠券  -->
          <el-row :gutter="20">
            <el-col class="addcard_seleted">
              <el-form-item label="送优惠券:" prop="sent">
                <el-row
                  :gutter="20"
                  style="
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                  "
                >
                  <el-col>
                    <el-radio
                      v-model="addRule.ruleForm.sent"
                      label="1"
                      @change="valueChange"
                      >否</el-radio
                    >
                    <el-radio
                      v-model="addRule.ruleForm.sent"
                      label="2"
                      @change="valueChange"
                    >
                      是
                       <!--点击是，出现选择优惠券按钮，点击selectCouponList打开弹窗  -->
                      <span>
                        <el-button
                          size="mini"
                          type="primary"
                          class="right-btnone"
                          style="margin-left: 15px"
                          @click="selectCouponList"
                          v-if="addRule.ruleForm.sent == '2'"
                          >选择优惠券</el-button
                        >
                      </span>
                    </el-radio>
                  </el-col>
                </el-row>

                <el-row
                  class="order-input"
                  :gutter="20"
                  v-if="addRule.ruleForm.searchTable.length > 0"
                >
                  <el-col :span="24">
                    <el-form-item label prop>
                      <el-table
                        class="user-table"
                        :data="addRule.ruleForm.searchTable"
                        border
                        style="width: 100%"
                        id="tableExcel"
                        tooltip-effect="dark"
                      >
                        <el-table-column
                          prop="name"
                          align="center"
                          label="优惠券名称"
                        ></el-table-column>
                        <el-table-column
                          prop="reductionAmount"
                          align="center"
                          label="优惠金额"
                        ></el-table-column>
                        <el-table-column
                          prop="totalAmount"
                          align="center"
                          label="使用门槛"
                        ></el-table-column>
                        <el-table-column
                          prop="dateCount"
                          align="center"
                          label="时效期"
                        ></el-table-column>
                        <el-table-column
                          prop="description"
                          align="center"
                          label="描述"
                        ></el-table-column>
                      </el-table>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <!--4.送礼品下拉框  -->
          <el-row :gutter="20">
            <el-form-item label="送礼品:">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-select
                    placeholder="暂不选择"
                    v-model="addRule.ruleForm.convert"
                    clearable
                    @change="changeTitle"
                  >
                    <el-option
                      v-for="itms in convertList"
                      :key="itms.id"
                      :label="itms.name"
                      :value="itms.id"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-row>
          <!--5.领取限制radio  -->
          <el-row :gutter="20">
            <el-col class="addcard_seleted">
              <el-form-item label="领取限制:">
                <el-row
                  :gutter="20"
                  style="
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                  "
                >
                  <el-col>
                    <el-radio v-model="addRule.ruleForm.channel" label="0"
                      >仅限首次</el-radio
                    >
                    <el-radio v-model="addRule.ruleForm.channel" label="1"
                      >除首次外每个周期</el-radio
                    >
                    <el-radio v-model="addRule.ruleForm.channel" label="2"
                      >每个周期循环</el-radio
                    >
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-form-item>
            <el-row :gutter="24">
              <el-col :span="23" class="task_rulebtn">
                <el-button
                  size="small"
                  type="primary"
                  class="right-btnone"
                  @click="removeRulesF(index)"
                  >删除</el-button
                >
              </el-col>
            </el-row>
          </el-form-item> -->
        </el-row>
      </el-form>
      <span slot="footer" class="checkRule_footer">
        <el-button @click="addRuleCancle">取 消</el-button>
        <el-button type="primary" @click="submitAddRule('addRuleF')"
          >确 定</el-button
        >
      </span>
    </el-dialog>

html选择优惠券弹窗

 <!-- 选择优惠券 -->
    <el-dialog title="卡券添加" :visible.sync="dialogVisible1" width="70%">
      <el-table
        ref="singleTable"
        :data="tableDataDialog"
        class="view_table"
        style="width: 100%"
        id="tableExcel"
        highlight-current-row
        @current-change="handleCurrentChange"
        v-loading="loadingSta"
      >
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column
          prop="name"
          label="优惠券名称"
          align="center"
          min-width="150"
        ></el-table-column>
        <el-table-column
          prop="reductionAmount"
          label="优惠金额"
          align="center"
          min-width="90"
        ></el-table-column>

        <el-table-column
          prop="totalAmount"
          align="center"
          label="使用门槛"
          min-width="90"
        ></el-table-column>
        <el-table-column
          prop="dateCount"
          align="center"
          label="时效性"
          min-width="90"
        ></el-table-column>
        <el-table-column
          prop="description"
          align="center"
          label="描述"
          min-width="90"
        ></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="setCurrentBack">取 消</el-button>
        <el-button type="primary" @click="setCurrent(tableData[1])"
          >确 定</el-button
        >
      </span>
    </el-dialog>

数据模型：

  data() {
  //动态校验-是否有优惠券
  var validActionSend = (rule, value, callback) => {
      if (this.addRule.ruleForm.sent == "2") {
        if (this.addRule.ruleForm.searchTable.length > 0) {
          callback();
        } else {
          callback(new Error("请选择优惠券"));
        }
      } else {
        callback();
      }
    };
	return {
	 //添加规则
      addRule: {
        addDialog: false, //弹窗
        ruleForm: {
          ruleName: "",
          signNumber: "", //
          integral: "", //积分
          sent: "1", //radio-送优惠券(1.是 2.否)
          convert: "", //送礼品
          channel: "0", //radio-领用限制(0.仅限首次 1.除首次外每个周期 2.每个周期循环)
          searchTable: [], //优惠券表格
          convertDistrictName: "", //礼品名称
        },
		convertList: [],
        rules: {
          ruleName: [
            {
              required: true,
              message: "请输入任务名称（限制15字）",
              trigger: "blur",
            },
            { min: 1, max: 15, message: "长度在15个字符以内", trigger: "blur" },
          ],
          signNumber: [
            { required: true, message: "请输入天数", trigger: "blur" },
            {
              pattern: /^[1-9]+[0-9]*$/,
              message: "请输入正整数",
              trigger: "blur",
            },
          ],
          integral: [
            { required: true, message: "请输入积分", trigger: "blur" },
            {
              pattern: /^[1-9]+[0-9]*$/,
              message: "请输入正整数",
              trigger: "blur",
            },
          ],
          convert: [
            { required: true, message: "请选择类型", trigger: "change" },
          ],
          sent: [
            // { required: true, message: "请选择类型", trigger: "change" },
            { validator: validActionSend, trigger: "blur" },
          ],
        },
      },
      // 优惠券弹窗
      dialogVisible1: false,
      loadingSta: false,//loading
      tableDataDialog: [],//优惠券弹窗列表
      currentRows: {},//表格单选行
	 }
  }

created：

created() {
    this.querySelectConvert();//兑换积分规则下拉框
  },

methods:

//添加规则
    submitAddRule(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          let params = {
            channel: this.addRule.ruleForm.channel,
            convertDistrictId: this.addRule.ruleForm.convert,
            convertDistrictName: this.addRule.ruleForm.convertDistrictName,
            couponId:
              this.addRule.ruleForm.searchTable.length > 0
                ? this.addRule.ruleForm.searchTable[0].id
                : "",
            couponName:
              this.addRule.ruleForm.searchTable.length > 0
                ? this.addRule.ruleForm.searchTable[0].name
                : "",
            integral: this.addRule.ruleForm.integral,
            ruleName: this.addRule.ruleForm.ruleName,
            signNumber: this.addRule.ruleForm.signNumber,
          };
          post("/sys/integral/sign/ins", params).then((res) => {
            if (res.code === 200) {
              this.$message.success("添加成功！");
              this.addRuleCancle();
              this.getData();
            } else {
              this.$message.error(res.data);
            }
          });
        }
      });
    },
    //添加规则弹窗清空
    addRuleCancle() {
      this.addRule.addDialog = false;
      this.addRule.ruleForm.ruleName = "";
      this.addRule.ruleForm.signNumber = "";
      this.addRule.ruleForm.integral = "";
      this.addRule.ruleForm.sent = "1";
      this.addRule.ruleForm.convert = "";
      this.addRule.ruleForm.channel = "0";
      this.addRule.ruleForm.searchTable = [];
      this.$refs["addRuleF"].resetFields();//清除校验
    },
    //添加规则弹窗点击蒙层清空
    handleaddRule(done) {
      this.addRule.ruleForm.ruleName = "";
      this.addRule.ruleForm.signNumber = "";
      this.addRule.ruleForm.integral = "";
      this.addRule.ruleForm.sent = "1";
      this.addRule.ruleForm.convert = "";
      this.addRule.ruleForm.channel = "0";
      this.addRule.ruleForm.searchTable = [];
      this.$refs["addRuleF"].resetFields();//清除校验
      done();
    },
    //兑换价值专区列表
    querySelectConvert() {
      get("/sys/integral/getConvertDistrict2").then((res) => {
        if (res.code == 200) {
          this.convertList = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //下拉列表既要获取id又要获取名称
    changeTitle(id) {
      this.title = this.convertList.find((item) => item.id == id); // this.title 是通过选中的id去从标题列表里面查找得到的是选中的那一条数据的一个对象，包含选中的数据的 name、id 等 ， 后面可以通过 this.title.name 来获取标题名称
      // console.log(this.title)
      // console.log(this.title.name)
      this.addRule.ruleForm.convertDistrictName = this.title.name;
    },

其中：是否选择优惠券，否就不选优惠券
在这里插入图片描述
点击是，出现选择优惠券按钮
在这里插入图片描述
点击出现选择优惠券弹窗
在这里插入图片描述
单选，选择一条之后，会在新增弹窗那增加一条记录
在这里插入图片描述
methods:

//点击选择优惠券按钮出现弹窗
selectCouponList() {
      this.exchangeCoupon();
      this.dialogVisible1 = true;
},
//优惠券列表
 exchangeCoupon() {
   this.loadingSta = true;
   get("/sys/integral/exchangeCoupon", {}).then((res) => {
     this.loadingSta = false;

     if (res.code === 200) {
       res.data.forEach((item) => {
         if (item.addTime == null) {
           item.addTime = "";
         } else {
           item.addTime = moment(item.addTime).format("YYYY-MM-DD HH:mm:ss");
         }
         this.total = res.count; //分页总数
         this.tableDataDialog = res.data;
       });
     } else {
       this.tableDataDialog = [];
       this.total = 0;
       this.$message.error("请求失败！");
     }
   });
 },
 //radio切换，清除校验
 valueChange() {
    this.addRule.ruleForm.searchTable = [];
    this.$refs["addRuleF"].validateField("sent");
  },
  // 表格单选某一行
handleCurrentChange(val) {
    console.log(val);
    this.currentRows = val;
    console.log(this.currentRows);
  },
 //新增选择优惠券
setCurrent() {
   console.log(this.editRule.ruleForm.id);
   if (!this.editRule.ruleForm.id) {
     this.addRule.ruleForm.searchTable = [];
     this.addRule.ruleForm.searchTable.push(this.currentRows);
     console.log(this.currentRows);
     console.log(this.addRule.ruleForm.searchTable);
     this.$refs["addRuleF"].validateField("sent");
   } else {
     this.editRule.ruleForm.searchTables = [];
     this.editRule.ruleForm.searchTables.push(this.currentRows);
     console.log(this.currentRows);
     console.log(this.editRule.ruleForm.searchTables);
     this.$refs["editRuleF"].validateField("sent");
   }
   this.setCurrentBack();
 },
 //关闭优惠券弹窗
setCurrentBack() {
   this.dialogVisible1 = false;
   this.currentRows = {};
 },
Sunshinedada
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
:visible.sync弹框显示隐藏
weixin_53917307的博客
03-30 2437
:visible指的是属性绑定，表示弹框的显示隐藏，当:visible的值为ture的时候，弹框显示，当为false的时候，弹框隐藏，后面的.sync是什么意思呢，指的就是同步动态双向的来表示visible的值，当我们关闭窗口的时候，这个弹框隐藏了，visible的值发生了变化，但是关闭窗口这个动作，我们没法用确定的动作去判断这个值，所以用到了vue中的双向绑定的原则，在vue中统一加上了.sync来表示同步的修改了visible的值。例如<el-dialog>标签 ...
elementUI 学习入门之 Button 按钮
weixin_42333361的博客
11-25 1万+
基础按钮用法 　　按钮分为：默认按钮、朴素按钮（plain）、圆角按钮（round）、圆形按钮（circle）。eg： 　　<el-button plain>朴素按钮</el-button> 　　通过 type 属性指定 primary、success、info、warning、danger、text 其中的值设置按钮样式，其中若设置值为 text ，则为文字按钮，没有边框和背景颜色 1 <el-row> 2 <el-button>默.
Vue中解决使用button按钮的点击事件自动刷新页面的问题
小多的博客
03-28 2390
原因 button标签按钮会提交表单 button,input type=button按钮在IE和w3c，firefox浏览器区别： 1、当在IE浏览器下面时，button标签按钮，input标签type属性为button的按钮是一样的功能，不会对表单进行任何操作。 2、但是在W3C浏览器，如Firefox下就需要注意了，button标签按钮会提交表单，而input标签type属性为button不会对表单进行任何操作。 解决方法如下： 给点击事件添加 .prevent 修饰符 <button @cl
Vue按照顺序实现多级弹窗（附Demo）
码农研究僧的博客
05-05 1534
Vue按照顺序实现多级弹窗，以Demo展示，显示整体逻辑
vue 解决表格编辑弹窗改变其中一项，表格数据实时变动问题
weixin_43173924的博客
02-27 4686
在每次弹出对话框的时候深拷贝一次当前行数据的副本，this.form = JSON.parse(JSON.stringify(row))
VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题
热门推荐
tangdou369098655的博客
05-14 1万+
VUE基础之:visible.sync-模态框显示隐藏、elementUI dialog组件报错或者visible属性不生效问题 这篇文档存成草稿2年了，最近终于有时间拉出来写完了。。。。 我们日常开发中经常遇到:visible.sync修饰符，特别是当你使用elementUI的时候，el-dialog组件如果不使用:visible.sync就会出现一些意想不到的问题，比如说疯狂报错给你看~~~ 场景： 父组件引用子组件 <child-dialog :visible="visible"><
Vue 3.0 基础框架
03-23
虽然Vue 3.0发布，Element UI也推出了与Vue 3兼容的版本——Element Plus，它不仅保留了Element UI原有的优秀设计，还新增了许多组件和功能，并优化了性能。 Echarts 是一个由百度开发的开源可视化库，支持丰富的...
VUE3笔记 VUE3 VUE
01-02
3. **Suspense**：Vue3新增了`<Suspense>`组件，用于在组件渲染完成前显示占位符或者加载指示器。这使得开发者可以更好地管理异步加载的组件，提升用户体验。 4. **Teleport**：Vue3引入了`<teleport>`，允许将特定...
Vue11源码学习资料
最新发布
05-27
2. **Suspense组件**：Vue 3新增了Suspense组件，用于在组件渲染完成前显示占位符，提高了用户体验。这在处理异步组件加载时特别有用。 3. **Ref与Reactivity**：Vue 3的响应式系统进行了重构，引入了`ref`来创建...
Vue3最新源码分享。
02-03
Vue3新增了Suspense组件，用于在组件渲染之前显示占位符或加载指示器。这在处理异步组件加载时非常有用，可以提高用户体验。 6. **Teleport** Vue3的Teleport功能允许将组件的内容“传送”到HTML文档的其他位置，这...
vue3-vite
03-08
2. ** teleport **：Vue3 新增了Teleport功能，可以将组件渲染到文档中的任意位置，解决了在特定场景下插入元素到特定DOM节点的问题，如弹窗、iframe通信等。 3. **Suspense**：Vue3 提供了Suspense组件，用于处理...
vue 弹框中勾选数据确定后显示，再点开再添加一条信息如何处理
weixin_45960892的博客
04-25 1854
最近遇到一个需求，点击添加出现弹框，其中内容是table表格，勾选确定后将勾选的数据显示在页面上。 由于我直接就用两个数组相等的原因，当我再一次点开弹框点击确定后，原来添加的两条数据瞬间被刷新成我后面新选择的数据了，这很明显是不符合要求的，不能够只是简单的相等。 但是知识浅陋的我只能想到去重操作，希望有大佬有更方便的做法。 //首先表格中加入selection-change属性 @selection-change="handleSelectionChange" 其次在方法中这么写 handle
[Vue]使用iframe实现弹窗加载页面
喜欢前端的后端 MelodyJerry
03-28 5502
描述 在页面中点击链接，弹出窗口，窗口中加载指定的页面内容 代码 <template lang=""> <el-link type="success" @click="test">主要链接</el-link> <el-dialog title="提示" :visible.sync="dialogVisible" width="80%" height="100%" :before-clos
vue前端弹出新增页面testAdd，弹出页面中进行数据编辑，table编辑，行编辑等。包含JS中使用Map进行数据处理。
wjt130的博客
12-24 1395
使用vue写的新增页面，编辑页面等弹出页面，在页面中进行table数据的行编辑，利用JS中的Map做的实时响应的行编辑数据内容汇总计算、校验等。话不多说，上代码： require(['vue', 'zview'],function(vue, zView) { var store = require('store'); var testAdd = vue.extend({ dat...
前端把信息放在弹框里显示出来_通过vue.extend实现消息提示弹框的方法记录
weixin_32324637的博客
02-11 842
前提回顾在项目开发中我们经常使用的组件注册分为两种，一个是全局注册和另一个是局部注册，假设我们的业务场景是用户在浏览注册页面时，点击页面中的注册按钮后，前端根据用户的注册信息先做一次简单的验证，并根据验证弹出一个对应消息提示弹框我们拿到这个需求后，便开始着手准备要通过局部注册消息弹框组件的方法来实现这个场景，在通过局部注册消息弹框组件的方法解决完这个需求后，自然是沾沾自喜，紧接着又迎来了一个需求，...
vue前端实现接收websocket发送的数据以弹出框显示
凉酱的博客
06-15 3573
websocket连接及信息接收
vue实现新增编辑共用一个弹窗
m0_56272227的博客
11-10 3788
vue实现新增编辑共用一个弹窗
vue中新增弹出对话框操作
xiaoxiao1777的博客
05-16 5039
情景： 点击新增用户或者新增订单，弹出对话框页面进行信息输入操作 分析： 这个对话框组件是直接放到用户组件代码中的，自带一个属性，控制是否显示，默认为false不显示，需要显示的时候拿到此属性对应的变量，设置为true 主体内容使用表单组件 <!-- 添加用户的对话框 --> <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="
vue添加弹出框数据绑定
LuiChun
11-23 1982
<template> <div class="title"> <a :href="myurl">{{ title }}</a> <br /> <h3>点击按钮后会弹出消息框，并且返回消息内容</h3> <br /> <h3>v-on:click="addone"</h3> <br /> <button v-on.
vue 设置新增按钮的弹窗
07-16
在Vue中设置新增按钮的弹窗可以通过以下步骤实现： 1. 在你的Vue组件中，首先定义一个data属性来控制弹窗的显示与隐藏，例如： ```javascript data() { return { showModal: false } } ``` 2. 在模板中，使用v-if或v-show指令来控制弹窗的显示与隐藏。例如： ```html <template> <div> <button @click="showModal = true">新增</button> <div v-if="showModal" class="modal"> <!-- 弹窗内容 --> <button @click="showModal = false">关闭</button> </div> </div> </template> ``` 3. 根据需要自定义弹窗的样式，并在弹窗中添加相应的内容。 这样，当点击新增按钮时，弹窗会显示出来；点击关闭按钮或其他关闭弹窗的操作时，弹窗会隐藏起来。你可以根据自己的实际需求来调整弹窗的样式和功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值