element ui 选项卡切换_笔记-layui选项卡

最新推荐文章于 2023-07-12 20:03:56 发布

fighterforlife

最新推荐文章于 2023-07-12 20:03:56 发布

阅读量2.1k

点赞数

文章标签： element ui 选项卡切换

本文链接：https://blog.csdn.net/weixin_35953861/article/details/112183354

版权

这篇笔记详细介绍了layui和Element UI中的组件使用，包括面板的折叠与展开，特别是手风琴折叠面板的配置；进度条的样式设置，如颜色和自定义背景颜色的方法；以及不同类型的徽章展示，如实心圆点、常规弧形和边框徽章。通过示例代码展示了如何动态控制和自定义这些组件。

摘要由CSDN通过智能技术生成

<script>
    /**
     * 注意：选项卡 依赖 element 模块，否则无法进行功能性操作
     *
     * 相关样式
     *    layui-tab 代表一个选项卡
     *    |-layui-tab-brief 代表简介风格的选项卡
     *    |-layui-tab-card 代表卡片风格的选项卡
     *        |- layui-tab-title 用于包裹选项卡的导航列表
     *            |— layui-this 设置默认选中的导航按钮
     *        |- layui-tab-content 代表包裹展示选项卡内容的标签
     *            |- layui-tab-item 代表每一个选项卡对应展示的内容
     *            |- layui-show 设置默认展示的选项卡内容，和layui-this配对
     *
     *  相关属性
     *      lay-allowclose="true" 设置选项卡可以删除(动态操作)
     *      lay-filter="xxx"    事件过滤器
     *      lay-id="xxx" 类似于id选择器，用于选中文档中某一个标签
     *
     *  相关方法
     *      添加选项卡
     *          element.tabAdd("事件过滤器", {title, content, id})
     *      删除选项卡
     *          element.tabDelete("事件过滤器", "lay-id值")
     *      切换选项卡
     *          element.tabChange("事件过滤器", "lay-id值")
     */
    layui.use(["element", "jquery"], function () {
    
        var element = layui.element;
        var $ = layui.jquery;
        // 新增tab项
        var index = 0;
        $("#tabAdd").click(function () {
    
            /**
             * 语法：element.tabAdd("事件过滤器", {title, content, id})
             */
            element.tabAdd('demo'