极客观点
项目管理
HarmonyOS
avalon版本 1.5.8
问题描述
弹出层组件嵌套了下拉选择组件，下拉组件$init方法执行多次（2次及2次以上）,且avalon脚本报错
组件使用
<ms:dialog config="expressConfig" ms-visible="isShowCancel">
<div slot="content" class="cancelDialog" ms-visible="isShowCancel">
<div class="t">取消订单</div>
<div class="label">请选择取消订单原因：</div>
<div class="input">
<div>
<ms:select config="selectConfig"></ms:select>
</div>
</div>
<div class="label">请留下你的宝贵建议：</div>
<div class="textarea">
<div>
<textarea class="suggest" type="text" placeholder="留下你的宝贵建议" ms-duplex="reason"></textarea>
</div>
</div>
<div class="butt">
<span class="back" ms-on-tap="hideCancelDialog">取消</span>
<span class="submit" ms-on-tap="submitCancelDialog">确定</span>
</div>
</div>
</ms:dialog>expressConfig 和 selectConfig 组件参数是在这个两个组件的父容器里定义的
弹出层组件定义
define(function(require, exports, module) {
return function(avalon) {
var tpl = [
'<div class="dialog-blank" ms-on-tap="bgClick">',
'<div class="dialog-blank-content" ms-on-tap="contentClick" ms-attr-style="cssLabel">',
'<div>[[content | html]]</div>',
'</div>',
'</div>'
].join('');
avalon.component('ms:dialog', {
$template: tpl,
// $replace: 1, //是否替换容器
content: '',
css: {},
cssLabel: '',
$ready: function(vm, elem, vms) {
var csss = [];
for(var i in vm.css) {
if(vm.css.hasOwnProperty(i)) {
csss.push(i + ':' + vm.css[i]);
}
}
vm.cssLabel = csss.join(';');
vm.bgClick = function() {
vm['hiddenCallback'] && vm['hiddenCallback']();
};
vm.contentClick = function($event) {
$event.stopPropagation();
};
},
bgClick: avalon.noop,
contentClick: avalon.noop
});
}
});
select组件定义
define(function(require, exports, module) {
function isString(str) {
return Object.prototype.toString.call(str) === '[object String]';
}
return function(avalon) {
var tpl = [
'<div class="select-mobile-container">',
'<div class="select-mobile-label" ms-on-tap="showSelectClick">',
'<span ms-text="getText(defVal)"></span>',
'<i class="iconfont" ms-visible="!isShowSelect"></i>',
'<i class="iconfont" ms-visible="isShowSelect"></i>',
'</div>',
'<div class="select-mobile-flex" ms-on-tap="bgClick">',
'<div class="select-mobile-content" ms-on-tap="contentClick" ms-attr-style="cssLabel">',
'<div class="select-mobile-title" ms-if="title" ms-text="title"></div>',
'<ul>',
'<li ms-repeat="datas" ms-on-tap="selectClick(el, $index)" ms-class="selected: $index===selectIndex">',
'<span ms-text="getText(el, $index)"></span>',
'</li>',
'</ul>',
'</div>',
'</div>',
'</div>'
].join('');
avalon.component('ms:select', {
$template: tpl,
$replace: 1,
css: {},
cssLabel: '',
datas: [], //默认选择数组
defVal: '', //默认值
keyLabel: '', //默认显示key
selectIndex: -1, //当前选中的index
isShowSelect: false, //是否显示选择控件
title: '', //控件标题
$init: function(vm) {
console.log(vm)
vm.getText = function(el, index) {
if(isString(el)) {
return el;
} else if(vm.keyLabel && el.hasOwnProperty(vm.keyLabel)) {
return el[vm.keyLabel];
}
};
var i;
for(i = 0; i < vm.datas.length; i++) {
if(isString(vm.datas[i]) && vm.datas[i] === vm.defVal) {
vm.selectIndex = i;
break;
} else if(vm.datas[i] === vm.defVal) {
vm.selectIndex = i;
break;
} else {
vm.selectIndex = -1;
}
}
},
$ready: function(vm, elem, vms) {
var csss = [];
for(var i in vm.css) {
if(vm.css.hasOwnProperty(i)) {
csss.push(i + ':' + vm.css[i]);
}
}
vm.cssLabel = csss.join(';');
vm.bgClick = function() {
vm.isShowSelect = false;
var flex = elem.querySelector('.select-mobile-flex');
flex.classList.remove('show');
setTimeout(function() {
flex.style.display = 'none';
}, 200);
vm['hiddenCallback'] && vm['hiddenCallback']();
};
vm.contentClick = function($event) {
$event.stopPropagation();
};
vm.selectClick = function(el, index) {
if(index !== vm.selectIndex) {
vm['selectCallback'] && vm['selectCallback'](el, index);
vm.selectIndex = index;
vm.defVal = el;
vm.bgClick();
}
};
vm.showSelectClick = function() {
vm.isShowSelect = true;
var flex = elem.querySelector('.select-mobile-flex');
flex.style.display = 'block';
setTimeout(function() {
flex.classList.add('show');
});
};
},
bgClick: avalon.noop,
contentClick: avalon.noop,
getText: avalon.noop,
selectClick: avalon.noop,
showSelectClick: avalon.noop
});
}
});报错信息
刚接触avalon，不知道是不是可以这么用？
写得我也看不懂，应该是组件的父节点为null