app.js 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. import Vue from 'vue'
  2. import QrcodeVue from '../../src'
  3. import './app.css'
  4. Vue.config.productionTip = false
  5. new Vue({
  6. el: '#root',
  7. components: {
  8. QrcodeVue,
  9. },
  10. data: {
  11. value: 'https://example.com',
  12. size: 100,
  13. level: 'L',
  14. background: '#ffffff',
  15. foreground: '#000000',
  16. renderAs: 'svg',
  17. },
  18. template: `<form class="form-horizontal">
  19. <div class="form-group">
  20. <label class="col-sm-2 control-label">Value:</label>
  21. <div class="col-sm-10">
  22. <textarea v-model="value" class="form-control" rows="3"></textarea>
  23. </div>
  24. </div>
  25. <div class="form-group">
  26. <label class="col-sm-2 control-label">Size:</label>
  27. <div class="col-sm-10">
  28. <div class="form-control-static">
  29. <input type="range" v-model="size" min="100" max="800" step="20">
  30. </div>
  31. </div>
  32. </div>
  33. <div class="form-group">
  34. <label class="col-sm-2 control-label">Level:</label>
  35. <div class="col-sm-10">
  36. <select v-model="renderAs" class="form-control">
  37. <option value="svg">svg</option>
  38. <option value="canvas">canvas</option>
  39. </select>
  40. </div>
  41. </div>
  42. <div class="form-group">
  43. <label class="col-sm-2 control-label">Level:</label>
  44. <div class="col-sm-10">
  45. <select v-model="level" class="form-control">
  46. <option value="L">L</option>
  47. <option value="Q">Q</option>
  48. <option value="M">M</option>
  49. <option value="H">H</option>
  50. </select>
  51. </div>
  52. </div>
  53. <div class="form-group">
  54. <label class="col-sm-2 control-label">Background:</label>
  55. <div class="col-sm-10">
  56. <div class="form-control-static">
  57. <input type="color" v-model="background">
  58. </div>
  59. </div>
  60. </div>
  61. <div class="form-group">
  62. <label class="col-sm-2 control-label">Foreground:</label>
  63. <div class="col-sm-10">
  64. <div class="form-control-static">
  65. <input type="color" v-model="foreground">
  66. </div>
  67. </div>
  68. </div>
  69. <div class="form-group">
  70. <label class="col-sm-2 control-label">QR_CODE:</label>
  71. <div class="col-sm-10">
  72. <div class="form-control-static">
  73. <qrcode-vue class="qrcode" :value="value" :renderAs="renderAs" :size="size" :level="level" :background="background" :foreground="foreground"/>
  74. </div>
  75. </div>
  76. </div>
  77. </form>`,
  78. })