U 国际化

he wei

2024-01-15 d592480beb70716a59b6ec5a00c73e92ff6ea986

 src/components/btnList.vue

@@ -1,56 +1,61 @@
<template>
  <div class="btn-list">
    <div :class="['btn-item', item.icon, {disabled: item.disabled}]" v-for="(item, idx) in list" :key="'btn_' + idx" :title="item.title" @click="itemClick(item)">
    </div>
    <div
      :class="['btn-item', item.icon, { disabled: item.disabled }]"
      v-for="(item, idx) in list"
      :key="'btn_' + idx"
      :title="item.title"
      @click="itemClick(item)"
    ></div>
  </div>
</template>

<script>
import i18n from "./i18n/menuList";
import { createI18nOption } from "@/assets/js/tools/i18n";

const i18nMixin = createI18nOption(i18n);
export default {
  name: "",

  mixins: [i18nMixin],
  data() {
    const list = [
      {
        title: '打开文件',
        icon: 'open',
        method: 'openFile'
        title: this.$t('OpenFile'),
        icon: "open",
        method: "openFile",
      },
      {
        title: '生成报告',
        icon: 'export',
        method: 'exportReport',
        disabled: true
        title: this.$t('GenerateReport'),
        icon: "export",
        method: "exportReport",
        disabled: true,
      },
      {
        title: '查看属性',
        icon: 'view',
        method: 'viewProp',
        disabled: true
        title: this.$t('ViewProperties'),
        icon: "view",
        method: "viewProp",
        disabled: true,
      },
      {
        title: '分级评价',
        icon: 'report',
        method: 'setAlarmValue'
        title: this.$t('GradedEvaluation'),
        icon: "report",
        method: "setAlarmValue",
      },
      {
        title: '窗口配置',
        icon: 'window-confirm',
        method: 'windowConfirm'
      }
        title: this.$t('WindowConfiguration'),
        icon: "window-confirm",
        method: "windowConfirm",
      },
    ];
    return {
      list
      list,
    };
  },
  watch: {
    $route(n) {
      this.list[1].disabled = !["compare", "result"].includes(
        n.name
      );
      this.list[2].disabled = !["result"].includes(
        n.name
      );
      this.list[1].disabled = !["compare", "result"].includes(n.name);
      this.list[2].disabled = !["result"].includes(n.name);
    },
  },
  components: {},
@@ -72,14 +77,14 @@
      this.$bus.$emit("export");
    },
    viewProp() {
      this.$bus.$emit('viewProp');
      this.$bus.$emit("viewProp");
    },
    setAlarmValue() {
      this.$bus.$emit('setAlarmValue');
      this.$bus.$emit("setAlarmValue");
    },
    windowConfirm() {
      this.$bus.$emit('windowConfirm');
    }
      this.$bus.$emit("windowConfirm");
    },
  },

  mounted() {},
@@ -99,22 +104,22 @@
      margin-left: 4px;
    }
    &.open {
      background: url('~@/assets/open.png') center / contain no-repeat;
      background: url("~@/assets/open.png") center / contain no-repeat;
    }
    &.export {
      background: url('~@/assets/export.png') center / contain no-repeat;
      background: url("~@/assets/export.png") center / contain no-repeat;
    }
    &.view {
      background: url('~@/assets/view.png') center / contain no-repeat;
      background: url("~@/assets/view.png") center / contain no-repeat;
    }
    &.report {
      background: url('~@/assets/report.png') center / contain no-repeat;
      background: url("~@/assets/report.png") center / contain no-repeat;
    }
    &.window-confirm {
      background: url('~@/assets/window-confirm.png') center / contain no-repeat;
      background: url("~@/assets/window-confirm.png") center / contain no-repeat;
    }
    &:hover {
      background-color: rgba(200, 200, 200, .4);
      background-color: rgba(200, 200, 200, 0.4);
    }
    &.disabled.disabled {
      background-color: #999;
@@ -123,4 +128,4 @@
    }
  }
}
</style>
</style>