ivew複用了https://ionicons.com/的圖示體系,現在ionicons已經升級到了5.*版本,但是ivew還在使用3.*版本,所以有時候需要去搜索下自己喜歡的圖示還挺麻煩

各種圖示

特別是選單,需要使用者各種自定義圖示,現在把這個圖示給封裝下,讓使用者可以直接選擇,省去每次選擇的事情,而且圖示選擇應該是一個常用的場景,就像把這個給封裝下,封裝成一個元件,讓這個功能可以在其他地方複用,

因為vue元件擴建還是挺簡單的,這裡就簡單描述下:

第一步,蒐集我們一共有多少圖示,這個是折騰的事情,但是從ionicons官網可以看到圖示,拿下來解析了下xml把所有的圖示都拿到了,得到了一個數組,方便後面使用

然後就是第一步組裝

<template>  <Modal v-model="isShow" width="65%" height="60%" :closable="false" :mask-closable="false" :footer-hide="true">    <a class="ivu-modal-close" @click="closeModel"><i class="ivu-icon ivu-icon-ios-close"></i></a>    <div>      <div class="search-div">        <Row>          <Col  span="8" style="padding-top: 5px">            <CheckboxGroup v-model="iconsTypeSelected" @on-change="reloadData">              <Checkbox label="iOS">                <Icon type="logo-apple"></Icon>                <span>蘋果</span>              </Checkbox>              <Checkbox label="iOS-Outline">                <Icon type="logo-reddit"></Icon>                <span>蘋果簡潔</span>              </Checkbox>              <Checkbox label="Material Design">                <Icon type="logo-android"></Icon>                <span>安卓</span>              </Checkbox>            </CheckboxGroup>          </Col>          <Col span="16">            <Input suffix="ios-search" class="search-input" v-model="searchIcon" placeholder="查詢圖示" style="width: auto" @on-change="reloadData" />          </Col>        </Row>        </div>      <div class="icon-div">        <Row>          <Col span="4" v-for="(icon ,index) in iconArr" :key="index">            <div  class="icon-div-col"  @click="iconSelect(icon)">              <Icon :type="icon" size="48"></Icon><br>              <span>{{icon}}</span>            </div>          </Col>        </Row>      </div>    </div>  </Modal></template><script>export default {  name: 'icon-select',  data () {    return {      isShow: false,      iconsTypeSelected: ['iOS'],      iconsType: ['iOS',        'iOS-Outline',        'Material Design'],      iconsNoAll: [],      iconArr: [],      searchIcon: '',      icons: ['add',        'add-circle']    }  },  methods: {    select () {      this.isShow = true    },    closeModel () {      this.isShow = false    },    iconSelect (icon) {      this.$emit('on-select', icon)      this.closeModel()    },    reloadData () {      this.iconArr = []      this.iconsTypeSelected.forEach(t => {        this.icons.forEach(icon => {          if (!icon.startsWith('logo')) {            if (!this.searchIcon || icon.indexOf(this.searchIcon) >= 0 ||              ('ios-' + icon).indexOf(this.searchIcon) >= 0 ||              ('md-' + icon).indexOf(this.searchIcon) >= 0 ||              ('ios-' + icon + '-outline').indexOf(this.searchIcon) >= 0) {              switch (t) {                case 'iOS':                  this.iconArr.push('ios-' + icon)                  break                case 'iOS-Outline':                  this.iconArr.push('ios-' + icon + '-outline')                  break                case 'Material Design':                  this.iconArr.push('md-' + icon)                  break              }            }          }        })      })    }  },  mounted: function () {    this.reloadData()  }}</script><style scoped>  .search-div {    padding-top: 10px;  }  .icon-div {    height: 500px;    padding-top: 40px;    overflow-y:auto;  }  .icon-div-col {    height: 100px;    text-align:center;    margin:0 auto;  }</style>

得到的效果

圖示選擇

使用方法也和其他元件一致:

import IconSelect from '@/components/icon-select/icon-select'    selectIcon () {      this.$refs.iconSelect.select()    },    iconSelected (icon) {      // this.form['icon'] = icon      this.$set(this.form, 'icon', icon)    }

兩個函式,一個是點選彈窗的圖示,一個是選中的圖片

這裡留有一個因為,是按照vue的事件架構來設計還是按照習慣使用回撥來設計,感覺回撥整體更簡單,畢竟不用兩個函式,一個函式就可以解決問題?大家對於這個有什麼看法嗎

也可以對這個對於元件的使用規則交流下