欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實現(xiàn)彈窗引用另一個頁面窗口

 更新時間：2022年04月22日 10:16:58   作者：Moss Huang  
這篇文章主要介紹了vue實現(xiàn)彈窗引用另一個頁面窗口，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

彈窗引用另一個頁面窗口

需求：在一個主頁面A.vue上點擊按鈕時彈出一個窗口，該窗口的定義在B.vue，比如修改，需要從A.vue傳參到B.vue，修改完成后，刷新A.vue. 實現(xiàn)

頁面定義，有2個文件，在index.vue上有個【修改】按鈕，點擊彈出testDialog.vue定義的窗口，如下

testDialog.vue

<template>
? <!-- 添加或修改業(yè)務對話框 -->
? <el-dialog :title="title" :visible.sync="open" width="500px" :close-on-click-modal="false" append-to-body>
? ? <el-form ref="bizform" :model="bizform" label-width="80px">
? ? ? <el-form-item label="業(yè)務名稱" prop="bizName">
? ? ? ? <el-input v-model="bizform.bizName" placeholder="請輸入業(yè)務名稱"/>
? ? ? </el-form-item>
? ? ? <el-form-item label="業(yè)務編碼" prop="bizCode">
? ? ? ? <el-input v-model="bizform.bizCode" placeholder="請輸入編碼名稱"/>
? ? ? </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 {getById, addBizDefine, updateBizDefine} from "@/api/funds/routecenter/bizdefine";
? ? export default {
? ? ? ? name: "testDialog",
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? // 彈出層標題
? ? ? ? ? ? ? ? title: "",
? ? ? ? ? ? ? ? // 是否顯示彈出層
? ? ? ? ? ? ? ? open: false,
? ? ? ? ? ? ? ? // 表單參數(shù)
? ? ? ? ? ? ? ? bizform: {}
? ? ? ? ? ? };
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ?? ?// 窗口初始化方法，nextTick方法可以添加邏輯，如打開窗口時查詢數(shù)據(jù)填充
? ? ? ? ? ? init(bizId) {
? ? ? ? ? ? ? ? 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;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 調(diào)用主頁面的getList方法刷新主頁面
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.$parent.getList();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.msgError(response.resultMsg);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? addBizDefine(this.bizform).then(response => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if (response.data) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.msgSuccess("新增成功");
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.open = false;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 調(diào)用主頁面的getList方法刷新主頁面
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.$parent.getList();
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.msgError(response.resultMsg);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? }
? ? };
</script>

index.vue中定義一個button，其它代碼省略

<template>
?? ?<!-- 打開測試窗口按鈕 -->
?? ?<el-button
?? ? ? ? ? type="primary"
?? ? ? ? ? icon="el-icon-plus"
?? ? ? ? ? size="mini"
?? ? ? ? ? @click="handleDialog"
?? ?>測試彈窗
?? ?</el-button>
?? ?<!-- 使用組件-->
?? ?<testDialog title="測試窗口" v-if="openDialog" ref="testDialog"/>
</template>
<script>
?? ?// 引用組件
? ? import testDialog from "./testDialog";
? ? import {queryBizDefine} from "@/api/funds/routecenter/bizdefine";
? ? export default {
?? ? ? ?// 注冊組件
?? ? ? ?components: {testDialog},
?? ? ? ?data() {
?? ??? ? ? ?return {
?? ??? ? ? ? ? ?// 顯示窗口
?? ??? ? ? ? ? ?openDialog: false
?? ??? ? ? ?};
?? ? ? ?},
?? ? ? ?methods: {
?? ??? ? ? ?/** 查詢業(yè)務列表 */
?? ??? ? ? ?getList() {
?? ??? ? ? ? ? ?this.loading = true;
?? ??? ? ? ? ? ?queryBizDefine(this.queryParams).then(response => {
?? ??? ? ? ? ? ? ? ?this.bizList = response.data.rows;
?? ??? ? ? ? ? ? ? ?this.total = response.data.total;
?? ??? ? ? ? ? ? ? ?this.loading = false;
?? ??? ? ? ? ? ?});
?? ??? ? ? ?},
?? ??? ? ? ?// 按鈕方法
?? ??? ? ? ?handleDialog() {
?? ??? ??? ??? ?this.openDialog = true;
?? ??? ??? ??? ?this.$nextTick(() => {
?? ??? ??? ??? ? ? ?this.$refs.testDialog.init(2);
?? ??? ??? ??? ?});
?? ??? ??? ?}
?? ??? ?}
?? ?};
</script>

測試效果，上圖是把id為2傳了進來，在另一個頁面能查出來，并顯示

修改后能刷新主頁面

彈窗如何嵌入其它頁面

直接上代碼。

代碼使用的是Element-ui。

A頁面（父頁面）

將B頁面當作組件引入。

import taskLogList from '../dialogPage/index.vue'
export default { ?
? components:{
? ? ? dialogPage
? ? },
...
}

將組件引入放到HTML代碼中

?<dialogPage?
? ? v-if="formPageVisible"?
? ? ref="formPageRef"?
? ? :queryId="logDialog.queryId">
</dialogPage >

代碼說明

  • queryId：自定義的傳值參數(shù)。 目的是將值從父頁面?zhèn)鬟f到子頁面去。
  • formPageVisible：顯示參數(shù)。

在調(diào)用當前彈窗的方法里面進行如下設置

methods:{
? ? ...
?
? ? /**
? ? * 彈窗方法
? ? */
? ? showLog(obj){
?
? ? ? ? //顯示
? ? ? ? this.formPageVisible = true;
?
? ? ? ? //賦值
? ? ? ? this.queryId= obj.queryId;
?
? ? ? ? //調(diào)用子頁面方法
? ? ? ? this.$nextTick(()=>{
? ? ? ? ? ??
? ? ? ? ? this.$refs.formPageRef.getlist();
? ? ? ? })
? ? ? }
}

基本上A頁面已經(jīng)可以退休了。

下面B頁面開始上場。

B頁面（子頁面）

B頁面主要的工作是兩個。

1、獲取A頁面的傳值

2、方法的實現(xiàn)。

1、獲取A頁面的傳值

傳值的話，在Vue中。一般在props中進行設置。

?export default {
? ? props: {
? ? ? queryId:{
? ? ? ? type: String,
? ? ? ? default: '',
? ? ? },
? ? },
?...

在這個里面，queryId是前面?zhèn)鬟f過來的參數(shù)。

2、方法的實現(xiàn)

省略....

對了，記得把B頁面設置為dialog。否則彈窗的效果可能不能實現(xiàn)哦。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論