el-dialog element-ui弹窗

bulkImport.vue  自定义组件

<template>
  <el-dialog :visible="modalVisible" title="批量导入" centered @close="$emit('close')" :fullscreen="true">
    <span>弹窗内容</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeModal">取 消</el-button>
      <el-button type="primary" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    // modal是否可见
    modalVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    onConfirm() {
      this.$emit('bulkImport', {'aa':111,'bb':222});
    },
    closeModal() {
      this.$emit('close');
    },
  },
  watch: {},
  computed: {},
  components: {},
  mounted() {},
};
</script>

<style lang="less" scoped>

</style>

================================================================

调用页面:

<template>
    <div>
        <el-button type="primary" @click="addTags()">批量导入</el-button>
          <!-- 批量导入 -->
          <bulkImport
              @bulkImport="onBulkImport"
              @close="() => (bulkImportVisible = false)"
            :modalVisible="bulkImportVisible"
          />
    </div>
</template>

<script>
    //import bulkImport from '@/components/bulkImport.vue';
    import bulkImport from '../../components/bulkImport.vue';
    export default {
      props: {
        // modal是否可见
        modalVisible: {
          type: Boolean,
          default: false,
        },
      },
      components: {
        bulkImport,
      },
      data() {
        return {
          bulkImportVisible: false,
        };
      },
      methods: {
        addTags() {
          // 打开弹窗
          this.bulkImportVisible = true;
        },
        onBulkImport(e) {
            uni.showToast({
                title:JSON.stringify(e),
                icon: 'none',
                duration: 5000
            })
          console.log(e);  // 11
          // 关闭弹窗
          this.bulkImportVisible = false;
        },
      },
      watch: {},
      computed: {},
      mounted() {},
    };
</script>

<style>
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/150280.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面试官:你能说说常见的前端加密方法吗?

给大家推荐一个实用面试题库 1、前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;web前端面试题库 前言 本篇文章略微介绍一下前端中常见的加密算法。前端中常见的加密算法主要形式包括——哈希函数&#xff0c;对称…

截取某个元素前面的数字

