前言巴拉巴拉
我会带大家从浅入深的封装一些常用的组件，并解析。 这个系列预计会写五六篇左右，可能会更多，会带大家封装一个公用组件和一些业务性组件。从浅层到复杂的组件封装最后发npm包。
这里的css和icon我是用的color-ui的，我自己写css的话……那可能是一个灾难。
前置知识：
- 会使用vue开发项目
- 封装过vue组件
- 至少看过jsx语法（虽然我也不太懂这个语法……?）
- es6 多少要会一些。
思考：
不知道大家有没有想过这几个问题？
复制代码1. ui组件的代码是怎么封装的？
2. 我们自己封装的组件跟那些发到npm上面的ui组件有啥不同？
3. 为什么这个俩组件要这样子使用？？
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar).use(TabbarItem);
"active">
"home-o">标签
"search" dot>标签
"friends-o" info="5">标签
"setting-o" info="20">标签
复制代码第一个问题：
其实ui组件的封装跟咱们写的组件封装方式是差不多的！只是别人考虑的情况多。
第二个问题：
区别嘛，也不大。只是别人封装好的组件帮咱们考虑了N多种情况。
这个常见把！ 如果是让我自己写一个navbar的组件，我一般只会考虑这些情况。- 返回文字可以配置
- 标题可以配置
- 右边icon可以配置。
我只会考虑到这些。因为我的项目就只有这些需求了，任务完成!
辣么vant呢？
可以看到考虑到了很多情况！已经可以满足大部分的需求了。
第三个问题
WTF？？？？
"el-steps"
:class="[
!simple && 'el-steps--' + direction,
simple && 'el-steps--simple'
]">
那咱们看看 element的step。
好像都有一个slot 插槽。辣么这样就能明白了！
Tabbar 是一个父div，里面包裹着 TabbarItem。
封装ui组件
这是一个非常累人的事情……搞不好被喷都很正常……
我已经做好被喷的准备了！！！！！！！！！！！
-
新建一个vue项目（不做讲解了。）
-
把color-ui的css 拷贝过来,并在App.vue 中引入。 或者从这个地方拿过来https://github.com/martin-yin/Pipi-Dinosaur/tree/master/src/assets
-
在项目根目录新建 packages/icon/index.js, packages/icon/main.js。(项目名就不要在意了。)
- 开始编写代码
main.js
export default {
name: 'Icon',
props: {
icon: String,
styled: String,
color: String,
},
render(h) {
// 肯定有小伙伴会问这个this 是谁？？？？ 其实就是你这个Icon vue对象。
const { icon, color, styled } = this;
return (
);
}
}
复制代码index.js
import Icon from './main';
// 注册组件……
Icon.install = function(Vue) {
Vue.component(Icon.name, Icon);
};
export default Icon;
复制代码是的你没有看错……我们已经写完一个可复用的组件了……?
别开炮……代码还没写完……
main.js中添加两行代码。
import icon from '../packages/icon';
// 使用这个插件
Vue.use(icon);
复制代码App.vue
"(item, index) in iconList" :key="index">
"item.name" color="text-green" styled="font-size: 38px"/>
export default {
data(){
return {
iconList: [
{
name: 'icon-appreciate'
}, {
name: 'icon-check'
}, {
name: 'icon-close'
}, {
name: 'icon-edit'
}, {
name: 'icon-formfill'
}, {
name: 'icon-loading2'
}, {
name: 'icon-list'
}, {
name: 'icon-cascades'
}, {
name: 'icon-tagfill'
}, {
name: 'icon-vipcard'
}
]
}
}
}
复制代码启动项目
这个时候呢！你可以.vue 页面使用了Icon 这个组件了！
是不是感觉跟咱们平时封装的vue组件没啥区别撒？？？辣么就对了。
下一步
下一篇文章的话带大家封装一个tabbar！敬请期待。。。。。。。。。。。。。