Vue extends拓展任意組件功能(el-select實例)-兩種寫法

用到ElementUI的select組件，要求能夠多選並且重複選擇。如果直接使用的話，首先el-tag會報錯，因爲循環中key值重複；其次，他的移除是通過indexof搜索移除的tag的值，且在remove-tag事件中未拋出被移除tag的索引，這樣的後果是存在多個相同值的tag時，只會移除第一個相同值的tag

思路

在el-tag的循環中，給close事件增加一個參數index，然後重寫deleteTag方法，直接通過index刪除該tag

1. Vue: @close="deleteTag($event, item)"
2. JSX: on-close={e => this.deleteTag(e, this.selected[0])}

deleteTag(event, tag, tagIndex){
  const value = this.value.slice();
  value.splice(tagIndex, 1);// 核心代碼，其他代碼省略
}

寫法一、Vue template(推薦)

非常簡單，改動特別少，可以使用Vue的所有用法，只需要複製el-select的template

1. 新建一個vue文件
2. 複製el-select的template模板內容過來
3. 導入el-select,繼承
4. 覆蓋methods中的deleteTag

結果

<template>
  <div
    class="el-select"
    :class="[selectSize ? 'el-select--' + selectSize : '']"
    @click.stop="toggleMenu"
    v-clickoutside="handleClose">
    我是示例代碼，此處爲自定義模板內容
  </div>
</template>

<script>
  import { Select} from 'element-ui';
  export default {
    extends: Select,//繼承
    name: 'my-el-select',
    methods: {
      deleteTag(event, tag, tagIndex) {
// 重寫該方法
    },
  },
  };
</script>

寫法二、JSX(比較麻煩)

需要手動將Vue template轉爲jsx寫法，無法使用事件修飾符，部分指令等等，改動比較大

1、導入繼承

import {Select} from 'element-ui';

const myElSelect = {
  extends: Select
}

2、 重寫render

Vue template最終編譯之後也是生成render函數，這裏覆蓋render函數，
生成自定義內容。此處的意義只是爲了記錄以便於方便我用render函數時的jsx寫法

render()
{
    const tagContent = () => {
      if (this.collapseTags && this.selected.length) {
        const tag0 = (
          <el-tag
            closable={!this.selectDisabled}
            size={this.collapseTagSize}
            hit={this.selected[0].hitState}
            type='info'
            on-close={e => this.deleteTag(e, this.selected[0])}
            disable-transitions={true}>
            <span class='el-select__tags-text'>{this.selected[0].currentLabel}</span>
          </el-tag>
        );
        const tag1 = (
          <el-tag
            closable={false}
            size={this.collapseTagSize}
            type='info'
            disable-transitions={true}>
            <span class='el-select__tags-text'>+ {this.selected.length - 1}</span>
          </el-tag>
        );

        if (this.selected.length > 1) {
          return (
            <span>
              {tag0}
              {tag1}
            </span>
          );
        }
        return (
          <span>
            {tag0}
          </span>
        );
      }
    };
    const emptyText = () => {
      if (this.emptyText && (!this.allowCreate || this.loading || (this.allowCreate && this.options.length === 0))) {
        return (
          <p class='el-select-dropdown__empty'>{this.emptyText}</p>
        );
      }
    };
    const selectOption = () => {
      return (
        <transition
          name='el-zoom-in-top'
          on-before-enter={this.handleMenuEnter}
          on-after-leave={this.doDestroy}>
          <el-select-menu
            ref='popper'
            append-to-body={this.popperAppendToBody}
            v-show={this.visible && this.emptyText !== false}>
            <el-scrollbar
              tag='ul'
              wrap-class='el-select-dropdown__wrap'
              view-class='el-select-dropdown__list'
              ref='scrollbar'
              class={{'is-empty': !this.allowCreate && this.query && this.filteredOptionsCount === 0}}
              v-show={this.options.length > 0 && !this.loading}>
              {this.showNewOption ? (
                <el-option
                  value={this.query}
                  created={true}>
                </el-option>
              ) : null}
              {
                this.$slots.default
              }
            </el-scrollbar>
            {emptyText()}
          </el-select-menu>
        </transition>
      );
    };
    return (
      <div
        class={['el-select', this.selectSize ? 'el-select--' + this.selectSize : '']}
        on-click={this.toggleMenu} v-clickoutside={this.handleClose}>
        <div
          class='el-select__tags'
          ref='tags'
          style={{'max-width': this.inputWidth - 32 + 'px'}}>
          {tagContent()}
          <transition-group onAfterLeave={this.resetInputHeight}>
            {this.selected.map((item, index) => {
              return (
                <el-tag
                  key={index}
                  closable={!this.selectDisabled}
                  size={this.collapseTagSize}
                  hit={item.hitState}
                  type='info'
                  on-close={(e) => this.deleteTag(e, item, index)}
                  disable-transitions={false}>
                  <span class='el-select__tags-text'>{item.currentLabel}</span>
                </el-tag>
              );
            })}
          </transition-group>
        </div>
        <el-input
          ref='reference'
          value={this.selectedLabel}
          type='text'
          placeholder={this.currentPlaceholder}
          name={this.name}
          id={this.id}
          auto-complete={this.autoComplete}
          size={this.selectSize}
          disabled={this.selectDisabled}
          readonly={this.readonly}
          validate-event={false}
          class={{'is-focus': this.visible}}
          on-focus={this.handleFocus}
          on-blur={this.handleBlur}
          on-keyup_native={this.debouncedOnInputChange}
          on-paste_native={this.debouncedOnInputChange}
          on-mouseenter_native={(this.inputHovering = true)}
          on-mouseleave_native={(this.inputHovering = false)}
        >
          <i slot='suffix'
             class={['el-select__caret', 'el-input__icon', 'el-icon-' + this.iconClass]}
             on-click={() => this.handleIconClick}/>
        </el-input>
        {selectOption()}
      </div>
    );
  }

3、 重寫method裏的deleteTag方法

4、結果

import {Select} from 'element-ui';

const myElSelect = {
  extends: Select,
  methods: {
    deleteTag(event, tag, tagIndex) {
     // *****略
    },
  },
  render() {
    return (
      <div>例子</div>
    );
  }
};
export default myElSelect;