更新记录

1.0.0（2020-06-02）

2020年6月2日发布第一版。

平台兼容性

三级目录选择

插件说明

  1. 三级下拉目录，支持手风琴效果
  2. 并且可以根据用户需要灵活变动

插件使用

  1. 下载插件
  2. 引入插件 
    <!--引入插件 -->
     import threeChoose from '../../components/three-choose.vue';
<!-- -->
components: {
    threeChoose
},
  3. 目录数据格式(按照此格式重组你的数据) 
    mulunum: [{
                    courseTitle: '第一',
                    open: false,
                    courseChapterList: [{
                            ccName: '1.1',
                            secondOpen: false,
                            courseVideosList: [{
                                    vTitle: '1.1.1',
                                    duration: '1.1.1',
                                    thirdOpen: false
                                },
                                {
                                    vTitle: '1.1.2',
                                    duration: '1.1.2',
                                    thirdOpen: false
                                },
                                {
                                    vTitle: '1.1.3',
                                    duration: '1.1.3',
                                    thirdOpen: false
                                }
                            ]
                        },
                        {
                            ccName: '1.2',
                            secondOpen: false,
                            courseVideosList: [{
                                    vTitle: '1.2.1',
                                    duration: '1.2.1',
                                    thirdOpen: false
                                },
                                {
                                    vTitle: '1.2.2',
                                    duration: '1.2.2',
                                    thirdOpen: false
                                },
                                {
                                    vTitle: '1.2.3',
                                    duration: '1.2.3',
                                    thirdOpen: false
                                }
                            ]
                        },
                    ]
                },
                {
                    courseTitle: '第二',
                    open: false,
                    courseChapterList: [{
                            ccName: '2.1',
                            secondOpen: false,
                            courseVideosList: [{
                                    vTitle: '2.1.1',
                                    duration: '1.1.1',
                                    thirdOpen: false
                                },
                                {
                                    vTitle: '2.1.2',
                                    duration: '1.1.1',
                                    thirdOpen: false
                                },
                                {
                                    vTitle: '2.1.3',
                                    duration: '1.1.1',
                                    thirdOpen: false
                                }
                            ]
                        },
                        {
                            ccName: '2.2',
                            secondOpen: false,
                            courseVideosList: [{
                                    vTitle: '2.2.1',
                                    duration: '2.2.1',
                                    thirdOpen: false
                                },
                                {
                                    vTitle: '2.2.2',
                                    duration: '2.2.1',
                                    thirdOpen: false
                                },
                                {
                                    vTitle: '2.2.3',
                                    duration: '2.2.1',
                                    thirdOpen: false
                                }
                            ]
                        },
                    ]
                }
            ]
  4. 自定义数据 
             fatherToInfo:{
                defaultIcon:'../../static/mix-tree/defaultIcon.png',//展开后图标
                currentIcon:'../../static/mix-tree/currentIcon.png',//恢复后图标
                firstImg:'../../static/mix-tree/ship_muluquan.png',//顶层展示图片
                shoufenq:true,  //一级下拉是否需要手风琴效果
                twoshoufenq:true,//二级下拉是否需要手风琴效果
                firstfontsize:30,
                firstcolor:'#000',
                secondImg:'',
                secondfontsize:28,
                secondcolor:'#333333',
                thirdImg:'../../static/mix-tree/ship_bofanging.png',
                thirdfontsize:26,
                thirdcolor:'#666',
                choosedcolor:'red',
                thirdrightfontsize:26,
                thirdrightcolor:'#666',  //第三项字体颜色
                thirdrightchoosed:'red'  //右侧被选中后的颜色变化
            },
  5. 使用 
    <threeChoose :mulunum="mulunum" :fatherToInfo='fatherToInfo'></threeChoose>

属性说明

属性名 类型 默认 说明
defaultIcon string 展开后图标
currentIcon string 恢复后图标
shoufenq Boolean false 是否开启第一层手风琴效果
twoshoufenq Boolean false 是否开启第二层手风琴效果
firstImg string 第一级目录左侧图标
firstfontsize numder 第一级目录文字大小
firstcolor string 第一级目录文字颜色
secondImg string 第二级目录左侧图标
secondfontsize numder 第二级目录文字大小
secondcolor string 第二级目录文字颜色
thirdImg string 第三级目录左侧图标
thirdfontsize numder 第三级目录左侧文字大小
thirdcolor string 第三级目录左侧文字颜色
choosedcolor string 左侧文字，选中后的颜色
thirdrightfontsize numder 第三级右侧文字大小
thirdrightcolor string 第三级右侧文字颜色
thirdrightchoosed string 第三级被选中后文字颜色

