提交 7a190fe3 编写于 作者: S st-dc 提交者: d-u-a

Create checkbox.js

add checkbox.js
上级 6998cbca
import {
emitter,
listeners
} from '../mixins'
function getCheckbox (weex) {
return {
name: 'Checkbox',
mixins: [emitter, listeners],
props: {
checked: {
type: [Boolean, String],
default: false
},
id: {
type: String,
default: ''
},
disabled: {
type: [Boolean, String],
default: false
},
color: {
type: String,
default: '#007aff'
},
value: {
type: String,
default: ''
}
},
data () {
return {
checkboxChecked: this.checked,
checkboxValue: this.value
}
},
watch: {
checked: function checked (val) {
this.checkboxChecked = val
},
value: function value (val) {
this.checkboxValue = val
}
},
listeners: {
'label-click': '_onClick',
'@label-click': '_onClick'
},
computed: {
checkboxColor: function checkboxColor () {
return this.disabled ? '#adadad' : this.color
}
},
created () {
this.$dispatch('CheckboxGroup', 'uni-checkbox-group-update', {
type: 'add',
vm: this
})
this.$dispatch('Form', 'uni-form-group-update', {
type: 'add',
vm: this
})
},
beforeDestroy () {
this.$dispatch('CheckboxGroup', 'uni-checkbox-group-update', {
type: 'remove',
vm: this
})
this.$dispatch('Form', 'uni-form-group-update', {
type: 'remove',
vm: this
})
},
methods: {
_onClick ($event) {
if (this.disabled) return
this.checkboxChecked = !this.checkboxChecked
this.$dispatch('CheckboxGroup', 'uni-checkbox-change', $event)
},
_resetFormData () {
this.checkboxChecked = false
}
},
beforeCreate () {
},
render (createElement) {
const _vm = this
return createElement('div', _vm._g({}, _vm.$listeners), [
createElement(
'div', {
staticClass: ['uni-checkbox']
},
[
createElement(
'div', {
staticClass: ['uni-checkbox-input'],
class: [_vm.disabled ? 'uni-checkbox-input-disabled' : '']
},
[
_vm.checkboxChecked ?
createElement(
'u-text', {
staticClass: ['uni-icon'],
style: {
color: _vm.checkboxColor
}
},
[_vm._v(_vm._s('\uEA08'))]
) :
_vm._e()
]
),
createElement(
'u-text', {
staticClass: ['uni-slot']
},
[_vm._t('default')],
2
)
]
)
])
},
style: {
'uni-checkbox': {
flexDirection: 'row',
alignItems: 'center'
},
'uni-checkbox-input': {
justifyContent: 'center',
alignItems: 'center',
position: 'relative',
borderWidth: '1',
borderColor: '#d1d1d1',
borderStyle: 'solid',
backgroundColor: '#ffffff',
borderRadius: '3',
width: '22',
height: '22'
},
'uni-icon': {
fontFamily: 'unincomponents',
fontSize: '16',
marginLeft: '2',
marginTop: '2',
color: '#007aff'
},
'uni-checkbox-input-disabled': {
backgroundColor: '#e1e1e1'
},
'uni-checkbox-input-disabled-before': {
color: '#adadad'
},
'uni-slot': {
fontSize: '16',
marginLeft: '5'
},
'uni-checkbox-group': {
display: 'block'
}
}
}
}
export default function init (Vue, weex) {
Vue.component('checkbox', getCheckbox(weex))
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册