eta_front/src/components/edbDetailPopover.vue

<template>
  <el-popover
    placement="right"
    title=""
    width="350"
    offset="100"
    trigger="hover"
  >
    <ul class="edb-info-cont">
      <li v-for="key in keysArr" :key="key">
        <label class="li-label">{{keysLabel[key]}}</label> 
        {{info[key]}}
      </li>
    </ul>
    <div slot="reference">
      <slot name="reference"/>
    </div>
  </el-popover>
</template>
<script>
export default {
  name: "mDialog",
  props: {
    info: {
      type: Object,
      default: {}
    }
  },
  computed: {
    keysLabel(){
      return {
          'EdbName': /* '指标名称' */ this.$t('Edb.Detail.e_name'),
          'EdbNameEn': /* '指标名称' */ this.$t('Edb.Detail.e_name'),
          'EdbCode': /* '指标ID' */this.$t('Edb.Detail.e_id'),
          'Frequency': /* '更新频度' */this.$t('Edb.Detail.e_fre'),
          'Unit': /* '单位' */this.$t('Edb.Detail.e_unit'),
          'UnitEn': /* '单位' */this.$t('Edb.Detail.e_unit'),
          'StartDate': /* '起始时间' */this.$t('Edb.Detail.e_start_time'),
          'LatestDate': /* '最新日期' */this.$t('Edb.Detail.e_latest_date'),
          'LatestValue': /* '最新值' */this.$t('Edb.Detail.e_latest_value'),
          'ModifyTime': /* '最近更新' */this.$t('Edb.Detail.e_recent_time'),
          'SourceName': /* '数据来源' */this.$t('Edb.Detail.source'),
        }
    },
    keysArr(){
      const keys = [
        'EdbName',
        'EdbCode',
        'Frequency',
        'Unit',
        'StartDate',
        'LatestDate',
        'LatestValue',
        'ModifyTime',
        'SourceName'
      ]

      const enKeyMap = {
        'EdbName': 'EdbNameEn',
        'Unit': 'UnitEn'
      }
      return this.currentLang==='en'
        ? keys.map(_=>enKeyMap[_]?enKeyMap[_]:_)
        : keys
    },
    currentLang() {
      return this.$store.state.lang
    }
  },
  data() {
    return {
    };
  }
};
</script>

<style scoped lang="scss">
.edb-info-cont {
  background: #fff;
  padding: 20px 20px 10px;
  li {
    margin-bottom: 20px;
    display: flex;
    font-size: 14px;
    .li-label {
      min-width: 100px;
      margin-right: 20px;
    }
  }
}
</style>