mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
Merge pull request #199 from youzan/upgrade_to_custom_component
[breading change] 升级组件库至自定义组件
This commit is contained in:
Yao
GitHub
commit
deb25db58c
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的内容');
|
||||
}
|
||||
}));
|
||||
|
||||
~~~
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
@ -84,6 +84,6 @@ module.exports = {
|
||||
}
|
||||
}
|
||||
],
|
||||
include: {}
|
||||
include: { loading: require('./packages/loading/README.md') }
|
||||
}
|
||||
}
|
||||
@ -12,7 +12,7 @@
|
||||
"pages/helper/index",
|
||||
"pages/icon/index",
|
||||
"pages/layout/index",
|
||||
"pages/loadmore/index",
|
||||
"pages/loading/index",
|
||||
"pages/noticebar/index",
|
||||
"pages/panel/index",
|
||||
"pages/popup/index",
|
||||
|
||||
12
example/components/doc-page/index.js
Normal file
12
example/components/doc-page/index.js
Normal file
@ -0,0 +1,12 @@
|
||||
Component({
|
||||
properties: {
|
||||
title: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
|
||||
withoutPadding: {
|
||||
type: Boolean
|
||||
}
|
||||
}
|
||||
});
|
||||
3
example/components/doc-page/index.json
Normal file
3
example/components/doc-page/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
6
example/components/doc-page/index.wxml
Normal file
6
example/components/doc-page/index.wxml
Normal file
@ -0,0 +1,6 @@
|
||||
<view class="doc-container">
|
||||
<view class="doc-title">{{ title }}</view>
|
||||
<view class="doc-content {{ withoutPadding ? 'doc-content--without-pd' : '' }}">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
27
example/components/doc-page/index.wxss
Normal file
27
example/components/doc-page/index.wxss
Normal file
@ -0,0 +1,27 @@
|
||||
.doc-container {
|
||||
background: #F9F9F9;
|
||||
overflow: hidden;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.doc-title {
|
||||
position: relative;
|
||||
padding: 15px 0;
|
||||
margin: 10px 15px;
|
||||
line-height: 25px;
|
||||
font-size: 25px;
|
||||
color: #666;
|
||||
border-bottom: 1rpx solid #e5e5e5;
|
||||
}
|
||||
|
||||
.doc-content {
|
||||
padding: 15px;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.doc-content--without-pd {
|
||||
padding: 15px 0;
|
||||
}
|
||||
@ -1,27 +1,22 @@
|
||||
const { Actionsheet, extend } = require('../../dist/index');
|
||||
|
||||
Page(extend({}, Actionsheet, {
|
||||
Page({
|
||||
data: {
|
||||
baseActionsheet: {
|
||||
show: false,
|
||||
cancelText: '关闭 Action',
|
||||
closeOnClickOverlay: true,
|
||||
componentId: 'baseActionsheet',
|
||||
actions: [{
|
||||
name: '选项1',
|
||||
subname: '选项描述语1',
|
||||
className: 'action-class',
|
||||
loading: false
|
||||
}, {
|
||||
name: '选项2',
|
||||
subname: '选项描述语2',
|
||||
className: 'action-class',
|
||||
loading: false
|
||||
}, {
|
||||
name: '去分享',
|
||||
openType: 'share'
|
||||
}]
|
||||
}
|
||||
show: false,
|
||||
cancelWithMask: true,
|
||||
actions: [{
|
||||
name: '选项1',
|
||||
subname: '选项描述语1',
|
||||
className: 'action-class',
|
||||
loading: false
|
||||
}, {
|
||||
name: '选项2',
|
||||
subname: '选项描述语2',
|
||||
className: 'action-class',
|
||||
loading: false
|
||||
}, {
|
||||
name: '去分享',
|
||||
openType: 'share'
|
||||
}],
|
||||
cancelText: '关闭 Action'
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
@ -31,36 +26,32 @@ Page(extend({}, Actionsheet, {
|
||||
};
|
||||
},
|
||||
|
||||
toggleActionsheet() {
|
||||
openActionsheet() {
|
||||
this.setData({
|
||||
'baseActionsheet.show': true
|
||||
'show': true
|
||||
});
|
||||
},
|
||||
|
||||
handleZanActionsheetCancel({ componentId }) {
|
||||
closeActionSheet() {
|
||||
this.setData({
|
||||
[`${componentId}.show`]: false
|
||||
'show': false
|
||||
});
|
||||
},
|
||||
|
||||
handleZanActionsheetClick({ componentId, index }) {
|
||||
console.log(`item index ${index} clicked`);
|
||||
|
||||
clickAction({ detail }) {
|
||||
// 如果是分享按钮被点击, 不处理关闭
|
||||
const { index } = detail;
|
||||
if (index === 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setData({
|
||||
[`${componentId}.actions[${index}].loading`]: true
|
||||
[`actions[${index}].loading`]: true
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
[`${componentId}.show`]: false,
|
||||
[`${componentId}.actions[${index}].loading`]: false
|
||||
[`show`]: false,
|
||||
[`actions[${index}].loading`]: false
|
||||
});
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
}));
|
||||
});
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Actionsheet 行动按钮"
|
||||
"navigationBarTitleText": "Actionsheet 行动按钮",
|
||||
"usingComponents": {
|
||||
"zan-actionsheet": "../../dist/actionsheet/index",
|
||||
"zan-button": "../../dist/btn/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
<import src="/dist/actionsheet/index.wxml" />
|
||||
|
||||
<view class="container">
|
||||
|
||||
<view class="doc-title zan-hairline--bottom zan-hairline--bottom">ACTIONSHEET</view>
|
||||
|
||||
<doc-page title="ACTIONSHEET">
|
||||
<view class="zan-btns" style="margin-top: 30vh;">
|
||||
<button class="zan-btn" bindtap="toggleActionsheet">
|
||||
<zan-button bind:btnclick="openActionsheet">
|
||||
Actionsheet
|
||||
</button>
|
||||
</zan-button>
|
||||
</view>
|
||||
|
||||
<template is="zan-actionsheet" data="{{ ...baseActionsheet }}"></template>
|
||||
|
||||
</view>
|
||||
<zan-actionsheet
|
||||
show="{{ show }}"
|
||||
actions="{{ actions }}"
|
||||
cancel-text="{{ cancelText }}"
|
||||
cancel-with-mask="{{ cancelWithMask }}"
|
||||
bind:cancel="closeActionSheet"
|
||||
bind:actionclick="clickAction"
|
||||
mask-class="tiny"
|
||||
/>
|
||||
</doc-page>
|
||||
|
||||
3
example/pages/actionsheet/index.wxss
Normal file
3
example/pages/actionsheet/index.wxss
Normal file
@ -0,0 +1,3 @@
|
||||
.tiny {
|
||||
background: rgba(30, 30, 40, 0.7) !important;
|
||||
}
|
||||
@ -1,3 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "Badge 徽章"
|
||||
"navigationBarTitleText": "Badge 徽章",
|
||||
"usingComponents": {
|
||||
"zan-badge": "../../dist/badge/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,22 +4,22 @@
|
||||
|
||||
<view class="demo">
|
||||
<view class="demo__item">
|
||||
<view class="demo__icon zan-badge">
|
||||
<view class="demo__icon">
|
||||
<zan-badge>9</zan-badge>
|
||||
</view>
|
||||
</view>
|
||||
<view class="demo__item">
|
||||
<view class="demo__icon zan-badge">
|
||||
<view class="zan-badge__count">9</view>
|
||||
<view class="demo__icon">
|
||||
<zan-badge>19</zan-badge>
|
||||
</view>
|
||||
</view>
|
||||
<view class="demo__item">
|
||||
<view class="demo__icon zan-badge">
|
||||
<view class="zan-badge__count">19</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="demo__item">
|
||||
<view class="demo__icon zan-badge">
|
||||
<view class="zan-badge__count">99+</view>
|
||||
<view class="demo__icon">
|
||||
<zan-badge
|
||||
background-color="#4b0"
|
||||
box-shadow="none"
|
||||
font-size="{{ 12 }}"
|
||||
>99+</zan-badge>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
.demo {
|
||||
padding: 40px 0;
|
||||
padding: 40px 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.demo__item {
|
||||
flex: 1;
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "Button 按钮"
|
||||
"navigationBarTitleText": "Button 按钮",
|
||||
"usingComponents": {
|
||||
"zan-button": "/dist/btn/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,51 +5,51 @@
|
||||
<view class="zan-panel-title">普通按钮</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-btns">
|
||||
<button class="zan-btn">取消订单</button>
|
||||
<button class="zan-btn zan-btn--primary">确认付款</button>
|
||||
<button class="zan-btn zan-btn--danger">确认付款</button>
|
||||
<button class="zan-btn zan-btn--warn">确认付款</button>
|
||||
<zan-button>取消订单</zan-button>
|
||||
<zan-button type="primary">确认付款</zan-button>
|
||||
<zan-button type="danger">确认付款</zan-button>
|
||||
<zan-button type="warn">确认付款</zan-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel-title">大号按钮，没有边框线及圆角</view>
|
||||
<view class="zan-panel">
|
||||
<button class="zan-btn zan-btn--large zan-btn--primary">确认付款</button>
|
||||
<button class="zan-btn zan-btn--large zan-btn--warn">立即购买</button>
|
||||
<button class="zan-btn zan-btn--large zan-btn--danger">立即购买</button>
|
||||
<zan-button size="large" type="primary">确认付款</zan-button>
|
||||
<zan-button size="large" type="warn">立即购买</zan-button>
|
||||
<zan-button size="large" type="danger">立即购买</zan-button>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel-title">小号按钮</view>
|
||||
<view class="zan-panel" style="padding: 15px;">
|
||||
<button class="zan-btn zan-btn--small">取消订单</button>
|
||||
<button class="zan-btn zan-btn--small zan-btn--primary">确认付款</button>
|
||||
<zan-button size="small">取消订单</zan-button>
|
||||
<zan-button size="small" type="primary">确认付款</zan-button>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel-title">迷你按钮</view>
|
||||
<view class="zan-panel" style="padding: 15px;">
|
||||
<button class="zan-btn zan-btn--mini zan-btn--plain">取消订单</button>
|
||||
<button class="zan-btn zan-btn--mini zan-btn--primary zan-btn--plain">确认付款</button>
|
||||
<button class="zan-btn zan-btn--mini zan-btn--warn zan-btn--plain">确认付款</button>
|
||||
<button class="zan-btn zan-btn--mini zan-btn--danger zan-btn--plain">确认付款</button>
|
||||
<zan-button size="mini">取消订单</zan-button>
|
||||
<zan-button size="mini" type="primary">确认付款</zan-button>
|
||||
<zan-button size="mini" type="warn">确认付款</zan-button>
|
||||
<zan-button size="mini" type="danger">确认付款</zan-button>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel-title">Loading</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-btns">
|
||||
<button class="zan-btn zan-btn--loading">取消订单</button>
|
||||
<button class="zan-btn zan-btn--loading zan-btn--primary">确认付款</button>
|
||||
<button class="zan-btn zan-btn--loading zan-btn--danger">确认付款</button>
|
||||
<button class="zan-btn zan-btn--loading zan-btn--warn">确认付款</button>
|
||||
<zan-button loading>取消订单</zan-button>
|
||||
<zan-button loading type="primary">确认付款</zan-button>
|
||||
<zan-button loading type="danger">确认付款</zan-button>
|
||||
<zan-button loading type="warn">确认付款</zan-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel-title">Disabled</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-btns">
|
||||
<button class="zan-btn zan-btn--disabled" disabled>取消订单</button>
|
||||
<button class="zan-btn zan-btn--disabled zan-btn--primary" disabled>确认付款</button>
|
||||
<button class="zan-btn zan-btn--disabled zan-btn--danger" disabled>确认付款</button>
|
||||
<button class="zan-btn zan-btn--disabled zan-btn--warn" disabled>确认付款</button>
|
||||
<zan-button disabled>取消订单</zan-button>
|
||||
<zan-button disabled type="primary">确认付款</zan-button>
|
||||
<zan-button disabled type="danger">确认付款</zan-button>
|
||||
<zan-button disabled type="warn">确认付款</zan-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Capsule 胶囊"
|
||||
"navigationBarTitleText": "Capsule 胶囊",
|
||||
"usingComponents": {
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"zan-capsule": "../../dist/capsule/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,22 +1,15 @@
|
||||
<import src="/dist/capsule/index.wxml" />
|
||||
<doc-page title="CAPSULE" without-padding>
|
||||
|
||||
<view class="container">
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">CAPSULE</view>
|
||||
|
||||
<view class="zan-panel-title">基本用法</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<template is="capsule" data="{{ leftText: '1折', rightText: '限购一份'}}" />
|
||||
<template is="capsule" data="{{ leftText: '1折', rightText: '限购一份', type: 'danger' }}" />
|
||||
<zan-panel title='基本用法'>
|
||||
<view class="capsule-demo">
|
||||
<zan-capsule leftText="折扣" rightText="限购一份" />
|
||||
<zan-capsule type="danger" leftText="折扣" rightText="限购一份" />
|
||||
</view>
|
||||
</view>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel-title">自定义颜色</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<template is="capsule" data="{{ leftText: '1折', rightText: '限购一份', color: '#38f' }}" />
|
||||
<zan-panel title='自定义颜色'>
|
||||
<view class="capsule-demo">
|
||||
<zan-capsule color="#38f" leftText="折扣" rightText="限购一份" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</zan-panel>
|
||||
</doc-page>
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
.capsule-demo {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.zan-capsule + .zan-capsule {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Card 卡片"
|
||||
"navigationBarTitleText": "Card 卡片",
|
||||
"usingComponents": {
|
||||
"zan-card": "../../dist/card/index",
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,35 +1,30 @@
|
||||
<view class="container">
|
||||
<doc-page title="CAPSULE" without-padding>
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">CARD</view>
|
||||
<zan-panel without-border>
|
||||
<zan-card
|
||||
card-class="test-card"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
|
||||
price="999.99"
|
||||
title="红烧牛肉【虚拟商品】【有库存】【有sku】"
|
||||
num="2"
|
||||
desc="3000克 50%"
|
||||
status="已发货"
|
||||
>
|
||||
</zan-card>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-card">
|
||||
<view class="zan-card__thumb">
|
||||
<image class="zan-card__img"
|
||||
src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</zan-panel>
|
||||
|
||||
<zan-panel title="使用slot">
|
||||
<zan-card
|
||||
card-class="test-card"
|
||||
thumb="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
|
||||
useThumbSlot="{{ true }}"
|
||||
useDetailSlot="{{ true }}"
|
||||
>
|
||||
<!-- 右侧详情 -->
|
||||
<view slot="detail-slot" class="zan-card__detail">
|
||||
我是自定义内容区域
|
||||
</view>
|
||||
<view class="zan-card__detail">
|
||||
<view class="zan-card__detail-row">
|
||||
<view class="zan-card__right-col">¥ 999.99</view>
|
||||
<view class="zan-card__left-col zan-ellipsis--l2">
|
||||
红烧牛肉【虚拟商品】【有库存】【有sku】
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-card__detail-row zan-c-gray-darker">
|
||||
<view class="zan-card__right-col">x2</view>
|
||||
<view class="zan-card__left-col">
|
||||
3000克 50%
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-card__detail-row zan-c-gray-darker">
|
||||
<view class="zan-card__left-col zan-c-red">已发货</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</zan-card>
|
||||
</zan-panel>
|
||||
</doc-page>
|
||||
|
||||
1
example/pages/card/index.wxss
Normal file
1
example/pages/card/index.wxss
Normal file
@ -0,0 +1 @@
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
{
|
||||
"navigationBarTitleText": "Cell 单元格"
|
||||
"navigationBarTitleText": "Cell 单元格",
|
||||
"usingComponents": {
|
||||
"zan-cell": "../../dist/cell/index",
|
||||
"zan-icon": "../../dist/icon/index",
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"zan-cell-group": "../../dist/cell-group/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,118 +1,43 @@
|
||||
<import src="/dist/switch/index.wxml" />
|
||||
<doc-page title="CELL" without-padding>
|
||||
|
||||
<view class="container">
|
||||
<zan-panel class="cell-panel-demo">
|
||||
<zan-cell title="单行列表"></zan-cell>
|
||||
</zan-panel>
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">CELL</view>
|
||||
<zan-panel class="cell-panel-demo">
|
||||
<zan-cell title="单行列表" value="详细信息"></zan-cell>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">单行列表</view>
|
||||
</view>
|
||||
</view>
|
||||
<zan-panel class="cell-panel-demo">
|
||||
<zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">单行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
</view>
|
||||
<zan-panel class="cell-panel-demo" title="带 icon 的 cell">
|
||||
<zan-cell title="单行列表" value="详细信息">
|
||||
<zan-icon slot="icon" type="checked"></zan-icon>
|
||||
</zan-cell>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__icon zan-icon zan-icon-checked" style="color:#38f;"></view>
|
||||
<view class="zan-cell__bd">单行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
</view>
|
||||
<zan-panel class="cell-panel-demo" title="带箭头的 cell">
|
||||
<zan-cell title="只显示箭头" is-link></zan-cell>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<view class="zan-cell__text">单行列表</view>
|
||||
<view class="zan-cell__desc">附加描述</view>
|
||||
</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
</view>
|
||||
<zan-panel class="cell-panel-demo">
|
||||
<zan-cell title="跳转到首页" is-link url="/pages/dashboard/index"></zan-cell>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--access">
|
||||
<view class="zan-cell__bd">单行列表</view>
|
||||
<view class="zan-cell__ft"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--switch">
|
||||
<view class="zan-cell__bd">开关</view>
|
||||
<view class="zan-cell__ft">
|
||||
<template is="zan-switch" data="{{ checked }}"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--access">
|
||||
<view class="zan-cell__bd">单行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
</view>
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
</view>
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--access">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft"></view>
|
||||
</view>
|
||||
<view class="zan-cell zan-cell--access">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft"></view>
|
||||
</view>
|
||||
<view class="zan-cell zan-cell--access">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft"></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--access">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
<view class="zan-cell zan-cell--access">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
<view class="zan-cell zan-cell--access">
|
||||
<view class="zan-cell__bd">多行列表</view>
|
||||
<view class="zan-cell__ft">详细信息</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<zan-panel class="cell-panel-demo" title="cell 组">
|
||||
<zan-cell-group>
|
||||
<zan-cell title="只显示箭头" is-link></zan-cell>
|
||||
<zan-cell title="跳转到首页" is-link url="/pages/dashboard/index"></zan-cell>
|
||||
<zan-cell title="只有 footer 点击有效" is-link url="/pages/dashboard/index" only-tap-footer></zan-cell>
|
||||
<zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
|
||||
<zan-cell title="表单">
|
||||
<input slot="footer" type="digit" placeholder="带小数点的数字键盘"/>
|
||||
</zan-cell>
|
||||
<zan-cell title="开关">
|
||||
<switch slot="footer" checked/>
|
||||
</zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-panel>
|
||||
</doc-page>
|
||||
|
||||
4
example/pages/cell/index.wxss
Normal file
4
example/pages/cell/index.wxss
Normal file
@ -0,0 +1,4 @@
|
||||
.cell-panel-demo {
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
}
|
||||
@ -27,8 +27,8 @@ export default {
|
||||
name: 'Layout 布局',
|
||||
path: '/pages/layout/index'
|
||||
}, {
|
||||
name: 'Loadmore 加载',
|
||||
path: '/pages/loadmore/index'
|
||||
name: 'loading 加载',
|
||||
path: '/pages/loading/index'
|
||||
}, {
|
||||
name: 'Noticebar 通告栏',
|
||||
path: '/pages/noticebar/index'
|
||||
|
||||
8
example/pages/dashboard/index.json
Normal file
8
example/pages/dashboard/index.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "ZanUI-WeApp",
|
||||
"usingComponents": {
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"zan-cell": "../../dist/cell/index",
|
||||
"zan-cell-group": "../../dist/cell-group/index"
|
||||
}
|
||||
}
|
||||
@ -3,13 +3,17 @@
|
||||
<image class="logo" src="https://img.yzcdn.cn/public_files/2017/02/06/ee0ebced79a80457d77ce71c7d414c74.png"></image>
|
||||
|
||||
<block wx:for="{{ list }}" wx:for-item="group" wx:key="title">
|
||||
<view class="zan-panel-title">{{ group.title }}</view>
|
||||
<view class="zan-panel">
|
||||
<navigator wx:for="{{ group.content }}" wx:key="name" class="zan-cell zan-cell--access" url="{{ item.path }}">
|
||||
<view class="zan-cell__bd">{{ item.name }}</view>
|
||||
<view class="zan-cell__ft"></view>
|
||||
</navigator>
|
||||
</view>
|
||||
<zan-panel title="{{ group.title }}">
|
||||
<zan-cell-group>
|
||||
<zan-cell
|
||||
wx:for="{{ group.content }}"
|
||||
wx:key="name"
|
||||
is-link
|
||||
url="{{ item.path }}"
|
||||
title="{{ item.name }}"
|
||||
></zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-panel>
|
||||
</block>
|
||||
|
||||
</view>
|
||||
|
||||
@ -1,30 +1,33 @@
|
||||
const Zan = require('../../dist/index');
|
||||
const Dialog = require('../../dist/dialog/dialog');
|
||||
|
||||
Page(Object.assign({}, Zan.Dialog, {
|
||||
Page({
|
||||
toggleBaseDialog() {
|
||||
this.showZanDialog({
|
||||
Dialog({
|
||||
title: '弹窗',
|
||||
content: '这是一个模态弹窗\n换行',
|
||||
showCancel: true
|
||||
message: '这是一个模态弹窗\n换行',
|
||||
selector: '#zan-base-dialog',
|
||||
showCancelButton: true
|
||||
}).then(() => {
|
||||
console.log('=== dialog ===', 'type: confirm');
|
||||
console.log('=== dialog resolve ===', 'type: confirm');
|
||||
}).catch(() => {
|
||||
console.log('=== dialog ===', 'type: cancel');
|
||||
console.log('=== dialog reject ===', 'type: cancel');
|
||||
});
|
||||
},
|
||||
|
||||
toggleWithoutTitleDialog() {
|
||||
this.showZanDialog({
|
||||
content: '这是一个模态弹窗'
|
||||
Dialog({
|
||||
message: '这是一个模态弹窗',
|
||||
selector: '#zan-no-title-dialog'
|
||||
}).then(() => {
|
||||
console.log('=== dialog without title ===', 'type: confirm');
|
||||
console.log('=== dialog ===', 'type: confirm');
|
||||
});
|
||||
},
|
||||
|
||||
toggleButtonDialog() {
|
||||
this.showZanDialog({
|
||||
Dialog({
|
||||
title: '弹窗',
|
||||
content: '这是一个模态弹窗',
|
||||
message: '这是一个模态弹窗',
|
||||
selector: '#zan-button-dialog',
|
||||
buttons: [{
|
||||
text: '现金支付',
|
||||
color: 'red',
|
||||
@ -43,9 +46,10 @@ Page(Object.assign({}, Zan.Dialog, {
|
||||
},
|
||||
|
||||
toggleVerticalDialog() {
|
||||
this.showZanDialog({
|
||||
Dialog({
|
||||
title: '弹窗',
|
||||
content: '这是一个模态弹窗',
|
||||
message: '这是一个模态弹窗',
|
||||
selector: '#zan-vertical-dialog',
|
||||
buttonsShowVertical: true,
|
||||
buttons: [{
|
||||
text: '现金支付',
|
||||
@ -63,4 +67,4 @@ Page(Object.assign({}, Zan.Dialog, {
|
||||
console.log('=== dialog with vertical buttons ===', `type: ${type}`);
|
||||
});
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Dialog 弹出框"
|
||||
"navigationBarTitleText": "Dialog 弹出框",
|
||||
"usingComponents": {
|
||||
"doc-page": "../../components/doc-page/index",
|
||||
"zan-dialog": "../../dist/dialog/index",
|
||||
"zan-button": "../../dist/btn/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,18 @@
|
||||
<import src="/dist/dialog/index.wxml" />
|
||||
<doc-page title="DIALOG">
|
||||
<view class="zan-btns" style="margin-top: 30vh;">
|
||||
<zan-button bindtap="toggleBaseDialog">基础 Dialog</zan-button>
|
||||
<zan-button bindtap="toggleWithoutTitleDialog">Dialog - 无标题</zan-button>
|
||||
<zan-button bindtap="toggleButtonDialog">Dialog - 自定义显示按钮</zan-button>
|
||||
<zan-button bindtap="toggleVerticalDialog">Dialog - 按钮纵向排布</zan-button>
|
||||
</view>
|
||||
|
||||
<zan-dialog id="zan-base-dialog"></zan-dialog>
|
||||
<zan-dialog id="zan-no-title-dialog"></zan-dialog>
|
||||
<zan-dialog id="zan-button-dialog"></zan-dialog>
|
||||
<zan-dialog id="zan-vertical-dialog"></zan-dialog>
|
||||
</doc-page>
|
||||
|
||||
<!-- <import src="/dist/dialog/index.wxml" />
|
||||
|
||||
<view class="container">
|
||||
|
||||
@ -21,4 +35,4 @@
|
||||
|
||||
</view>
|
||||
|
||||
<template is="zan-dialog" data="{{ zanDialog }}"></template>
|
||||
<template is="zan-dialog" data="{{ zanDialog }}"></template> -->
|
||||
|
||||
@ -54,6 +54,7 @@ module.exports = {
|
||||
// Form 中使用输入框
|
||||
form: {
|
||||
name: {
|
||||
name: 'name',
|
||||
placeholder: '请输入收货人姓名',
|
||||
componentId: 'form:test:name'
|
||||
},
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
const Zan = require('../../dist/index');
|
||||
const config = require('./config');
|
||||
|
||||
Page(Object.assign({}, Zan.Field, {
|
||||
Page({
|
||||
data: {
|
||||
config,
|
||||
value: 'test',
|
||||
@ -24,21 +23,21 @@ Page(Object.assign({}, Zan.Field, {
|
||||
},
|
||||
|
||||
handleZanFieldChange(e) {
|
||||
const { componentId, detail } = e;
|
||||
const { detail } = e;
|
||||
|
||||
console.log('[zan:field:change]', componentId, detail);
|
||||
console.log('[zan:field:change]', detail);
|
||||
},
|
||||
|
||||
handleZanFieldFocus(e) {
|
||||
const { componentId, detail } = e;
|
||||
const { detail } = e;
|
||||
|
||||
console.log('[zan:field:focus]', componentId, detail);
|
||||
console.log('[zan:field:focus]', detail);
|
||||
},
|
||||
|
||||
handleZanFieldBlur(e) {
|
||||
const { componentId, detail } = e;
|
||||
const { detail } = e;
|
||||
|
||||
console.log('[zan:field:blur]', componentId, detail);
|
||||
console.log('[zan:field:blur]', detail);
|
||||
},
|
||||
|
||||
clearInput() {
|
||||
@ -80,4 +79,4 @@ Page(Object.assign({}, Zan.Field, {
|
||||
});
|
||||
}
|
||||
|
||||
}));
|
||||
});
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
{
|
||||
"navigationBarTitleText": "Field 输入框"
|
||||
"navigationBarTitleText": "Field 输入框",
|
||||
"usingComponents": {
|
||||
"zan-button": "../../dist/btn/index",
|
||||
"zan-field": "../../dist/field/index",
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,67 +1,93 @@
|
||||
<import src="/dist/field/index.wxml" />
|
||||
|
||||
<view class="container">
|
||||
<view class="doc-title zan-hairline--bottom">Field</view>
|
||||
|
||||
<doc-page title="Field" without-padding>
|
||||
<!-- Field 基础用法 -->
|
||||
<view class="zan-panel-title">基础用法</view>
|
||||
<view class="zan-panel">
|
||||
<template
|
||||
is="zan-field"
|
||||
data="{{ ...config.base.name, value }}"></template>
|
||||
<template
|
||||
is="zan-field"
|
||||
data="{{ ...config.base.tel }}"></template>
|
||||
<template
|
||||
is="zan-field"
|
||||
data="{{ ...config.base.address }}"></template>
|
||||
<template
|
||||
is="zan-field"
|
||||
data="{{ ...config.base.disabled }}"></template>
|
||||
</view>
|
||||
|
||||
<zan-panel title="基础用法">
|
||||
<zan-field
|
||||
title="{{ config.base.name.title }}"
|
||||
placeholder="{{ config.base.name.placeholder }}"
|
||||
focus="{{ config.base.name.focus }}"
|
||||
value="{{ value }}"
|
||||
>
|
||||
</zan-field>
|
||||
<zan-field
|
||||
title="{{ config.base.tel.title }}"
|
||||
placeholder="{{ config.base.tel.placeholder }}"
|
||||
error="{{ config.base.tel.error }}"
|
||||
input-type="{{ config.base.tel.inputType }}"
|
||||
>
|
||||
</zan-field>
|
||||
<zan-field
|
||||
title="{{ config.base.address.title }}"
|
||||
type="{{ config.base.address.type }}"
|
||||
placeholder="{{ config.base.address.placeholder }}"
|
||||
>
|
||||
</zan-field>
|
||||
<zan-field
|
||||
title="{{ config.base.disabled.title }}"
|
||||
value="{{ config.base.disabled.value }}"
|
||||
disabled="{{ config.base.disabled.disabled }}"
|
||||
>
|
||||
</zan-field>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-btns">
|
||||
<button
|
||||
class="zan-btn zan-btn--primary"
|
||||
bindtap="clearInput">清除输入</button>
|
||||
<zan-button type="primary" bind:btnclick="clearInput">清除输入</zan-button>
|
||||
</view>
|
||||
|
||||
<!-- 去除标题后的输入框样式 -->
|
||||
<view class="zan-panel-title">无标题输入框</view>
|
||||
<view class="zan-panel">
|
||||
<template
|
||||
is="zan-field"
|
||||
data="{{ ...config.notitle, value: textareaValue }}"></template>
|
||||
</view>
|
||||
<zan-panel title="无标题输入框">
|
||||
<zan-field
|
||||
placeholder="{{ config.notitle.placeholder }}"
|
||||
value="{{ textareaValue }}"
|
||||
>
|
||||
</zan-field>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-btns">
|
||||
<button
|
||||
class="zan-btn zan-btn--primary"
|
||||
bindtap="clearTextarea">清除输入</button>
|
||||
<zan-button type="primary" bind:btnclick="clearTextarea">清除输入</zan-button>
|
||||
</view>
|
||||
|
||||
<!-- 使用 Field 圆角样式 -->
|
||||
<view class="zan-panel-title field__title--radius">圆角输入框</view>
|
||||
<template
|
||||
is="zan-field"
|
||||
data="{{ ...config.radius.totalPrice }}"></template>
|
||||
<template
|
||||
is="zan-field"
|
||||
data="{{ ...config.radius.excludePrice }}"></template>
|
||||
<template
|
||||
is="zan-field"
|
||||
data="{{ ...config.radius.notitle }}"></template>
|
||||
|
||||
<!-- form 中使用 Field -->
|
||||
<view class="zan-panel-title">Form 表单中的field应用</view>
|
||||
<form bindsubmit="formSubmit" bindreset="formReset">
|
||||
<zan-panel title="圆角输入框">
|
||||
<zan-field
|
||||
title="{{ config.radius.totalPrice.title }}"
|
||||
type="{{ config.radius.totalPrice.type }}"
|
||||
placeholder="{{ config.radius.totalPrice.placeholder }}"
|
||||
right="{{ config.radius.totalPrice.right }}"
|
||||
mode="{{ config.radius.totalPrice.mode }}"
|
||||
>
|
||||
</zan-field>
|
||||
<zan-field
|
||||
class="zan-field--radius"
|
||||
title="{{ config.radius.excludePrice.title }}"
|
||||
type="{{ config.radius.excludePrice.type }}"
|
||||
placeholder="{{ config.radius.excludePrice.placeholder }}"
|
||||
right="{{ config.radius.excludePrice.right }}"
|
||||
mode="{{ config.radius.excludePrice.mode }}"
|
||||
error="{{ config.radius.excludePrice.error }}"
|
||||
>
|
||||
</zan-field>
|
||||
<zan-field
|
||||
placeholder="{{ config.radius.notitle.placeholder }}"
|
||||
mode="{{ config.radius.notitle.mode }}"
|
||||
input-type="{{ config.radius.notitle.inputTitle }}"
|
||||
>
|
||||
</zan-field>
|
||||
</zan-panel>
|
||||
|
||||
<!-- <view class="zan-panel-title">Form 表单中的field应用</view> -->
|
||||
<!-- <form bindsubmit="formSubmit" bindreset="formReset">
|
||||
<view class="zan-panel">
|
||||
<template
|
||||
is="zan-field"
|
||||
data="{{ ...config.form.name }}"></template>
|
||||
<template
|
||||
is="zan-field"
|
||||
data="{{ ...config.form.tel }}"></template>
|
||||
<zan-field
|
||||
name="{{ config.form.name.name }}"
|
||||
placeholder="{{ config.form.name.placeholder }}"
|
||||
>
|
||||
</zan-field>
|
||||
<zan-field
|
||||
name="{{ config.form.tel.name }}"
|
||||
placeholder="{{ config.form.tel.placeholder }}"
|
||||
input-type="{{ config.form.tel.inputType }}"
|
||||
>
|
||||
</zan-field>
|
||||
<view class="zan-btns">
|
||||
<button
|
||||
class="zan-btn zan-btn--primary"
|
||||
@ -71,72 +97,5 @@
|
||||
formType="reset">重置数据</button>
|
||||
</view>
|
||||
</view>
|
||||
</form>
|
||||
|
||||
<view class="zan-panel-title">自定义显示内容</view>
|
||||
<view class="zan-panel">
|
||||
<!-- 配合 popup 使用 picker-view -->
|
||||
<view class="zan-cell zan-field">
|
||||
<view class="zan-cell__hd zan-field__title">人员信息</view>
|
||||
<view
|
||||
class="zan-field__input zan-cell__bd"
|
||||
bindtap="handleDateFieldClick"
|
||||
>
|
||||
出生日期: {{ pickerViewConfig.year[pickerViewConfig.value[0]] }}
|
||||
性别: {{ pickerViewConfig.sex[pickerViewConfig.value[1]] }}
|
||||
</view>
|
||||
</view>
|
||||
<!-- 对应的 popup 层 -->
|
||||
<view
|
||||
class="zan-popup zan-popup--bottom {{ pickerViewConfig.show ? 'zan-popup--show' : ''}}"
|
||||
>
|
||||
<view class="zan-popup__mask" bindtap="hideDatePopup"></view>
|
||||
<view class="zan-popup__container popup-field-example--bottom">
|
||||
<picker-view
|
||||
value="{{ pickerViewConfig.value }}"
|
||||
indicator-style="height: 50px"
|
||||
class="picker-view-example"
|
||||
bindchange="handlePopupDateChange"
|
||||
>
|
||||
<picker-view-column>
|
||||
<view
|
||||
class="picker-view-column-example"
|
||||
wx:for="{{ pickerViewConfig.year }}"
|
||||
>{{item}}年</view>
|
||||
</picker-view-column>
|
||||
<picker-view-column>
|
||||
<view
|
||||
class="picker-view-column-example"
|
||||
wx:for="{{ pickerViewConfig.sex }}"
|
||||
>{{item}}</view>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 简单 picker 示例 -->
|
||||
<view class="zan-cell zan-field">
|
||||
<view class="zan-cell__hd zan-field__title">选择区域</view>
|
||||
<picker
|
||||
mode="selector"
|
||||
class="zan-field__input zan-cell__bd"
|
||||
range="{{ area }}"
|
||||
value="{{ areaIndex }}"
|
||||
bindchange="onAreaChange"
|
||||
>
|
||||
{{ area[areaIndex] }}
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="zan-cell zan-field">
|
||||
<view class="zan-cell__hd zan-field__title">验证码</view>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="请输入短信验证码"
|
||||
class="zan-field__input zan-cell__bd"/>
|
||||
<view class="zan-cell__ft">
|
||||
<button class="zan-btn zan-btn--mini zan-btn--primary">获取验证码</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</form> -->
|
||||
</doc-page>
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
{
|
||||
"navigationBarTitleText": "Helper 基础样式"
|
||||
"navigationBarTitleText": "Helper 基础样式",
|
||||
"usingComponents": {
|
||||
"zan-cell": "../../dist/cell/index",
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"zan-cell-group": "../../dist/cell-group/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,76 +1,59 @@
|
||||
<view class="container">
|
||||
|
||||
<doc-page title="HELPER" without-padding>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<view class="zan-pull-right">zan-pull-right: 往右靠</view>
|
||||
</view>
|
||||
</view>
|
||||
<zan-cell>
|
||||
<view class="zan-pull-right">zan-pull-right: 往右靠</view>
|
||||
</zan-cell>
|
||||
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<view class="zan-text-deleted">zan-text-deleted：被删除的效果</view>
|
||||
</view>
|
||||
</view>
|
||||
<zan-cell>
|
||||
<view class="zan-text-deleted">zan-text-deleted：被删除的效果</view>
|
||||
</zan-cell>
|
||||
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<view>
|
||||
<view class="zan-font-12">zan-font-12：字号12</view>
|
||||
<view class="zan-font-12 zan-font-bold">zan-font-bold：再来个加粗</view>
|
||||
</view>
|
||||
<zan-cell>
|
||||
<view>
|
||||
<view class="zan-font-12">zan-font-12：字号12</view>
|
||||
<view class="zan-font-12 zan-font-bold">zan-font-bold：再来个加粗</view>
|
||||
</view>
|
||||
</view>
|
||||
</zan-cell>
|
||||
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<view>
|
||||
<view class="zan-font-16">zan-font-16：字号16</view>
|
||||
<view class="zan-font-16 zan-font-bold">zan-font-bold：再来个加粗</view>
|
||||
</view>
|
||||
<zan-cell>
|
||||
<view>
|
||||
<view class="zan-font-16">zan-font-16：字号16</view>
|
||||
<view class="zan-font-16 zan-font-bold">zan-font-bold：再来个加粗</view>
|
||||
</view>
|
||||
</view>
|
||||
</zan-cell>
|
||||
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<view class="">
|
||||
<view>字体颜色</view>
|
||||
<view class="zan-c-red">zan-c-red: 红色</view>
|
||||
<view class="zan-c-gray">zan-c-gray: 灰色</view>
|
||||
<view class="zan-c-gray-dark">zan-c-gray-dark: 再灰一点点</view>
|
||||
<view class="zan-c-gray-darker">zan-c-gray-darker: 更深的灰色</view>
|
||||
<view class="zan-c-black">zan-c-black: 黑色</view>
|
||||
<view class="zan-c-blue">zan-c-blue: 蓝色</view>
|
||||
<view class="zan-c-green">zan-c-green: 绿色</view>
|
||||
</view>
|
||||
<zan-cell>
|
||||
<view class="">
|
||||
<view>字体颜色</view>
|
||||
<view class="zan-c-red">zan-c-red: 红色</view>
|
||||
<view class="zan-c-gray">zan-c-gray: 灰色</view>
|
||||
<view class="zan-c-gray-dark">zan-c-gray-dark: 再灰一点点</view>
|
||||
<view class="zan-c-gray-darker">zan-c-gray-darker: 更深的灰色</view>
|
||||
<view class="zan-c-black">zan-c-black: 黑色</view>
|
||||
<view class="zan-c-blue">zan-c-blue: 蓝色</view>
|
||||
<view class="zan-c-green">zan-c-green: 绿色</view>
|
||||
</view>
|
||||
</view>
|
||||
</zan-cell>
|
||||
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<view>zan-arrow：箭头</view>
|
||||
<view class="zan-arrow"></view>
|
||||
</view>
|
||||
</view>
|
||||
<zan-cell>
|
||||
<view>zan-arrow：箭头</view>
|
||||
<view class="zan-arrow"></view>
|
||||
</zan-cell>
|
||||
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<view class="zan-ellipsis" style="width: 300px;">
|
||||
zan-ellipsis：单行点点点
|
||||
->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
|
||||
</view>
|
||||
<zan-cell>
|
||||
<view class="zan-ellipsis" style="width: 300px;">
|
||||
zan-ellipsis：单行点点点
|
||||
->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
|
||||
</view>
|
||||
</view>
|
||||
</zan-cell>
|
||||
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-cell__bd">
|
||||
<view class="zan-ellipsis--l2">
|
||||
zan-ellipsis--l2：单行点点点
|
||||
->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
|
||||
</view>
|
||||
<zan-cell>
|
||||
<view class="zan-ellipsis--l2">
|
||||
zan-ellipsis--l2：单行点点点
|
||||
->我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符我是占位的字符
|
||||
</view>
|
||||
</view>
|
||||
</zan-cell>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</doc-page>
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "Icon 图标"
|
||||
"navigationBarTitleText": "Icon 图标",
|
||||
"usingComponents": {
|
||||
"zan-icon": "../../dist/icon/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
<view class="container">
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">ICON</view>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view wx:for="{{ icons }}" wx:for-item="icon" class="icon-wrap">
|
||||
<view class="zan-icon zan-icon-{{ icon }}" style="color: #ff4343;"></view>
|
||||
<view class="icon-classname">zan-icon-{{ icon }}</view>
|
||||
<doc-page title="ICON">
|
||||
<view wx:for="{{ icons }}" wx:for-item="icon" wx:key="icon" class="icon-wrap">
|
||||
<view class="example-icon">
|
||||
<zan-icon type="{{ icon }}"></zan-icon>
|
||||
</view>
|
||||
<view class="icon-classname">zan-icon-{{ icon }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</doc-page>
|
||||
|
||||
@ -4,11 +4,14 @@
|
||||
float: left;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.example-icon {
|
||||
font-size: 24px;
|
||||
padding: 10px;
|
||||
color: rgba(69, 90, 100, .8);
|
||||
}
|
||||
|
||||
.icon-classname {
|
||||
color: #999;
|
||||
font-size: 10px;
|
||||
}
|
||||
.zan-icon {
|
||||
font-size: 24px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
8
example/pages/layout/index.json
Normal file
8
example/pages/layout/index.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"zan-row": "../../dist/row/index",
|
||||
"zan-col": "../../dist/col/index",
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
@ -1,33 +1,21 @@
|
||||
<view class="container">
|
||||
<doc-page title="LAYOUT" without-padding>
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">LAYOUT</view>
|
||||
<zan-panel title="基础用法">
|
||||
<zan-row>
|
||||
<zan-col col="8" col-class="custom-zan-col">span: 8</zan-col>
|
||||
<zan-col col="8" col-class="custom-zan-col">span: 8</zan-col>
|
||||
<zan-col col="8" col-class="custom-zan-col">span: 8</zan-col>
|
||||
</zan-row>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel-title">基础用法</view>
|
||||
<view class="doc-description">Layout 组件提供了24列栅格，添加 zan-col-x 可以设置元素所占宽度</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-row">
|
||||
<view class="zan-col zan-col-8">
|
||||
span: 8
|
||||
</view>
|
||||
<view class="zan-col zan-col-8">
|
||||
span: 8
|
||||
</view>
|
||||
<view class="zan-col zan-col-8">
|
||||
span: 8
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<zan-panel title="利用 offset 布局">
|
||||
<zan-row>
|
||||
<zan-col col="4" col-class="custom-zan-col">span: 4</zan-col>
|
||||
<zan-col col="10" offset="4" col-class="custom-zan-col">offset: 4, span: 10</zan-col>
|
||||
</zan-row>
|
||||
<zan-row>
|
||||
<zan-col col="12" offset="12" col-class="custom-zan-col">offset: 12, span: 12</zan-col>
|
||||
</zan-row>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel-title">offset</view>
|
||||
<view class="doc-description">添加 zan-col-offset-x 类可以设置列的偏移宽度，计算方式与 span 相同</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-row">
|
||||
<view class="zan-col zan-col-4">span: 4</view>
|
||||
<view class="zan-col zan-col-10 zan-col-offset-4">offset: 4, span: 10</view>
|
||||
</view>
|
||||
<view class="zan-row">
|
||||
<view class="zan-col zan-col-12 zan-col-offset-12">offset: 12, span: 12</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</doc-page>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.zan-col {
|
||||
.custom-zan-col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
background-color: #39a9ed;
|
||||
@ -6,6 +6,6 @@
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.zan-col:nth-child(even) {
|
||||
.custom-zan-col:nth-child(even) {
|
||||
background-color: #66c6f2;
|
||||
}
|
||||
|
||||
1
example/pages/loading/index.js
Normal file
1
example/pages/loading/index.js
Normal file
@ -0,0 +1 @@
|
||||
Page({})
|
||||
6
example/pages/loading/index.json
Normal file
6
example/pages/loading/index.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "loading 加载",
|
||||
"usingComponents": {
|
||||
"zan-loading": "../../dist/loading/index"
|
||||
}
|
||||
}
|
||||
21
example/pages/loading/index.wxml
Normal file
21
example/pages/loading/index.wxml
Normal file
@ -0,0 +1,21 @@
|
||||
<view class="container">
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">LOADING</view>
|
||||
|
||||
<view class="zan-panel-title">circle</view>
|
||||
<view class="loading-example zan-panel">
|
||||
<zan-loading type="circle"></zan-loading>
|
||||
<zan-loading type="circle" color="black"></zan-loading>
|
||||
</view>
|
||||
<view class="zan-panel-title">spinner</view>
|
||||
<view class="loading-example zan-panel">
|
||||
<zan-loading type="spinner"></zan-loading>
|
||||
<zan-loading type="spinner" color="black"></zan-loading>
|
||||
</view>
|
||||
<view class="zan-panel-title">dot</view>
|
||||
<view class="zan-panel loading-example no-flex">
|
||||
<zan-loading type="dot"></zan-loading>
|
||||
<zan-loading type="dot" color="black"></zan-loading>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
14
example/pages/loading/index.wxss
Normal file
14
example/pages/loading/index.wxss
Normal file
@ -0,0 +1,14 @@
|
||||
.container {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
.loading-example {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: transparent;
|
||||
}
|
||||
.loading-example zan-loading {
|
||||
flex: 1;
|
||||
}
|
||||
.no-flex {
|
||||
display: block;
|
||||
}
|
||||
@ -1,23 +1,28 @@
|
||||
var Zan = require('../../dist/index');
|
||||
|
||||
Page(Object.assign({}, Zan.NoticeBar, {
|
||||
Page({
|
||||
data: {
|
||||
movable: {
|
||||
bar1: {
|
||||
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
|
||||
scrollable: true,
|
||||
delay: 1000
|
||||
},
|
||||
bar2: {
|
||||
text: '足协杯战线连续第2年上演广州德比战',
|
||||
color: '#fff',
|
||||
backgroundColor: '#000'
|
||||
},
|
||||
bar3: {
|
||||
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
|
||||
},
|
||||
static1: {
|
||||
text: '足协杯战线连续第2年上演广州德比战'
|
||||
bar4: {
|
||||
text: '带icon的公告',
|
||||
leftIcon: 'https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png'
|
||||
},
|
||||
static2: {
|
||||
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。'
|
||||
bar5: {
|
||||
text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。',
|
||||
leftIcon: 'https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png',
|
||||
mode: 'closeable',
|
||||
scrollable: true,
|
||||
speed: 10
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 滚动通告栏需要initScroll
|
||||
this.initZanNoticeBarScroll('movable');
|
||||
// initScroll的通告栏如果宽度足够显示内容将保持静止
|
||||
this.initZanNoticeBarScroll('static1');
|
||||
// 不进行initScroll的通告栏也将保持静止
|
||||
// this.initZanNoticeBarScroll('static2');
|
||||
}
|
||||
}))
|
||||
})
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Noticebar 通告栏"
|
||||
"navigationBarTitleText": "Noticebar 通告栏",
|
||||
"usingComponents": {
|
||||
"zan-noticebar": "../../dist/noticebar/index",
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,30 +1,54 @@
|
||||
<import src="/dist/noticebar/index.wxml" />
|
||||
<view class="container">
|
||||
<doc-page title="NOTICEBAR" without-padding>
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">NOTICEBAR</view>
|
||||
<zan-panel title="滚动通告栏">
|
||||
<zan-noticebar
|
||||
text="{{ bar1.text }}"
|
||||
scrollable="{{ bar1.scrollable }}"
|
||||
/>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel-title">滚动通告栏</view>
|
||||
<view class="zan-panel">
|
||||
<template
|
||||
is="zan-noticebar"
|
||||
data="{{ ...movable, componentId: 'movable' }}"
|
||||
></template>
|
||||
</view>
|
||||
<zan-panel title="延时滚动通告栏">
|
||||
<zan-noticebar
|
||||
text="{{ bar1.text }}"
|
||||
scrollable="{{ bar1.scrollable }}"
|
||||
delay="{{ bar1.delay }}"
|
||||
/>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel-title">静止通告栏1</view>
|
||||
<view class="zan-panel">
|
||||
<template
|
||||
is="zan-noticebar"
|
||||
data="{{ ...static1, componentId: 'static1' }}"
|
||||
></template>
|
||||
</view>
|
||||
<zan-panel title="初始速度低滚动通告栏">
|
||||
<zan-noticebar
|
||||
text="{{ bar1.text }}"
|
||||
scrollable="{{ bar1.scrollable }}"
|
||||
speed="{{ bar5.speed }}"
|
||||
/>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel-title">静止通告栏2</view>
|
||||
<view class="zan-panel">
|
||||
<template
|
||||
is="zan-noticebar"
|
||||
data="{{ ...static2, componentId: 'static2' }}"
|
||||
></template>
|
||||
</view>
|
||||
<zan-panel title="改变颜色通告栏">
|
||||
<zan-noticebar
|
||||
text="{{ bar2.text }}"
|
||||
color="{{ bar2.color }}"
|
||||
background-color="{{ bar2.backgroundColor }}"
|
||||
/>
|
||||
</zan-panel>
|
||||
|
||||
</view>
|
||||
<zan-panel title="静止通告栏">
|
||||
<zan-noticebar
|
||||
text="{{ bar3.text }}"
|
||||
/>
|
||||
</zan-panel>
|
||||
|
||||
<zan-panel title="带icon公告">
|
||||
<zan-noticebar
|
||||
text="{{ bar4.text }}"
|
||||
left-icon="{{ bar4.leftIcon }}"
|
||||
/>
|
||||
</zan-panel>
|
||||
|
||||
<zan-panel title="可关闭公告">
|
||||
<zan-noticebar
|
||||
text="{{ bar5.text }}"
|
||||
mode="{{ bar5.mode }}"
|
||||
/>
|
||||
</zan-panel>
|
||||
|
||||
</doc-page>
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "Panel 面板"
|
||||
"navigationBarTitleText": "Panel 面板",
|
||||
"usingComponents": {
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,22 +1,15 @@
|
||||
<view class="container">
|
||||
<doc-page title="PANEL" without-padding>
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">PANEL</view>
|
||||
<zan-panel class="panel-example">
|
||||
<view style="padding: 15px;">PANEL 内容区域</view>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel-title">标题</view>
|
||||
<view class="zan-panel">
|
||||
<view style="padding: 15px;">内容</view>
|
||||
</view>
|
||||
<zan-panel title="标题" class="panel-example">
|
||||
<view style="padding: 15px;">带有标题的 PANEL</view>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view style="padding: 15px;">内容</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel zan-panel--without-border">
|
||||
<zan-panel title="标题" hide-border="{{ true }}" class="panel-example">
|
||||
<view style="padding: 15px;">无边框的panel</view>
|
||||
</view>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view style="padding: 15px;">内容</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</doc-page>
|
||||
|
||||
4
example/pages/panel/index.wxss
Normal file
4
example/pages/panel/index.wxss
Normal file
@ -0,0 +1,4 @@
|
||||
.panel-example {
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
}
|
||||
@ -1,3 +1,9 @@
|
||||
{
|
||||
"navigationBarTitleText": "Popup 弹出层"
|
||||
"navigationBarTitleText": "Popup 弹出层",
|
||||
"usingComponents": {
|
||||
"doc-page": "../../components/doc-page/index",
|
||||
"zan-popup": "../../dist/popup/index",
|
||||
"zan-button": "../../dist/btn/index"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,74 +1,89 @@
|
||||
<view class="container">
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">POPUP</view>
|
||||
|
||||
<view class="zan-btns" style="margin-top: 30vh;">
|
||||
<button class="zan-btn" bindtap="togglePopup">
|
||||
<doc-page title="POPUP">
|
||||
<view class="zan-btns" style="margin-top: 10vh;">
|
||||
<zan-button class="zan-btn" bind:btnclick="togglePopup">
|
||||
弹出popup
|
||||
</button>
|
||||
<button class="zan-btn" bindtap="toggleTopPopup">
|
||||
</zan-button>
|
||||
<zan-button class="zan-btn" bind:btnclick="toggleTopPopup">
|
||||
从顶部弹出popup
|
||||
</button>
|
||||
<button class="zan-btn" bindtap="toggleBottomPopup">
|
||||
</zan-button>
|
||||
<zan-button class="zan-btn" bind:btnclick="toggleBottomPopup">
|
||||
从底部弹出popup
|
||||
</button>
|
||||
<button class="zan-btn" bindtap="toggleLeftPopup">
|
||||
</zan-button>
|
||||
<zan-button class="zan-btn" bind:btnclick="toggleLeftPopup">
|
||||
从左边弹出popup
|
||||
</button>
|
||||
<button class="zan-btn" bindtap="toggleRightPopup">
|
||||
</zan-button>
|
||||
<zan-button class="zan-btn" bind:btnclick="toggleRightPopup">
|
||||
从右边弹出popup
|
||||
</button>
|
||||
</zan-button>
|
||||
</view>
|
||||
|
||||
<view class="zan-popup {{ showPopup ? 'zan-popup--show' : ''}}">
|
||||
<view class="zan-popup__mask" bindtap="togglePopup"></view>
|
||||
<view class="zan-popup__container popup-example--center">
|
||||
<view class="zan-btns">
|
||||
<!-- 中间弹出框 -->
|
||||
<zan-popup
|
||||
show="{{ showPopup }}"
|
||||
bindclose="togglePopup"
|
||||
>
|
||||
<view class="pop-example__container">
|
||||
<view class="zan-btns">
|
||||
<button class="zan-btn" bindtap="togglePopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</zan-popup>
|
||||
|
||||
<view class="popup-example--left zan-popup zan-popup--left {{ showLeftPopup ? 'zan-popup--show' : ''}}">
|
||||
<view class="zan-popup__mask" bindtap="toggleLeftPopup"></view>
|
||||
<view class="zan-popup__container">
|
||||
<!-- 左侧弹出框 -->
|
||||
<zan-popup
|
||||
show="{{ showLeftPopup }}"
|
||||
type="left"
|
||||
bindclose="toggleLeftPopup"
|
||||
>
|
||||
<view class="pop-example__container pop-example__container--left">
|
||||
<view class="zan-btns">
|
||||
<button class="zan-btn" catchtap="toggleLeftPopup">
|
||||
<button class="zan-btn" bindtap="toggleLeftPopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</zan-popup>
|
||||
|
||||
<view class="popup-example--right zan-popup zan-popup--right {{ showRightPopup ? 'zan-popup--show' : ''}}">
|
||||
<view class="zan-popup__mask" catchtap="toggleRightPopup"></view>
|
||||
<view class="zan-popup__container">
|
||||
<!-- 右侧弹出框 -->
|
||||
<zan-popup
|
||||
show="{{ showRightPopup }}"
|
||||
type="right"
|
||||
bindclose="toggleRightPopup"
|
||||
>
|
||||
<view class="pop-example__container pop-example__container--right">
|
||||
<view class="zan-btns">
|
||||
<button class="zan-btn" catchtap="toggleRightPopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</zan-popup>
|
||||
|
||||
<view class="popup-example--top zan-popup zan-popup--top {{ showTopPopup ? 'zan-popup--show' : ''}}">
|
||||
<view class="zan-popup__mask" catchtap="toggleTopPopup"></view>
|
||||
<view class="zan-popup__container">
|
||||
内容
|
||||
</view>
|
||||
</view>
|
||||
<!-- 顶部弹出框 -->
|
||||
<zan-popup
|
||||
show="{{ showTopPopup }}"
|
||||
overlay="{{ false }}"
|
||||
type="top"
|
||||
bindclose="toggleTopPopup"
|
||||
>
|
||||
<view class="pop-example--top">内容</view>
|
||||
</zan-popup>
|
||||
|
||||
<view class="popup-example--bottom zan-popup zan-popup--bottom {{ showBottomPopup ? 'zan-popup--show' : ''}}">
|
||||
<view class="zan-popup__mask" catchtap="toggleBottomPopup"></view>
|
||||
<view class="zan-popup__container">
|
||||
<!-- 底部弹出框 -->
|
||||
<zan-popup
|
||||
show="{{ showBottomPopup }}"
|
||||
type="bottom"
|
||||
bindclose="toggleBottomPopup"
|
||||
>
|
||||
<view class="pop-example__container pop-example__container--bottom">
|
||||
<view class="zan-btns">
|
||||
<button class="zan-btn" catchtap="toggleBottomPopup">
|
||||
关闭 popup
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</zan-popup>
|
||||
|
||||
</view>
|
||||
</doc-page>
|
||||
|
||||
@ -1,30 +1,21 @@
|
||||
.popup-example--center {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.popup-example--right .zan-popup__container {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.popup-example--left .zan-popup__container {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.popup-example--top .zan-popup__container {
|
||||
left: 0;
|
||||
right: 0;
|
||||
.pop-example--top {
|
||||
width: 100vw;
|
||||
padding: 15px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.popup-example--top .zan-popup__mask {
|
||||
opacity: 0;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.popup-example--bottom .zan-popup__container {
|
||||
left: 0;
|
||||
right: 0;
|
||||
.pop-example__container {
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.pop-example__container--bottom {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.pop-example__container--left, .pop-example__container--right {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var Zan = require('../../dist/index');
|
||||
|
||||
Page(Object.assign({}, Zan.Select, Zan.TopTips, {
|
||||
Page({
|
||||
|
||||
data: {
|
||||
items: [
|
||||
@ -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,3 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Select 选择"
|
||||
"navigationBarTitleText": "Select 选择",
|
||||
"usingComponents": {
|
||||
"doc-page": "../../components/doc-page/index",
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"zan-select": "../../dist/select/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,40 +1,20 @@
|
||||
<import src="/dist/select/index.wxml" />
|
||||
<import src="/dist/toptips/index.wxml" />
|
||||
<doc-page title="SELECT" without-padding>
|
||||
<zan-panel title='基本用法'>
|
||||
<zan-select
|
||||
items="{{ items }}"
|
||||
data-type="base"
|
||||
checkedValue="{{ checked.base }}"
|
||||
bind:change="handleSelectChange"
|
||||
/>
|
||||
</zan-panel>
|
||||
|
||||
<view class="container">
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">SELECT</view>
|
||||
|
||||
<view class="zan-panel-title">基础用法</view>
|
||||
<view class="zan-panel">
|
||||
<view>
|
||||
<template is="zan-select" data="{{ items, checkedValue: checked.base, componentId: 'base' }}" ></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel-title">自定义高亮颜色</view>
|
||||
<view class="zan-panel">
|
||||
<view>
|
||||
<template is="zan-select" data="{{ items, checkedValue: checked.color, activeColor, componentId: 'color' }}" ></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel-title">Form 表单中的select应用</view>
|
||||
<form bindsubmit="formSubmit">
|
||||
<view class="zan-panel">
|
||||
<view>
|
||||
<template
|
||||
is="zan-select"
|
||||
data="{{ items, checkedValue: checked.form, name: 'formtest', componentId: 'form' }}" ></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-btns">
|
||||
<button
|
||||
class="zan-btn zan-btn--primary"
|
||||
formType="submit">提交数据</button>
|
||||
</view>
|
||||
</form>
|
||||
</view>
|
||||
|
||||
<template is="zan-toptips" data="{{ zanTopTips }}"></template>
|
||||
<zan-panel title='自定义高亮颜色'>
|
||||
<zan-select
|
||||
items="{{ items }}"
|
||||
data-type="color"
|
||||
checkedValue="{{ checked.color }}"
|
||||
activeColor="{{ activeColor }}"
|
||||
bind:change="handleSelectChange"
|
||||
/>
|
||||
</zan-panel>
|
||||
</doc-page>
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
var Zan = require('../../dist/index');
|
||||
|
||||
Page(Object.assign({}, Zan.Stepper, {
|
||||
Page(Object.assign({}, {
|
||||
data: {
|
||||
stepper1: {
|
||||
stepper: 10,
|
||||
@ -8,20 +6,21 @@ Page(Object.assign({}, Zan.Stepper, {
|
||||
max: 20
|
||||
},
|
||||
stepper2: {
|
||||
stepper: 1,
|
||||
stepper: 10,
|
||||
min: 1,
|
||||
max: 1
|
||||
max: 20
|
||||
},
|
||||
stepper3: {
|
||||
stepper: 10,
|
||||
min: 1,
|
||||
max: 20
|
||||
max: 20,
|
||||
step: 2
|
||||
}
|
||||
},
|
||||
|
||||
handleZanStepperChange(e) {
|
||||
var componentId = e.componentId;
|
||||
var stepper = e.stepper;
|
||||
const componentId = e.target.dataset.componentId;
|
||||
const stepper = e.detail;
|
||||
|
||||
this.setData({
|
||||
[`${componentId}.stepper`]: stepper
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Stepper 计数器"
|
||||
"navigationBarTitleText": "Stepper 计数器",
|
||||
"usingComponents": {
|
||||
"zan-stepper": "../../dist/stepper/index",
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,20 +1,43 @@
|
||||
<import src="/dist/stepper/index.wxml" />
|
||||
|
||||
<view class="container">
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">Stepper</view>
|
||||
|
||||
<view style="padding: 40px 15px">
|
||||
<template is="zan-stepper" data="{{ ...stepper1, componentId: 'stepper1' }}" />
|
||||
</view>
|
||||
|
||||
<!-- 当最大值等于最小值时，组件不可用 -->
|
||||
<view style="padding: 40px 15px ">
|
||||
<template is="zan-stepper" data="{{ ...stepper2, componentId: 'stepper2' }}" />
|
||||
</view>
|
||||
<doc-page title="Stepper" without-padding>
|
||||
<zan-panel title="基础用法">
|
||||
<view style="padding: 40px 15px">
|
||||
<zan-stepper
|
||||
stepper="{{ stepper1.stepper }}"
|
||||
min="{{ stepper1.min }}"
|
||||
max="{{ stepper1.max }}"
|
||||
data-component-id="stepper1"
|
||||
bind:change="handleZanStepperChange"
|
||||
>
|
||||
</zan-stepper>
|
||||
</view>
|
||||
</zan-panel>
|
||||
|
||||
<!-- small size -->
|
||||
<view style="padding: 40px 15px ">
|
||||
<template is="zan-stepper" data="{{ ...stepper3, componentId: 'stepper3', size: 'small' }}" />
|
||||
</view>
|
||||
</view>
|
||||
<zan-panel title="不同尺寸-小尺寸类型">
|
||||
<view style="padding: 40px 15px">
|
||||
<zan-stepper
|
||||
stepper="{{ stepper2.stepper }}"
|
||||
min="{{ stepper2.min }}"
|
||||
max="{{ stepper2.max }}"
|
||||
size="small"
|
||||
data-component-id="stepper2"
|
||||
bind:change="handleZanStepperChange"
|
||||
>
|
||||
</zan-stepper>
|
||||
</view>
|
||||
</zan-panel>
|
||||
|
||||
<zan-panel title="高级用法-每次变动数量自定义">
|
||||
<view style="padding: 40px 15px">
|
||||
<zan-stepper
|
||||
stepper="{{ stepper3.stepper }}"
|
||||
min="{{ stepper3.min }}"
|
||||
max="{{ stepper3.max }}"
|
||||
step="{{ stepper3.step }}"
|
||||
data-component-id="stepper3"
|
||||
bind:change="handleZanStepperChange"
|
||||
>
|
||||
</zan-stepper>
|
||||
</view>
|
||||
</zan-panel>
|
||||
</doc-page>
|
||||
|
||||
@ -1,3 +1,10 @@
|
||||
{
|
||||
"navigationBarTitleText": "Steps 步骤条"
|
||||
"navigationBarTitleText": "Steps 步骤条",
|
||||
"usingComponents": {
|
||||
"zan-cell": "../../dist/cell/index",
|
||||
"zan-cell-group": "../../dist/cell-group/index",
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"zan-steps": "../../dist/steps/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,70 +1,47 @@
|
||||
<import src="/dist/steps/index.wxml" />
|
||||
<doc-page title="STEPS" without-padding>
|
||||
<zan-panel>
|
||||
<zan-cell-group>
|
||||
<zan-cell>
|
||||
<zan-steps type="horizon" steps="{{steps}}"></zan-steps>
|
||||
</zan-cell>
|
||||
<zan-cell>
|
||||
<zan-steps type="horizon" steps="{{steps2}}"></zan-steps>
|
||||
</zan-cell>
|
||||
<zan-cell>
|
||||
<zan-steps type="horizon" steps="{{steps3}}"></zan-steps>
|
||||
</zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-panel>
|
||||
|
||||
<view class="container">
|
||||
<zan-panel title="有描述的steps">
|
||||
<zan-cell-group>
|
||||
<zan-cell>
|
||||
<zan-steps type="horizon" hasDesc steps="{{steps}}"></zan-steps>
|
||||
</zan-cell>
|
||||
<zan-cell>
|
||||
<zan-steps type="horizon" hasDesc steps="{{steps2}}"></zan-steps>
|
||||
</zan-cell>
|
||||
<zan-cell>
|
||||
<zan-steps type="horizon" hasDesc steps="{{steps3}}"></zan-steps>
|
||||
</zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-panel>
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">STEPS</view>
|
||||
<zan-panel title="垂直方向的steps">
|
||||
<zan-cell-group>
|
||||
<zan-cell>
|
||||
<zan-steps type="vertical" hasDesc steps="{{steps}}"></zan-steps>
|
||||
</zan-cell>
|
||||
<zan-cell>
|
||||
<zan-steps type="vertical" hasDesc steps="{{steps2}}"></zan-steps>
|
||||
</zan-cell>
|
||||
</zan-cell-group>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'horizon', steps: steps }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
<zan-panel title="可自定义 class">
|
||||
<zan-cell>
|
||||
<zan-steps type="vertical" steps="{{steps}}" className="my-class"></zan-steps>
|
||||
</zan-cell>
|
||||
</zan-panel>
|
||||
</doc-page>
|
||||
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'horizon', steps: steps2 }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'horizon', steps: steps3 }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel-title">有描述的steps</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps2 }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps3 }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel-title">垂直方向的steps</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'vertical', hasDesc: true, steps }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'vertical', steps }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel-title">可自定义class</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell__bd">
|
||||
<template is="zan-steps" data="{{ type: 'vertical', steps, className: 'my-class' }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
@ -11,26 +11,21 @@ Page(Object.assign({}, Zan.Switch, {
|
||||
},
|
||||
},
|
||||
|
||||
handleZanSwitchChange(e) {
|
||||
var componentId = e.componentId;
|
||||
var checked = e.checked;
|
||||
syncChange({ detail }) {
|
||||
this.setData({
|
||||
'sync.checked': detail.checked
|
||||
});
|
||||
},
|
||||
|
||||
if (componentId == 'sync') {
|
||||
// 同步开关
|
||||
asyncChange({ detail }) {
|
||||
this.setData({
|
||||
'async.loading': true
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
[`${componentId}.checked`]: checked
|
||||
'async.loading': false,
|
||||
'async.checked': detail.checked
|
||||
});
|
||||
} else if (componentId == 'async') {
|
||||
// 异步开关
|
||||
this.setData({
|
||||
[`${componentId}.loading`]: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
[`${componentId}.loading`]: false,
|
||||
[`${componentId}.checked`]: checked
|
||||
});
|
||||
}, 500);
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
}));
|
||||
|
||||
@ -1,3 +1,9 @@
|
||||
{
|
||||
"navigationBarTitleText": "Switch 开关"
|
||||
"navigationBarTitleText": "Switch 开关",
|
||||
"usingComponents": {
|
||||
"zan-switch": "../../dist/switch/index",
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"zan-cell": "../../dist/cell/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,23 +1,21 @@
|
||||
<import src="/dist/switch/index.wxml" />
|
||||
<doc-page title="SWITCH" without-padding>
|
||||
|
||||
<view class="container">
|
||||
<zan-panel title='同步开关'>
|
||||
<zan-cell>
|
||||
<zan-switch checked="{{sync.checked}}" bind:change="syncChange" />
|
||||
</zan-cell>
|
||||
</zan-panel>
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">SWITCH</view>
|
||||
<zan-panel title='同步开关'>
|
||||
<zan-cell>
|
||||
<zan-switch checked="{{async.checked}}" disabled="{{ async.disabled }}" loading="{{ async.loading }}" bind:change="asyncChange" />
|
||||
</zan-cell>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel-title">同步开关</view>
|
||||
<view class="zan-panel">
|
||||
<template is="zan-switch" data="{{ ...sync, componentId: 'sync' }}" />
|
||||
</view>
|
||||
<zan-panel title='禁止改动的开关'>
|
||||
<zan-cell>
|
||||
<zan-switch disabled="{{ false }}" />
|
||||
</zan-cell>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel-title">异步开关</view>
|
||||
<view class="zan-panel">
|
||||
<template is="zan-switch" data="{{ ...async, componentId: 'async' }}" />
|
||||
</view>
|
||||
|
||||
<view class="zan-panel-title">开关不可用</view>
|
||||
<view class="zan-panel">
|
||||
<template is="zan-switch" data="{{ checked: false, disabled: true, componentId: 'switch3' }}" />
|
||||
<template is="zan-switch" data="{{ checked: true, disabled: true, componentId: 'switch4' }}" />
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</doc-page>
|
||||
|
||||
@ -1,7 +1,18 @@
|
||||
const { Tab, extend } = require('../../dist/index');
|
||||
|
||||
Page(extend({}, Tab, {
|
||||
Page({
|
||||
data: {
|
||||
tab: {
|
||||
list: [{
|
||||
id: 1,
|
||||
title: '选项1'
|
||||
}, {
|
||||
id: 2,
|
||||
title: '选项2'
|
||||
}, {
|
||||
id: 3,
|
||||
title: '选项3'
|
||||
}],
|
||||
selectedId: 1
|
||||
},
|
||||
tab1: {
|
||||
list: [{
|
||||
id: 'all',
|
||||
@ -15,9 +26,6 @@ Page(extend({}, Tab, {
|
||||
}, {
|
||||
id: 'send',
|
||||
title: '待收货'
|
||||
}, {
|
||||
id: 'sign',
|
||||
title: '已完成订单'
|
||||
}],
|
||||
selectedId: 'all'
|
||||
},
|
||||
@ -44,39 +52,6 @@ Page(extend({}, Tab, {
|
||||
selectedId: '1',
|
||||
scroll: true,
|
||||
height: 45
|
||||
},
|
||||
tab3: {
|
||||
list: [{
|
||||
id: '1',
|
||||
title: '商品1'
|
||||
}, {
|
||||
id: '2',
|
||||
title: '商品2'
|
||||
}, {
|
||||
id: '3',
|
||||
title: '商品3'
|
||||
}, {
|
||||
id: '4',
|
||||
title: '商品4'
|
||||
}, {
|
||||
id: '5',
|
||||
title: '商品5'
|
||||
}, {
|
||||
id: '6',
|
||||
title: '商品6'
|
||||
}],
|
||||
selectedId: '1',
|
||||
scroll: true,
|
||||
height: 45
|
||||
}
|
||||
},
|
||||
|
||||
handleZanTabChange(e) {
|
||||
var componentId = e.componentId;
|
||||
var selectedId = e.selectedId;
|
||||
|
||||
this.setData({
|
||||
[`${componentId}.selectedId`]: selectedId
|
||||
});
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "Tab 标签"
|
||||
"navigationBarTitleText": "Tab 标签",
|
||||
"usingComponents": {
|
||||
"zan-tab": "../../dist/tab/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,22 +1,26 @@
|
||||
<import src="/dist/tab/index.wxml" />
|
||||
<doc-page title="TAB" without-padding>
|
||||
|
||||
<view class="container">
|
||||
<view style="margin: 30px 0">
|
||||
<zan-tab
|
||||
list="{{ tab.list }}"
|
||||
selected-id="{{ tab.selectedId }}"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">TAB</view>
|
||||
<view style="margin: 30px 0">
|
||||
<zan-tab
|
||||
list="{{ tab1.list }}"
|
||||
selected-id="{{ tab1.selectedId }}"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view style="margin: 20px 0">
|
||||
<template
|
||||
is="zan-tab"
|
||||
data="{{ ...tab1, componentId: 'tab1' }}"></template>
|
||||
<view style="margin: 30px 0">
|
||||
<zan-tab
|
||||
list="{{ tab2.list }}"
|
||||
selected-id="{{ tab2.selectedId }}"
|
||||
scroll="{{ tab2.scroll }}"
|
||||
height="{{ tab2.height }}"
|
||||
/>
|
||||
</view>
|
||||
<view style="margin: 20px 0">
|
||||
<template
|
||||
is="zan-tab"
|
||||
data="{{ ...tab2, componentId: 'tab2' }}"></template>
|
||||
</view>
|
||||
<view style="margin: 20px 0">
|
||||
<template
|
||||
is="zan-tab"
|
||||
data="{{ ...tab3, componentId: 'tab3' }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</doc-page>
|
||||
|
||||
3
example/pages/tab/index.wxss
Normal file
3
example/pages/tab/index.wxss
Normal file
@ -0,0 +1,3 @@
|
||||
.doc-title {
|
||||
margin-top: 50px;
|
||||
}
|
||||
@ -1,3 +1,9 @@
|
||||
{
|
||||
"navigationBarTitleText": "Tag 标记"
|
||||
"navigationBarTitleText": "Tag 标记",
|
||||
"usingComponents": {
|
||||
"zan-cell": "../../dist/cell/index",
|
||||
"zan-panel": "../../dist/panel/index",
|
||||
"zan-tag": "../../dist/tag/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,30 +1,28 @@
|
||||
<view class="container">
|
||||
<doc-page title="Tag" without-padding>
|
||||
<zan-panel title="基础用法" class="tag-demo">
|
||||
<zan-cell>
|
||||
<zan-tag>灰色</zan-tag>
|
||||
<zan-tag type="danger">红色</zan-tag>
|
||||
<zan-tag disabled>不可用</zan-tag>
|
||||
</zan-cell>
|
||||
</zan-panel>
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">Tag</view>
|
||||
<zan-panel title="各种不同类型" class="tag-demo">
|
||||
<zan-cell>
|
||||
<zan-tag type="danger">会员折扣</zan-tag>
|
||||
<zan-tag type="warn">返现</zan-tag>
|
||||
<zan-tag type="primary">返现</zan-tag>
|
||||
<zan-tag type="primary" disabled>不可用</zan-tag>
|
||||
</zan-cell>
|
||||
</zan-panel>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-tag">灰色</view>
|
||||
<view class="zan-tag zan-tag--danger">红色</view>
|
||||
<view class="zan-tag zan-tag--disabled">不可用</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-tag zan-tag--danger">会员折扣</view>
|
||||
<view class="zan-tag zan-tag--warn">返现</view>
|
||||
<view class="zan-tag zan-tag--primary">返现</view>
|
||||
<view class="zan-tag zan-tag--primary zan-tag--disabled">不可用</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zan-panel">
|
||||
<view class="zan-cell zan-cell--last-child">
|
||||
<view class="zan-tag zan-tag--plain">灰色</view>
|
||||
<view class="zan-tag zan-tag--danger zan-tag--plain">会员折扣</view>
|
||||
<view class="zan-tag zan-tag--warn zan-tag--plain">返现</view>
|
||||
<view class="zan-tag zan-tag--primary zan-tag--plain">返现</view>
|
||||
<view class="zan-tag zan-tag--primary zan-tag--plain zan-tag--disabled">返现不可用</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<zan-panel title="镂空 Tag" class="tag-demo">
|
||||
<zan-cell>
|
||||
<zan-tag plain>灰色</zan-tag>
|
||||
<zan-tag type="danger" plain>会员折扣</zan-tag>
|
||||
<zan-tag type="warn" plain>返现</zan-tag>
|
||||
<zan-tag type="primary" plain>返现</zan-tag>
|
||||
<zan-tag type="primary" plain disabled>返现不可用</zan-tag>
|
||||
</zan-cell>
|
||||
</zan-panel>
|
||||
</doc-page>
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
.zan-tag + .zan-tag {
|
||||
.tag-demo {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
zan-tag + zan-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@ -1,40 +1,50 @@
|
||||
const Zan = require('../../dist/index');
|
||||
const Toast = require('../../dist/toast/toast');
|
||||
|
||||
Page(Object.assign({}, Zan.Toast, {
|
||||
Page({
|
||||
data: {},
|
||||
|
||||
showToast() {
|
||||
this.showZanToast('toast的内容');
|
||||
Toast({
|
||||
message: 'toast的内容',
|
||||
selector: '#zan-toast-test'
|
||||
})
|
||||
},
|
||||
|
||||
showIconToast() {
|
||||
this.showZanToast({
|
||||
title: 'toast的内容',
|
||||
icon: 'fail'
|
||||
Toast({
|
||||
type: 'fail',
|
||||
message: 'toast的内容',
|
||||
selector: '#zan-toast-test'
|
||||
});
|
||||
},
|
||||
|
||||
showImageToast() {
|
||||
this.showZanToast({
|
||||
title: 'toast的内容',
|
||||
Toast({
|
||||
message: 'toast的内容',
|
||||
selector: '#zan-toast-test',
|
||||
image: 'https://b.yzcdn.cn/v2/image/dashboard/secured_transaction/suc_green@2x.png'
|
||||
});
|
||||
},
|
||||
|
||||
showLoadingToast() {
|
||||
this.showZanToast({
|
||||
title: 'toast的内容',
|
||||
icon: 'loading'
|
||||
Toast({
|
||||
type: 'loading',
|
||||
message: 'toast的内容',
|
||||
selector: '#zan-toast-test'
|
||||
});
|
||||
},
|
||||
|
||||
showOnlyIcon() {
|
||||
this.showZanToast({
|
||||
icon: 'fail'
|
||||
Toast({
|
||||
type: 'fail',
|
||||
selector: '#zan-toast-test'
|
||||
});
|
||||
},
|
||||
|
||||
showLoading() {
|
||||
this.showZanLoading('加载中');
|
||||
Toast.loading({
|
||||
message: '加载中',
|
||||
selector: '#zan-toast-test'
|
||||
});
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "Toast 轻提示"
|
||||
"navigationBarTitleText": "Toast 轻提示",
|
||||
"usingComponents": {
|
||||
"zan-button": "../../dist/btn/index",
|
||||
"zan-toast": "../../dist/toast/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,30 +5,31 @@
|
||||
<view class="doc-title zan-hairline--bottom">TOAST</view>
|
||||
|
||||
<view class="zan-btns" style="margin-top: 15vh;">
|
||||
<button class="zan-btn" bindtap="showToast">
|
||||
<zan-button bind:btnclick="showToast">
|
||||
显示toast
|
||||
</button>
|
||||
</zan-button>
|
||||
|
||||
<button class="zan-btn" bindtap="showIconToast">
|
||||
<zan-button bind:btnclick="showIconToast">
|
||||
显示 Icon 图标的toast
|
||||
</button>
|
||||
</zan-button>
|
||||
|
||||
<button class="zan-btn" bindtap="showImageToast">
|
||||
<zan-button bind:btnclick="showImageToast">
|
||||
自定义图片作为图标的toast
|
||||
</button>
|
||||
</zan-button>
|
||||
|
||||
<button class="zan-btn" bindtap="showLoadingToast">
|
||||
<zan-button bind:btnclick="showLoadingToast">
|
||||
显示 Loading toast
|
||||
</button>
|
||||
</zan-button>
|
||||
|
||||
<button class="zan-btn" bindtap="showOnlyIcon">
|
||||
<zan-button bind:btnclick="showOnlyIcon">
|
||||
只显示图标的toast
|
||||
</button>
|
||||
</zan-button>
|
||||
|
||||
<button class="zan-btn" bindtap="showLoading">
|
||||
<zan-button bind:btnclick="showLoading">
|
||||
显示 Loading
|
||||
</button>
|
||||
</zan-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template is="zan-toast" data="{{ zanToast }}"></template>
|
||||
<!-- <template is="zan-toast" data="{{ zanToast }}"></template> -->
|
||||
<zan-toast id="zan-toast-test"></zan-toast>
|
||||
|
||||
@ -1,9 +1,44 @@
|
||||
var Zan = require('../../dist/index');
|
||||
const Toptips = require('../../dist/toptips/index');
|
||||
|
||||
Page(Object.assign({}, Zan.TopTips, {
|
||||
data: {},
|
||||
Page({
|
||||
data: {
|
||||
content: '测试toptips',
|
||||
duration: 2000,
|
||||
$zanui: {
|
||||
toptips: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
showTopTips() {
|
||||
this.showZanTopTips('toptips的内容');
|
||||
this.setData({
|
||||
$zanui: {
|
||||
toptips: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.setData({
|
||||
$zanui: {
|
||||
toptips: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
});
|
||||
},this.data.duration);
|
||||
},
|
||||
|
||||
showTopTips2() {
|
||||
Toptips('测试内容');
|
||||
},
|
||||
|
||||
showTopTips3() {
|
||||
Toptips({
|
||||
duration: 1000,
|
||||
content: '测试时间1秒'
|
||||
})
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
{
|
||||
"navigationBarTitleText": "Toptips 顶部提示"
|
||||
"navigationBarTitleText": "Toptips 顶部提示",
|
||||
"usingComponents": {
|
||||
"zan-button": "../../dist/btn/index",
|
||||
"zan-toptips": "../../dist/toptips/index",
|
||||
"doc-page": "../../components/doc-page/index"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,27 @@
|
||||
<import src="/dist/toptips/index.wxml" />
|
||||
|
||||
<view class="container">
|
||||
|
||||
<view class="doc-title zan-hairline--bottom">TOPTIPS</view>
|
||||
|
||||
<doc-page title="TOPTIPS">
|
||||
<view class="zan-btns" style="margin-top: 30vh;">
|
||||
<button class="zan-btn" bindtap="showTopTips">
|
||||
显示toptips
|
||||
</button>
|
||||
<zan-button bind:btnclick="showTopTips">
|
||||
显示toptips，声明式调用
|
||||
</zan-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<template is="zan-toptips" data="{{ zanTopTips }}"></template>
|
||||
<view class="zan-btns" style="margin-top: 30px;">
|
||||
<zan-button bind:btnclick="showTopTips2">
|
||||
显示toptips，命令式调用
|
||||
</zan-button>
|
||||
</view>
|
||||
|
||||
<view class="zan-btns" style="margin-top: 30px;">
|
||||
<zan-button bind:btnclick="showTopTips3">
|
||||
显示toptips，持续一秒
|
||||
</zan-button>
|
||||
</view>
|
||||
</doc-page>
|
||||
|
||||
<zan-toptips
|
||||
id="zan-toptips"
|
||||
content="{{ content }}"
|
||||
is-show="{{ $zanui.toptips.show }}"
|
||||
/>
|
||||
|
||||
|
||||
|
||||
34
package-lock.json
generated
34
package-lock.json
generated
@ -4079,6 +4079,24 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"eslint-config-airbnb": {
|
||||
"version": "16.1.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-16.1.0.tgz",
|
||||
"integrity": "sha512-zLyOhVWhzB/jwbz7IPSbkUuj7X2ox4PHXTcZkEmDqTvd0baJmJyuxlFPDlZOE/Y5bC+HQRaEkT3FoHo9wIdRiw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"eslint-config-airbnb-base": "12.1.0"
|
||||
}
|
||||
},
|
||||
"eslint-config-airbnb-base": {
|
||||
"version": "12.1.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-12.1.0.tgz",
|
||||
"integrity": "sha512-/vjm0Px5ZCpmJqnjIzcFb9TKZrKWz0gnuG/7Gfkt0Db1ELJR51xkZth+t14rYdqWgX836XbuxtArbIHlVhbLBA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"eslint-restricted-globals": "0.1.1"
|
||||
}
|
||||
},
|
||||
"eslint-config-standard": {
|
||||
"version": "10.2.1",
|
||||
"resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-10.2.1.tgz",
|
||||
@ -4313,6 +4331,12 @@
|
||||
"vue-eslint-parser": "2.0.3"
|
||||
}
|
||||
},
|
||||
"eslint-restricted-globals": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/eslint-restricted-globals/-/eslint-restricted-globals-0.1.1.tgz",
|
||||
"integrity": "sha1-NfDVy8ZMLj7WLpO0saevBbp+1Nc=",
|
||||
"dev": true
|
||||
},
|
||||
"eslint-scope": {
|
||||
"version": "3.7.1",
|
||||
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz",
|
||||
@ -14685,6 +14709,7 @@
|
||||
"version": "0.2.5",
|
||||
"resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
|
||||
"integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-descriptor": "0.1.6"
|
||||
}
|
||||
@ -14693,6 +14718,7 @@
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
|
||||
"integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-extendable": "0.1.1"
|
||||
}
|
||||
@ -14701,6 +14727,7 @@
|
||||
"version": "0.1.6",
|
||||
"resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
|
||||
"integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"kind-of": "3.2.2"
|
||||
},
|
||||
@ -14709,6 +14736,7 @@
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
|
||||
"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-buffer": "1.1.6"
|
||||
}
|
||||
@ -14719,6 +14747,7 @@
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
|
||||
"integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"kind-of": "3.2.2"
|
||||
},
|
||||
@ -14727,6 +14756,7 @@
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
|
||||
"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-buffer": "1.1.6"
|
||||
}
|
||||
@ -14737,6 +14767,7 @@
|
||||
"version": "0.1.6",
|
||||
"resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
|
||||
"integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"is-accessor-descriptor": "0.1.6",
|
||||
"is-data-descriptor": "0.1.4",
|
||||
@ -14746,7 +14777,8 @@
|
||||
"kind-of": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
|
||||
"integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
|
||||
"integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
|
||||
"dev": true
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.5.7",
|
||||
|
||||
@ -32,7 +32,9 @@
|
||||
"homepage": "https://github.com/youzan/zanui-weapp#readme",
|
||||
"devDependencies": {
|
||||
"cross-env": "^5.1.4",
|
||||
"eslint-config-airbnb": "^16.1.0",
|
||||
"fs-extra": "^4.0.2",
|
||||
"gh-pages": "^1.1.0",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-clean-css": "^3.9.0",
|
||||
"gulp-postcss": "^7.0.0",
|
||||
@ -44,7 +46,6 @@
|
||||
"postcss-easy-import": "^3.0.0",
|
||||
"precss": "^2.0.0",
|
||||
"shelljs": "^0.7.8",
|
||||
"gh-pages": "^1.1.0",
|
||||
"wedoc": "0.0.13"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,65 +1,80 @@
|
||||
## Actionsheet 行动按钮
|
||||
|
||||
### 使用指南
|
||||
在 app.wxss 中引入组件库所有样式
|
||||
```css
|
||||
@import "path/to/zanui-weapp/dist/index.wxss";
|
||||
```
|
||||
|
||||
在需要使用的页面里引入组件库模板和脚本
|
||||
```html
|
||||
<import src="/dist/actionsheet/index.wxml" />
|
||||
<!-- 直接使用 zan-actionsheet 模板，并且直接传入参数配置 -->
|
||||
<template is="zan-actionsheet" data="{{ ...actionsheet }}"></template>
|
||||
```
|
||||
```js
|
||||
const { Actionsheet, extend } = require('path/to/zanui-weapp/dist/index');
|
||||
|
||||
// 在 Page 中混入 Actionsheet 里面声明的方法
|
||||
Page(extend({}, Actionsheet, {
|
||||
data: {
|
||||
actionsheet: {
|
||||
show: false,
|
||||
actions: []
|
||||
}
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"zan-actionsheet": "path/to/zanui-weapp/dist/actionsheet/index"
|
||||
}
|
||||
// ...
|
||||
}));
|
||||
}
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
#### 基础功能
|
||||
在 js 中设置传入的 show 为 true，即可展示出 actionsheet。actionsheet 会根据传入的 actions 展示按钮。
|
||||
```js
|
||||
this.setData({
|
||||
'actionsheet.show': true
|
||||
})
|
||||
### 使用指南
|
||||
|
||||
```html
|
||||
<button bindtap="openActionSheet">Open ActionSheet</button>
|
||||
<view class="actionsheet-container">
|
||||
<!-- 监听自定义事件 cancel 和 actionclick，绑定回调函数 -->
|
||||
<zan-actionsheet
|
||||
show="{{ show }}"
|
||||
actions="{{ actions }}"
|
||||
cancel-text="{{ cancelText }}"
|
||||
cancel-with-mask="{{ cancelWithMask }}"
|
||||
bind:cancel="closeActionSheet"
|
||||
bind:actionclick="handleActionClick"
|
||||
>
|
||||
</zan-actionsheet>
|
||||
</view>
|
||||
```
|
||||
|
||||
当行动按钮被点击或者弹层被关掉时，都可以在可以在页面中注册 `handleZanActionsheetClick` 和 `handleZanActionsheetCancel` 方法来监听。
|
||||
```js
|
||||
// 在 Page 中混入 Actionsheet 里面声明的方法
|
||||
Page({
|
||||
// 当行动按钮被关闭时，触发该函数
|
||||
// componentId 即为在模板中传入的 componentId
|
||||
// 用于在一个页面上使用多个 actionsheet 时，进行区分
|
||||
handleZanActionsheetCancel({ componentId }) {
|
||||
data: {
|
||||
show: false,
|
||||
cancelWithMask: true,
|
||||
actions: [{
|
||||
name: '选项1',
|
||||
subname: '选项描述语1',
|
||||
loading: false
|
||||
}, {
|
||||
name: '选项2',
|
||||
subname: '选项描述语2',
|
||||
loading: false
|
||||
}, {
|
||||
name: '去分享',
|
||||
openType: 'share'
|
||||
}],
|
||||
cancelText: '关闭 Action'
|
||||
},
|
||||
|
||||
// 当行动按钮中有一个被点击时触发
|
||||
// index 代表被点击按钮在传入参数 actions 中的位置
|
||||
handleZanActionsheetClick({ componentId, index }) {
|
||||
openActionSheet() {
|
||||
this.setData({
|
||||
'show': true
|
||||
});
|
||||
},
|
||||
closeActionSheet() {
|
||||
this.setData({
|
||||
'show': false
|
||||
});
|
||||
},
|
||||
handleActionClick({ detail }) {
|
||||
// 获取被点击的按钮 index
|
||||
const { index } = detail;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### `Actionsheet` 支持的具体参数如下
|
||||
|
||||
#### `Actionsheet` 支持的具体参数如下（ 传入时使用分隔线写法 ）
|
||||
| 参数 | 说明 | 类型 | 默认值 | 必须 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| show | 用来表示是否展示行动按钮 | Boolean | false | |
|
||||
| actions | 指定弹层里的按钮 | Array | [] | |
|
||||
| cancelText | 行动按钮底部取消按钮的文案，不传则不显示取消按钮 | String | | |
|
||||
| closeOnClickOverlay | 是否在点击背景时，关闭行动按钮 | Boolean | false | |
|
||||
| componentId | 用于区分行动按钮之间的唯一名称 | String | | |
|
||||
| actions | 行动按钮的按钮显示配置 | Array | [] | |
|
||||
| cancelWithMask | 是否在点击背景时，关闭行动按钮 | Boolean | false | |
|
||||
| mask-class | 用于控制蒙层样式的外部类 | String | | |
|
||||
| container-class | 用于控制容器样式的外部类 | String | | |
|
||||
|
||||
actions 的具体数据结构
|
||||
```js
|
||||
@ -69,8 +84,6 @@ actions 的具体数据结构
|
||||
name: '选项1',
|
||||
// 按钮描述文案，不传就不显示
|
||||
subname: '选项描述语1',
|
||||
// 按钮特殊类，可以通过传入这个，为按钮增加特殊样式
|
||||
className: 'action-class',
|
||||
// 按钮是否显示为 loading
|
||||
loading: false,
|
||||
// 按钮的微信开放能力
|
||||
|
||||
@ -1,41 +1,36 @@
|
||||
const { extractComponentId } = require('../common/helper');
|
||||
|
||||
module.exports = {
|
||||
_handleZanActionsheetMaskClick({ currentTarget = {} }) {
|
||||
const dataset = currentTarget.dataset || {};
|
||||
const { componentId, closeOnClickOverlay } = dataset;
|
||||
|
||||
// 判断是否在点击背景时需要关闭弹层
|
||||
if (!closeOnClickOverlay) {
|
||||
return;
|
||||
Component({
|
||||
externalClasses: ['mask-class', 'container-class'],
|
||||
properties: {
|
||||
actions: {
|
||||
type: Array,
|
||||
value: []
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
cancelWithMask: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
|
||||
resolveCancelClick.call(this, { componentId });
|
||||
},
|
||||
|
||||
_handleZanActionsheetCancelBtnClick(e) {
|
||||
const componentId = extractComponentId(e);
|
||||
|
||||
resolveCancelClick.call(this, { componentId });
|
||||
},
|
||||
|
||||
_handleZanActionsheetBtnClick({ currentTarget = {} }) {
|
||||
const dataset = currentTarget.dataset || {};
|
||||
const { componentId, index } = dataset;
|
||||
|
||||
if (this.handleZanActionsheetClick) {
|
||||
this.handleZanActionsheetClick({ componentId, index });
|
||||
} else {
|
||||
console.warn('页面缺少 handleZanActionsheetClick 回调函数');
|
||||
methods: {
|
||||
onMaskClick() {
|
||||
if (this.data.cancelWithMask) {
|
||||
this.cancelClick();
|
||||
}
|
||||
},
|
||||
cancelClick() {
|
||||
this.triggerEvent('cancel');
|
||||
},
|
||||
handleBtnClick({ currentTarget = {} }) {
|
||||
const dataset = currentTarget.dataset || {};
|
||||
const { index } = dataset;
|
||||
this.triggerEvent('actionclick', { index });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function resolveCancelClick({ componentId }) {
|
||||
console.info('[zan:actionsheet:cancel]');
|
||||
if (this.handleZanActionsheetCancel) {
|
||||
this.handleZanActionsheetCancel({ componentId });
|
||||
} else {
|
||||
console.warn('页面缺少 handleZanActionsheetCancel 回调函数');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
6
packages/actionsheet/index.json
Normal file
6
packages/actionsheet/index.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"zan-btn": "../btn/index"
|
||||
}
|
||||
}
|
||||
@ -30,17 +30,31 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.zan-actionsheet__btn.zan-btn {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 0;
|
||||
|
||||
&::after {
|
||||
border-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.zan-actionsheet__btn {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.zan-actionsheet__footer .zan-actionsheet__btn {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.zan-actionsheet__btn-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.zan-actionsheet__subname {
|
||||
color: $gray-dark;
|
||||
}
|
||||
|
||||
.zan-actionsheet__subname,
|
||||
.zan-actionsheet__name {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
|
||||
.zan-actionsheet__btn.zan-btn:last-child {
|
||||
&::after {
|
||||
border-bottom-width: 0;
|
||||
@ -50,7 +64,6 @@
|
||||
.zan-actionsheet__subname {
|
||||
margin-left: 2px;
|
||||
font-size: 12px;
|
||||
color: $gray-darker;
|
||||
}
|
||||
|
||||
.zan-actionsheet__footer {
|
||||
@ -58,7 +71,7 @@
|
||||
}
|
||||
|
||||
/* btn-loading 状态 */
|
||||
.zan-actionsheet__btn.zan-btn--loading .zan-actionsheet__subname {
|
||||
.zan-actionsheet__btn--loading .zan-actionsheet__subname {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
|
||||
@ -1,40 +1,39 @@
|
||||
<template name="zan-actionsheet">
|
||||
<view class="zan-actionsheet {{ show ? 'zan-actionsheet--show' : '' }}">
|
||||
<view
|
||||
class="zan-actionsheet__mask"
|
||||
catchtap="_handleZanActionsheetMaskClick"
|
||||
data-close-on-click-overlay="{{ closeOnClickOverlay }}"
|
||||
data-component-id="{{ componentId }}"></view>
|
||||
<view class="zan-actionsheet__container">
|
||||
<!-- 实际按钮显示 -->
|
||||
<button
|
||||
wx:for="{{ actions }}"
|
||||
wx:for-index="index"
|
||||
wx:for-item="item"
|
||||
wx:key="{{ index }}-{{ item.name }}"
|
||||
catchtap="_handleZanActionsheetBtnClick"
|
||||
data-component-id="{{ componentId }}"
|
||||
data-index="{{ index }}"
|
||||
open-type="{{ item.openType }}"
|
||||
class="zan-btn zan-actionsheet__btn {{ item.loading ? 'zan-btn--loading' : '' }} {{ item.className }}"
|
||||
>
|
||||
<text>{{ item.name }}</text>
|
||||
<text
|
||||
<view class="zan-actionsheet {{ show ? 'zan-actionsheet--show' : '' }}">
|
||||
<view
|
||||
class="mask-class zan-actionsheet__mask"
|
||||
bindtap="onMaskClick"
|
||||
></view>
|
||||
<view class="container-class zan-actionsheet__container">
|
||||
<!-- 选项按钮 -->
|
||||
<zan-btn
|
||||
wx:for="{{ actions }}"
|
||||
wx:key="{{ index }}-{{ item.name }}"
|
||||
bind:btnclick="handleBtnClick"
|
||||
data-index="{{ index }}"
|
||||
open-type="{{ item.openType }}"
|
||||
custom-class="zan-actionsheet__btn"
|
||||
loading="{{ item.loading }}"
|
||||
>
|
||||
<!-- 自定义组件控制 slot 样式有问题，故在 slot 容器上传入 loading 信息 -->
|
||||
<view class="zan-actionsheet__btn-content {{ item.loading ? 'zan-actionsheet__btn--loading' : '' }}">
|
||||
<view class="zan-actionsheet__name">{{ item.name }}</view>
|
||||
<view
|
||||
wx:if="{{ item.subname }}"
|
||||
class="zan-actionsheet__subname">{{ item.subname }}</text>
|
||||
</button>
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<view
|
||||
wx:if="{{ cancelText }}"
|
||||
class="zan-actionsheet__footer"
|
||||
>
|
||||
<button
|
||||
class="zan-btn zan-actionsheet__btn"
|
||||
catchtap="_handleZanActionsheetCancelBtnClick"
|
||||
data-component-id="{{ componentId }}"
|
||||
>{{ cancelText }}</button>
|
||||
class="zan-actionsheet__subname">
|
||||
{{ item.subname }}
|
||||
</view>
|
||||
</view>
|
||||
</zan-btn>
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<view
|
||||
wx:if="{{ cancelText }}"
|
||||
class="zan-actionsheet__footer"
|
||||
>
|
||||
<zan-btn
|
||||
custom-class="zan-actionsheet__btn"
|
||||
catchtap="cancelClick"
|
||||
>{{ cancelText }}</zan-btn>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
@ -1,15 +1,33 @@
|
||||
## Badge 徽章
|
||||
|
||||
### 使用指南
|
||||
在 app.wxss 中引入组件库所有样式
|
||||
```css
|
||||
@import "path/to/zanui-weapp/dist/index.wxss";
|
||||
在 index.json 中引入组件
|
||||
```json
|
||||
{
|
||||
"usingComponents": {
|
||||
"zan-badge": "path/to/zanui-weapp/dist/badge/index"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
```html
|
||||
<view class="badge-container zan-badge">
|
||||
<view class="zan-badge__count">10</view>
|
||||
<view class="badge-container">
|
||||
<zan-badge>10</zan-badge>
|
||||
</view>
|
||||
```
|
||||
|
||||
#### 自定义参数
|
||||
```html
|
||||
<view class="badge-container">
|
||||
<zan-badge
|
||||
color="{{ color }}"
|
||||
background-color="{{ backgroundColor }}"
|
||||
font-size="{{ fontSize }}"
|
||||
box-shadow="{{ boxShadow }}"
|
||||
>10</zan-badge>
|
||||
</view>
|
||||
```
|
||||
|
||||
@ -19,3 +37,11 @@
|
||||
height: 100px;
|
||||
}
|
||||
```
|
||||
|
||||
### API
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----|-----|-----|-----|
|
||||
| color | 字体颜色 | String | `#fff`
|
||||
| background-color | 背景颜色 | String | `#f44`
|
||||
| font-size | 字体大小 | Number | 10
|
||||
| box-shadow | 为了更好的控制宽度，使用了box-shadow来实现badge的边框，可以根据box-shadow的语法自行修改颜色和宽度 | String | `0 0 0 2px #fff`
|
||||
|
||||
25
packages/badge/index.js
Normal file
25
packages/badge/index.js
Normal file
@ -0,0 +1,25 @@
|
||||
const DEFAULT_COLOR = '#fff';
|
||||
const DEFAULT_BACKGROUND_COLOR = '#f44';
|
||||
const DEFAULT_FONT_SIZE = 10;
|
||||
const DEFAULT_BOX_SHADOW = '0 0 0 2px #fff';
|
||||
|
||||
Component({
|
||||
properties: {
|
||||
color: {
|
||||
type: String,
|
||||
value: DEFAULT_COLOR
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
value: DEFAULT_BACKGROUND_COLOR
|
||||
},
|
||||
fontSize: {
|
||||
type: Number,
|
||||
value: DEFAULT_FONT_SIZE
|
||||
},
|
||||
boxShadow: {
|
||||
type: String,
|
||||
value: DEFAULT_BOX_SHADOW
|
||||
}
|
||||
}
|
||||
});
|
||||
3
packages/badge/index.json
Normal file
3
packages/badge/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@ -1,9 +1,9 @@
|
||||
.zan-badge {
|
||||
position: relative;
|
||||
}
|
||||
.zan-badge__count {
|
||||
.zan-badge__text {
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
top: -0.8em;
|
||||
right: 0px;
|
||||
height: 1.6em;
|
||||
min-width: 1.6em;
|
||||
@ -11,7 +11,7 @@
|
||||
padding: 0 .4em;
|
||||
font-size: 20px;
|
||||
border-radius: .8em;
|
||||
background: #FF4444;
|
||||
background: #f44;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
|
||||
8
packages/badge/index.wxml
Normal file
8
packages/badge/index.wxml
Normal file
@ -0,0 +1,8 @@
|
||||
<view class="zan-badge">
|
||||
<text
|
||||
class="zan-badge__text"
|
||||
style="color: {{ color }}; background-color: {{ backgroundColor }};font-size: {{ fontSize * 2 }}px; box-shadow: {{ boxShadow }};"
|
||||
>
|
||||
<slot></slot>
|
||||
</text>
|
||||
</view>
|
||||
@ -1,42 +1,60 @@
|
||||
## Button 按钮
|
||||
|
||||
### 使用指南
|
||||
在 app.wxss 中引入组件库所有样式
|
||||
```css
|
||||
@import "path/to/zanui-weapp/dist/index.wxss";
|
||||
在 json 文件中配置button组件
|
||||
```json
|
||||
"usingComponents": {
|
||||
"zan-button": "/dist/btn/index"
|
||||
}
|
||||
```
|
||||
|
||||
### 属性
|
||||
|
||||
| 名称 | 类型 | 是否必须 | 默认 | 描述 |
|
||||
|---------|---------|----------|------|-------|
|
||||
| type | String | 否 | 空 | 按钮类型，值有primary、warn、danger |
|
||||
| size | String | 否 | 空 | 按钮大小，值有large、small、mini |
|
||||
| plain | Boolean | 否 | false | 按钮是否镂空，默认为false |
|
||||
| disabled | Boolean | 否 | false | 按钮是否禁用，默认为false |
|
||||
| loading | Boolean | 否 | false | 按钮加载状态，默认为false |
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
```html
|
||||
<button class="zan-btn">取消订单</button>
|
||||
<zan-button>取消订单</zan-button>
|
||||
```
|
||||
|
||||
#### 按钮类型
|
||||
按钮支持额外的三种类型 primary, danger, warn
|
||||
```html
|
||||
<button class="zan-btn zan-btn--primary">确认付款</button>
|
||||
<button class="zan-btn zan-btn--danger">确认付款</button>
|
||||
<button class="zan-btn zan-btn--warn">确认付款</button>
|
||||
<zan-button type="primary">确认付款</zan-button>
|
||||
<zan-button type="danger">确认付款</zan-button>
|
||||
<zan-button type="warn">确认付款</zan-button>
|
||||
```
|
||||
|
||||
#### 按钮大小
|
||||
按钮支持额外三种大小 large, small, mini
|
||||
```html
|
||||
<button class="zan-btn zan-btn--large">确认付款</button>
|
||||
<button class="zan-btn zan-btn--small">取消订单</button>
|
||||
<button class="zan-btn zan-btn--mini">确认付款</button>
|
||||
<zan-button type="large">确认付款</zan-button>
|
||||
<zan-button type="small">取消订单</zan-button>
|
||||
<zan-button type="mini">确认付款</zan-button>
|
||||
```
|
||||
|
||||
#### 其他
|
||||
按钮支持镂空状态，可以直接使用 zan-btn--plain
|
||||
按钮镂空状态
|
||||
```html
|
||||
<button class="zan-btn zan-btn--primary zan-btn--plain">确认付款</button>
|
||||
<zan-button plain>确认付款</zan-button>
|
||||
```
|
||||
同时支持加载状态，可以使用 zan-btn--loading 获得
|
||||
|
||||
按钮加载状态
|
||||
```html
|
||||
<button class="zan-btn zan-btn--loading">确认付款</button>
|
||||
<zan-button loading>确认付款</zan-button>
|
||||
```
|
||||
|
||||
按钮禁用状态
|
||||
```html
|
||||
<zan-button disabled>确认付款</zan-button>
|
||||
```
|
||||
|
||||
|
||||
|
||||
35
packages/btn/index.js
Normal file
35
packages/btn/index.js
Normal file
@ -0,0 +1,35 @@
|
||||
|
||||
Component({
|
||||
externalClasses: ['custom-class'],
|
||||
properties: {
|
||||
type: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
plain: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
openType: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleTap() {
|
||||
this.triggerEvent('btnclick');
|
||||
}
|
||||
}
|
||||
});
|
||||
3
packages/btn/index.json
Normal file
3
packages/btn/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@ -15,6 +15,7 @@
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
overflow: visible;
|
||||
}
|
||||
.zan-btn::after {
|
||||
@mixin hairline;
|
||||
@ -150,9 +151,5 @@
|
||||
}
|
||||
|
||||
/* :last-child */
|
||||
.zan-btn--last-child,
|
||||
.zan-btn:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
8
packages/btn/index.wxml
Normal file
8
packages/btn/index.wxml
Normal file
@ -0,0 +1,8 @@
|
||||
<button
|
||||
class="custom-class zan-btn {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{plain ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
|
||||
disabled="{{ disabled }}"
|
||||
open-type="{{ openType }}"
|
||||
bindtap="handleTap"
|
||||
>
|
||||
<slot></slot>
|
||||
</button>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user