时间戳

首页 > 解决方案 > 将 Vue 组件转换为 Vuetify 组件

vue.js - 将 Vue 组件转换为 Vuetify 组件

问题描述

我正在使用 Vue+Vuetify。从未学过 Vue 单机版直接进入二人组

我正在尝试重新创建迷你图指标 - 可以在此代码笔“PageViews”中看到（源代码从 JS 的第 30 行开始）

问题： Vue Standalone 有不同的注册组件的方法。我试图根据 Vuetify 的规则重新调整代码并注册组件。通常，Vuetify 中的迷你图只是用<v-sparkline/>.

尽管我努力了，但我仍然遇到错误：TypeError：“this.Chart is not a function”。

我究竟做错了什么？

我的尝试：metric.vue

<template>
<div class="br2">
      <div class="pa3 flex-auto bb b--white-10">
        <h3 class="mt0 mb1 f6 ttu white o-70">{{ title }}</h3>
        <h2 class="mv0 f2 fw5 white">{{ value }}</h2>
      </div>
      <div class="pt2">
        <canvas></canvas>
      </div>
    </div>
</template>


<script>

  export default {

        props: ["title", "value"],


        data () {
            return {
                ctx: null,

            }
            },

   mounted () {

    this.ctx = this.$el.querySelector("canvas").getContext("2d");
    let sparklineGradient = this.ctx.createLinearGradient(0, 0, 0, 135);
    sparklineGradient.addColorStop(0, "rgba(255,255,255,0.35)");
    sparklineGradient.addColorStop(1, "rgba(255,255,255,0)");

    let data = {
      labels: ["A", "B", "C", "D", "E", "F"],
      datasets: [{
        backgroundColor: sparklineGradient,
        borderColor: "#FFFFFF",
        data: [2, 4, 6, 4, 8, 10]
      }]
    };

     this.Chart(this.ctx, {
      data: data,
      options: {
        elements: {
          point: {
            radius: 0
          }
        },
        scales: {
          xAxes: [{
            display: false
          }],
          yAxes: [{
            display: false
          }]
        }
      }
    });
  }
}
</script>

标签： vue.jsvue-componentvuetify.js

解决方案

您没有从 chart.js 导入 Chart

 <template>
      <div id="app">
        <div class="br2">
          <div class="pt2">
            <canvas></canvas>
          </div>
        </div>
      </div>
    </template>

    <script>
    import Chart from 'chart.js'
    export default {
      name: "App",
      data(){
        return{
          ctx: null
        }
      },
      created: function() {
        Chart.defaults.global.legend.display = false;
      },
      mounted: function() {
        this.ctx = this.$el.querySelector("canvas").getContext("2d");
        let sparklineGradient = this.ctx.createLinearGradient(0, 0, 0, 135);
        sparklineGradient.addColorStop(0, "rgba(255,255,255,0.35)");
        sparklineGradient.addColorStop(1, "rgba(255,255,255,0)");

        let data = {
          labels: ["A", "B", "C", "D", "E", "F"],
          datasets: [{
            backgroundColor: 'red',
            borderColor: "#FFFFFF",
            data: [2, 4, 6, 4, 8, 10]
          }]
        };

        Chart.Line(this.ctx, {
          data: data,
          options: {
            elements: {
              point: {
                radius: 0
              }
            },
            scales: {
              xAxes: [{
                display: false
              }],
              yAxes: [{
                display: false
              }]
            }
          }
        });
      }
    };
    </script>

    <style>
    #app {
      font-family: "Avenir", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

推荐阅读