更新记录

1.0.6(2022-08-09)

修复请求数据列表渲染失败问题

1.0.5(2022-08-06)

修复defaultChoseItem参数失效问题

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

使用说明

1、解压下载的压缩包,将组件放在项目的components目录下。

2、引用组件

<template>
    <view class="content">
        <vgt-tab :list="list"></vgt-tab>
    </view>
</template>

<script>
    import vgtTab from '@/components/vgt-tab.vue'
    export default {
        components: {
            'vgt-tab': vgtTab
        },
        data() {
            return {
                list: [
                    '澳大利亚',
                    '美国',
                    '中国',
                    '日本',
                    '朝鲜',
                    '韩国',
                    '新西兰',
                    '法国',
                    '英国',
                    '加拿大',
                    '埃及',
                    '意大利',
                    '荷兰',
                    '蒙古',
                    '越南',
                    '新加坡',
                    '巴基斯坦',
                    '印度',
                    '俄罗斯',
                    '乌克兰',
                    '墨西哥',
                ]
            }
        },
        methods: {

        }
    }
</script>

参数说明

1、Props

参数名 参数类型 是否必填 默认值 说明
list Array [] 选项卡列表
isUseOpenList Boolean true 是否使用展开列表
openListTit String 切换 展开列表顶部小标题
itemStyleDefault Object { color: '#393939',background: '#f4f4f4'} 列表每一项的默认样式
itemStyleActive Object {color: '#3555fc','border': '1rpx solid #3555fc;'} 列表某一项被选中时的样式
defaultChoseInd Number 0 根据下标设置默认选中项
defaultChoseItem String '' 根据值设置默认选中项(优先级高于defaultChoseInd)
zIndex [String, Number] 1000 组件的z-index值

2、事件

事件名 说明 返回值类型 返回值格式
onValueChange 选中时的回调 Object {currentInd: 0, // 当前选中的下标 currentItem: '中国', // 当前选中的容}
onListShow 列表展开关闭时的回调 Boolean ture/false

3、slots

slot名称 说明
icon-unfold 可替换右侧图标
icon-fold 可替换列表展开后的图标
open-list-tit 可替换列表展开的头部

4、修改组件背景颜色或样式

    /*
        修改列表的背景颜色或其他样式
    */
    /deep/ .scroll-view_hold {
        background: xxx;
        xxx:xxx;
    }
    /*
        修改列表展开之后的头部背景颜色或其他样式
    */
    /deep/ .open-list-tit {
        background: xxx;
        xxx:xxx;
    }
    /*
        修改列表展开之后的内容背景颜色或其他样式
    */
    /deep/ .open-list-tit {
        background: xxx;
        xxx:xxx;
    }

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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