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>
    

      

  • 相关阅读:
    JAVA 高级特性 JDBC
    C3P0 连接池
    JAVA WEB Servlet
    JAVAWEB JSP
    sed 命令
    shell 简单脚本编程
    从首页问答标题到问答详情页
    首页列表显示全部问答,完成问答详情页布局
    制作首页的显示列表
    发布功能完成
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/15749992.html
Copyright © 2011-2022 走看看