mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
Yao
GitHub
parent
7c057d95f5
commit
d331b69b0c
@ -8,16 +8,6 @@
|
||||
}
|
||||
```
|
||||
|
||||
### 属性
|
||||
|
||||
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
|
||||
|---------|---------|----------|------|-------|
|
||||
| type | String | 否 | 空 | 按钮类型，值有primary、warn、danger |
|
||||
| size | String | 否 | 空 | 按钮大小，值有large、small、mini |
|
||||
| plain | Boolean | 否 | false | 按钮是否镂空，默认为false |
|
||||
| disabled | Boolean | 否 | false | 按钮是否禁用，默认为false |
|
||||
| loading | Boolean | 否 | false | 按钮加载状态，默认为false |
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
@ -57,4 +47,32 @@
|
||||
<zan-button disabled>确认付款</zan-button>
|
||||
```
|
||||
|
||||
### 配合 button-group 使用
|
||||
通过配合 zan-button-group 使用，可以让按钮之间自动有合适的间距出现，使用方式如下
|
||||
|
||||
1.在 json 文件中配置 button-group 组件
|
||||
```json
|
||||
"usingComponents": {
|
||||
"zan-button": "/dist/btn/index",
|
||||
"zan-button-group": "/dist/btn-group/index"
|
||||
}
|
||||
```
|
||||
2.在 wxml 中直接引入
|
||||
```html
|
||||
<zan-button-group>
|
||||
<zan-button>确认付款</zan-button>
|
||||
<zan-button>再考虑下</zan-button>
|
||||
</zan-button-group>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 属性
|
||||
|
||||
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
|
||||
|---------|---------|----------|------|-------|
|
||||
| type | String | 否 | 空 | 按钮类型，值有primary、warn、danger |
|
||||
| size | String | 否 | 空 | 按钮大小，值有large、small、mini |
|
||||
| plain | Boolean | 否 | false | 按钮是否镂空，默认为false |
|
||||
| disabled | Boolean | 否 | false | 按钮是否禁用，默认为false |
|
||||
| loading | Boolean | 否 | false | 按钮加载状态，默认为false |
|
||||
|
||||
@ -1,31 +1,6 @@
|
||||
## Cell 单元格
|
||||
|
||||
自定义 cell 组件
|
||||
|
||||
### 属性与事件
|
||||
|
||||
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
|
||||
| ------------- | ----------- | -------- | ----- | -------------------------------------------------------------------------------------------------------- |
|
||||
| title | String | 否 | 无 | 左侧标题 |
|
||||
| label | Boolean | 否 | false | 标题下方的描述信息 |
|
||||
| value | String | 否 | 取消 | 右侧内容 |
|
||||
| isLink | Boolean | 否 | false | 是否展示右侧箭头并开启尝试以 url 跳转 |
|
||||
| url | String | 否 | - | 当 isLink 设置为 true 时，点击 cell 会尝试跳转到该路径 |
|
||||
| linkType | String | 否 | navigateTo | 链接跳转类型，可选值为 `navigateTo`，`redirectTo`，`switchTab`，`reLaunch` |
|
||||
| onlyTapFooter | Boolean | 否 | false | 只有点击 footer 区域才触发 tab 事件 |
|
||||
| bindtap | EventHandle | 否 | 无 | 点击 cell 时触发，`onlyTapFooter` 为 `true` 时点击 footer 区域触发 |
|
||||
|
||||
### 可用的 slot
|
||||
|
||||
| 名称 | 是否必须 | 默认 | 描述 |
|
||||
| ------------- | ----------- | ---- | --------------------------------------------------------------------- |
|
||||
| 默认 | 否 | 无 | 左侧除了 `title`，`label` 外的自定义 wxml 内容 |
|
||||
| icon | 否 | 无 | 标题前自定义的 icon，可使用 `icon` 自定义组件，具体使用参考 icon 组件 |
|
||||
| footer | 否 | 无 | 右侧自定义 wxml 内容，如果设置了 `value` 属性，则不生效 |
|
||||
|
||||
### cell 组
|
||||
|
||||
多个 cell 组件必须作为 `cell-group` 组件的子组件，否则可能出现显示问题。
|
||||
### 使用指南
|
||||
|
||||
#### 单个 cell 使用示例
|
||||
~~~json
|
||||
@ -43,6 +18,8 @@
|
||||
~~~
|
||||
|
||||
#### cell 组使用示例
|
||||
多个 cell 组件必须作为 `cell-group` 组件的子组件，否则可能出现显示问题。
|
||||
|
||||
```json
|
||||
{
|
||||
...
|
||||
@ -67,3 +44,24 @@
|
||||
</zan-cell>
|
||||
</zan-cell-group>
|
||||
```
|
||||
|
||||
### 属性与事件
|
||||
|
||||
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
|
||||
| ------------- | ----------- | -------- | ----- | -------------------------------------------------------------------------------------------------------- |
|
||||
| title | String | 否 | 无 | 左侧标题 |
|
||||
| label | Boolean | 否 | false | 标题下方的描述信息 |
|
||||
| value | String | 否 | 取消 | 右侧内容 |
|
||||
| isLink | Boolean | 否 | false | 是否展示右侧箭头并开启尝试以 url 跳转 |
|
||||
| url | String | 否 | - | 当 isLink 设置为 true 时，点击 cell 会尝试跳转到该路径 |
|
||||
| linkType | String | 否 | navigateTo | 链接跳转类型，可选值为 `navigateTo`，`redirectTo`，`switchTab`，`reLaunch` |
|
||||
| onlyTapFooter | Boolean | 否 | false | 只有点击 footer 区域才触发 tab 事件 |
|
||||
| bindtap | EventHandle | 否 | 无 | 点击 cell 时触发，`onlyTapFooter` 为 `true` 时点击 footer 区域触发 |
|
||||
|
||||
### 可用的 slot
|
||||
|
||||
| 名称 | 是否必须 | 默认 | 描述 |
|
||||
| ------------- | ----------- | ---- | --------------------------------------------------------------------- |
|
||||
| 默认 | 否 | 无 | 左侧除了 `title`，`label` 外的自定义 wxml 内容 |
|
||||
| icon | 否 | 无 | 标题前自定义的 icon，可使用 `icon` 自定义组件，具体使用参考 icon 组件 |
|
||||
| footer | 否 | 无 | 右侧自定义 wxml 内容，如果设置了 `value` 属性，则不生效 |
|
||||
@ -70,6 +70,7 @@ Dialog({
|
||||
});
|
||||
```
|
||||
|
||||
### 具体参数
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| message | 弹窗内容 | String | - | 必须 |
|
||||
@ -84,7 +85,7 @@ Dialog({
|
||||
| cancelButtonColor | 取消按钮文字颜色 | String | #333 | |
|
||||
| buttons | 自定义按钮列表，设置以后，以上关于 确认 和 取消 按钮的设置全部不生效。| Array | - | |
|
||||
|
||||
buttons 参考格式：
|
||||
buttons 数据格式
|
||||
```js
|
||||
[{
|
||||
// 按钮文案
|
||||
|
||||
@ -1,15 +1,7 @@
|
||||
## Loading 加载
|
||||
|
||||
### 属性
|
||||
|
||||
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
|
||||
| ------- | --------------- | -------- | ----- | ----------------- |
|
||||
| type | String | 否 | circle | loading 类型，可支持 circle，spinner，dot |
|
||||
| color | String | 否 | 无 | 可选值 black |
|
||||
| use | String，Number | 否 | 1 | 选择每种 Loading 类型的样式 |
|
||||
|
||||
### 代码演示
|
||||
|
||||
### 使用指南
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
{
|
||||
...
|
||||
@ -20,8 +12,16 @@
|
||||
}
|
||||
```
|
||||
|
||||
在页面上直接使用 zan-loading 标签即可
|
||||
```html
|
||||
<zan-loading type="circle"></zan-loading>
|
||||
<zan-loading type="spinner" color="black"></zan-loading>
|
||||
<zan-loading type="dot"></zan-loading>
|
||||
```
|
||||
|
||||
### 具体参数
|
||||
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
|
||||
| ------- | --------------- | -------- | ----- | ----------------- |
|
||||
| type | String | 否 | circle | loading 类型，可支持 circle，spinner，dot |
|
||||
| color | String | 否 | 无 | 可选值 black |
|
||||
| use | String，Number | 否 | 1 | 选择每种 Loading 类型的样式 |
|
||||
|
||||
@ -40,7 +40,6 @@ Page({
|
||||
|
||||
```
|
||||
|
||||
|
||||
### 代码演示
|
||||
|
||||
### 声明式调用
|
||||
|
||||
@ -18,11 +18,12 @@ function getDemoDir (docFile) {
|
||||
}
|
||||
|
||||
module.exports = function (template) {
|
||||
let demoDir = getDemoDir(this.context)
|
||||
let demoConf = getDemoFiles(demoDir)
|
||||
template = Object.keys(demoConf).reduce((res, key) => {
|
||||
res += `\n~~~ ${key}\n${demoConf[key]}~~~`
|
||||
return res
|
||||
}, template + `<wxapp-demo demo-types="${Object.keys(demoConf)}">\n`)
|
||||
return template + '\n</wxapp-demo>'
|
||||
// let demoDir = getDemoDir(this.context)
|
||||
// let demoConf = getDemoFiles(demoDir)
|
||||
// template = Object.keys(demoConf).reduce((res, key) => {
|
||||
// res += `\n~~~ ${key}\n${demoConf[key]}~~~`
|
||||
// return res
|
||||
// }, template + `<wxapp-demo demo-types="${Object.keys(demoConf)}">\n`)
|
||||
// return template + '\n</wxapp-demo>'
|
||||
return template + `<wxapp-demo></wxapp-demo>`;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user