element-ui之dialog组件title插槽的使用

朱雀 2021-09-20 07:44 472阅读 0赞

dialog对话框组件title属性的slot使用方法

使用背景

需要单独控制title中某个数据显示及样式，footer也一样

<el-dialog
            // 也可以这样写,但是没有办法单独控制name age的显示
            // title="name+ '' + age"
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            // 这里的插槽会替换title显示的内容
            <div slot="title" class="header-title">
                <span v-show="name" class="title-name">name {
       { name }}</span>
                <span class="title-age">age {
       { age }}</span>
            </div>
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
    <script>
      export default {
        data() {
          return {
            dialogVisible: false,
            name: 'freely',
            age: 20
          };
        },
        methods: {
          handleClose(done) {
            this.$confirm('确认关闭？')
              .then(_ => {
                done();
              })
              .catch(_ => {});
          }
        }
      };
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，472人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue组件开发--插槽使用详解

一、概述在进行`Vue`组件开发时，当组件内某一部分标签不确定，或者补应该按固定标签来写死模板代码时。我们可以对不确定的位置，定义一个插槽，等待调用者调用该组件的时

以你之姓@/ 2024年04月03日 08:00/ 0 赞/ 16 阅读

相关 lombok组件、GenerateAllSetter插件的使用

lombok组件 > lombok组件，主要功能是让编写的代码更加优雅，（本质是快速帮我们编写getter setter 方法 toString方法构造方法，还有日志框

叁歲伎倆/ 2023年09月23日 20:15/ 0 赞/ 75 阅读

相关 vue 组件插槽

<body> <div id="app"> <alert-box>有一个警告</alert-box><!--有内容则覆盖子组件的slot标签

￡神魔★判官ぃ/ 2023年01月08日 04:23/ 0 赞/ 75 阅读

相关 idea-插件开发 Dialogs

文章目录前言一、DialogWrapper 二、使用 DialogWrapper 1. 简单小案例 1.1 定义di

超、凢脫俗/ 2022年12月18日 11:00/ 0 赞/ 685 阅读

相关 Vue 进阶[三] vue 组件化之slot 插槽

> 进阶会发现越往前走，知道的越多，不知道的也越多，但是通过学习，弱化知识盲区，对自己的实际开发选择会有很大的影响，也会影响变成思维。概述组件系统是vue的一个重要

淡淡的烟草味﹌/ 2022年12月07日 15:20/ 0 赞/ 121 阅读

相关 Vue之插槽使用

目录插槽简介示例代码运行结果 -------------------- 插槽简介 vue通过插槽和具名插槽可以向子组

桃扇骨/ 2022年05月19日 11:52/ 0 赞/ 169 阅读

相关在Vue中使用插槽插槽和具名插槽/作用域插槽

在Vue中使用插槽插槽和具名插槽 <body> <div id="app"> <child content="<p>12

叁歲伎倆/ 2022年04月22日 09:02/ 0 赞/ 278 阅读

相关 vue组件中插槽slot

注意：slot标签中样式不生效，样式应写在父组件对应的html标签中。也不可以在slot标签上添加事件，而应在对应的父组件标签上填写事件。（1）父组件向子组件传递dom元素

川长思鸟来/ 2022年04月16日 01:41/ 0 赞/ 298 阅读

相关 element-ui之dialog组件title插槽的使用

dialog对话框组件title属性的slot使用方法使用背景需要单独控制title中某个数据显示及样式，footer也一样 <el-dialog

朱雀/ 2021年09月20日 07:44/ 0 赞/ 473 阅读

相关 BootstrapVue的b-table组件使用插槽增加按钮

![在这里插入图片描述][2021012710033254.png] ![在这里插入图片描述][20210127100338365.png] ![在这里插入图片描述][

ゝ一纸荒年。/ 2021年07月25日 15:20/ 0 赞/ 502 阅读