JxlTip 文本提示

满足开发者采用配置的方式，个性化设计的需求。

基于 ElementUI 的 el-tootip和el-popover 标签封装。

<template>
  <span v-if="options">
    <el-popover v-if="_get(options, 'prompt.component') === 'el-popover'" :trigger="options.prompt.attrs.trigger || 'hover'" v-bind="options.prompt.attrs" v-on="options.prompt.events">
      <template>
        <template v-if="_typeof(options.prompt.content) === String">{{ options.prompt.content }}</template>
        <template v-else-if="_typeof(options.prompt.content) === Object">
          <slot v-if="$scopedSlots['content']" name="content" />
          <component :is="options.prompt.content.component" v-else-if="_typein(options.prompt.content.component, [String, Object]) && isValid(options.prompt.content.component)" />
          <template v-else>{{ options.prompt.content.text || '' }}</template>
        </template>
      </template>
      <span slot="reference" class="tip-icon">
        <i v-if="_typeof(options.icon.component) === String" :class="options.icon.component" v-bind="options.icon.attrs" v-on="options.icon.events" />
        <component :is="options.icon.component" v-else v-bind="options.icon.attrs" v-on="options.icon.events" />
      </span>
    </el-popover>
    <el-tooltip v-else-if="_get(options, 'prompt.component') === 'el-tooltip'" v-bind="options.prompt.attrs" v-on="options.prompt.events">
      <template slot="content">
        <span v-if="_typeof(options.prompt.content) === String">{{ options.prompt.content }}</span>
        <template v-else-if="_typeof(options.prompt.content) === Object">
          <slot v-if="$scopedSlots['content']" name="content" />
          <component :is="options.prompt.content.component" v-else-if="_typein(options.prompt.content.component, [String, Object]) && isValid(options.prompt.content.component)" />
          <span v-else>{{ options.prompt.content.text || '' }}</span>
        </template>
      </template>
      <span class="tip-icon">
        <i v-if="_typeof(options.icon.component) === String" :class="options.icon.component" v-bind="options.icon.attrs" v-on="options.icon.events" />
        <component :is="options.icon.component" v-else v-bind="options.icon.attrs" v-on="options.icon.events" />
      </span>
    </el-tooltip>
    <el-tooltip v-else-if="_typeof(options) === String" placement="top">
      <template slot="content">{{ options }}</template>
      <span class="tip-icon"><i class="el-icon-question" /></span>
    </el-tooltip>
  </span>
</template>

<script>
import mixin from '@/components/libs/mixin'

export default {
  name: 'JxlTip',
  components: {},
  mixins: [mixin],
  props: {
    /**
     * 提示工具配置
     */
    options: {
      type: [Object, String],
      default: () => {
        return null
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .tip-icon {
    color: #909599;
    margin-left: 5px;
  }
</style>