zoukankan      html  css  js  c++  java
  • vue elementui之dialog组件title插槽的使用

    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>
    

      

  • 相关阅读:
    研究下线程投递
    IOCP笔记
    线程同步之mutex和Semaphore
    线程同步之mutex和event区别
    MyStack
    unix环境高级编程 读书笔记
    binary search tree study
    技术博客地址搜集
    select收数据
    奇怪的问题
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/15749992.html
Copyright © 2011-2022 走看看