欧美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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例

    vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例

    這篇文章主要介紹了vue讀取本地的excel文件并顯示在網(wǎng)頁上方法示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • 使用@tap.stop阻止事件繼續(xù)傳播

    使用@tap.stop阻止事件繼續(xù)傳播

    這篇文章主要介紹了使用@tap.stop阻止事件繼續(xù)傳播,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • Vue+Echart實現(xiàn)利用率表盤效果的示例代碼

    Vue+Echart實現(xiàn)利用率表盤效果的示例代碼

    這篇文章主要為大家詳細介紹了Vue如何利用Echart實現(xiàn)利用率表盤的效果,文中的示例代碼講解詳細,具有一定的借鑒價值,需要的可以參考一下
    2023-04-04
  • Vue項目如何部署到Tomcat服務器上

    Vue項目如何部署到Tomcat服務器上

    這篇文章主要介紹了Vue項目如何部署到Tomcat服務器上,Vue中自帶webpack,可以通過一行命令將項目打包,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-03-03
  • ElementUI級聯(lián)選擇器實現(xiàn)同一父級下最多只能選中一個子級

    ElementUI級聯(lián)選擇器實現(xiàn)同一父級下最多只能選中一個子級

    本文主要介紹了ElementUI級聯(lián)選擇器實現(xiàn)同一父級下最多只能選中一個子級,同一父級下的子節(jié)點單選,又可以選擇多個不同父級下的節(jié)點,具有一定參考價值,感興趣的可以了解一下
    2023-10-10
  • vue實現(xiàn)可拖拽div大小的方法

    vue實現(xiàn)可拖拽div大小的方法

    這篇文章主要介紹了vue實現(xiàn)可拖拽div大小的方法,可封裝為全局方法在項目中所需要地方直接調(diào)用(mixins),本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2022-04-04
  • wepy--用vantUI 實現(xiàn)上彈列表并選擇相應的值操作

    wepy--用vantUI 實現(xiàn)上彈列表并選擇相應的值操作

    這篇文章主要介紹了wepy--用vantUI 實現(xiàn)上彈列表并選擇相應的值操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue的圖片需要用require的方式進行引入問題

    vue的圖片需要用require的方式進行引入問題

    這篇文章主要介紹了vue的圖片需要用require的方式進行引入問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • Vue3中注冊全局的組件,并在TS中添加全局組件提示方式

    Vue3中注冊全局的組件,并在TS中添加全局組件提示方式

    這篇文章主要介紹了Vue3中注冊全局的組件,并在TS中添加全局組件提示方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • Vue中全局限制輸入特殊字符方式

    Vue中全局限制輸入特殊字符方式

    這篇文章主要介紹了Vue中全局限制輸入特殊字符方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03

最新評論