Create switch.js

src/platforms/app-plus-nvue/runtime/components/switch.js

+import {
+  emitter,
+  listeners
+} from '../mixins'
+
+function getSwitch (weex) {
+  return {
+    name: 'Switch',
+    mixins: [emitter, listeners],
+    props: {
+      name: {
+        type: String,
+        default: ''
+      },
+      id: {
+        type: String,
+        default: ''
+      },
+      type: {
+        type: String,
+        default: 'switch'
+      },
+      checked: {
+        type: [Boolean, String],
+        default: false
+      },
+      disabled: {
+        type: [Boolean, String],
+        default: false
+      },
+      color: {
+        type: String,
+        default: '#007aff'
+      }
+    },
+    data () {
+      return {
+        switchChecked: this.checked
+      }
+    },
+    computed: {
+      switchStyle () {
+        return {
+          backgroundColor: this.color
+        }
+      }
+    },
+    watch: {
+      checked (value) {
+        this.switchChecked = value
+      }
+    },
+    created () {
+      this.$dispatch('Form', 'uni-form-group-update', {
+        type: 'add',
+        vm: this
+      })
+    },
+    beforeDestroy () {
+      this.$dispatch('Form', 'uni-form-group-update', {
+        type: 'remove',
+        vm: this
+      })
+    },
+    methods: {
+      _onClick ($event) {
+        if (this.disabled) {
+          return
+        }
+        this.switchChecked = !this.switchChecked
+        this.$trigger('change', {
+          value: this.switchChecked
+        })
+      },
+      _resetFormData () {
+        this.switchChecked = false
+      },
+      _getFormData () {
+        const data = {}
+        if (this.name !== '') {
+          data['value'] = this.switchChecked
+          data['key'] = this.name
+        }
+        return data
+      }
+    },
+    render (createElement) {
+      const _vm = this
+      return createElement('div', _vm._g({
+        staticClass: ['uni-switch'],
+        on: {
+          'click': _vm._onClick
+        }
+      }, _vm.$listeners), [(_vm.type === 'switch') ? createElement('div', {
+        staticClass: ['uni-switch-input'],
+        style: {
+          backgroundColor: _vm.switchChecked ? _vm.color : '#DFDFDF'
+        }
+      }, [
+        createElement('div', {
+          staticClass: ['uni-switch-input-bg'],
+          style: {
+            backgroundColor: _vm.switchChecked ? _vm.color : '#FFFFFF'
+          }
+        }),
+        createElement('div', {
+          staticClass: ['uni-switch-input-check'],
+          class: [_vm.switchChecked ? 'uni-switch-input-check-checked' : '']
+        })
+      ]) : _vm._e(), (_vm.type === 'checkbox') ? createElement('div', {
+        staticClass: ['uni-checkbox-input'],
+        class: [_vm.switchChecked ? 'uni-checkbox-input-checked' : '']
+      }, [(_vm.switchChecked) ? createElement('u-text', {
+        staticClass: ['uni-icon', 'uni-checkbox-input-icon']
+      }, [_vm._v(_vm._s('\uEA08'))]) : _vm._e()]) : _vm._e()])
+    },
+    style: {
+      'uni-switch': {
+        'position': 'relative'
+      },
+      'uni-switch-input': {
+        'position': 'relative',
+        'width': '52',
+        'height': '32',
+        'borderRadius': '16',
+        'backgroundColor': '#dfdfdf',
+        'transitionDuration': 200,
+        'transitionProperty': 'backgroundColor'
+      },
+      'uni-switch-input-disabled': {
+        'backgroundColor': '#e1e1e1'
+      },
+      'uni-switch-input-bg': {
+        'position': 'absolute',
+        'left': 1,
+        'top': 1,
+        'width': '50',
+        'height': '30',
+        'borderRadius': '15',
+        'backgroundColor': '#ffffff',
+        'transitionDuration': 200,
+        'transitionProperty': 'backgroundColor'
+      },
+      'uni-switch-input-check': {
+        'pointerEvents': 'none',
+        'position': 'absolute',
+        'left': 1,
+        'top': 1,
+        'width': '30',
+        'height': '30',
+        'borderRadius': 50,
+        'backgroundColor': '#ffffff',
+        'boxShadow': '0 1px 3px #e0e0e0',
+        'transitionDuration': 200,
+        'transitionProperty': 'transform,backgroundColor',
+        'transform': 'translateX(0)'
+      },
+      'uni-switch-input-check-checked': {
+        'background': '#ffffff',
+        'borderColor': '#ffffff',
+        'transform': 'translateX(20px)'
+      },
+      'uni-checkbox-input': {
+        'position': 'relative',
+        'appearance': 'none',
+        'marginRight': '5',
+        'backgroundColor': '#ffffff',
+        'borderStyle': 'solid',
+        'borderWidth': '1',
+        'borderColor': '#d1d1d1',
+        'borderRadius': '3',
+        'width': '22',
+        'height': '22',
+        'outline': 0
+      },
+      'uni-checkbox-input-disabled': {
+        'backgroundColor': '#e1e1e1',
+        'color': '#adadad'
+      },
+      'uni-icon': {
+        'fontFamily': 'unincomponents',
+        'fontSize': '16',
+        'marginLeft': '2',
+        'marginTop': '2',
+        'color': '#007aff'
+      }
+    }
+  }
+}
+
+export default function init (Vue, weex) {
+  Vue.component('switch', getSwitch(weex))
+}