20v-slot指令插槽_#dcdfe6 的rgb-CSDN博客

本文链接：https://blog.csdn.net/qq_33309944/article/details/100155935

slot作用是让组件可以正常的填写内容
css部分

  <style>
    .my-button {
      box-sizing: border-box;
      cursor: pointer;
      background: #fff;
      border: 1px solid #dcdfe6;
      color: #606266;
      text-align: center;
      outline: none;
      font-weight: 500;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 4px;
    }

    .my-button:hover {
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }

    .my-button.primary {
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
    }

    .my-button.primary:hover {
      background: #66b1ff;
      border-color: #66b1ff;
      color: #fff;
    }

    .my-button.success {
      color: #fff;
      background-color: #67c23a;
      border-color: #67c23a;
    }

    .my-button.success:hover {
      background: #85ce61;
      border-color: #85ce61;
      color: #fff;
    }

    .my-button.info {
      color: #fff;
      background-color: rgb(144, 147, 153);
      border-color: rgb(144, 147, 153);
    }

    .my-button.info:hover {
      color: rgb(255, 255, 255);
      background: rgb(166, 169, 173);
      border-color: rgb(166, 169, 173);
    }

    .my-button.warning {
      color: rgb(255, 255, 255);
      background-color: rgb(230, 162, 60);
      border-color: rgb(230, 162, 60);
    }

    .my-button.warning:hover {
      color: rgb(255, 255, 255);
      background: rgb(235, 181, 99);
      border-color: rgb(235, 181, 99);
    }

    .my-button.danger {
      color: rgb(255, 255, 255);
      background-color: rgb(245, 108, 108);
      border-color: rgb(245, 108, 108);
    }

    .my-button.danger:hover {
      color: rgb(255, 255, 255);
      background: rgb(247, 137, 137);
      border-color: rgb(247, 137, 137);
    }
  </style>

HTML部分：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
  <!-- slot 插槽  作用是让组件可以正常的填写内容-->
  <!-- type="success | danger | info | warning | primary" -->
  <!-- v-bind: :
  v-on:   @
  v-slot: # -->

  <div id="app">
    <my-button type="success" content="成功按钮">
      老客户空间
      <template #right>
        科技馆
      </template>
      就会感觉好怪
    </my-button>

    <!-- <div>khkjh</div>
    <p>jhhgjh</p>
    <button>kjhvh</button> -->
  </div>


  <script>
    const vm = new Vue({
      el: '#app',
      components: {
        myButton: {
          props: ['type', 'content'],
          template: `<button class="my-button" :class="type">
                      <slot name="default"></slot>
                      ---------------
                      <slot name="right"></slot>
                     </button>`
        }
      }
    })
  </script>
</body>

</html>