我會帶你們從淺入深的封裝一些經常使用的組件,並解析。 這個系列預計會寫五六篇左右,可能會更多,會帶你們封裝一個公用組件和一些業務性組件。從淺層到複雜的組件封裝最後發npm包。css
這裏的css和icon我是用的color-ui的,我本身寫css的話……那多是一個災難。vue
前置知識:git
不知道你們有沒有想過這幾個問題?
複製代碼
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar).use(TabbarItem);
<van-tabbar v-model="active">
<van-tabbar-item icon="home-o">標籤</van-tabbar-item>
<van-tabbar-item icon="search" dot>標籤</van-tabbar-item>
<van-tabbar-item icon="friends-o" info="5">標籤</van-tabbar-item>
<van-tabbar-item icon="setting-o" info="20">標籤</van-tabbar-item>
</van-tabbar>
複製代碼
其實ui組件的封裝跟我們寫的組件封裝方式是差很少的!只是別人考慮的狀況多。es6
區別嘛,也不大。只是別人封裝好的組件幫我們考慮了N多種狀況。github
我只會考慮到這些。由於個人項目就只有這些需求了,任務完成!npm
辣麼vant呢?bash
能夠看到考慮到了不少狀況!已經能夠知足大部分的需求了。app
WTF???? ui
<div
class="el-steps"
:class="[ !simple && 'el-steps--' + direction, simple && 'el-steps--simple' ]">
<slot></slot>
</div>
複製代碼
那我們看看 element的step。this
好像都有一個slot 插槽。辣麼這樣就能明白了!
Tabbar 是一個父div,裏面包裹着 TabbarItem。
這是一個很是累人的事情……搞很差被噴都很正常……
我已經作好被噴的準備了!!!!!!!!!!!
新建一個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 (
<span style={styled} class={[icon, color]}></span>
);
}
}
複製代碼
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
<div v-for="(item, index) in iconList" :key="index">
<Icon :icon="item.name" color="text-green" styled="font-size: 38px"/>
</div>
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!敬請期待。。。。。。。。。。。。。