0510航天交易所ui仿制,代码使用的jiem
lxf
2025-07-16 fcb00a66b4053550b473a29d7299c7a4737eea75
src/components/list-quotation/index.vue
@@ -219,6 +219,7 @@
      type: "left", //left 从左往右 right 从有王座
      sortVal: 0,
      kLineData: this.generateKLineData(),
      klineDataList: [],
    };
  },
  props: {
@@ -247,7 +248,10 @@
  },
  mounted() {
    this.listData.forEach((item) => {
      item.kLineData = this.generateKLineData();
      if (!item.kLineData) {
        item.kLineData = this.generateKLineData();
        this.klineDataList.push(item.kLineData);
      }
    });
    this.$nextTick(() => {
      this.drawKLine();
@@ -281,8 +285,16 @@
      canvasList.forEach((canvas, index) => {
        if (!canvas) return;
        // if (this.listData[index].kLineData) return;
        if (!this.listData[index].kLineData) {
          this.listData[index].kLineData =
            this.klineDataList[index] || this.generateKLineData();
          this.klineDataList.push(this.listData[index].kLineData);
        }
        // console.log(
        //   "kLineData",
        //   this.listData[index].kLineData,
        //   this.klineDataList
        // );
        const ctx = canvas.getContext("2d");
        const width = canvas.width;
        const height = canvas.height;
@@ -314,7 +326,7 @@
        ctx.stroke();
      });
      console.log("listData: ", this.listData);
      // console.log("listData: ", this.listData);
    },
    //排序
    listSort(val) {
@@ -385,6 +397,12 @@
  },
  watch: {
    listData() {
      this.drawKLine();
      // this.listData.forEach((item) => {
      //   if (!item.kLineData) {
      //     item.kLineData = this.generateKLineData();
      //   }
      // });
      if (this.active == 0) {
        this.showList = [...this.listData];
      } else if (this.active == 1) {
@@ -399,14 +417,6 @@
        this.showList = [...this.listData].sort(this.compare("volume", "up"));
      }
      this.$forceUpdate();
      this.$nextTick(() => {
        // 为每一项补充 kLineData
        this.listData.forEach((item) => {
          if (!item.kLineData) {
            item.kLineData = this.generateKLineData();
          }
        });
      });
    },
  },
};