<!-- poper-text.vue -->
<template>
  <div>
    <template v-if="(str && str.length) > maxLength">
      <el-popover
        trigger="hover"
        placement="top"
        width="700"
      >
        <span>{{ str }}</span>
        <span slot="reference">
					{{ str | limitWrods(maxLength) }}
				</span>
      </el-popover>
    </template>
    <span v-else>{{ str || emptyText }}</span>
  </div>
</template>
<script>
export default {
  props: {
    // 原字符串
    str: {
      type: String,
      default: '',
    },
    // 超过此长度就浮窗展示
    maxLength: {
      type: Number,
      default: 60,
    },
    // 无内容时的文本
    emptyText: {
      type: String,
      default: '/'
    }
  },
  data() {
    return {};
  },
  filters: {
    // 定义一个过滤器，传递一个最大长度，将字符串进行截取
    limitWrods(value, maxLength) {
      if (!value) {
        return;
      } else {
        var target = '';

        if (value.length > maxLength) {
          target = value.substr(0, maxLength) + '...';
        } else {
          target = value;
        }
        return target;
      }
    },
  },
  mounted() {},
  methods: {},
};
</script>
