di-switch.vue 678 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <view class="di-switch">
  3. <u-switch v-model="tempVal" active-color="#19be6b"></u-switch>
  4. </view>
  5. </template>
  6. <script>
  7. /**
  8. * di-switch 开关组件
  9. * @description 开关组件,基于u-switch,适配form
  10. * @property {Boolean} value 可以使用v-model双向绑定
  11. */
  12. export default {
  13. name:"di-switch",
  14. data() {
  15. return {
  16. tempVal: this.value
  17. };
  18. },
  19. watch: {
  20. tempVal(val) {
  21. this.$emit('input', val)
  22. },
  23. //回显
  24. value: {
  25. immediate: true,
  26. handler(value) {
  27. this.tempVal = value
  28. }
  29. }
  30. },
  31. props: {
  32. value: {
  33. type: Boolean,
  34. default: false
  35. }
  36. }
  37. }
  38. </script>
  39. <style lang="scss">
  40. </style>