element Dialog子组件弹框

2023-11-01

//父组件
<div> 
  <tipDialog :DialogTipShow="DialogTipShow" @closeDialog="closeDialog"></tipDialog>
</div>
import tipDialog from '../components/tipDialog'
 export default {
  components: {
      tipDialog
    },
 data() {
   return {
     DialogTipShow:false
   }
},
methods: {
closeDialog() {
   this.DialogTipShow = false
   }
}
//子组件
<template>
  <div>
    <el-dialog
      title=""
      :visible.sync="DialogTip"
      width="30%"
      center
    >
     <div>
         <span>按照GB50014-2006《室外排水设计规范》,重力流污水管道应按非满流计算,其最大设计充满度, 应按下表取值:</span>
         <table class="formData"  width="100%" border="0" cellspacing="2" cellpadding="0">
         <tr collspan="2" rowspan="2">
             <td >管径或渠高(mm)</td>
             <td>最大设计充满度</td>
         </tr>
          <tr>
             <td>200-300</td>
             <td>0.55</td>
         </tr>
          <tr>
             <td>350-450</td>
             <td>0.65</td>
         </tr>
          <tr>
             <td>500-900</td>
             <td>0.70</td>
         </tr>
          <tr>
             <td>1000</td>
             <td>0.75</td>
         </tr>
         </table>
         <span>超过最大设计充满度(简称超载)说明管道内部承受额外水压,影响管道寿命,超载管段长度是发生超载管段的里程累加</span>
     </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()" size="mini">取 消</el-button>
        <el-button type="primary" @click="closeDialog()" size="mini"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'tipDialog',
    props: {
      DialogTipShow: Boolean
    },
    data() {
      return {
        DialogTip: false
      }
    },
    watch: {
      DialogTipShow(val) {
        this.DialogTip = val
      },
      deep: true
    },
    methods: {
      closeDialog() {
        this.DialogTip = false
        this.$emit('closeDialog', false)
      }
    }
  }
</script>

<style lang="scss" scoped>
.el-dialog__header{
    display: none !important;
}
.formData{
      border-collapse: collapse;
      margin:10px 0 ;
    tr{
           text-align: center;
        td{
            border: 1px solid #CFCFCF;
            text-align: center;
        }
    }
}
.el-icon-question:before{
   color: #D8D8D8 !important;
}
</style>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