完整代码

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <threeChoose :mulunum="mulunum" :fatherToInfo='fatherToInfo'></threeChoose>
    </view>
</template>

<script>
    import threeChoose from '../../components/three-choose.vue';
    export default {
        data() {
            return {
                fatherToInfo:{
                    defaultIcon:'../../static/mix-tree/defaultIcon.png',//展开后图标
                    currentIcon:'../../static/mix-tree/currentIcon.png',//恢复后图标
                    firstImg:'../../static/mix-tree/ship_muluquan.png',//顶层展示图片
                    shoufenq:true,  //一级下拉是否需要手风琴效果
                    twoshoufenq:true,//二级下拉是否需要手风琴效果
                    firstfontsize:30,
                    firstcolor:'#000',
                    secondImg:'',
                    secondfontsize:28,
                    secondcolor:'#333333',
                    thirdImg:'../../static/mix-tree/ship_bofanging.png',
                    thirdfontsize:26,
                    thirdcolor:'#666',
                    choosedcolor:'red',
                    thirdrightfontsize:26,
                    thirdrightcolor:'#666',  //第三项字体颜色
                    thirdrightchoosed:'red'  //右侧被选中后的颜色变化
                },
                mulunum: [{
                        courseTitle: '第一',
                        open: false,
                        courseChapterList: [{
                                ccName: '1.1',
                                secondOpen: false,
                                courseVideosList: [{
                                        vTitle: '1.1.1',
                                        duration: '1.1.1',
                                        thirdOpen: false
                                    },
                                    {
                                        vTitle: '1.1.2',
                                        duration: '1.1.2',
                                        thirdOpen: false
                                    },
                                    {
                                        vTitle: '1.1.3',
                                        duration: '1.1.3',
                                        thirdOpen: false
                                    }
                                ]
                            },
                            {
                                ccName: '1.2',
                                secondOpen: false,
                                courseVideosList: [{
                                        vTitle: '1.2.1',
                                        duration: '1.2.1',
                                        thirdOpen: false
                                    },
                                    {
                                        vTitle: '1.2.2',
                                        duration: '1.2.2',
                                        thirdOpen: false
                                    },
                                    {
                                        vTitle: '1.2.3',
                                        duration: '1.2.3',
                                        thirdOpen: false
                                    }
                                ]
                            },
                        ]
                    },
                    {
                        courseTitle: '第二',
                        open: false,
                        courseChapterList: [{
                                ccName: '2.1',
                                secondOpen: false,
                                courseVideosList: [{
                                        vTitle: '2.1.1',
                                        duration: '1.1.1',
                                        thirdOpen: false
                                    },
                                    {
                                        vTitle: '2.1.2',
                                        duration: '1.1.1',
                                        thirdOpen: false
                                    },
                                    {
                                        vTitle: '2.1.3',
                                        duration: '1.1.1',
                                        thirdOpen: false
                                    }
                                ]
                            },
                            {
                                ccName: '2.2',
                                secondOpen: false,
                                courseVideosList: [{
                                        vTitle: '2.2.1',
                                        duration: '2.2.1',
                                        thirdOpen: false
                                    },
                                    {
                                        vTitle: '2.2.2',
                                        duration: '2.2.1',
                                        thirdOpen: false
                                    },
                                    {
                                        vTitle: '2.2.3',
                                        duration: '2.2.1',
                                        thirdOpen: false
                                    }
                                ]
                            },
                        ]
                    },
                    {
                        courseTitle: '第三',
                        open: false,
                        courseChapterList: [{
                                ccName: '3.1',
                                secondOpen: false,
                                courseVideosList: [{
                                        vTitle: '3.1.1',
                                        duration: '2.2.1',
                                        thirdOpen: false
                                    },
                                    {
                                        vTitle: '3.1.2',
                                        duration: '2.2.1',
                                        thirdOpen: false
                                    },
                                    {
                                        vTitle: '3.1.3',
                                        duration: '2.2.1',
                                        thirdOpen: false
                                    }
                                ]
                            },
                            {
                                ccName: '3.2',
                                secondOpen: false,
                                courseVideosList: [{
                                        vTitle: '3.2.1',
                                        duration: '3.2.1',
                                        thirdOpen: false
                                    },
                                    {
                                        vTitle: '3.2.2',
                                        duration: '3.2.1',
                                        thirdOpen: false
                                    },
                                    {
                                        vTitle: '3.2.3',
                                        duration: '3.2.1',
                                        thirdOpen: false
                                    }
                                ]
                            },
                        ]
                    }
                ]
            }
        },
        onLoad() {

        },
        methods: {

        },
        components: {
            threeChoose
        },
    }
</script>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...