test: test picker with canvas

Author: KuangPF

example/pages/dev-test/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="dev-test=content">
+    <picker class="weui-btn" mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
+      <button type="default">日期选择器</button>
+    </picker>
+    <canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      date: '2016-09-01'
+    };
+  },
+  mounted() {
+    this.drawCanvas();
+  },
+  methods: {
+    bindDateChange() {
+      // TODO
+    },
+    drawCanvas() {
+      /* eslint-disable */
+      // 使用 wx.createContext 获取绘图上下文 context
+      var context = wx.createCanvasContext('firstCanvas')
+
+      context.setStrokeStyle("#00ff00")
+      context.setLineWidth(5)
+      context.rect(0, 0, 200, 200)
+      context.stroke()
+      context.setStrokeStyle("#ff0000")
+      context.setLineWidth(2)
+      context.moveTo(160, 100)
+      context.arc(100, 100, 60, 0, 2 * Math.PI, true)
+      context.moveTo(140, 100)
+      context.arc(100, 100, 40, 0, Math.PI, false)
+      context.moveTo(85, 80)
+      context.arc(80, 80, 5, 0, 2 * Math.PI, true)
+      context.moveTo(125, 80)
+      context.arc(120, 80, 5, 0, 2 * Math.PI, true)
+      context.stroke()
+      context.draw()
+    }
+  }
+};
+</script>
+
+<style>
+</style>

example/pages/dev-test/main.js

@@ -0,0 +1,5 @@
+import Vue from 'vue';
+import App from './index';
+
+const app = new Vue(App);
+app.$mount();

example/pages/picker/index.vue

@@ -1,5 +1,6 @@
 <template>
   <page-content title="picker" :scopedObj="scopedObj" desc="选择器，这里使用小程序原生的picker, 并在此基础上进行了封装，统一了样式，支持联动。">
+    <canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
     <div class="mpvue-weui-picker">
       <div class="page__desc">选中的值：</div>
       <div class="picker-text">{{scopedObj.pickerText}}</div>
@@ -211,6 +212,9 @@ export default {
       ]
     };
   },
+  mounted() {
+    this.drawCanvas();
+  },
   methods: {
     onChange(e) {
       console.log(e);
@@ -270,6 +274,28 @@ export default {
       } else if (this.mode === 'multiLinkageSelector' && this.deepLength === 3) {
         this.scopedObj.pickerText = e.label;
       }
+    },
+    drawCanvas() {
+      /* eslint-disable */
+      // 使用 wx.createContext 获取绘图上下文 context
+      var context = wx.createCanvasContext('firstCanvas')
+
+      context.setStrokeStyle("#00ff00")
+      context.setLineWidth(5)
+      context.rect(0, 0, 200, 200)
+      context.stroke()
+      context.setStrokeStyle("#ff0000")
+      context.setLineWidth(2)
+      context.moveTo(160, 100)
+      context.arc(100, 100, 60, 0, 2 * Math.PI, true)
+      context.moveTo(140, 100)
+      context.arc(100, 100, 40, 0, Math.PI, false)
+      context.moveTo(85, 80)
+      context.arc(80, 80, 5, 0, 2 * Math.PI, true)
+      context.moveTo(125, 80)
+      context.arc(120, 80, 5, 0, 2 * Math.PI, true)
+      context.stroke()
+      context.draw()
     }
   }
 };