通过混入的方式让当前Vue组件具有Popper组件的功能，同时可以自定义一些属性以满足特定需求

<template>
  <div
    ref="reference"
    :class="[
      'el-cascader',
      size && `el-cascader--${size}`,
      { 'is-disabled': disabled }
    ]"
    v-clickoutside="() => toggleDropDownVisible(false)"
    @mouseenter="inputHover = true"
    @mouseleave="inputHover = false"
    @click="() => handleOpen()">
    <el-input
      ref="input"
      v-model="inputValue"
      :size="size"
      :placeholder="placeholder"
      :readonly="readonly"
      :disabled="disabled"
      :validate-event="false"
      :class="{ 'is-focus': dropDownVisible }"
      @focus="handleFocus"
      @change="handleChange"
      @blur="handleBlur">
      <template slot="suffix">
        <i
          key="arrow-down"
          :class="[
            'el-input__icon',
            'el-icon-arrow-down',
            dropDownVisible && 'is-reverse'
          ]"
          @click.stop="toggleDropDownVisible()"></i>
      </template>
      <template slot="append" v-if="$slots.append">
        <slot name="append"></slot>
      </template>
    </el-input>
    <div ref="popper" :class="['el-popper', 'el-cascader__dropdown', popperClass]" v-show="dropDownVisible">
      <slot name="panel"></slot>
    </div>

  </div>
</template>
// 引入vue-popper组件
import Popper from 'element-ui/src/utils/vue-popper';
// 用于处理点击外部关闭弹窗的行为
import Clickoutside from 'element-ui/src/utils/clickoutside';

const PopperMixin = {
  props: {
    placement: {
      type: String,
      default: 'bottom-start'
    },
    appendToBody: Popper.props.appendToBody,
    visibleArrow: {
      type: Boolean,
      default: true
    },
    arrowOffset: Popper.props.arrowOffset,
    offset: Popper.props.offset,
    boundariesPadding: Popper.props.boundariesPadding,
    popperOptions: Popper.props.popperOptions,
    transformOrigin: Popper.props.transformOrigin
  },
  methods: Popper.methods,
  data: Popper.data,
  beforeDestroy: Popper.beforeDestroy
};
export default {
    directives: { Clickoutside },
	mixins: [PopperMixin],
}