foldingPanel

功能描述

折叠面板，菜单折叠显示隐藏,用例见 index.html。

效果图

依赖的插件

./libs/vue.main.js

快速使用

见代码


        var vm = new Vue({
            el: "#app",
            data: {
                list: [{
                    name: '测试标题1',
                    content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容"
                }, {
                    name: '测试标题2',
                    content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容"
                }, {
                    name: '测试标题3',
                    content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容"
                }, {
                    name: '测试标题4',
                    content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容"
                }, {
                    name: '测试标题5',
                    content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容"
                }, {
                    name: '测试标题6',
                    content: "测试内容测试内容测试内容测试内容测试内容测试内容"
                }, {
                    name: '测试标题7',
                    content: "测试内容测试内容测试内容测试内容测试内容测试内容"
                }]
            },
            methods: {
                handelSwitch(index) {
                    var arr = this.list;
                    for (var i = 0; i < arr.length; i++) {
                        if (i != index) {
                            let obj = arr[i];
                            obj.show = false;
                            vm.$set(vm.list, i, obj)
                        } else if(i == index) {
                            let obj = arr[i];
                            obj.show = !obj.show;
                            vm.$set(vm.list, i, obj)
                        } else {
                            let obj = arr[i];
                            obj.show = true;
                            vm.$set(vm.list, i, obj)
                        }
                    }

                }
            }
        })

特别说明

样式修改，见用例 index.html。

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18