在 app.wxss 中引入组件库所有样式
@import "path/to/zanui-weapp/dist/index.wxss";
在需要使用的页面里引入组件库模板和脚本
<import src="path/to/zanui-weapp/dist/select/index.wxml" />
<template is="zan-select" data="{{ items, checkedValue: checked.base, componentId: 'base' }}" ></template>
const { extend, Select } = require('path/to/zanui-weapp/dist/index');
// 在 Page 中混入 Select 里面声明的方法
Page(extend({}, Select, {
// ...
}));
Select
组件通过传入的 items 对象控制显示,用 checkedValue 确认显示的高亮项目
<template is="zan-select" data="{{ items, checkedValue: checked.base, componentId: 'base' }}" ></template>
当 Select 被点击时,可以在页面中注册 handleZanTabChange 方法来监听
Page(extend({}, Select, {
handleZanSelectChange({ componentId, value }) {
// componentId 即为在模板中传入的 componentId
// 用于在一个页面上使用多个 Select 时,进行区分
// value 表示被选中项的 value
}
}));
参数 | 说明 | 类型 | 默认值 | 必须 |
---|---|---|---|---|
items | select 显示各个项的配置 | Array | - | |
checkedValue | 高亮的 item 的 value 值 | String | - | |
name | Select 的名字,作为 form 表单提交时数据的 key | String | - | |
activeColor | Select 高亮颜色 | String | #ff4444 | |
componentId | 用于区分页面多个 Select 组件 | String | - |
items 参数格式
[
{
// 当前选项离左侧的距离
padding: 0,
// 当前选项的值,在被选中时,会在 handleZanSelectChange 中获取到
value: '1',
// 选项文案
name: '选项一',
},
{
padding: 0,
value: '2',
name: '选项二',
},
]