element Dialog子组件弹框 的相关文章

  • 当我单击搜索按钮时,防止 ProgressDialog 被关闭(Android)

    在长时间运行的操作中 我显示了一个弹出对话框 由ProgressDialog以防止其他操作发生 我已将其设置为不可取消setCancelable false 所以我无法使用后退按钮关闭它 但令人惊讶的是 搜索 硬件按钮会关闭该对话框 更准确
  • Octave/Matlab:向向量添加新元素

    有一个向量x我必须添加一个元素 newElem 有什么区别吗 x end 1 newElem and x x newElem x end 1 newElem更稳健一些 x x newElem 仅当x是行向量 如果它是列向量x x newEl
  • Java - 全局、可重用的加载对话框

    我正在尝试实现一个全局加载对话框 我想调用一些静态函数来显示对话框和一些静态函数来关闭它 与此同时 我正在主线程或子线程中做一些工作 我尝试以下操作 但对话框没有更新 最后一次 在再次隐藏之前 它会更新 private static Run
  • 使用 qTip2 确认工具提示对话框?

    因此 当用户单击删除按钮时 我尝试创建一个小型确认对话框 内联 工具提示 我想象它看起来有点像这样 但带有小文本和 确定 和 取消 按钮 但我不是来问如何设计它的 我更喜欢使用 qTip2 作为该工作的插件 但如果你有更好的选择 我也会选择
  • 当我尝试从列表中删除元素时,如何忽略 ValueError?

    如果我打电话 如何忽略 不在列表中 错误消息a remove x when x不在列表中a 这是我的情况 gt gt gt a range 10 gt gt gt a 0 1 2 3 4 5 6 7 8 9 gt gt gt a remov
  • ElementTree 和 Element 有什么区别? (Python XML)

    from xml etree ElementTree import ElementTree Element SubElement dump elem Element 1 sub SubElement elem 2 tree ElementT
  • 如何更改对话框的默认黑色暗淡背景“颜色”(而不是暗淡量)?

    这是随机显示的图像Dialog在网上找到的 我一直在实施一个自定义Dialog 我可以处理对话框上的几乎所有内容 除了对话框本身下方的默认黑色昏暗背景之外 但在其后面的整个屏幕上 基本上我想改变它color和阿尔法值 我一直在 StackO
  • Android - 对话框内VideoView的MediaController出现在对话框后面

    我有一个VideoView在自定义对话框中 我正在为VideoView即时并将其分配给VideoView在代码中 但是控制器实际上并没有出现在视频上 它出现在对话框后面 知道如何让控制器位于视频上方吗 我创建了一个静态对话框帮助器类来帮助构
  • 是否可以获取绑定到 jQuery 元素的事件列表?

    正如问题所说 我需要绑定到特定元素的事件列表 我的意思是像单击 鼠标悬停等事件在 dom 加载时绑定到该元素 愚蠢 示例 element click function stuff element mouseover function stu
  • 类型错误:$(...).dialog 不是函数

    我正在尝试将基本的 CMS 集成到我的网站中 经过三天的努力 我仍然遇到这个问题 我已经厌倦了我所知道的一切 并做了一些研究 发现了很少的答案 但没有一个真正解决了问题 我使用 Firebug 检查错误和错误 显示的错误是 TypeErro
  • 如何创建带有两个日期选择器的自定义对话框?

    我刚刚开始学习 Android 作为一种爱好 我想创建一个带有两个日期选择器的对话框 final Dialog dialog new Dialog this dialog setContentView R layout data picke
  • AngularJS 指令 - 设置多个指令元素的顺序(不是指令的优先级,而是元素的优先级)

    考虑带有指令 foo 的标记 div div div div div div 使 foo 按指定顺序而不是从上到下 3 1 2 运行的好方法是什么 我唯一能想到做的就是跟踪已运行的内容并在不按顺序的项目上返回 false 然后让 Angul
  • Primefaces 对话框打开后更新

    我想在打开 primefaces 对话框后更新内容 是否可以 我的示例代码如下
  • 拥有可重用对话框的最佳方法是什么?

    在 Android 中创建可重用对话框的最佳方法是什么 阅读通过对话框开发指南 http developer android com guide topics ui dialogs html 我知道我可以使用AlertDialog Buil
  • Ant Macrodef:有没有办法获取元素参数的内容?

    我正在尝试在 Ant 中调试宏定义 我似乎找不到一种方法来显示作为元素发送的参数的内容
  • JavaScript 中的自定义“确认”对话框?

    我一直在开发一个使用自定义 模式对话框 的 ASP net 项目 我在这里使用吓人引号 因为我知道 模式对话框 只是我的 html 文档中的一个 div 它被设置为出现在文档其余部分的 顶部 而不是真正意义上的模式对话框 在网站的许多部分
  • C# 显示对话框线程

    我有一个Dialog Box 导入器 我用它来选择要导入到应用程序中的文件 这Dialog Box 导入器 还有另一个对话框 文件 它是OpenFileDialog 代码运行如下 Main File if Importer ShowDial
  • 进入活动后设置自定义对话框

    我的列表活动由多行组成 每行打开活动包含文本和两个按钮 其中一个打开无限图库 另一个打开对话框 每个对话框都有不同的字符串 我有 20 行 所以我添加了 20 次对话框 这是多余的 而且它工作正常 但我认为有比我所做的更好的方法 任何获得它
  • 如何循环访问 WPF StackPanel 静态项目?

    可能很容易 但我很难弄清楚这一点 谷歌似乎也没有多大帮助 如何循环遍历 StackPanel 的静态声明元素 无数据绑定 元素在 xaml 中声明 任何帮助表示赞赏 你的意思是StackPanel的孩子们 foreach var child
  • CSS 变量在dialog::backdrop 中不起作用

    我正在尝试更改 a 的背景颜色dialog元素的backdrop使用自定义 CSS 属性 但不会 这是 Chrome 中的错误还是有原因 document querySelector dialog showModal root color

