master

分支 (2)

标签 (2)

管理

管理

master

v0.9.4

v1.3.2

v1.0.0

Zeu-js
/
docs
/
vue.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>Configuration & API</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="docs.css">
</head>
<body>
<div class="container-fluid">
  <script src="menu.js"></script>
  <div class="content p-3">
    <div class="container-fluid">
      <h2>Vue Integration</h2>
      <hr>
      <h3>Dependencies</h3>
  <pre><code>"dependencies": {
  "vue": "^2.5.2",
  "vue-router": "^3.0.1",
  "zeu": "^1.3.1"
},</code></pre>

  <h3 class="mt-3">TextMeter.vue</h3>
<pre><code><template>
  <canvas :id="id" :width="width" :height="height"></canvas>
</template>

<script>
import * as zeu from 'zeu';
export default {
  name: 'TextMeter',
  props: {
    id: String,
    width: Number,
    height: Number,
    options: Object,
    displayValue: String,
    value: Number
  },
  mounted() {
    if (!this.chart) {
      this.init();
    }
  },
  watch: {
    displayValue(val) {
      this.chart.displayValue = val;
    },
    value(val) {
      this.chart.value = val;
    }
  },
  beforeDestroy() {
    this.destory();
  },
  methods: {
    init() {
      let textMeter = new zeu.TextMeter(this.$el.id, this.options);
      textMeter.displayValue = this.displayValue;
      textMeter.value = this.value;
      this.chart = textMeter;
    },
    destory() {
      this.chart.destroy();
      this.chart = null;
    }
  }
}
</script>
</code></pre>

  <h3 class="mt-3">TestPage.vue</h3>
<pre><code><template>
   <div>
     <button @click="update">Update</button>
     <TextMeter :id="textMeter.id" :width="textMeter.width" :height="textMeter.height"
      :displayValue="displayValue" :value="value" :options="textMeter.options"></TextMeter>
   </div>
</template>

<script>
import TextMeter from './TextMeter';

export default {
  name: 'TestPage',
  components: {
    TextMeter
  },
  data () {
    return {
      textMeter: {
        id: 'test',
        width: 200,
        height: 100,
        options: {}
      },
      displayValue: 'ZEU',
      value: 80
    }
  },
  methods: {
    update() {
      this.displayValue = 'NEW';
      this.value = 30;
    }
  }
}
</script></code></pre>


    </div>
  </div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<script src="docs.js"></script>
</body>
</html>