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

朱雀 2021-09-20 07:44 543阅读 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 条评论，543人围观）

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

相关阅读

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

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

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

相关 31 Vue组件中Slot插槽的使用1

\[组件\]Vue组件中Slot插槽的使用1 阐述编写基础结构初识插槽插槽中使用子组件插槽中使用动态数据阐述这节学习的内

深碍√TFBOYSˉ_/ 2023年10月06日 20:39/ 0 赞/ 23 阅读

相关【Vue.js】018-Vue组件：插槽slot

目录一、插槽slot 1、编译作用域 2、为什么使用slot slot翻译为插槽：组件的插槽：例子：移动网站中的导航栏 3、如何封装这类组件呢？slot

以你之姓@/ 2023年10月05日 18:21/ 0 赞/ 21 阅读

相关 vue 组件插槽

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

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

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

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

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

相关 elementui组件中，树形组件的使用

项目场景： elementui组件中，树形组件的使用 -------------------- 问题描述：通过树形结构展示，点击勾选数据。没有展开树结构的情况

本是古典何须时尚/ 2022年10月27日 01:34/ 0 赞/ 35 阅读

相关 Vue之插槽使用

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

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

相关 vue组件中插槽slot

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

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

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

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

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

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

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

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