随机推荐

  • When allowCredentials is true, allowedOrigins cannot contain the special value “*“ since that cannot

    最近新写springboot 配置跨域配置文件后出现的问题 org springframework web util NestedServletException Request processing failed nested excep
  • 一证通查查询名下互联网账户

    全国互联网账户 一证通查 来啦 核验身份后一键在线查询名下所有关联号码以及注册 名下电话卡查询 https tb3 cn A6zcU6手机号绑定查询 https tb3 cn A3lhMk
  • Vue3.0脚手架安装项目(通过命令行)

    Vue3 0通过命令行来创建Vue脚手架项目 1 先安装node js https nodejs org en download 自行安装 查看node jsb版本 node version 2 全局安装脚手架 npm install g
  • 智能信息处理专业是干嘛的?

    摘要 主要是介绍智能信息处理专业是干嘛的 包括其定义 涉及的领域 学习的内容和算法 发展趋势 工作前景和相关学习资料 def 使用各种智能手段进行信息交换的过程 其中智能信手段包括人工智能 机器智能 计算机智能等技术 所涉及学科 智能信息处
  • linux中感叹号的作用,Linux - 感叹号

    在Linux命令行下令人惊叹的惊叹号 符号在 Linux 中不但可以用作否定符号 还可以用来从历史命令记录中取出命令或不加修改的执行之前运行的命令 下面的所有命令都已经在 Bash Shell 中经过确切地检验 尽管我没有试过 但大多都不能
  • STM32--基本定时器&&通用定时器

    1 定时器概述 定时器分为基本定时器 通用定时器 高级定时器 例如 STM32F10x系列包含4个通用定时器 TIM2 TIM5但是STM32F103Rx系列只有3个通用定时器 TIM2 TIM4 这些通用定时器是完全独立的 不共享任何资源
  • 上传、下载huggingface仓库文件(模型、数据等)

    下载 例如 想要从huggingface hub下载llama 13b模型文件到本地 可以用如下命令 local dir就是你想要下载到的本地文件夹 from huggingface hub import snapshot download
  • MySQl的基本操作

    前言 MySQL是一种关联数据库管理系统 由于其体积小 速度快的特点 数据库CURD 他和前面的oracel的使用方法差不多 这里就不过多叙述 大概记录一下 创建数据库 创建一个名称为mydb1的数据库 默认为latin1 create d
  • Java-用户自定义异常

    Java 用户自定义异常 1 如何自定义异常 继承现有的异常父类 RuntimeException Exception 提供全局常量 serialVersionUID 提供重载的构造器 2 code举例 定义 package p8excep
  • 使用github生成在线前端项目链接

    作为一个前端小白 一开始是想面试的时候可以让HR直观地看到我的前端项目 然后就在网上找方法可以怎么解决我的这个需求 直至昨天 参考各位大佬的笔记和博客 断断续续 摸索了好几天 总算有个自己的网址 看到的方法大致如下 一 使用花生壳软件进行远
  • H5网页跳转打开微信小程序详解(含完整代码)

    限制条件 目前仅支持在微信内打开H5页面 已认证的服务号 服务号绑定 JS接口安全域名 下的网页可使用此标签跳转任意合法合规的小程序 已认证的非个人主体的小程序 使用小程序云开发的静态网页托管绑定的域名下的网页 可以使用此标签跳转任意合法合
  • csharp: Export DataSet into Excel and import all the Excel sheets to DataSet

  • 红帽Redhat—使用VMware Workstation 16 Pro 安装RHEL8.3登陆

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 一 环境工具准备 二 VMware Workstation 16 Pro虚拟机创建步骤 三 安装RHEL8 3系统操作步骤 四 操作系统的管理方式 五 SSH远程登
  • [java] mvn 使用笔记

    设置版本号 mvn versions set mvn versions commit
  • C语言结构体

    一 结构体的定义 结构体 Struct 是C语言中的一个重要数据类型 它可以用来存储多个不同类型的变量 结构体类似于一个自定义的数据类型 可以包含多个不同类型的成员变量 每个成员变量可以有自己的数据类型和值 二 结构体存储数据方式 结构体存
  • windows10在资源管理器下右键文件出现无响应解决方案

    1 下载右键菜单管理工具 使用二分查找找到产生问题的原因 我这里是因为qingshellext Class 禁用以后就没有问题了
  • 数组的转置和轴对称(python)

    文章目录 TOC 文章目录 1 什么叫轴 2 什么叫转置 3 转置 3 1简单转置 像二位数组 只有两个轴 再怎么转置也只是两个轴进行位置交换 所以 直接使用T就可以了 例如 3 2transpose 方法进行转置 3 3swapaxes
  • Android SQLite 数据库 存取 BLOB 二进制 文件

    Android开发时用到二进制数据 也可以理解为BYTE数组 的SQLite存取 可能会有人对存取如mp3 图片类文件困惑 其实p3 图片类文件读到内存就可理解为BYTE数组 只要在 下面的基础上增加将文件读到BYTE数组就可以了 其他操作
  • python设置下载源

    我们一般直接用pip下载三方包会很慢 设置以下命令可以加速下载 pip config set global index url Simple Index pip3 9 config set global index url Simple I
  • element Dialog子组件弹框

    父组件 div div