Rollup(4): Rollup-plugin-vue 编写我们的按钮组件

章节目录

1. Rollup(1): 安装 Rollup 以及 Rollup 和 Webpack 的区别
2. Rollup(2): Rollup-plugin-commonjs 和 Rollup-plugin-node-resolve 的应用
3. Rollup(3): Rollup-plugin-vue 编写我们第一个组件并发布使用

编写我们的 KButton 组件

编写我们的 Button 组件

src => package => common => var.scss 主要存放我们全局 scss

新建 src => package => common => var.scss

$--color-primary: #409EFF !default;
$--color-success: #67C23A !default;
$--color-warning: #E6A23C !default;
$--color-danger: #F56C6C !default;
$--color-info: #909399 !default;

$--color-disabled-primary:  #a0cfff !default;
$--color-disabled-success:  #b3e19d !default;
$--color-disabled-warning:  #f3d19e !default;
$--color-disabled-danger:  #fab6b6 !default;
$--color-disabled-info:  #c8c9cc !default;

新建 src => package => components => button => src => KButton.vue

主要参数分别是: 是否警用 , 是否加载中

<template>
  <button
    type="button"
    :disabled="disabled"
    :class="[
      `k-button`,
      `k-button--${type}`,
      {
        'is-disabled': disabled || loading,
        'is-round': round,
        'is-circle': circle,
        'is-loading': loading,
      },
    ]"
  >
    <i class="k-icon-loading" v-if="loading"></i>
    <i :class="icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
export default {
  name: 'k-button',
  props: {
    type: {
      type: String,
      default: () => 'primary',
    },
    disabled: {
      type: Boolean,
    },
    round: {
      type: Boolean,
    },
    circle: {
      type: Boolean,
    },
    icon: {
      type: String,
    },
    loading: {
      type: Boolean,
    },
  },
};
</script>

新建 src => package => components => button => index.js

// index.js
import KButton from './src/KButton.vue';
KButton.install = function (Vue) {
  Vue.component(KButton.name, KButton);
};
export default KButton;

新建 src => package => theme-chalk => k-button.scss

.k-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  &.is-disabled {
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #fff;
    border-color: #ebeef5;
  }
  &.is-round {
    border-radius: 20px;
  }
  &.is-circle {
    border-radius: 50%;
    padding: 12px;
  }
  &.is-loading {
    position: relative;
    pointer-events: none;
  }
}

.k-button--primary {
  color: #fff;
  background-color: $--color-primary;
  border-color: $--color-primary;
  &:hover,
  &:focus,
  &.is-disabled {
    color: #fff;
    background-color: #a0cfff;
    border-color: #a0cfff;
  }
}

.k-button--danger {
  color: #fff;
  background-color: $--color-danger;
  border-color: $--color-danger;
  &:hover,
  &:focus,
  &.is-disabled {
    color: #fff;
    background-color: $--color-disabled-danger;
    border-color: $--color-disabled-danger;
  }
}

.k-button--success {
  color: #fff;
  background-color: $--color-success;
  border-color: $--color-success;
  &:hover,
  &:focus,
  &.is-disabled {
    color: #fff;
    background-color: $--color-disabled-success;
    border-color: $--color-disabled-success;
  }
}

.k-button--warning {
  color: #fff;
  background-color: $--color-warning;
  border-color: $--color-warning;
  &:hover,
  &:focus,
  &.is-disabled {
    color: #fff;
    background-color: $--color-disabled-warning;
    border-color: $--color-disabled-warning;
  }
}

.k-button--info {
  color: #fff;
  background-color: $--color-info;
  border-color: $--color-info;
  &:hover,
  &:focus,
  &.is-disabled {
    color: #fff;
    background-color: $--color-disabled-info;
    border-color: $--color-disabled-info;
  }
}

修改 src => package => theme-chalk => k-icon.scss

@font-face {
  font-family: "element-icons";
  src: url("../fonts/element-icons.woff") format("woff"),
    url("../fonts/element-icons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

[class^="k-icon-"]{
  font-family: 'element-icons' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
}

.k-icon-success:before {
  content: "\e79c";
}

// 加入loading图标 
.k-icon-loading:before{
    content: "\e6cf";
}

.k-icon-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

修改 src => package => theme-chalk => index.scss

@import '../common/var.scss';
@import './k-icon.scss';
@import './k-button.scss';

最后修改 src => package => index.js

import './package/theme-chalk/index.scss';

import KIcon from './package/components/icon/index';
import KButton from './package/components/button';

function install(Vue) {
  Vue.component(KIcon.name, KIcon);
  Vue.component(KButton.name, KButton);
}

export { KIcon, KButton };
export default {
  install,
};

测试

测试代码

运行 npm run build 修改 dist => index.html

<body>
  <head>
    <link rel="stylesheet" href="./assets/css/index.css" />
    <!-- <link rel="stylesheet" href="./css/el-button.css" /> -->
  </head>
  <div id="app">
    <k-button type="primary">我是按钮</k-button>
    <h3>普通</h3>
    <k-button type="success">我是成功按钮</k-button>
    <k-button type="warning">我是警告按钮</k-button>
    <k-button type="info">我是提示按钮</k-button>
    <k-button type="danger">我是危险按钮</k-button>
    <h3>禁用</h3>
    <k-button type="success" disabled>我是成功按钮</k-button>
    <k-button type="warning" disabled>我是警告按钮</k-button>
    <k-button type="info" disabled>我是提示按钮</k-button>
    <k-button type="danger" disabled>我是危险按钮</k-button>
    <h3>loading</h3>
    <k-button type="success"  loading>加载中</k-button>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
<script type="module" src="./lib-es.js"></script>
<script type="module">
  import { KIcon, KButton } from './lib-es.js';
  Vue.component(KIcon.name, KIcon);
  Vue.component(KButton.name, KButton);
  new Vue({
    el: '#app',
  });
</script>
<style>
  body {
    padding: 20px;
  }
</style>

发布到 npm 后，然后我们通过 vue 引用后也能得到相关的结果

详情可以见上一章 Rollup(3): Rollup-plugin-vue 编写我们第一个组件并发布使用

Github 地址

rollup-vue