一塊兒封裝vue ui組件,而後發到npm上!(1)

前言巴拉巴拉

我會帶你們從淺入深的封裝一些經常使用的組件,並解析。 這個系列預計會寫五六篇左右,可能會更多,會帶你們封裝一個公用組件和一些業務性組件。從淺層到複雜的組件封裝最後發npm包。css

這裏的css和icon我是用的color-ui的,我本身寫css的話……那多是一個災難。vue

前置知識:git

  1. 會使用vue開發項目
  2. 封裝過vue組件
  3. 至少看過jsx語法(雖然我也不太懂這個語法……😂)
  4. es6 多少要會一些。

思考:

不知道你們有沒有想過這幾個問題?
複製代碼
1. ui組件的代碼是怎麼封裝的?
2. 咱們本身封裝的組件跟那些發到npm上面的ui組件有啥不一樣?
3. 爲何這個倆組件要這樣子使用??
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

這個常見把! 若是是讓我本身寫一個navbar的組件,我通常只會考慮這些狀況。

  1. 返回文字能夠配置
  2. 標題能夠配置
  3. 右邊icon能夠配置。

我只會考慮到這些。由於個人項目就只有這些需求了,任務完成!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。

封裝ui組件

這是一個很是累人的事情……搞很差被噴都很正常……

我已經作好被噴的準備了!!!!!!!!!!!

  1. 新建一個vue項目(不作講解了。)

  2. 把color-ui的css 拷貝過來,並在App.vue 中引入。 或者從這個地方拿過來https://github.com/martin-yin/Pipi-Dinosaur/tree/master/src/assets

  3. 在項目根目錄新建 packages/icon/index.js, packages/icon/main.js。(項目名就不要在乎了。)

  1. 開始編寫代碼
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!敬請期待。。。。。。。。。。。。。

相關文章
相關標籤/搜索