counter.wpy 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <style lang="less">
  2. .counter {
  3. text-align: left;
  4. font-size: 12px;
  5. }
  6. .count {
  7. font-size: 18px;
  8. font-weight: bold;
  9. &.red {
  10. color: red;
  11. }
  12. &.green {
  13. color: green;
  14. }
  15. }
  16. </style>
  17. <template>
  18. <div class="counter {{style}}">
  19. <button @tap="plus" size="mini"> + </button>
  20. <button @tap="minus" size="mini"> - </button>
  21. <button @tap="increment" size="mini"> INCREMENT </button>
  22. <button @tap="decrement" size="mini"> DECREMENT </button>
  23. <button @tap="incrementAsync" size="mini"> ASYNC INCREMENT </button>
  24. <span class="count"> {{counter}} </span>
  25. </div>
  26. </template>
  27. <script>
  28. import wepy from '@wepy/core'
  29. import store from '../store';
  30. import { mapState, mapActions } from '@wepy/x';
  31. wepy.component({
  32. store,
  33. props: {
  34. num: {
  35. type: [Number, String],
  36. coerce: function (v) {
  37. return +v
  38. },
  39. default: 50
  40. }
  41. },
  42. computed: mapState([ 'counter' ]),
  43. events: {
  44. 'index-broadcast': (...args) => {
  45. let $event = args[args.length - 1]
  46. console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
  47. }
  48. },
  49. watch: {
  50. num (curVal, oldVal) {
  51. console.log(`旧值:${oldVal},新值:${curVal}`)
  52. }
  53. },
  54. methods: {
  55. ...mapActions([
  56. 'increment',
  57. 'decrement',
  58. 'incrementAsync'
  59. ]),
  60. plus () {
  61. this.num = this.num + 1
  62. console.log('plus tapped in component');
  63. this.$emit('index-emit', this.num);
  64. },
  65. minus () {
  66. this.num = this.num - 1
  67. console.log(this.$name + ' minus tap')
  68. }
  69. }
  70. })
  71. </script>