vue3封装一个element的button按钮

最新推荐文章于 2024-04-04 16:31:50 发布

@小朱呀路

最新推荐文章于 2024-04-04 16:31:50 发布

阅读量935

点赞数 1

分类专栏： slot vue3 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_45441173/article/details/127690571

版权

vue3 同时被 2 个专栏收录

31 篇文章 2 订阅

订阅专栏

slot

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>组件的嵌套</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="./vue.global.js"></script>
  </head>
  <style>
    .el-button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      line-height: 1;
      height: 32px;
      white-space: nowrap;
      cursor: pointer;
      background-color: #fff;
      border: 1px solid #dcdfe6;
      border-color: #dcdfe6;
      color: #606266;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      transition: 01s;
      font-weight: 500;
      user-select: none;
      vertical-align: middle;
      padding: 8px 15px;
      font-size: 14px;
      border-radius: 4px;
    }
    .el-button--primary {
      color: white;
      background-color: #409eff;
    }
    .el-button--success {
      color: white;
      background-color: #67c23a;
    }
    .el-button--large {
      height: 40px;
      padding: 12px 19px;
      font-size: 14px;
    }
    .el-button--small {
      height: 24px;
      padding: 5px 11px;
      font-size: 2px;
      border-radius: 3px;
    }
  </style>
  <body>
    <!-- 准备好一个容器-->
    <div id="app">
      <el-button> default</el-button>
      <el-button type="primary">primary</el-button>
      <el-button type="success" size="small">
        success
        <template #icon> 🔍 </template>
      </el-button>
    </div>
  </body>

  <script type="text/javascript">
    let app = Vue.createApp({
      data() {
        return {};
      },
    });
    app.component("ElButton", {
      props: {
        type: {
          type: String,
          default: "",
        },
        size: {
          type: String,
          default: "",
        },
      },
      data() {
        return {
          myclass: {
            "el-button": true,
            [`el-button--${this.type}`]: this.type != "",
            [`el-button--${this.size}`]: this.size != "",
          },
        };
      },
      template: `
        <button  :class='myclass'>
          <slot name='icon'></slot> 
        <slot></slot>
        </button>
       
       
       `,
    });
    app.mount("#app");
  </script>
</html>