neic-hefeng/src/components/area/LabelArea.vue

/* 标注区 */
<template>
    <gy-card title="标注区" area-style="label" circle-style="yellow" content-style="25">
        <div v-for="mk in values" :key="mk" @contextmenu="contextmenu(mk)" style="width:100px;margin-left:10px;margin-top:10px;display: inline-block;">
            <img src="../../assets/img/LabelArea/flag.png" style="float:left;margin-top:5px;margin-left:12px;"/>
            <div style="text-align:center;font-size:12px;float:right;margin-right:12px;">{{mk.title}}</div>
            <input v-model="mk.value" style="font-size:12px;border:none;background-color:#292929;height:26px;border-radius:6px;text-align:center;outline:none;width:100px;color:rgb(220,220,220);"/>
        </div>
    </gy-card>
</template>

<script>
import BackgroundData from "../../assets/script/BackgroundData";

export default {
  name: "LabelArea",
  data() {
    return {
      values: new Array(),
    };
  },
  created() {
    this.refreshTimer = setInterval(this.refreshData, 1000);
  },
  methods: {
    refreshData() {
      this.values = new Array();
      this.values = BackgroundData.getInstance().Marks;
    },

    contextmenu(mk) {
      const { remote } = require("electron");
      var that = this;
      const menuTemplate = [
        {
          label: "删除",
          click() {
            that.remove(mk);
          },
        },
      ];
      const menu = remote.Menu.buildFromTemplate(menuTemplate);

      menu.popup(remote.getCurrentWindow());
    },

    remove(mk) {
      var indx = -1;
      for (var ind in this.values) {
        if (this.values[ind].id == mk.id) {
          indx = ind;
          break;
        }
      }
      if (indx < 0) return;
      this.values.splice(indx, 1);
      BackgroundData.getInstance().removeMarked(mk);
    },
  },
};
</script>

<style scoped>
</style>