更新记录

1.0.2(2024-03-12)

最后一项异常bug修复

1.0.1(2024-03-12)

描述更新

1.0.0(2024-03-12)

版本发布

查看更多

平台兼容性

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

hy-anchor

属性

属性名 类型 默认值 可选值 说明
v-model String,Number,Array String,Number Array 双向绑定,单选是字符串或者number类型,多选需传递数组
list Array 必传项,二维数组,列表数据
multiple Boolean false true 是否多选true为多选
disabled Boolean false true 是否禁用所有项,禁用则所有项都不可点击
disabledVals Array [] 禁用指定的按钮项,数组格式
showFirstLable Boolean true false 是否显示锚点label
firstLableStyle Object {} 自定义锚点样式
labelkey String label 按钮选项绑定的labelKey
valueKey String value 按钮选项绑定的valueKey
anchorKey String id 锚点绑定的字段key,如果anchorKey为下方数据示例的otherId,则锚点绑定为otherId字段
lineNumber Number 3 每一行按钮的个数
gap String 12px 按钮的间距
maxNum Number 100 按钮最多可选中项,仅多选有效
maxNumToast String 超出最大选择数量 点击按钮超出最大选中数量的提示信息
scrollViewHeight String 80vh 滚动区域的高度
showScrollbar Boolean false 是否出现滚动条

list 数据格式示例

const arr = [{
        "id": "1",
        "otherId","1",
        "label": "A",
        "list": [{
            "id": "00",
            "spell": "aba",
            "label": "阿坝",
            "otherLabel": "阿坝",
            "value": "00",
            "otherValue": "00",
        }, {
            "id": "01",
            "spell": "akesu",
            "label": "阿克苏",
            "otherLabel": "阿克苏",
            "value": "01",
            "otherValue": "01",
        }]
    },
    {
        "id": "2",
        "otherId","2",
        "label": "B",
        "list": [{
            "id": "10",
            "spell": "beijing",
            "label": "北京",
            "otherLabel": "北京",
            "value": "10",
            "otherValue": "10"
        }, {
            "id": "11",
            "spell": "baicheng",
            "label": "白城",
            "otherLabel": "白城",
            "value": "11",
            "otherValue": "11"
        }]
    }
]

list属性

属性名 类型 默认值 可选值 说明
id String,Number String,Number 锚点绑定的值,默认id
label String,Number 显示的label
list Array

事件

事件名 说明
itemClick 按钮选项点击事件
anchorChange 滚动时锚点更新事件

隐私、权限声明

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

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

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

许可协议

MIT协议

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