mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
[improvement] Doc: 修复文档展示 (#198)
* 修复select样式问题 * 增加部分文档说明 * readme 更新 * Update README.md
This commit is contained in:
Yao
GitHub
parent
5ec544a1ff
commit
706de21f2a
128
README.md
128
README.md
@ -44,114 +44,58 @@ npm run dev
|
||||
详细使用文档，请参考 [快速上手](https://www.youzanyun.com/zanui/weapp)
|
||||
|
||||
### 组件分类介绍
|
||||
根据功能的不同，可以将组件大致的分为4类：
|
||||
根据功能的不同，可以将组件大致的分为2类：
|
||||
|
||||
#### 1. 简单组件
|
||||
#### 1. 正常引用
|
||||
|
||||
如按钮组件，只要按照wxml结构写就好了
|
||||
|
||||
~~~html
|
||||
如按钮组件，只需要在页面中引入按钮自定义组件即可
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"zan-button": "/path/to/zanui-weapp/dist/btn/index"
|
||||
}
|
||||
}
|
||||
```
|
||||
```html
|
||||
<!-- example/btn/index.html -->
|
||||
|
||||
<view class="zan-btn">按钮</view>
|
||||
~~~
|
||||
<zan-button>按钮</zan-button>
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### 2. 复杂组件
|
||||
|
||||
如加载更多组件，需要先引入定义好的模版，然后给模版传递数据
|
||||
#### 2. API类组件
|
||||
|
||||
~~~html
|
||||
<!-- example/loadmore/index.html -->
|
||||
如 Toast 组件，需要先在页面上引入自定义组件。之后在逻辑运行时，直接调用方法即可展示
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"zan-toast": "/path/to/zanui-weapp/dist/toast/index"
|
||||
}
|
||||
}
|
||||
```
|
||||
```html
|
||||
<zan-toast id="zan-toast-test"></zan-toast>
|
||||
```
|
||||
|
||||
<!-- 引入组件模版 -->
|
||||
<import src="path/to/zanui-weapp/dist/loadmore/index.wxml" />
|
||||
将对应的 Toast 的函数引入页面，就可以直接调用来展示 Toast 了
|
||||
|
||||
<!-- 加载中 -->
|
||||
<template is="zan-loadmore" data="{{loading: true}}" />
|
||||
```js
|
||||
// example/toast/index.js
|
||||
|
||||
<!-- 一条数据都没有 -->
|
||||
<template is="zan-loadmore" data="{{nodata: true}}" />
|
||||
const Toast = require('/path/to/zanui-weapp/dist/toast/toast');
|
||||
|
||||
<!-- 没有更多数据了 -->
|
||||
<template is="zan-loadmore" data="{{nomore: true}}" />
|
||||
~~~
|
||||
|
||||
|
||||
|
||||
#### 3. 带事件回调的组件
|
||||
|
||||
如数量选择组件，需要先引入模版，然后给模版传递数据
|
||||
|
||||
~~~html
|
||||
<!-- example/stepper/index.html -->
|
||||
|
||||
<import src="path/to/zanui-weapp/dist/stepper/index.wxml" />
|
||||
|
||||
<template is="zan-stepper" data="{{ ...stepper, componentId: 'customId' }}" />
|
||||
~~~
|
||||
|
||||
然后通过`Zan.Stepper`把相关回调注入到页面中
|
||||
|
||||
~~~js
|
||||
// example/stepper/index.js
|
||||
|
||||
var Zan = require('path/to/zanui-weapp/dist/index');
|
||||
|
||||
Page(Object.assign({}, Zan.Stepper, {
|
||||
data: {
|
||||
stepper: {
|
||||
stepper: 10,
|
||||
min: 1,
|
||||
max: 20
|
||||
},
|
||||
},
|
||||
|
||||
handleZanStepperChange(e) {
|
||||
// 如果页面有多个Stepper组件，则通过唯一componentId进行索引
|
||||
var compoenntId = e.componentId;
|
||||
var stepper = e.stepper;
|
||||
|
||||
this.setData({
|
||||
'stepper.stepper': stepper
|
||||
Page({
|
||||
showToast() {
|
||||
Toast({
|
||||
selector: '#zan-toast-test',
|
||||
message: 'toast内容'
|
||||
});
|
||||
}
|
||||
}));
|
||||
~~~
|
||||
});
|
||||
|
||||
|
||||
|
||||
#### 4. API类组件
|
||||
|
||||
如Toast组件，需要先引入模版，并在页面上使用。
|
||||
|
||||
> 注意`zanToast`这个数据也是通过`Zan.Toast`注入到页面的
|
||||
|
||||
~~~html
|
||||
<!-- example/toast/index.html -->
|
||||
|
||||
<import src="path/to/zanui-weapp/dist/toast/index.wxml" />
|
||||
|
||||
<view bindtap="showToast">显示toast</view>
|
||||
|
||||
<template is="zan-toast" data="{{ zanToast }}"></template>
|
||||
~~~
|
||||
|
||||
将API注入到页面后，就可以通过`this`来直接调用相应的API了
|
||||
|
||||
~~~js
|
||||
<!-- example/toast/index.js -->
|
||||
|
||||
var Zan = require('path/to/zanui-weapp/dist/index');
|
||||
|
||||
Page(Object.assign({}, Zan.Toast, {
|
||||
showToast() {
|
||||
this.showZanToast('toast的内容');
|
||||
}
|
||||
}));
|
||||
|
||||
~~~
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
@ -25,14 +25,12 @@ Page(Object.assign({}, Zan.Select, Zan.TopTips, {
|
||||
activeColor: '#4b0'
|
||||
},
|
||||
|
||||
handleZanSelectChange({ componentId, value }) {
|
||||
handleSelectChange({ currentTarget = {}, detail = {} }) {
|
||||
const { value = '' } = detail;
|
||||
const { dataset = {} } = currentTarget;
|
||||
const type = dataset.type;
|
||||
this.setData({
|
||||
[`checked.${componentId}`]: value
|
||||
[`checked.${type}`]: value
|
||||
});
|
||||
},
|
||||
|
||||
formSubmit(event) {
|
||||
console.log('[zan:field:submit]', event.detail.value);
|
||||
this.showZanTopTips(`选中的值为${event.detail.value.formtest}`);
|
||||
}
|
||||
}));
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Select 选择",
|
||||
"usingComponents": {
|
||||
"zan-panel": "/packages/panel/index",
|
||||
"zan-select": "/packages/select/index"
|
||||
"doc-page": "../../components/doc-page/index",
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"zan-select": "../../dist/select/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,24 +1,20 @@
|
||||
<import src="/dist/toptips/index.wxml" />
|
||||
|
||||
<view class="container">
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">SELECT</view>
|
||||
|
||||
<doc-page title="SELECT" without-padding>
|
||||
<zan-panel title='基本用法'>
|
||||
<zan-select
|
||||
items="{{ items }}"
|
||||
data-type="base"
|
||||
checkedValue="{{ checked.base }}"
|
||||
bind:change="handleFieldChange"
|
||||
bind:change="handleSelectChange"
|
||||
/>
|
||||
</zan-panel>
|
||||
|
||||
<zan-panel title='自定义高亮颜色'>
|
||||
<zan-select
|
||||
items="{{ items }}"
|
||||
checkedValue="{{ checked.base }}"
|
||||
data-type="color"
|
||||
checkedValue="{{ checked.color }}"
|
||||
activeColor="{{ activeColor }}"
|
||||
bind:change="handleFieldChange"
|
||||
bind:change="handleSelectChange"
|
||||
/>
|
||||
</zan-panel>
|
||||
|
||||
<template is="zan-toptips" data="{{ zanTopTips }}"></template>
|
||||
</doc-page>
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
items="{{ items }}"
|
||||
checkedValue="{{ checkedValue }}"
|
||||
activeColor="{{ activeColor }}"
|
||||
bind:change="handleFieldChange"
|
||||
bind:change="handleSelectChange"
|
||||
/>
|
||||
```
|
||||
```js
|
||||
@ -24,15 +24,11 @@ Page({
|
||||
data: {
|
||||
items: [
|
||||
{
|
||||
// 当前选项离左侧的距离
|
||||
padding: 0,
|
||||
// 当前选项的值，在被选中时，会在 handleZanSelectChange 中获取到
|
||||
value: '1',
|
||||
// 选项文案
|
||||
name: '选项一',
|
||||
},
|
||||
{
|
||||
padding: 0,
|
||||
value: '2',
|
||||
name: '选项二',
|
||||
},
|
||||
@ -42,8 +38,8 @@ Page({
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleFieldChange(event, data) {
|
||||
console.log(event, data);
|
||||
handleSelectChange({ detail }) {
|
||||
console.log(detail);
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -57,3 +53,21 @@ Page({
|
||||
| items | select 显示各个项的配置 | Array | - | |
|
||||
| checkedValue | 高亮的 item 的 value 值 | String | - | |
|
||||
| activeColor | Select 高亮颜色 | String | #ff4444 | |
|
||||
|
||||
items 具体格式如下
|
||||
```js
|
||||
{
|
||||
items: [
|
||||
{
|
||||
// 选项选中时，代表的选中值。会以此作为唯一值，判断是否选中
|
||||
value: '1',
|
||||
// 选项的文字描述
|
||||
name: '选项一',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
name: '选项二',
|
||||
},
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
@ -19,9 +19,9 @@ Component({
|
||||
},
|
||||
|
||||
methods: {
|
||||
_handleZanSelectChange(e) {
|
||||
handleSelectChange(e) {
|
||||
const value = e.detail.value;
|
||||
this.triggerEvent('change', event, { value });
|
||||
this.triggerEvent('change', { value });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
.zan-select__list .zan-select__radio{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<radio-group
|
||||
class="zan-select__list"
|
||||
bindchange="_handleZanSelectChange"
|
||||
bindchange="handleSelectChange"
|
||||
>
|
||||
<label wx:for="{{ items }}" wx:key="value">
|
||||
<zan-cell>
|
||||
@ -9,7 +9,7 @@
|
||||
<zan-icon
|
||||
wx:if="{{ item.value === checkedValue }}"
|
||||
slot="footer"
|
||||
type="success_no_circle"
|
||||
type="success"
|
||||
style="color: {{ parse.getColor(activeColor) }};font-size: 14px;"
|
||||
/>
|
||||
</zan-cell>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user