章节目录
- Rollup(1): 安装 Rollup 以及 Rollup 和 Webpack 的区别
- Rollup(2): Rollup-plugin-commonjs 和 Rollup-plugin-node-resolve 的应用
- 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 编写我们第一个组件并发布使用