uniapp 截取某个元素前面的数字 var s150元/分钟var targetElement "元/分钟";var regex new RegExp("(\\d\\.\\d)"targetElement);var result s.match(regex);console.log(result);if (result && result.length > 1) {var number result[1…

十八数藏的文化新生:数字创新的非遗保护之光

在数字时代的大舞台上&#xff0c;十八数藏如一颗璀璨的文化新星&#xff0c;以数字创新的光芒点亮着非遗保护的未来。这不仅仅是一次文化的复兴&#xff0c;更是对传统之美的数字赋能&#xff0c;让非遗在新的时代焕发出勃勃生机。 十八数藏通过数字化手段&#xff0c;使得传统…

AppLink定时调度操作

RestCloud AppLink定时调度操作 定时调度可以让我们更加快速了解到数据的变动以作出更好的决策&#xff0c;接下来通过AppLink平台配置定时调度的操作。 1.登录RestCloud AppLink 2.点击授权管理 3.点击应用认证菜单 4.新建拼多多授权认证 基础定时调度配置 1.拉取一个定时器…

Linux CentOS7 添加网卡

一台主机中安装多块网卡&#xff0c;有许多优势。可以实现多项功能。 为了学习网卡参数的设置&#xff0c;可以为主机添加多块网卡。与添加磁盘一样&#xff0c;要在VMware中设置。利用图形化方式或命令行查看或设置网卡。本文仅初步讨论添加、查看与删除网卡&#xff0c;有关…

读书笔记:Effective C++ 3.0版2005年Scott Meyers : 55条建议(47-55)

条款47 &#xff1a;请使用traits classes表现类型信息(Use traits classes for information about types) (1).Traits classes使得”类型相关信息”在编译期可用。它们以templates和”templates特化”完成实现。 (2).整合重载技术(overloading)后&#xff0c;traits classes有…

Go——一、Go语言安装及介绍

Go 一、Windows下安装Go1、下载Go2、配置环境变量3、下载Jetbrain下的GoLang4、编写hello world5、编译和执行 二、Go语言介绍1、开发文档2、Go语言核心开发团队3、为什么要创建Go4、Go语言发展史5、Go语言特点6、Golang执行过程6.1 执行过程分析6.2 编译是什么 7、开发注意事项…

海外IP代理如何助力跨境电商?

黑五作为下半年年度尤为重要的一个节日&#xff0c;是各大商家的必争之地&#xff0c;那么海外代理是如何帮助跨境商家做好店铺管理和营销呢&#xff1f; 为什么跨境人都关注海外代理&#xff0c;下面我们来进行介绍。 一、什么是海外代理 海外代理就是我们所说的&#xff1a…

【喵叔闲扯】--迪米特法则

迪米特法则&#xff0c;也称为最少知识原则&#xff08;Law of Demeter&#xff09;&#xff0c;是面向对象设计中的一个原则&#xff0c;旨在降低对象之间的耦合性&#xff0c;提高系统的可维护性和可扩展性。该原则强调一个类不应该直接与其它不相关的类相互交互&#xff0c;…

【数据结构】前言

数据结构是在计算机中维护数据的方式。 数据结构是OI重要的一部分。 同的数据结构各有优劣&#xff0c;能够处理的问题各不相同&#xff0c;而根据具体问题选取合适的数据结构&#xff0c;可以大大提升程序的效率。 所以&#xff0c;学习各种各样的数据结构是很有必要的。 数据…

kernel32.dll丢失都有什么解决办法,帮助大家解决kernel32.dll丢失的问题

kernel32.dll丢失是电脑中常出现的情况&#xff0c;今天就想和大脚聊聊这个kernel32.dll 文件&#xff0c;这个文件它的功能是干什么的&#xff0c;如果电脑中kernel32.dll 丢失都有什么解决办法&#xff0c;帮助大家解决kernel32.dll丢失的问题&#xff0c;本篇文章给大家提供…

Java的继承

继承(Inheritance) 【1】类是对对象的抽象&#xff1a; 举例&#xff1a; 荣耀20 &#xff0c;小米 红米3&#xff0c;华为 p40 pro ---> 类&#xff1a;手机类 【2】继承是对类的抽象&#xff1a; 举例&#xff1a; 学生类&#xff1a;Student&#xff1a; 属性&…

汽车CAN/ CAN FD数据记录仪在上汽大通诊断测试部门的应用

CAN/CANFD数据诊断记录仪在 规格&#xff1a;数据记录诊断仪 功能&#xff1a;CAN(FD)数据记录 UDS诊断 WIFI收发报文

Matlab绘制双坐标轴图示例函数yyaxis

一、前言 出于一些需求&#xff0c;我们需要将两个不同属性的参量绘制在同一张图上&#xff0c;但是两个参量属性不同&#xff0c;即单位不同&#xff0c;纵坐标值分布范围不同&#xff0c;此刻&#xff0c;我们只需要将一个参量的值在y轴左侧展示&#xff0c;另一个参量的值在…

【Linux】冯诺依曼体系结构、操作系统、进程概念、进程状态、环境变量、进程地址空间

目录 一、冯诺依曼体系结构二、操作系统(OS)1. 操作系统是什么2. 操作系统如何做管理3. 系统调用和库函数概念 三、进程1. 进程是什么&#xff1f;2. 描述进程-PCB3. 查看进程的方法 四、进程状态1 运行、阻塞和挂起状态2 Linux中的进程状态 五、进程优先级1. 什么是优先级2.查…

仅从个人的角度,聊聊年底的程序员招聘与入职情况

Hello&#xff0c;大家好&#xff0c;我是 Sunday。 一般到了年底&#xff0c;招聘的 HC 都会大规模的缩减。特别是在今年这样的一个行情之下&#xff0c;很多公司因为不确定明年的项目情况&#xff0c;都会开始大规模的停止招聘甚至是开始裁员。 所以&#xff0c;从理论上来…

[vs2017]_[初级]_[常用快捷键*持续更新]

场景 vs系列不具备IDEAJ的CtrlF2显示当前类的所有方法&#xff0c;有什么替代方法&#xff1f; 说明 有时候开发的时候在不同的文件跳转编辑函数是常有的&#xff0c;只是vs2017不具备IDEAJ &#xff08;CtrlF2&#xff09;的显示文件结构的能力, 那么如果显示当前文件所有方…

2023第十七届中国品牌节 | 每日互动刘宇分享大模型创新应用AITA智选人群工具

11月18日-20日&#xff0c;2023第十七届中国品牌节在杭州市云栖小镇国际会展中心盛大举行。本次活动以“复苏与腾飞”为主题&#xff0c;来自政、商、产、学、媒等各界嘉宾6000余位济济一堂&#xff0c;共同见证民族品牌的崛起&#xff0c;携手奉献一场史无前例的“品牌人的亚运…

亚马逊防关联如何做?看这一篇就够了

我们都知道亚马逊在众多跨境电商平台里属于严格的那个&#xff0c;商家们常常调侃亚马逊死法千万种&#xff0c;但最惨的还是账户被平台关联封号。有的新手刚注册还没开始就被关联封号了&#xff0c;有的业绩不错的店铺操作没注意&#xff0c;在别的地方登录了一下就被封了&…

【Flink】核心概念:任务槽(Task Slots)

任务槽 每个 worker&#xff08;TaskManager&#xff09;都是一个 JVM 进程&#xff0c;可以在单独的线程中执行一个或多个 subtask。为了控制一个 TaskManager 中接受多少个 task&#xff0c;就有了所谓的 task slots&#xff08;至少一个&#xff09;。 每个任务槽&#xf…