This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

优化数组的操作;优化组件:value传递;完成多选框组件

old
宇天 2018-06-14 17:12:22 +08:00
parent d769c8d31d
commit 5ecec460cb
11 changed files with 277 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/js/anot-touch.js
View File

@ -1981,17 +1981,18 @@ const _Anot = (function() {
$emit.call(this.$up, this.$pathname)
},
set: function(index, val) {
if (index >>> 0 === index && this[index] !== val) {
index = index >>> 0
if (index > this.length) {
throw Error(index + 'set方法的第一个参数不能大于原数组长度')
}
if (this[index] !== val) {
$emit.call(this.$up, this.$pathname + '.*', [val, this[index]])
this.splice(index, 1, val)
}
},
contains: function(el) {
//判定是否包含
return this.indexOf(el) !== -1
return this.indexOf(el) > -1
},
ensure: function(el) {
if (!this.contains(el)) {
@ -2008,11 +2009,9 @@ const _Anot = (function() {
return this.removeAt(this.indexOf(el))
},
removeAt: function(index) {
index = index >>> 0
//移除指定索引上的元素
if (index >>> 0 === index) {
return this.splice(index, 1)
}
return []
},
size: function() {
//取得数组长度，这个函数可以同步视图，length不能
@ -3747,7 +3746,7 @@ const _Anot = (function() {
var componentQueue = []
var widgetList = []
var componentHooks = {
construct: noop,
__init__: noop,
componentWillMount: noop,
componentDidMount: noop,
childComponentDidMount: noop,
@ -3834,10 +3833,20 @@ const _Anot = (function() {
parentVm.$watch(valueKey, function(val) {
parentVm.$fire('component!' + $id + '!value', val)
})
if (Array.isArray(state.value)) {
hooks.watch['value.length'] = hooks.watch['value.length']
? [hooks.watch['value.length']]
: []
hooks.watch['value.length'].push(function(val) {
parentVm[valueKey] = this.value.$model
})
} else {
hooks.watch.value = hooks.watch.value ? [hooks.watch.value] : []
hooks.watch.value.push(function(val) {
parentVm[valueKey] = val
})
}
delete props[':value']
}
@ -3850,7 +3859,15 @@ const _Anot = (function() {
Object.assign(hooks.props, props)
Object.assign(hooks.state, state)
hooks.construct.call(elem, hooks.props, hooks.state)
var __READY__ = false
hooks.__init__.call(elem, hooks.props, hooks.state, function next() {
__READY__ = true
})
if (!__READY__) {
return
}
hooks.$id = $id
@ -3863,7 +3880,7 @@ const _Anot = (function() {
render
} = hooks
delete hooks.construct
delete hooks.__init__
delete hooks.componentWillMount
delete hooks.componentDidMount
delete hooks.childComponentDidMount

33
src/js/anot-touch.shim.js
View File

@ -1996,17 +1996,18 @@
$emit.call(this.$up, this.$pathname)
},
set: function(index, val) {
if (index >>> 0 === index && this[index] !== val) {
index = index >>> 0
if (index > this.length) {
throw Error(index + 'set方法的第一个参数不能大于原数组长度')
}
if (this[index] !== val) {
$emit.call(this.$up, this.$pathname + '.*', [val, this[index]])
this.splice(index, 1, val)
}
},
contains: function(el) {
//判定是否包含
return this.indexOf(el) !== -1
return this.indexOf(el) > -1
},
ensure: function(el) {
if (!this.contains(el)) {
@ -2023,11 +2024,9 @@
return this.removeAt(this.indexOf(el))
},
removeAt: function(index) {
index = index >>> 0
//移除指定索引上的元素
if (index >>> 0 === index) {
return this.splice(index, 1)
}
return []
},
size: function() {
//取得数组长度，这个函数可以同步视图，length不能
@ -3762,7 +3761,7 @@
var componentQueue = []
var widgetList = []
var componentHooks = {
construct: noop,
__init__: noop,
componentWillMount: noop,
componentDidMount: noop,
childComponentDidMount: noop,
@ -3849,10 +3848,20 @@
parentVm.$watch(valueKey, function(val) {
parentVm.$fire('component!' + $id + '!value', val)
})
if (Array.isArray(state.value)) {
hooks.watch['value.length'] = hooks.watch['value.length']
? [hooks.watch['value.length']]
: []
hooks.watch['value.length'].push(function(val) {
parentVm[valueKey] = this.value.$model
})
} else {
hooks.watch.value = hooks.watch.value ? [hooks.watch.value] : []
hooks.watch.value.push(function(val) {
parentVm[valueKey] = val
})
}
delete props[':value']
}
@ -3865,7 +3874,15 @@
Object.assign(hooks.props, props)
Object.assign(hooks.state, state)
hooks.construct.call(elem, hooks.props, hooks.state)
var __READY__ = false
hooks.__init__.call(elem, hooks.props, hooks.state, function next() {
__READY__ = true
})
if (!__READY__) {
return
}
hooks.$id = $id
@ -3878,7 +3895,7 @@
render
} = hooks
delete hooks.construct
delete hooks.__init__
delete hooks.componentWillMount
delete hooks.componentDidMount
delete hooks.childComponentDidMount

33
src/js/anot.js
View File

@ -1981,17 +1981,18 @@ const _Anot = (function() {
$emit.call(this.$up, this.$pathname)
},
set: function(index, val) {
if (index >>> 0 === index && this[index] !== val) {
index = index >>> 0
if (index > this.length) {
throw Error(index + 'set方法的第一个参数不能大于原数组长度')
}
if (this[index] !== val) {
$emit.call(this.$up, this.$pathname + '.*', [val, this[index]])
this.splice(index, 1, val)
}
},
contains: function(el) {
//判定是否包含
return this.indexOf(el) !== -1
return this.indexOf(el) > -1
},
ensure: function(el) {
if (!this.contains(el)) {
@ -2008,11 +2009,9 @@ const _Anot = (function() {
return this.removeAt(this.indexOf(el))
},
removeAt: function(index) {
index = index >>> 0
//移除指定索引上的元素
if (index >>> 0 === index) {
return this.splice(index, 1)
}
return []
},
size: function() {
//取得数组长度，这个函数可以同步视图，length不能
@ -3747,7 +3746,7 @@ const _Anot = (function() {
var componentQueue = []
var widgetList = []
var componentHooks = {
construct: noop,
__init__: noop,
componentWillMount: noop,
componentDidMount: noop,
childComponentDidMount: noop,
@ -3834,10 +3833,20 @@ const _Anot = (function() {
parentVm.$watch(valueKey, function(val) {
parentVm.$fire('component!' + $id + '!value', val)
})
if (Array.isArray(state.value)) {
hooks.watch['value.length'] = hooks.watch['value.length']
? [hooks.watch['value.length']]
: []
hooks.watch['value.length'].push(function(val) {
parentVm[valueKey] = this.value.$model
})
} else {
hooks.watch.value = hooks.watch.value ? [hooks.watch.value] : []
hooks.watch.value.push(function(val) {
parentVm[valueKey] = val
})
}
delete props[':value']
}
@ -3850,7 +3859,15 @@ const _Anot = (function() {
Object.assign(hooks.props, props)
Object.assign(hooks.state, state)
hooks.construct.call(elem, hooks.props, hooks.state)
var __READY__ = false
hooks.__init__.call(elem, hooks.props, hooks.state, function next() {
__READY__ = true
})
if (!__READY__) {
return
}
hooks.$id = $id
@ -3863,7 +3880,7 @@ const _Anot = (function() {
render
} = hooks
delete hooks.construct
delete hooks.__init__
delete hooks.componentWillMount
delete hooks.componentDidMount
delete hooks.childComponentDidMount

33
src/js/anot.shim.js
View File

@ -1996,17 +1996,18 @@
$emit.call(this.$up, this.$pathname)
},
set: function(index, val) {
if (index >>> 0 === index && this[index] !== val) {
index = index >>> 0
if (index > this.length) {
throw Error(index + 'set方法的第一个参数不能大于原数组长度')
}
if (this[index] !== val) {
$emit.call(this.$up, this.$pathname + '.*', [val, this[index]])
this.splice(index, 1, val)
}
},
contains: function(el) {
//判定是否包含
return this.indexOf(el) !== -1
return this.indexOf(el) > -1
},
ensure: function(el) {
if (!this.contains(el)) {
@ -2023,11 +2024,9 @@
return this.removeAt(this.indexOf(el))
},
removeAt: function(index) {
index = index >>> 0
//移除指定索引上的元素
if (index >>> 0 === index) {
return this.splice(index, 1)
}
return []
},
size: function() {
//取得数组长度，这个函数可以同步视图，length不能
@ -3762,7 +3761,7 @@
var componentQueue = []
var widgetList = []
var componentHooks = {
construct: noop,
__init__: noop,
componentWillMount: noop,
componentDidMount: noop,
childComponentDidMount: noop,
@ -3849,10 +3848,20 @@
parentVm.$watch(valueKey, function(val) {
parentVm.$fire('component!' + $id + '!value', val)
})
if (Array.isArray(state.value)) {
hooks.watch['value.length'] = hooks.watch['value.length']
? [hooks.watch['value.length']]
: []
hooks.watch['value.length'].push(function(val) {
parentVm[valueKey] = this.value.$model
})
} else {
hooks.watch.value = hooks.watch.value ? [hooks.watch.value] : []
hooks.watch.value.push(function(val) {
parentVm[valueKey] = val
})
}
delete props[':value']
}
@ -3865,7 +3874,15 @@
Object.assign(hooks.props, props)
Object.assign(hooks.state, state)
hooks.construct.call(elem, hooks.props, hooks.state)
var __READY__ = false
hooks.__init__.call(elem, hooks.props, hooks.state, function next() {
__READY__ = true
})
if (!__READY__) {
return
}
hooks.$id = $id
@ -3878,7 +3895,7 @@
render
} = hooks
delete hooks.construct
delete hooks.__init__
delete hooks.componentWillMount
delete hooks.componentDidMount
delete hooks.childComponentDidMount

3
src/js/datepicker/index.js
View File

@ -194,7 +194,7 @@ export default Anot.component('datepicker', {
</dl>
</div>`
},
construct: function(props, state) {
__init__: function(props, state, next) {
// 日期格式化, 不显示时间时, 默认会调用过滤器的格式'Y-m-d H:i:s'
if (!props.showTime && !props.format) {
props.format = 'Y-m-d'
@ -267,6 +267,7 @@ export default Anot.component('datepicker', {
delete props.maxDate
delete props.hostPush
delete props.disabled
next()
},
componentWillMount: function() {
this.resetCalendarTable()

76
src/js/form/index.js
View File

@ -11,16 +11,16 @@ const log = console.log
Anot.ui.form = '0.1.0'
// 按钮
Anot.component('button', {
construct(props, state) {
__init__(props, state, next) {
state.text = this.textContent
state.style = { 'border-radius': props.radius }
this.classList.add('do-fn-noselect')
this.classList.add('do-button')
this.classList.add(props.color || 'grey')
this.setAttribute(':click', 'onClick')
this.setAttribute(':class', '{disabled: disabled}')
this.setAttribute(':css', 'style')
this.classList.add(props.color || 'grey')
if (props.size) {
this.classList.add(props.size)
}
@ -30,6 +30,8 @@ Anot.component('button', {
delete props.disabled
delete props.color
delete props.size
next()
},
render() {
let icon = ''
@ -63,7 +65,7 @@ Anot.component('button', {
// 单选按钮
Anot.component('radio', {
construct(props, state) {
__init__(props, state, next) {
state.text = this.textContent
state.checked = state.value === props.label
if (props.hasOwnProperty('disabled')) {
@ -71,15 +73,14 @@ Anot.component('radio', {
}
this.classList.add('do-radio')
this.classList.add('do-fn-noselect')
if (!state.disabled) {
this.classList.add(props.color || 'grey')
}
this.setAttribute(':class', '{disabled: disabled, checked: checked}')
this.setAttribute(':click', 'onClick')
delete props.disabled
delete props.color
next()
},
render() {
return `
@ -113,21 +114,20 @@ Anot.component('radio', {
// 开关
Anot.component('switch', {
construct(props, state) {
__init__(props, state, next) {
if (props.hasOwnProperty('disabled')) {
state.disabled = true
}
this.classList.add('do-switch')
this.classList.add('do-fn-noselect')
if (!state.disabled) {
this.classList.add(props.color || 'grey')
}
this.setAttribute(':class', '{disabled: disabled, checked: value}')
this.setAttribute(':click', 'onClick')
delete props.disabled
delete props.color
next()
},
render() {
return `
@ -148,4 +148,62 @@ Anot.component('switch', {
}
})
// 多选
Anot.component('checkbox', {
__init__(props, state, next) {
if (!Array.isArray(state.value)) {
this.parentNode.removeChild(this)
Anot.error('多选框的传入值必须一个数组', TypeError)
}
state.text = this.textContent
state.checked = state.value.indexOf(props.label) > -1
if (props.hasOwnProperty('disabled')) {
state.disabled = true
}
this.classList.add('do-checkbox')
this.classList.add('do-fn-noselect')
this.classList.add(props.color || 'grey')
this.setAttribute(':class', '{disabled: disabled, checked: checked}')
this.setAttribute(':click', 'onClick')
delete props.disabled
delete props.color
next()
},
render() {
return `
<span class="do-checkbox__box">
<i class="do-icon-get" :visible="checked"></i>
</span>
<span class="do-checkbox__text" :text="text"></span>
`
},
state: {
value: [],
text: '',
checked: false,
disabled: false
},
methods: {
onClick() {
if (this.disabled) {
return
}
let { label } = this.props
let list = this.value.$model
for (let i in list) {
if (list[i] === label) {
this.checked = false
this.value.removeAt.call(this.value, i)
return
}
}
this.checked = true
this.value.push(label)
// this.value = !this.value
}
}
})
export default Anot

83
src/js/form/style.scss
View File

@ -55,65 +55,56 @@
.do-radio {position:relative;display:inline-block;width:auto;height:30px;padding:0 10px;line-height:30px;text-align:center;cursor:default;font-size:14px;
&.disabled {cursor:not-allowed;}
&__box {float:left;width:20px;height:20px;margin:5px;border:1px solid nth($cgr, 1);border-radius:50%;
}
&__box {float:left;width:20px;height:20px;margin:5px;border:1px solid nth($cgr, 1);border-radius:50%;}
&.checked &__box::after {display:block;width:14px;height:14px;margin:2px;border-radius:50%;content:""}
&__text {color:nth($cgr, 1);}
&.teal &__box {border-color:nth($ct, 1);
&::after {background:nth($ct, 1);}
}
&.teal &__text {color:nth($ct, 1);}
&.teal {color:nth($ct, 1);}
&.green &__box {border-color:nth($cg, 1);
&::after {background:nth($cg, 1);}
}
&.green &__text {color:nth($cg, 1);}
&.green {color:nth($cg, 1);}
&.blue &__box {border-color:nth($cb, 1);
&::after {background:nth($cb, 1);}
}
&.blue &__text {color:nth($cb, 1);}
&.blue {color:nth($cb, 1);}
&.purple &__box {border-color:nth($cpp, 1);
&::after {background:nth($cpp, 1);}
}
&.purple &__text {color:nth($cpp, 1);}
&.purple {color:nth($cpp, 1);}
&.red &__box {border-color:nth($cr, 1);
&::after {background:nth($cr, 1);}
}
&.red &__text {color:nth($cr, 1);}
&.red {color:nth($cr, 1);}
&.orange &__box {border-color:nth($co, 1);
&::after {background:nth($co, 1);}
}
&.orange &__text {color:nth($co, 1);}
&.orange {color:nth($co, 1);}
&.plain &__box {border-color:nth($cp, 3);
&::after {background:nth($cp, 3);}
}
&.plain &__text {color:nth($cp, 3);}
&.plain {color:nth($cp, 3);}
&.grey &__box {border-color:nth($cgr, 1);
&::after {background:nth($cgr, 1);}
}
&.grey &__text {color:nth($cgr, 1);}
&.grey {color:nth($cgr, 1);}
&.disabled &__box {border-color:nth($cp, 1);
&::after {background:nth($cp, 1);}
&.disabled {color:nth($cp, 3);cursor:not-allowed;text-decoration:line-through;}
&.disabled.checked {color:nth($cgr, 2);}
&.disabled &__box {border-color:nth($cp, 3);
&::after {background:nth($cp, 3);}
}
&.disabled &__text {color:nth($cp, 1);}
&.disabled.checked &__text {color:nth($cgr, 1);}
}
@ -162,3 +153,51 @@
&.disabled &__label::before {right:7px;}
&.disabled.checked &__label::before {left:7px;}
}
.do-checkbox {position:relative;display:inline-block;width:auto;height:30px;padding:0 10px;line-height:30px;text-align:center;cursor:default;font-size:14px;
&__box {float:left;width:20px;height:20px;margin:5px;line-height:18px;border:1px solid nth($cgr, 1);border-radius:3px;font-size:18px;text-align:center;
}
&.checked &__box {color:#fff;font-weight:bold;}
&.grey {color:nth($cgr, 1);}
&.grey &__box {border-color:nth($cgr, 1);}
&.grey.checked &__box {background:nth($cgr, 1);}
&.teal {color:nth($ct, 1);}
&.teal &__box {border-color:nth($ct, 1);}
&.teal.checked &__box {background:nth($ct, 1);}
&.green {color:nth($cg, 1);}
&.green &__box {border-color:nth($cg, 1);}
&.green.checked &__box {background:nth($cg, 1);}
&.blue {color:nth($cb, 1);}
&.blue &__box {border-color:nth($cb, 1);}
&.blue.checked &__box {background:nth($cb, 1);}
&.purple {color:nth($cpp, 1);}
&.purple &__box {border-color:nth($cpp, 1);}
&.purple.checked &__box {background:nth($cpp, 1);}
&.orange {color:nth($co, 1);}
&.orange &__box {border-color:nth($co, 1);}
&.orange.checked &__box {background:nth($co, 1);}
&.plain {color:nth($cp, 3);}
&.plain &__box {border-color:nth($cp, 3);}
&.plain.checked &__box {background:nth($cp, 3);}
&.red {color:nth($cr, 1);}
&.red &__box {border-color:nth($cr, 1);}
&.red.checked &__box {background:nth($cr, 1);}
&.disabled {cursor:not-allowed;color:nth($cp, 3);text-decoration:line-through;}
&.disabled &__box {border-color:nth($cp, 3);}
&.disabled.checked {color:nth($cgr, 2);}
&.disabled.checked &__box {background:nth($cp, 3);}
}

3
src/js/meditor/index.js
View File

@ -263,11 +263,12 @@ class MEObject {
}
Anot.component('meditor', {
construct: function(props, state) {
__init__: function(props, state, next) {
if (props.hasOwnProperty('$show')) {
state.editorVisible = props.$show
delete props.$show
}
next()
},
render: function() {
let toolbar = (this.toolbar || DEFAULT_TOOLBAR).map(it => tool(it)).join('')

8
src/js/pager/index.js
View File

@ -37,7 +37,10 @@ function calculate({ currPage, maxPageShow, totalPage }) {
}
// 更新组件
function update(currPage, vm) {
const { totalPage, props: { maxPageShow } } = vm
const {
totalPage,
props: { maxPageShow }
} = vm
vm.currPage = vm.inputPage = currPage
if (typeof vm.props.onPageChange === 'function') {
vm.props.onPageChange(currPage)
@ -88,7 +91,7 @@ const tmpls = {
}
export default Anot.component('pager', {
construct: function(props, state) {
__init__: function(props, state, next) {
props.theme = +props.theme || 1
if (props.simpleMode) {
props.theme = 1
@ -119,6 +122,7 @@ export default Anot.component('pager', {
delete props.pageSize
delete props.color
delete props.size
next()
},
render: function(slots) {
let { layout, theme, simpleMode } = this.props

3
src/js/router/index.js
View File

@ -219,7 +219,7 @@ class Router {
}
Anot.component('link', {
construct(props, state) {
__init__(props, state, next) {
let { mode } = Anot.router.options
if (!props.to) {
return
@ -231,6 +231,7 @@ Anot.component('link', {
state.link = props.to
}
delete props.to
next()
},
render() {
return '<a :attr-href="link" :text="props.label"></a>'

3
src/js/tree/index.js
View File

@ -75,7 +75,7 @@ export default Anot.component('tree', {
</ul>
`
},
construct: function(props, state) {
__init__: function(props, state, next) {
props.id = props.id || 'id'
props.label = props.label || 'label'
props.parent = props.parent || 'parent'
@ -84,6 +84,7 @@ export default Anot.component('tree', {
state.multiCheck = !!props.multiCheck
delete props.list
delete props.multiCheck
next()
},
componentDidMount: function() {
this.list.forEach(it => {