Question

我正在为项目使用vue。我找到了一个可以正常工作的仪表，该仪表可以完成我希望做的事情，但是问题是将它放入了我的Vue设置中。我尝试创建一个新的vue实例并将该组件添加到页面，但是没有运气。在示例中，他们将组件添加到主index.html文件中。从理论上讲，我想将其作为组件添加到单个vue页面中，但也无法使其正常工作。有人可以查看我的文件并告诉我问题吗。

const Gauge = Vue.extend({
  template: `
    <div class="container">
      <div class="gauge-bg"></div>
      <div class="gauge-middle"></div>
      <div class="gauge-overlay" :style="{ transform: rotate }"></div>
      <div class="gauge-data">
        <span>{{ percentage }}%</span>
      </div>
    </div>
  `,
  props: ['percentage'],
  computed: {
    rotate() {
      const v = this.percentage * 180 / 100;
      return `rotate(${v}deg)`;
    } } });



new Vue({
  el: 'app',
  components: {
    Gauge } });

body {
  background-color: #4d4d4d;
}
.container {
  width: 400px;
  height: 200px;
  position: absolute;
  top: 0;
  overflow: hidden;
}
.gauge-bg {
  z-index: 1;
  width: 400px;
  height: 200px;
  position: absolute;
  background-color: #a3f6ba;
  border-radius: 250px 250px 0 0;
}
.gauge-middle {
  z-index: 3;
  position: absolute;
  background-color: #4d4d4d;
  width: 250px;
  height: calc(250px / 2);
  top: 75px;
  margin-left: 75px;
  margin-right: auto;
  border-radius: 250px 250px 0 0;
}
.gauge-overlay {
  z-index: 2;
  position: absolute;
  background-color: #5df086;
  width: 400px;
  height: 200px;
  top: 200px;
  border-radius: 0 0 200px 200px;
  transform-origin: center top;
}
.gauge-data {
  z-index: 4;
  color: #5df086;
  position: absolute;
  width: 400px;
  bottom: 0;
  text-align: center;
  font-size: 24px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<gauge percentage="33"></gauge>
</div>

Answer 1

您在Vue应用程序中缺少#符号。

编辑： ，您正在询问如何在.vue文件中执行此操作-请参见此CodeSandbox：

您有：

new Vue({
  el: 'app',  // <<--- INCORRECT
  components: {
    Gauge 
  } 
});

它必须是：

new Vue({
  el: '#app',  // <<--- ADDED # SIGN
  components: {
    Gauge 
  } 
});

const Gauge = Vue.extend({
  template: `
    <div class="container">
      <div class="gauge-bg"></div>
      <div class="gauge-middle"></div>
      <div class="gauge-overlay" :style="{ transform: rotate }"></div>
      <div class="gauge-data">
        <span>{{ percentage }}%</span>
      </div>
    </div>
  `,
  props: ['percentage'],
  computed: {
    rotate() {
      const v = this.percentage * 180 / 100;
      return `rotate(${v}deg)`;
    } } });



new Vue({
  el: '#app',
  components: {
    Gauge 
  } 
});

body {
  background-color: #4d4d4d;
}
.container {
  width: 400px;
  height: 200px;
  position: absolute;
  top: 0;
  overflow: hidden;
}
.gauge-bg {
  z-index: 1;
  width: 400px;
  height: 200px;
  position: absolute;
  background-color: #a3f6ba;
  border-radius: 250px 250px 0 0;
}
.gauge-middle {
  z-index: 3;
  position: absolute;
  background-color: #4d4d4d;
  width: 250px;
  height: calc(250px / 2);
  top: 75px;
  margin-left: 75px;
  margin-right: auto;
  border-radius: 250px 250px 0 0;
}
.gauge-overlay {
  z-index: 2;
  position: absolute;
  background-color: #5df086;
  width: 400px;
  height: 200px;
  top: 200px;
  border-radius: 0 0 200px 200px;
  transform-origin: center top;
}
.gauge-data {
  z-index: 4;
  color: #5df086;
  position: absolute;
  width: 400px;
  bottom: 0;
  text-align: center;
  font-size: 24px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<gauge percentage="33"></gauge>
</div>

如何将该量规添加到Vue项目

1 个答案: