用avalon2写tab组件事件的时候，只有初次点击切换按钮的时候有效果

发布于 2022-09-04 06:56:20 字数 4359 浏览 11 评论 0

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

过期情话 2022-09-11 06:56:20

组件里的onChangeTab中的 this.selectedTabId 值的改变仅仅是在组件这个范围，并不能影响vm中的 selectedTabId 的值。改成这样试试。

 onChangeTab: function(tabId){
                    this.selectedTabId = tabId;
                    test_vm.tabConfig.selectedTabId=tabid

                }

回复收藏 0

~没有更多了~