vue 彈出框引入另一個vue頁面的示例代碼

更新時間：2023年08月23日 11:28:59 作者：taiguolaotu

這篇文章主要介紹了vue 彈出框引入另一個vue頁面,這種方式適用于在一個頁面邏輯比較多的時候,可以搞多個頁面,防止出錯,本文通過示例代碼給大家介紹的非常詳細,需要的朋友可以參考下

為什么要這么做,適用于在一個頁面邏輯比較多的時候,可以搞多個頁面,防止出錯

在這里插入圖片描述

index頁面點擊解約按鈕,彈出框進入jieyue.vue

核心代碼

在這里插入圖片描述

 <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="scope.row.delFlag == 0"
            @click="jieyue(scope.row)"
            v-hasPermi="['sep:channel:edit']"
          >解約</el-button>
    <testDialog title="測試窗口"  v-if="openDialog"  ref="testDialog"/>
  </div>
</template>
<script>
// 引用組件
import testDialog from "./jieyue.vue";
export default {
  // 注冊組件
  components: {testDialog},
  name: "Channel",
  data() {
    return {
      openDialog: false,
    // 按鈕方法
    jieyue() {
      this.openDialog = true;
      this.$nextTick(() => {
        this.$refs.testDialog.init(2);
      });
    },

代碼截圖

在這里插入圖片描述

jieyue.vue就是常規(guī)代碼了

<template>
  <!-- 添加或修改個體戶渠道信息對話框 -->
  <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form ref="form" :model="form" :rules="rules" label-width="180px">
      <!--        <el-form-item label="渠道編號" prop="channelNo">
                <el-input v-model="form.channelNo" placeholder="請輸入渠道編號" />
              </el-form-item>-->
      <el-form-item label="渠道商名稱" prop="channelName">
        <el-input v-model="form.channelName" placeholder="請輸入渠道商名稱" />
      </el-form-item>
      <!-- 做成一個下拉框選擇 -->
      <el-form-item label="上級渠道" prop="parentId">
        <!-- <el-input v-model="form.parentId" placeholder="請輸入個體戶父渠道ID" /> -->
        <el-select v-model="form.parentId" clearable placeholder="請選擇上級渠道(無則不選)" >
          <el-option v-for="item in channelOption"
                     :key="item.id"
                     :label="item.channelName"
                     :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="返傭收款公司名稱" prop="channelRebateName" >
        <el-input v-model="form.channelRebateName" placeholder="請輸入渠道返傭收款公司名稱" />
      </el-form-item>
      <el-form-item label="返傭收款公司聯(lián)系人" prop="channelLinkname">
        <el-input v-model="form.channelLinkname" placeholder="請輸入渠道返傭收款公司聯(lián)系人" />
      </el-form-item>
      <el-form-item label="返傭收款公司聯(lián)系電話" prop="channelLinkphone" >
        <el-input v-model="form.channelLinkphone" placeholder="請輸入渠道返傭收款公司聯(lián)系電話" />
      </el-form-item>
      <el-form-item label="返傭收款公司聯(lián)系郵箱" prop="channelLinkmail" >
        <el-input v-model="form.channelLinkmail" placeholder="請輸入渠道返傭收款公司聯(lián)系郵箱" />
      </el-form-item>
      <el-form-item label="返傭收款公司收款賬戶" prop="channelAccount" >
        <el-input v-model="form.channelAccount" placeholder="請輸入渠道返傭收款公司收款賬戶" />
      </el-form-item>
      <el-form-item label="返傭收款公司開戶銀行" prop="channelBank" >
        <el-input v-model="form.channelBank" placeholder="請輸入渠道返傭收款公司開戶銀行" />
      </el-form-item>
      <el-form-item label="返傭打款服務商名稱"  prop="serviceId">
        <el-select v-model="form.serviceId" placeholder="請選擇返傭打款服務商名稱" @change="chooseService($event)">
          <el-option
            v-for="item in servicesOptions"
            :key="item.id"
            :label="item.serviceName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客戶經(jīng)理"  prop="salesManagerId">
        <el-select v-model="form.salesManagerId" placeholder="請選擇客戶經(jīng)理" @change="chooseManager($event)">
          <el-option
            v-for="item in managerOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">確 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  listChannel, getChannel, delChannel, addChannel, updateChannel,
  deactivateAccount,
  resetPassword,
  getChannelSelection,
  updateChannelBatch, addChannelUser, listChannelData
} from '@/api/sep/channel'
import { getSepEnterprise, updateSepEnterpriseData } from '@/api/sep/SepEnterprise'
import { listUser,changeUserStatus } from '@/api/system/user'
export default {
  name: "testDialog",
  data() {
    return {
      form: {},
      //服務商list
      servicesOptions:[],
      //客戶經(jīng)理list
      managerOptions:[],
      channelOption:[],
      // 表單校驗
      rules: {
        salesManagerId:[{ required: true, message: '客戶經(jīng)理不能為空', trigger: 'change' }],
        serviceId:[{ required: true, message: '返傭打款服務商名稱不能為空', trigger: 'change' }],
        channelBank:[{ required: true, message: '返傭收款公司開戶銀行不能為空', trigger: 'blur' }],
        channelName:[{ required: true, message: '渠道商名稱不能為空', trigger: 'blur' }],
        channelRebateName:[{ required: true, message: '返傭收款公司名稱不能為空', trigger: 'blur' }],
        channelLinkname:[{ required: true, message: '聯(lián)系人不能為空', trigger: 'blur' }],
        channelLinkmail:[{ required: true, message: '聯(lián)系郵箱不能為空', trigger: 'blur' }],
        channelLinkphone: [
          // 添加正則表達式 pattern: /^1[3|5|7|8|9]\d{9}$/，驗證手機號是否正確
          { required: true, message: '請輸入手機號', trigger: 'blur' },
          // { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '請輸入正確的號碼格式', trigger: 'change' }
        ],
        channelAccount: [
          { required: true, message: '請輸入銀行卡號', trigger: 'blur' },
          // {pattern: /^([1-9])(\d{17})(\d|X)$/,message: "請輸入正確的銀行卡號",trigger: "change"}
        ],
      },
      // 彈出層標題
      title: "",
      // 是否顯示彈出層
      open: false,
      // 表單參數(shù)
      bizform: {}
    };
  },
  methods: {
    // 窗口初始化方法，nextTick方法可以添加邏輯，如打開窗口時查詢數(shù)據(jù)填充
    init(bizId) {
      console.log("123")
      this.open = true;
      // this.$nextTick(() => {
      //   getById(bizId).then(response => {
      //     this.bizform = response.data;
      //     this.open = true;
      //     this.title = "修改業(yè)務";
      //   });
      // });
    },
    // 取消按鈕
    cancel() {
      this.open = false;
      this.reset();
    },
    submitForm: function () {
      this.$refs["bizform"].validate(valid => {
        if (valid) {
          if (this.bizform.id != undefined) {
            updateBizDefine(this.bizform).then(response => {
              if (response.data) {
                this.msgSuccess("修改成功");
                this.open = false;
                // 調用主頁面的getList方法刷新主頁面
                this.$parent.getList();
              } else {
                this.msgError(response.resultMsg);
              }
            });
          } else {
            addBizDefine(this.bizform).then(response => {
              if (response.data) {
                this.msgSuccess("新增成功");
                this.open = false;
                // 調用主頁面的getList方法刷新主頁面
                this.$parent.getList();
              } else {
                this.msgError(response.resultMsg);
              }
            });
          }
        }
      });
    }
  }
};
</script>

參考資料：https://www.ibashu.cn/news/show_306835.html

到此這篇關于vue 彈出框引入另一個vue頁面的文章就介紹到這了,更多相關vue 彈出框另一個vue頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue通過cookie獲取用戶登錄信息的思路詳解
這篇文章主要介紹了vue通過cookie獲取用戶登錄信息的思路詳解，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-10-10
vue實現(xiàn)左右滑動效果實例代碼
左右滾動的效果,在日常開發(fā)中比較常見，這篇文章主要給大家介紹了關于vue實現(xiàn)左右滑動效果的相關資料,需要的朋友可以參考下
2021-05-05
使用淘寶鏡像cnpm安裝Vue.js的圖文教程
今天小編就為大家分享一篇使用淘寶鏡像cnpm安裝Vue.js的圖文教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-05-05
解決vue-cli3創(chuàng)建使用iview定制主題javascriptEnabled找不到該配置項
這篇文章主要介紹了解決vue-cli3創(chuàng)建使用iview定制主題javascriptEnabled找不到該配置項問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue?css?相對路徑導入問題級踩坑記錄
這篇文章主要介紹了vue?css?相對路徑導入問題級踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
想到頭禿也想不到的Vue3復用組件還可以這么hack的用法
這篇文章主要為大家介紹了想到頭禿也想不到的Vue3復用組件還可以這么hack的用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
詳解如何使用Vuex實現(xiàn)Vue后臺管理中的角色鑒權
最近參與了公司一個新的B端項目的研發(fā),從無到有搭建項目的過程中,遇到了關于項目鑒權的問題,這篇文章主要給大家介紹了關于如何使用Vuex實現(xiàn)Vue后臺管理中的角色鑒權的相關資料,需要的朋友可以參考下
2022-05-05
解決Vue+ts里面this.$store問題
這篇文章主要介紹了解決Vue+ts里面this.$store問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
Element MessageBox彈框的具體使用
這篇文章主要介紹了Element MessageBox彈框的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-07-07
vue-router的beforeRouteUpdate不觸發(fā)問題
這篇文章主要介紹了vue-router的beforeRouteUpdate不觸發(fā)問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04