用avalon2写tab组件事件的时候，只有初次点击切换按钮的时候有效果
1.最近在写avalon2组件，想把layui的样式拉过来用，然后用avalon2来实现js操作，但是在写tab的时候发现切换tab的时候，只有第一次是有效果的，点击别的tab栏后再点切换按钮就不起效果了，不知道是不是avalon2组件中数组循环的问题，只有再清除了数组后再重新赋值新数组才有效果，删除方法也是，不能直接通过修改数组本身来达到目的。
（用的版本是2.2.1）
2.代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/avalon.js/2.2.1/avalon.min.js"></script>
<link rel="stylesheet" href="http://xiyilou.com/public/static/layui/css/layui.css" media="all">
</head>
<body ms-controller="test">
<br />
<xmp ms-widget="[{is:'ms-layui-tab'}, @tabConfig]"></xmp>
<xmp ms-widget="{is:'ms-layui-button'}" :click="@add">新增一个Tab</xmp>
<xmp ms-widget="{is:'ms-layui-button'}" :click="@delete">删除第二个Tab</xmp>
<xmp ms-widget="{is:'ms-layui-button'}" :click="@change">切换到第二个Tab</xmp>
<script type="text/javascript">
//按钮组件
avalon.component('ms-layui-button', {
template: '<button :class="@className"><span><slot /></span></button>',
defaults: {
className: ['layui-btn', 'layui-btn-primary'],
buttonText: "button"
},
soleSlot: 'buttonText'
});
function heredoc(fn) {
return fn.toString().replace(/^[^\/]+\/\*!?\s?/, '').
replace(/\*\/[^\/]+$/, '').trim().replace(/>\s*</g, '><')
}
//tab组件
avalon.component('ms-layui-tab', {
template: heredoc(function () {
/*
<div class="layui-tab">
<ul class="layui-tab-title">
<li :class="(@selectedTabId == el.tabId? 'layui-this' : '')" ms-for="el in @tabList" :click="@onChangeTab(el.tabId)">{{el.title}}</li>
</ul>
<div class="layui-tab-content">
<div :class="(@selectedTabId == el.tabId? 'layui-tab-item layui-show' : 'layui-tab-item')" ms-for="el in @tabList" ms-html="el.content">
{{el.content}}
</div>
</div>
</div>
*/
}),
defaults: {
selectedTabId: "0", //当前选中tab
tabList: [
{tabId:"0", title: "网站设置", content: "1111111111"},
{tabId:"1", title: "用户管理", content: "2222222222"},
{tabId:"2", title: "权限分配", content: "3333333333"}
],
onChangeTab: function(tabId){
this.selectedTabId = tabId;
}
}
})
var test_vm = avalon.define({
$id:'test',
tabConfig: {
selectedTabId: "0",
tabList: [
{tabId:"0", title: "网站设置1", content: "第一页"},
{tabId:"1", title: "用户管理2", content: "第二页"},
{tabId:"2", title: "权限分配3", content: "第三页"}
]
},
//新增tab
add: function(){
this.tabConfig.tabList.push({tabId:"3", title: "权限分配44", content: "第四页"});
},
//删除第二个tab
delete: function(){
//这么写第二个tab标签下的内容就没了
this.tabConfig.tabList.splice(1, 1);
//不能通过直接this.tabConfig.tabList.splice(1, 1)来删除数组中的值
//删除后的数组
//var list = this.tabConfig.tabList.concat();
//list.splice(1, 1);
//先清空再赋值
//this.tabConfig.tabList = [];
//this.tabConfig.tabList = list.concat();
},
change: function(){
this.tabConfig.selectedTabId = "1";
//以下代码不写则只有第一次切换的时候才有效
//删除后的数组
//var list = this.tabConfig.tabList.concat();
//先清空再赋值
//this.tabConfig.tabList = [];
//this.tabConfig.tabList = list.concat();
}
});
</script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
组件里的onChangeTab中的 this.selectedTabId 值的改变仅仅是在组件这个范围，并不能影响vm中的 selectedTabId 的值。改成这样试试。