You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
193 lines
4.8 KiB
193 lines
4.8 KiB
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))
|
|
}
|
|
|