统一组件渲染完的回调为created;优化vm的mounted回调;移植tree组件
宇天
parent
bc30db6dfa
commit
cb29d45b79
|
|
@ -1735,6 +1735,7 @@
|
|||
hideProperty($vmodel, '$refs', {})
|
||||
hideProperty($vmodel, '$children', [])
|
||||
hideProperty($vmodel, 'hasOwnProperty', trackBy)
|
||||
hideProperty($vmodel, '$mounted', mounted)
|
||||
if (options.watch) {
|
||||
hideProperty($vmodel, '$watch', function() {
|
||||
return $watch.apply($vmodel, arguments)
|
||||
|
|
@ -1779,7 +1780,6 @@
|
|||
}
|
||||
|
||||
$vmodel.$active = true
|
||||
$vmodel.mounted = mounted
|
||||
|
||||
if (old && old.$up && old.$up.$children) {
|
||||
old.$up.$children.push($vmodel)
|
||||
|
|
@ -1930,6 +1930,7 @@
|
|||
configurable: true
|
||||
})
|
||||
}
|
||||
Anot.hideProperty = hideProperty
|
||||
|
||||
function toJson(val) {
|
||||
var xtype = Anot.type(val)
|
||||
|
|
@ -3610,10 +3611,10 @@
|
|||
|
||||
if (newVmodel) {
|
||||
setTimeout(function() {
|
||||
if (typeof newVmodel.mounted === 'function') {
|
||||
newVmodel.mounted()
|
||||
if (typeof newVmodel.$mounted === 'function') {
|
||||
newVmodel.$mounted()
|
||||
}
|
||||
delete newVmodel.mounted
|
||||
delete newVmodel.$mounted
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -3816,7 +3817,7 @@
|
|||
delete hooks.componentWillUnmount
|
||||
|
||||
var vmodel = Anot(hooks)
|
||||
delete vmodel.mounted
|
||||
delete vmodel.$mounted
|
||||
host.vmodels[0].$children.push(vmodel)
|
||||
|
||||
elem.msResolved = 1 //防止二进扫描此元素
|
||||
|
|
@ -4028,9 +4029,11 @@
|
|||
continue
|
||||
}
|
||||
// 通过属性设置回调,必须以@符号开头
|
||||
if (typeof obj[i] === 'function' && i.indexOf('@') !== 0) {
|
||||
if (i.indexOf('@') === 0) {
|
||||
if (typeof obj[i] !== 'function') {
|
||||
continue
|
||||
}
|
||||
}
|
||||
if (i === 'href' || i === 'src') {
|
||||
//处理IE67自动转义的问题
|
||||
if (!root.hasAttribute) obj[i] = obj[i].replace(/&/g, '&')
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @authors yutent (yutent@doui.cc)
|
||||
* @date 2017-12-26 11:04:52
|
||||
* @version $Id$
|
||||
*/
|
||||
|
||||
import './style.scss'
|
||||
|
||||
const logElem = document.createElement('div')
|
||||
logElem.className = 'do-console'
|
||||
|
||||
const Logger = function() {
|
||||
document.body.appendChild(logElem)
|
||||
}
|
||||
|
||||
Logger.prototype = {
|
||||
log: function(...args) {
|
||||
let pre = document.createElement('pre')
|
||||
args = args.map(it => {
|
||||
if (Anot.isPlainObject(it)) {
|
||||
return JSON.stringify(it)
|
||||
} else {
|
||||
if (Anot.type(it) === 'error') {
|
||||
return it.stack || it
|
||||
}
|
||||
return it
|
||||
}
|
||||
})
|
||||
pre.textContent = args.join(' ')
|
||||
logElem.appendChild(pre)
|
||||
},
|
||||
error: function(...args) {
|
||||
let pre = document.createElement('pre')
|
||||
args = args.map(it => {
|
||||
if (Anot.isPlainObject(it)) {
|
||||
return JSON.stringify(it)
|
||||
} else {
|
||||
if (Anot.type(it) === 'error') {
|
||||
return it.stack || it
|
||||
}
|
||||
return it
|
||||
}
|
||||
})
|
||||
pre.className = 'error'
|
||||
pre.textContent = args.join(' ')
|
||||
logElem.appendChild(pre)
|
||||
}
|
||||
}
|
||||
|
||||
window.console = new Logger()
|
||||
|
||||
export default window.console
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
@import '../css/var.scss';
|
||||
|
||||
.do-console {
|
||||
overflow:hidden;overflow-y:auto;position:fixed;left:0;bottom:0;z-index:65535;width:100%;height:50vh;padding:8px 5px;background:rgba(255,255,255,.9);color:#666;font-size:13px;line-height:17px;
|
||||
|
||||
pre {position:relative;display:block;width:100%;height:auto;padding-left:13px;word-wrap: break-word;white-space: pre-wrap;border-bottom:1px solid #ddd;
|
||||
|
||||
&.error {background:#fff0f0;color:#ff6161}
|
||||
&::before {position:absolute;left:0;top:0;content:">";color:nth($ct, 1)}
|
||||
}
|
||||
}
|
||||
|
|
@ -275,8 +275,8 @@ export default Anot.component('datepicker', {
|
|||
this.resetCalendarTable()
|
||||
},
|
||||
componentDidMount: function() {
|
||||
if (typeof this.props.onCreated === 'function') {
|
||||
this.props.onCreated(this)
|
||||
if (typeof this.props.created === 'function') {
|
||||
this.props.created(this)
|
||||
}
|
||||
|
||||
document.addEventListener('click', () => {
|
||||
|
|
@ -309,7 +309,7 @@ export default Anot.component('datepicker', {
|
|||
width: null,
|
||||
size: 'mini', //默认规格,mini, medium, large
|
||||
format: '', // 日期显示格式
|
||||
onCreated: Anot.PropsTypes.isFunction(),
|
||||
created: Anot.PropsTypes.isFunction(),
|
||||
onDatePicked: Anot.PropsTypes.isFunction()
|
||||
},
|
||||
skip: ['max', 'min', 'last', 'timer'],
|
||||
|
|
|
|||
|
|
@ -342,8 +342,8 @@ Anot.component('meditor', {
|
|||
preview.scrollTop = syncTop
|
||||
})
|
||||
//编辑器成功加载的回调
|
||||
if (typeof this.props.onCreated === 'function') {
|
||||
this.props.onCreated(new MEObject(this))
|
||||
if (typeof this.props.created === 'function') {
|
||||
this.props.created(new MEObject(this))
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -369,7 +369,7 @@ Anot.component('meditor', {
|
|||
},
|
||||
props: {
|
||||
safelyCompile: true,
|
||||
onSuccess: Anot.PropsTypes.isFunction(),
|
||||
created: Anot.PropsTypes.isFunction(),
|
||||
onUpdate: Anot.PropsTypes.isFunction(),
|
||||
onFullscreen: Anot.PropsTypes.isFunction()
|
||||
},
|
||||
|
|
|
|||
|
|
@ -155,8 +155,8 @@ export default Anot.component('pager', {
|
|||
)
|
||||
},
|
||||
componentDidMount: function() {
|
||||
if (typeof this.props.onCreated === 'function') {
|
||||
this.props.onCreated(this)
|
||||
if (typeof this.props.created === 'function') {
|
||||
this.props.created(this)
|
||||
}
|
||||
},
|
||||
state: {
|
||||
|
|
@ -178,7 +178,7 @@ export default Anot.component('pager', {
|
|||
simpleMode: !1,
|
||||
radius: 3,
|
||||
onPageChange: Anot.PropsTypes.isFunction(),
|
||||
onCreated: Anot.PropsTypes.isFunction()
|
||||
created: Anot.PropsTypes.isFunction()
|
||||
},
|
||||
skip: ['classList'],
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -16,11 +16,13 @@ function format(arr, { id, parent, label, children }) {
|
|||
let tmp = {}
|
||||
let farr = []
|
||||
arr.sort(function(a, b) {
|
||||
return a.pid === b.pid ? a.sort - b.sort : a.pid - b.pid
|
||||
return a[parent] === b[parent] ? a.sort - b.sort : a[parent] - b[parent]
|
||||
})
|
||||
arr.forEach(function(it) {
|
||||
it.checked = !!it.checked
|
||||
// Anot.hideProperty(it, '__checked__', !!it.__checked__)
|
||||
// it.__checked__ = !!it.__checked__
|
||||
it.open = !!it.open
|
||||
// console.log(it.hasOwnProperty('__checked__'), it.__checked__)
|
||||
tmp[it[id]] = it
|
||||
var parentItem = tmp[it[parent]]
|
||||
|
||||
|
|
@ -39,16 +41,22 @@ export default Anot.component('tree', {
|
|||
return null
|
||||
}
|
||||
return `
|
||||
<ul class="do-tree" :class="{{props.className}}" :if="list.size()">
|
||||
<ul class="do-tree" :if="list.size()">
|
||||
<li :repeat="list" :class="{open: el.open, dir: el[props.children]}">
|
||||
<em class="ui-font" :click="toggle(el)"></em>
|
||||
<em
|
||||
:class="{
|
||||
'do-icon-txt': !el.open && !el[props.children],
|
||||
'do-icon-folder-close': el[props.children] && !el.open,
|
||||
'do-icon-folder-open': el[props.children] && el.open,
|
||||
}"
|
||||
:click="__toggle(el)"></em>
|
||||
<span
|
||||
class="checkbox ui-font"
|
||||
class="checkbox"
|
||||
:class="{'do-icon-get': el.__checked__}"
|
||||
:if="multiCheck"
|
||||
:class="{checked: el.checked}"
|
||||
:click="onChecked(el)"></span>
|
||||
:click="__check(el, null, $event)"></span>
|
||||
<span
|
||||
:click="onSelected(el)"
|
||||
:click="__select(el)"
|
||||
:class="{active: el[props.id] === currItem}"
|
||||
:text="el[props.label]"></span>
|
||||
<template
|
||||
|
|
@ -56,8 +64,8 @@ export default Anot.component('tree', {
|
|||
:attr="{
|
||||
'multi-check': multiCheck,
|
||||
list: el[props.children],
|
||||
onSelected: props.onSelected,
|
||||
onChecked: onChecked,
|
||||
'@onActive': props.onActive,
|
||||
'@onPick': __check,
|
||||
id: props.id,
|
||||
label: props.label,
|
||||
parent: props.parent,
|
||||
|
|
@ -68,7 +76,6 @@ export default Anot.component('tree', {
|
|||
`
|
||||
},
|
||||
construct: function(props, state) {
|
||||
props.className = 'skin-' + (props.theme || 'def')
|
||||
props.id = props.id || 'id'
|
||||
props.label = props.label || 'label'
|
||||
props.parent = props.parent || 'parent'
|
||||
|
|
@ -76,73 +83,96 @@ export default Anot.component('tree', {
|
|||
state.list = format(props.list || [], props)
|
||||
state.multiCheck = !!props.multiCheck
|
||||
delete props.list
|
||||
delete props.theme
|
||||
delete props.multiCheck
|
||||
},
|
||||
componentDidMount: function() {
|
||||
if (typeof this.props.onCreated === 'function') {
|
||||
this.props.onCreated(this)
|
||||
if (typeof this.props.created === 'function') {
|
||||
this.props.created(this)
|
||||
}
|
||||
},
|
||||
state: {
|
||||
list: [],
|
||||
multiCheck: false,
|
||||
currItem: -1,
|
||||
checked: {}
|
||||
checkedItems: {}
|
||||
},
|
||||
skip: ['checked'],
|
||||
skip: ['checkedItems'],
|
||||
props: {
|
||||
className: '',
|
||||
id: '',
|
||||
label: '',
|
||||
parent: '',
|
||||
children: '',
|
||||
onCreated: Anot.PropsTypes.isFunction(),
|
||||
onSelected: Anot.PropsTypes.isFunction(),
|
||||
onChecked: Anot.PropsTypes.isFunction()
|
||||
created: Anot.PropsTypes.isFunction(),
|
||||
onActive: Anot.PropsTypes.isFunction(),
|
||||
onPick: Anot.PropsTypes.isFunction()
|
||||
},
|
||||
methods: {
|
||||
toggle: function(obj) {
|
||||
// 子目录的开关
|
||||
__toggle: function(obj) {
|
||||
if (!obj[this.props.children]) {
|
||||
return
|
||||
}
|
||||
obj.open = !obj.open
|
||||
},
|
||||
onChecked: function(el, childChecked) {
|
||||
// 选中条目, 并将选中的列表向上冒泡, 直到最外层将结果通过回调返回给外部
|
||||
__check: function(el, itemsFromChild, ev) {
|
||||
if (ev) {
|
||||
Anot(ev.target).toggleClass('do-icon-get')
|
||||
}
|
||||
|
||||
// return
|
||||
let item = null
|
||||
let arr = []
|
||||
let { id, onChecked } = this.props
|
||||
let vm, id, onPick, checkedItems
|
||||
|
||||
if (!childChecked) {
|
||||
el.checked = !el.checked
|
||||
item = el.$model
|
||||
this.checked[item[id]] = el.checked ? item : null
|
||||
if (this.props) {
|
||||
vm = this
|
||||
id = this.props.id
|
||||
onPick = this.props.onPick
|
||||
checkedItems = this.checkedItems
|
||||
} else {
|
||||
vm = this.$up
|
||||
id = vm.props.id
|
||||
onPick = vm.props.onPick
|
||||
checkedItems = vm.checkedItems
|
||||
}
|
||||
|
||||
if (itemsFromChild) {
|
||||
item = el
|
||||
Object.assign(this.checked, childChecked)
|
||||
Object.assign(checkedItems, itemsFromChild)
|
||||
} else {
|
||||
el.__checked__ = !el.__checked__
|
||||
// Anot.hideProperty(el, '__checked__', !el.__checked__)
|
||||
item = el.$model
|
||||
checkedItems[item[id]] = el.__checked__ ? item : null
|
||||
}
|
||||
|
||||
if (!this.$up) {
|
||||
for (let i in this.checked) {
|
||||
if (!this.checked[i]) {
|
||||
delete this.checked[i]
|
||||
if (vm.$up) {
|
||||
arr = checkedItems
|
||||
} else {
|
||||
arr.push(this.checked[i])
|
||||
}
|
||||
}
|
||||
// 冒泡到最高一层时, 将对象转为数组
|
||||
for (let i in checkedItems) {
|
||||
if (checkedItems[i]) {
|
||||
arr.push(checkedItems[i])
|
||||
} else {
|
||||
arr = this.checked
|
||||
delete checkedItems[i]
|
||||
}
|
||||
|
||||
if (typeof onChecked === 'function') {
|
||||
onChecked(item, arr)
|
||||
}
|
||||
}
|
||||
if (typeof onPick === 'function') {
|
||||
onPick(item, arr)
|
||||
}
|
||||
},
|
||||
onSelected: function(el) {
|
||||
let { id, onSelected } = this.props
|
||||
// 单个条目的点击选择
|
||||
__select: function(el) {
|
||||
let { id, onActive } = this.props
|
||||
this.currItem = el[id]
|
||||
if (typeof onSelected === 'function') {
|
||||
onSelected(el.$model)
|
||||
if (typeof onActive === 'function') {
|
||||
onActive(el.$model)
|
||||
}
|
||||
},
|
||||
reset: function(arr) {
|
||||
// 以给定的列表重置组件渲染
|
||||
resetWith: function(arr) {
|
||||
this.checked = {}
|
||||
this.list.clear()
|
||||
this.list.pushArray(format(arr || []))
|
||||
|
|
|
|||
|
|
@ -9,29 +9,19 @@
|
|||
@import '../../css/var.scss';
|
||||
|
||||
|
||||
.do-tree {overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:28px;font-size:13px;color:nth($cgr, 1);
|
||||
.do-tree {overflow:hidden;overflow-y:auto;position:relative;width:100%;height:100%;line-height:36px;font-size:15px;color:nth($cgr, 1);
|
||||
|
||||
.ui-font {font-family:"ui font" !important;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}
|
||||
ul {width:100%;height:auto;}
|
||||
li {overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
|
||||
li {overflow:hidden; min-height:35px;margin:1px 0; white-space:nowrap; text-overflow:ellipsis}
|
||||
|
||||
li ul {display:none;margin-left:20px;}
|
||||
li.open>ul {display:block;}
|
||||
|
||||
li em,
|
||||
li span {display:inline-block;cursor:pointer;color:nth($cgr, 2);}
|
||||
li em {float:left;padding:0 5px;}
|
||||
li em {float:left;padding:0 5px;font-size:20px;}
|
||||
li span:hover {color:nth($cgr, 2);}
|
||||
li span.active {color:nth($cgr, 3);font-weight:bold;}
|
||||
li span.checkbox {float:left;position:relative;width:14px;height:14px;margin:7px 5px 7px 0;border:1px solid nth($cgr, 1);border-radius:3px;
|
||||
|
||||
&::after {display:block;width:12px;height:12px;line-height:12px;}
|
||||
&.checked::after {content:"\e60f";}
|
||||
}
|
||||
|
||||
&.skin-def {
|
||||
li>em::before {content:"\e612";}
|
||||
li.dir>em::before {content:"\e622";}
|
||||
li.dir.open>em::before {content:"\e8ea";}
|
||||
li span.checkbox {float:left;position:relative;width:20px;height:20px;margin:8px 5px 8px 0;line-height:18px;border:1px solid nth($cgr, 1);border-radius:3px; font-size:20px;text-align:center;
|
||||
}
|
||||
}
|
||||
Reference in New Issue