mirror of
https://github.com/ant-design/ant-design-mini.git
synced 2024-10-23 08:44:21 +08:00
Refactor dev build (#1248)
* feat: add axml transform script * feat: add axml transform script * feat: 条件编译 * feat: 注释全部删掉 * feat: axml编译逻辑抽插件 * feat: axml编译逻辑抽插件 * feat: axml编译逻辑抽插件 * feat: axml编译逻辑抽插件 * feat: axml编译逻辑抽插件 * feat: nextCompiled拷贝compiled提交 * feat: nextCompiled拷贝compiled提交 * feat: nextCompiled拷贝compiled提交 * feat: 支付宝产物输出 * feat: 微信编译配置调整 * feat: 调整源代码文件目录 * feat: 调整源代码文件目录 * feat: 调整源代码文件目录 * feat: 调整demo代码文件目录 * feat: 调整demo代码文件目录 * feat: 调整demo代码文件目录 * feat: 调整demo代码文件目录 * feat: dev编译目录调整 * feat: dev编译目录调整 * feat: 编译代码 * feat: 编译代码 * feat: 删除demo文件夹中axmltsx * feat: 删除demo文件夹中axmltsx * feat: 编译微信代码 * feat: 条件编译走gulp * feat: ActionSheet、Avatar、Badge编译 * feat: axml 测试用例 * feat: demo目录条件编译 * feat: button、calendar条件编译调整 * feat: checklist、checkbox条件编译调整 * feat: form组件条件编译调整 * feat: 剩余组件组件条件编译调整 * feat: 剩余组件组件条件编译调整 * feat: 剩余组件组件条件编译调整 * fix: input、textarea视为基础组件 * fix: axml 编译class问题修复 * fix: axml 编译class问题修复 * fix: classname问题修复 * feat: axml-transverter单独发包 * feat: 去掉以前的源码和demo代码 * feat: badge微信适配text属性 * feat: a:key改key * feat: 支持自定义属性编译 * feat: template标签上写a:if会导致编译时丢弃掉 * feat: picker的demo问题修复 * fix: 微信修复stepper受控展示时的初始化问题 * feat: 微信事件编译调整 * feat: lodash依赖去除,兼容适配微信 * feat: popover微信适配 * feat: 修改依赖axml-transverter * feat: build编译脚本完善 * feat: build编译脚本完善 * fix: 修复slot属性dash形式无法被构建问题 * fix: 修复slot属性dash形式无法被构建问题 * feat: 去掉srcBack文件夹,将tsxml相关的src文件全部删除
This commit is contained in:
parent
e73d228996
commit
71d4e2b66f
3
.gitignore
vendored
3
.gitignore
vendored
@ -37,4 +37,7 @@ project.private.config.json
|
||||
compiled/wechat/miniprogram_npm
|
||||
compiled/wechat/node_modules
|
||||
compiled/wechat/yarn.lock
|
||||
compiledBackup/wechat/miniprogram_npm
|
||||
compiledBackup/wechat/node_modules
|
||||
compiledBackup/wechat/yarn.lock
|
||||
knowledge.json
|
||||
|
@ -1,48 +1,54 @@
|
||||
<ant-container title="基础用法">
|
||||
<ant-button
|
||||
onTap="handleOpenBasic"
|
||||
inline="{{ true }}"
|
||||
inline="{{true}}"
|
||||
size="large"
|
||||
data-index="1">
|
||||
data-index="1"
|
||||
>
|
||||
基础用法
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
<ant-container title="选项状态">
|
||||
<ant-button
|
||||
onTap="handleOpenBasic"
|
||||
inline="{{ true }}"
|
||||
inline="{{true}}"
|
||||
size="large"
|
||||
data-index="2">
|
||||
data-index="2"
|
||||
>
|
||||
危险状态&禁用状态
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
<ant-container title="带注释及icon">
|
||||
<ant-button
|
||||
onTap="handleOpenBasic"
|
||||
inline="{{ true }}"
|
||||
inline="{{true}}"
|
||||
size="large"
|
||||
data-index="3">
|
||||
data-index="3"
|
||||
>
|
||||
带注释及icon
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
<ant-action-sheet
|
||||
title="请选择你要进行的操作"
|
||||
visible="{{ visible1 }}"
|
||||
actions="{{ actions1 }}"
|
||||
visible="{{visible1}}"
|
||||
actions="{{actions1}}"
|
||||
data-index="1"
|
||||
onAction="handleAction"
|
||||
onClose="handleCloseBasic" />
|
||||
onClose="handleCloseBasic"
|
||||
></ant-action-sheet>
|
||||
<ant-action-sheet
|
||||
title="请选择你要进行的操作"
|
||||
visible="{{ visible2 }}"
|
||||
actions="{{ actions2 }}"
|
||||
visible="{{visible2}}"
|
||||
actions="{{actions2}}"
|
||||
data-index="2"
|
||||
onAction="handleAction"
|
||||
onClose="handleCloseBasic" />
|
||||
onClose="handleCloseBasic"
|
||||
></ant-action-sheet>
|
||||
<ant-action-sheet
|
||||
title="请选择你要进行的操作"
|
||||
visible="{{ visible3 }}"
|
||||
actions="{{ actions3 }}"
|
||||
visible="{{visible3}}"
|
||||
actions="{{actions3}}"
|
||||
data-index="3"
|
||||
onAction="handleAction"
|
||||
onClose="handleCloseBasic" />
|
||||
onClose="handleCloseBasic"
|
||||
></ant-action-sheet>
|
@ -1,45 +1,47 @@
|
||||
<ant-container title="基础用法-四种尺寸">
|
||||
<block
|
||||
a:for="{{ images }}"
|
||||
a:for-index="index"
|
||||
a:for-item="item">
|
||||
<ant-avatar
|
||||
src="{{ item }}"
|
||||
className="avatar" />
|
||||
</block>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="占位头像">
|
||||
<ant-avatar size="{{ item }}" />
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="不同大小">
|
||||
<block
|
||||
a:for="{{ sizes }}"
|
||||
a:for="{{images}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item"
|
||||
a:key="{{ item }}">
|
||||
>
|
||||
<ant-avatar
|
||||
size="{{ item }}"
|
||||
src="{{ images[0] }}"
|
||||
className="avatar" />
|
||||
src="{{item}}"
|
||||
className="avatar"
|
||||
></ant-avatar>
|
||||
</block>
|
||||
</ant-container>
|
||||
<ant-container title="占位头像">
|
||||
<ant-avatar size="{{item}}"></ant-avatar>
|
||||
</ant-container>
|
||||
<ant-container title="不同大小">
|
||||
<block
|
||||
a:for="{{sizes}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item"
|
||||
>
|
||||
<ant-avatar
|
||||
size="{{item}}"
|
||||
src="{{images[0]}}"
|
||||
className="avatar"
|
||||
></ant-avatar>
|
||||
</block>
|
||||
</ant-container>
|
||||
|
||||
<ant-container
|
||||
title="配合列表使用"
|
||||
className="container">
|
||||
className="container"
|
||||
>
|
||||
<ant-list-item brief="Deserunt dolor ea eaque eos">
|
||||
Novalee Spicer
|
||||
<ant-avatar
|
||||
slot="image"
|
||||
src="{{ images[0] }}" />
|
||||
src="{{images[0]}}"
|
||||
></ant-avatar>
|
||||
</ant-list-item>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="自定义">
|
||||
<ant-avatar
|
||||
size="{{ item }}"
|
||||
src="{{ images[0] }}"
|
||||
className="avatar-custom" />
|
||||
</ant-container>
|
||||
size="{{item}}"
|
||||
src="{{images[0]}}"
|
||||
className="avatar-custom"
|
||||
></ant-avatar>
|
||||
</ant-container>
|
@ -2,150 +2,166 @@
|
||||
<view class="badge-list">
|
||||
<ant-badge
|
||||
type="dot"
|
||||
position="top-right">
|
||||
<view class="box" />
|
||||
position="top-right"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
<ant-badge
|
||||
type="text"
|
||||
text="新"
|
||||
position="top-right">
|
||||
<view class="box" />
|
||||
position="top-right"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
<ant-badge
|
||||
type="number"
|
||||
text="{{ 2 }}"
|
||||
position="top-right">
|
||||
<view class="box" />
|
||||
text="{{2}}"
|
||||
position="top-right"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
<ant-badge
|
||||
type="number"
|
||||
text="{{ 100 }}"
|
||||
position="top-right">
|
||||
<view class="box" />
|
||||
text="{{100}}"
|
||||
position="top-right"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
<ant-badge
|
||||
type="bubble"
|
||||
text="new"
|
||||
position="top-right">
|
||||
<view class="box" />
|
||||
position="top-right"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
</view>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="带边框">
|
||||
<view class="badge-list">
|
||||
<ant-badge
|
||||
type="dot"
|
||||
stroke
|
||||
position="top-right">
|
||||
<view class="box" />
|
||||
position="top-right"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
<ant-badge
|
||||
type="text"
|
||||
text="新"
|
||||
stroke
|
||||
position="top-right">
|
||||
<view class="box" />
|
||||
position="top-right"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
<ant-badge
|
||||
type="number"
|
||||
text="{{ 1 }}"
|
||||
text="{{1}}"
|
||||
stroke
|
||||
position="top-right">
|
||||
<view class="box" />
|
||||
position="top-right"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
<ant-badge
|
||||
type="number"
|
||||
text="{{ 100 }}"
|
||||
text="{{100}}"
|
||||
stroke
|
||||
position="top-right">
|
||||
<view class="box" />
|
||||
position="top-right"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
<ant-badge
|
||||
type="bubble"
|
||||
text="new"
|
||||
stroke
|
||||
position="top-right">
|
||||
<view class="box" />
|
||||
position="top-right"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
</view>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="自定义背景和位置">
|
||||
<view class="badge-list">
|
||||
<ant-badge
|
||||
type="number"
|
||||
text="{{ 1 }}"
|
||||
position="top-left">
|
||||
<view class="box" />
|
||||
text="{{1}}"
|
||||
position="top-left"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
<ant-badge
|
||||
type="bubble"
|
||||
text="1"
|
||||
position="bottom-right">
|
||||
<view class="box" />
|
||||
position="bottom-right"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
<ant-badge
|
||||
type="number"
|
||||
text="{{ 100 }}"
|
||||
text="{{100}}"
|
||||
stroke
|
||||
bgColor="#1677FF">
|
||||
<view class="box" />
|
||||
bgColor="#1677FF"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
<ant-badge
|
||||
type="text"
|
||||
text="new"
|
||||
bgColor="#FF9F18"
|
||||
position="top-center">
|
||||
<view class="box" />
|
||||
position="top-center"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
<ant-badge
|
||||
type="bubble"
|
||||
text="new"
|
||||
stroke
|
||||
bgColor="#34B368">
|
||||
<view class="box" />
|
||||
bgColor="#34B368"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
</view>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="设置偏移">
|
||||
<view class="badge-list">
|
||||
<ant-badge
|
||||
type="text"
|
||||
text="1"
|
||||
offsetX="-20px"
|
||||
offsetY="0px">
|
||||
<view class="box" />
|
||||
offsetY="0px"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
<ant-badge
|
||||
type="text"
|
||||
text="1"
|
||||
position="bottom-right"
|
||||
offsetX="-20px"
|
||||
offsetY="-14px">
|
||||
<view class="box" />
|
||||
offsetY="-14px"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
<ant-badge
|
||||
type="bubble"
|
||||
text="new"
|
||||
position="top-right"
|
||||
offsetX="2px"
|
||||
offsetY="-8px">
|
||||
<view class="box" />
|
||||
offsetY="-8px"
|
||||
>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
</view>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="自定义内容">
|
||||
<view class="badge-list">
|
||||
<ant-badge
|
||||
type="text"
|
||||
position="top-right">
|
||||
position="top-right"
|
||||
>
|
||||
<ant-icon
|
||||
type="GlobalOutline"
|
||||
slot="text" />
|
||||
<view class="box" />
|
||||
slot="text"
|
||||
></ant-icon>
|
||||
<view class="box"></view>
|
||||
</ant-badge>
|
||||
</view>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,115 +1,121 @@
|
||||
<ant-container
|
||||
title="按钮类型"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
|
||||
<ant-button
|
||||
type="default"
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
次要按钮
|
||||
</ant-button>
|
||||
|
||||
<ant-button
|
||||
type="text"
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
文本按钮
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
|
||||
<ant-container
|
||||
title="带辅助文案按钮"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
type="primary"
|
||||
subText="副标题"
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
|
||||
<ant-button
|
||||
type="default"
|
||||
subText="副标题"
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
次要按钮
|
||||
</ant-button>
|
||||
|
||||
<ant-button
|
||||
type="text"
|
||||
subText="副标题"
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
文本按钮
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
|
||||
<ant-container
|
||||
title="禁用"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
type="primary"
|
||||
disabled>
|
||||
disabled
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
|
||||
<ant-button
|
||||
type="default"
|
||||
disabled>
|
||||
disabled
|
||||
>
|
||||
次要按钮
|
||||
</ant-button>
|
||||
|
||||
<ant-button
|
||||
type="text"
|
||||
disabled>
|
||||
disabled
|
||||
>
|
||||
文本按钮
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
|
||||
<ant-container
|
||||
title="加载状态"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
type="primary"
|
||||
loading>
|
||||
loading
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
|
||||
<ant-button
|
||||
type="default"
|
||||
loading>
|
||||
loading
|
||||
>
|
||||
次要按钮
|
||||
</ant-button>
|
||||
|
||||
<ant-button
|
||||
type="text"
|
||||
loading>
|
||||
loading
|
||||
>
|
||||
文本
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
|
||||
<ant-container
|
||||
title="危险"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
type="primary"
|
||||
danger
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
|
||||
<ant-button
|
||||
type="default"
|
||||
danger
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
次要按钮
|
||||
</ant-button>
|
||||
|
||||
<ant-button
|
||||
type="text"
|
||||
danger
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
文本按钮
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,11 +1,13 @@
|
||||
<ant-container
|
||||
title="自定义大小"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
type="primary"
|
||||
icon="SmileOutline"
|
||||
onTap="handleTap"
|
||||
className="btn">
|
||||
className="btn"
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
@ -13,7 +15,8 @@
|
||||
onTap="handleTap"
|
||||
icon="SmileOutline"
|
||||
className="btn"
|
||||
inline>
|
||||
inline
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
@ -22,20 +25,22 @@
|
||||
icon="ForbidFill"
|
||||
className="btn"
|
||||
inline
|
||||
danger>
|
||||
danger
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
|
||||
<ant-container
|
||||
title="round"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
type="primary"
|
||||
icon="SearchOutline"
|
||||
onTap="handleTap"
|
||||
inline
|
||||
className="round">
|
||||
className="round"
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
@ -43,36 +48,41 @@
|
||||
onTap="handleTap"
|
||||
inline
|
||||
danger
|
||||
className="round">
|
||||
className="round"
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
|
||||
<ant-container
|
||||
title="circle"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
type="primary"
|
||||
icon="SearchOutline"
|
||||
onTap="handleTap"
|
||||
inline
|
||||
className="circle" />
|
||||
className="circle"
|
||||
></ant-button>
|
||||
<ant-button
|
||||
icon="SearchOutline"
|
||||
onTap="handleTap"
|
||||
inline
|
||||
className="circle" />
|
||||
className="circle"
|
||||
></ant-button>
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="handleTap"
|
||||
inline
|
||||
className="circle">
|
||||
className="circle"
|
||||
>
|
||||
A
|
||||
</ant-button>
|
||||
<ant-button
|
||||
onTap="handleTap"
|
||||
inline
|
||||
className="circle">
|
||||
className="circle"
|
||||
>
|
||||
A
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,35 +1,41 @@
|
||||
<ant-container title="icon">
|
||||
<ant-button
|
||||
type="primary"
|
||||
icon="SmileOutline">
|
||||
icon="SmileOutline"
|
||||
>
|
||||
Icon
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="default"
|
||||
icon="SmileOutline">
|
||||
icon="SmileOutline"
|
||||
>
|
||||
Icon
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="text"
|
||||
icon="SmileOutline">
|
||||
icon="SmileOutline"
|
||||
>
|
||||
Icon
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="primary"
|
||||
danger
|
||||
icon="ForbidFill">
|
||||
icon="ForbidFill"
|
||||
>
|
||||
Icon
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="default"
|
||||
danger
|
||||
icon="ForbidFill">
|
||||
icon="ForbidFill"
|
||||
>
|
||||
Icon
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="text"
|
||||
danger
|
||||
icon="ForbidFill">
|
||||
icon="ForbidFill"
|
||||
>
|
||||
Icon
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
@ -38,21 +44,24 @@
|
||||
type="primary"
|
||||
icon="SmileOutline"
|
||||
inline
|
||||
size="large">
|
||||
size="large"
|
||||
>
|
||||
Icon
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="primary"
|
||||
icon="SmileOutline"
|
||||
inline
|
||||
size="medium">
|
||||
size="medium"
|
||||
>
|
||||
Icon
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="primary"
|
||||
icon="SmileOutline"
|
||||
inline
|
||||
size="small">
|
||||
size="small"
|
||||
>
|
||||
Icon
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
@ -62,7 +71,8 @@
|
||||
icon="ForbidFill"
|
||||
inline
|
||||
danger
|
||||
size="large">
|
||||
size="large"
|
||||
>
|
||||
Icon
|
||||
</ant-button>
|
||||
<ant-button
|
||||
@ -70,7 +80,8 @@
|
||||
icon="ForbidFill"
|
||||
inline
|
||||
danger
|
||||
size="medium">
|
||||
size="medium"
|
||||
>
|
||||
Icon
|
||||
</ant-button>
|
||||
<ant-button
|
||||
@ -78,7 +89,8 @@
|
||||
icon="ForbidFill"
|
||||
inline
|
||||
danger
|
||||
size="small">
|
||||
size="small"
|
||||
>
|
||||
Icon
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
@ -88,7 +100,8 @@
|
||||
icon="SmileOutline"
|
||||
onTap="handleTap"
|
||||
inline
|
||||
loading>
|
||||
loading
|
||||
>
|
||||
loading
|
||||
</ant-button>
|
||||
<ant-button
|
||||
@ -97,14 +110,16 @@
|
||||
onTap="handleTap"
|
||||
inline
|
||||
danger
|
||||
loading>
|
||||
loading
|
||||
>
|
||||
loading
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="primary"
|
||||
icon="SmileOutline"
|
||||
onTap="handleTap"
|
||||
loading>
|
||||
loading
|
||||
>
|
||||
loading
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
@ -114,7 +129,8 @@
|
||||
icon="SmileOutline"
|
||||
onTap="handleTap"
|
||||
inline
|
||||
disabled>
|
||||
disabled
|
||||
>
|
||||
disabled
|
||||
</ant-button>
|
||||
<ant-button
|
||||
@ -123,14 +139,16 @@
|
||||
onTap="handleTap"
|
||||
inline
|
||||
danger
|
||||
disabled>
|
||||
disabled
|
||||
>
|
||||
disabled
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="primary"
|
||||
icon="SmileOutline"
|
||||
onTap="handleTap"
|
||||
disabled>
|
||||
disabled
|
||||
>
|
||||
disabled
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,116 +1,136 @@
|
||||
<ant-container
|
||||
title="按钮类型"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
type="primary"
|
||||
inline
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="default"
|
||||
inline
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
次要按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="text"
|
||||
inline
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
文本按钮
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
<ant-container
|
||||
title="按钮尺寸"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
type="primary"
|
||||
inline
|
||||
size="large"
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="primary"
|
||||
inline
|
||||
size="medium"
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="primary"
|
||||
inline
|
||||
size="small"
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
<ant-container
|
||||
title="危险"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
type="primary"
|
||||
inline
|
||||
danger
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="default"
|
||||
inline
|
||||
danger
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
次要按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="text"
|
||||
inline
|
||||
danger
|
||||
onTap="handleTap">
|
||||
onTap="handleTap"
|
||||
>
|
||||
文本按钮
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
<ant-container
|
||||
title="禁用"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
type="primary"
|
||||
inline
|
||||
disabled>
|
||||
disabled
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="default"
|
||||
inline
|
||||
disabled>
|
||||
disabled
|
||||
>
|
||||
次要按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="text"
|
||||
inline
|
||||
disabled>
|
||||
disabled
|
||||
>
|
||||
文本按钮
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
<ant-container
|
||||
title="加载状态"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
type="primary"
|
||||
inline
|
||||
loading>
|
||||
loading
|
||||
>
|
||||
主要按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="default"
|
||||
inline
|
||||
loading>
|
||||
loading
|
||||
>
|
||||
次要按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="text"
|
||||
inline
|
||||
loading>
|
||||
loading
|
||||
>
|
||||
文本
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,4 +1,3 @@
|
||||
<view
|
||||
class="cn-day {{ festival ? 'festival' : '' }} {{ unset ? 'unset' : '' }}">
|
||||
{{ cnday }}
|
||||
</view>
|
||||
<view class="cn-day {{festival ? 'festival' : ''}} {{unset ? 'unset' : ''}}">
|
||||
{{cnday}}
|
||||
</view>
|
@ -1,20 +1,22 @@
|
||||
<ant-container title="{{ containerTitle }}">
|
||||
<ant-container title="{{containerTitle}}">
|
||||
<view
|
||||
slot="headerRight"
|
||||
onTap="handleToggle"
|
||||
data-id="demo1">
|
||||
<!-- display: inline -->
|
||||
<text a:if="{{ !collapse }}">收起</text>
|
||||
<!-- display: inline -->
|
||||
data-id="demo1"
|
||||
>
|
||||
<!--display: inline-->
|
||||
<text a:if="{{!collapse}}">收起</text>
|
||||
<!--display: inline-->
|
||||
<text a:else>展示</text>
|
||||
</view>
|
||||
<view a:if="{{ !collapse }}">
|
||||
<slot name="content" />
|
||||
<view a:if="{{!collapse}}">
|
||||
<slot name="content"></slot>
|
||||
</view>
|
||||
<view
|
||||
a:else
|
||||
onTap="handleToggle">
|
||||
<slot name="description" />
|
||||
onTap="handleToggle"
|
||||
>
|
||||
<slot name="description"></slot>
|
||||
<view class="placeholder">展示</view>
|
||||
</view>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,134 +1,150 @@
|
||||
<collapse-container
|
||||
a:if="{{ demo1.visible }}"
|
||||
title="默认多选,范围 3 个月">
|
||||
a:if="{{demo1.visible}}"
|
||||
title="默认多选,范围 3 个月"
|
||||
>
|
||||
<view
|
||||
slot="content"
|
||||
style="height: 1000rpx">
|
||||
<ant-calendar defaultValue="{{ demo1.defaultValue }}" />
|
||||
style="height: 1000rpx"
|
||||
>
|
||||
<ant-calendar defaultValue="{{demo1.defaultValue}}"></ant-calendar>
|
||||
</view>
|
||||
</collapse-container>
|
||||
|
||||
<collapse-container
|
||||
a:if="{{ demo2.visible }}"
|
||||
title="单选">
|
||||
a:if="{{demo2.visible}}"
|
||||
title="单选"
|
||||
>
|
||||
<view
|
||||
slot="content"
|
||||
style="height: 1000rpx">
|
||||
style="height: 1000rpx"
|
||||
>
|
||||
<ant-calendar
|
||||
selectionMode="single"
|
||||
defaultValue="{{ demo2.defaultValue }}"
|
||||
changedScrollIntoView />
|
||||
defaultValue="{{demo2.defaultValue}}"
|
||||
changedScrollIntoView
|
||||
></ant-calendar>
|
||||
</view>
|
||||
</collapse-container>
|
||||
|
||||
<collapse-container
|
||||
a:if="{{ demo3.visible }}"
|
||||
title="自定义日历顶部">
|
||||
a:if="{{demo3.visible}}"
|
||||
title="自定义日历顶部"
|
||||
>
|
||||
<view slot="content">
|
||||
<view class="custom-header">
|
||||
<view
|
||||
onTap="demo3PreviousMonth"
|
||||
class="custom-header-left">
|
||||
<ant-icon type="LeftOutline" />
|
||||
class="custom-header-left"
|
||||
>
|
||||
<ant-icon type="LeftOutline"></ant-icon>
|
||||
上个月
|
||||
</view>
|
||||
<view>{{ demo3.title }}</view>
|
||||
<view>{{demo3.title}}</view>
|
||||
<view
|
||||
onTap="demo3NextMonth"
|
||||
class="custom-header-right">
|
||||
class="custom-header-right"
|
||||
>
|
||||
下个月
|
||||
<ant-icon type="RightOutline" />
|
||||
<ant-icon type="RightOutline"></ant-icon>
|
||||
</view>
|
||||
</view>
|
||||
<ant-calendar monthRange="{{ demo3.monthRange }}">
|
||||
<view slot="calendarTitle" />
|
||||
<ant-calendar monthRange="{{demo3.monthRange}}">
|
||||
<view slot="calendarTitle"></view>
|
||||
</ant-calendar>
|
||||
</view>
|
||||
</collapse-container>
|
||||
|
||||
<collapse-container
|
||||
a:if="{{ demo8.visible }}"
|
||||
title="自定义日期单元格">
|
||||
a:if="{{demo8.visible}}"
|
||||
title="自定义日期单元格"
|
||||
>
|
||||
<view slot="content">
|
||||
<ant-calendar
|
||||
monthRange="{{ demo8.monthRange }}"
|
||||
onFormatter="{{ demo8Formatter ? demo8Formatter : 'demo8Formatter' }}"
|
||||
onMonthFormatter="{{ demo8MonthFormatter ? demo8MonthFormatter : 'demo8MonthFormatter' }}" />
|
||||
monthRange="{{demo8.monthRange}}"
|
||||
onFormatter="{{demo8Formatter ? demo8Formatter : 'demo8Formatter'}}"
|
||||
onMonthFormatter="{{demo8MonthFormatter ? demo8MonthFormatter : 'demo8MonthFormatter'}}"
|
||||
></ant-calendar>
|
||||
</view>
|
||||
</collapse-container>
|
||||
|
||||
<collapse-container
|
||||
a:if="{{ demo4.visible }}"
|
||||
title="动态控制,只允许选择前后三天">
|
||||
a:if="{{demo4.visible}}"
|
||||
title="动态控制,只允许选择前后三天"
|
||||
>
|
||||
<view slot="content">
|
||||
<ant-calendar
|
||||
monthRange="{{ demo4.monthRange }}"
|
||||
onFormatter="{{ demoFormatter ? demoFormatter : 'demoFormatter' }}" />
|
||||
monthRange="{{demo4.monthRange}}"
|
||||
onFormatter="{{demoFormatter ? demoFormatter : 'demoFormatter'}}"
|
||||
></ant-calendar>
|
||||
</view>
|
||||
</collapse-container>
|
||||
|
||||
<collapse-container
|
||||
a:if="{{ demo5.visible }}"
|
||||
title="从周一开始">
|
||||
a:if="{{demo5.visible}}"
|
||||
title="从周一开始"
|
||||
>
|
||||
<view
|
||||
slot="content"
|
||||
style="height: 1000rpx">
|
||||
<ant-calendar weekStartsOn="Monday" />
|
||||
style="height: 1000rpx"
|
||||
>
|
||||
<ant-calendar weekStartsOn="Monday"></ant-calendar>
|
||||
</view>
|
||||
</collapse-container>
|
||||
|
||||
<collapse-container
|
||||
a:if="{{ demo6.visible }}"
|
||||
title="通过 slot 实现农历">
|
||||
a:if="{{demo6.visible}}"
|
||||
title="通过 slot 实现农历"
|
||||
>
|
||||
<view slot="content">
|
||||
<ant-calendar monthRange="{{ demo6.monthRange }}">
|
||||
<ant-calendar monthRange="{{demo6.monthRange}}">
|
||||
<view
|
||||
slot="cell-bottom"
|
||||
slot-scope="prop">
|
||||
<cn-day cell="{{ prop.cell }}" />
|
||||
slot-scope="prop"
|
||||
>
|
||||
<cn-day cell="{{prop.cell}}"></cn-day>
|
||||
</view>
|
||||
</ant-calendar>
|
||||
</view>
|
||||
</collapse-container>
|
||||
|
||||
<collapse-container
|
||||
a:if="{{ demo7.visible }}"
|
||||
title="国际化">
|
||||
a:if="{{demo7.visible}}"
|
||||
title="国际化"
|
||||
>
|
||||
<view slot="content">
|
||||
<ant-calendar
|
||||
monthRange="{{ demo7.monthRange }}"
|
||||
localeText="{{ demo7.localeText }}" />
|
||||
monthRange="{{demo7.monthRange}}"
|
||||
localeText="{{demo7.localeText}}"
|
||||
></ant-calendar>
|
||||
</view>
|
||||
</collapse-container>
|
||||
|
||||
<collapse-container
|
||||
a:if="{{ demo9.visible }}"
|
||||
title="受控模式">
|
||||
a:if="{{demo9.visible}}"
|
||||
title="受控模式"
|
||||
>
|
||||
<view
|
||||
slot="content"
|
||||
style="height: 1000rpx">
|
||||
style="height: 1000rpx"
|
||||
>
|
||||
<ant-calendar
|
||||
ref="handleRef"
|
||||
value="{{ demo9.value }}"
|
||||
value="{{demo9.value}}"
|
||||
onChange="demo9HandleChange"
|
||||
selectionMode="single"
|
||||
changedScrollIntoView />
|
||||
changedScrollIntoView
|
||||
></ant-calendar>
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="demo9HandlePreviousDay">
|
||||
onTap="demo9HandlePreviousDay"
|
||||
>
|
||||
上一天
|
||||
</ant-button>
|
||||
<ant-button
|
||||
style="margin-top: 8rpx"
|
||||
type="primary"
|
||||
onTap="demo9HandleNextDay">
|
||||
onTap="demo9HandleNextDay"
|
||||
>
|
||||
下一天
|
||||
</ant-button>
|
||||
<ant-button
|
||||
style="margin-top: 8rpx"
|
||||
type="primary"
|
||||
onTap="demo9HandleScrollIntoView">
|
||||
onTap="demo9HandleScrollIntoView"
|
||||
>
|
||||
滚动到指定日期
|
||||
</ant-button>
|
||||
</view>
|
||||
</collapse-container>
|
||||
</collapse-container>
|
@ -4,72 +4,75 @@
|
||||
<ant-cascader-picker
|
||||
slot="extra"
|
||||
placeholder="请选择归属地"
|
||||
options="{{ cityList }}"
|
||||
options="{{cityList}}"
|
||||
onChange="handleCityPickerChange"
|
||||
onOk="handleCityOnOk"
|
||||
onCancel="handleDismiss" />
|
||||
onCancel="handleDismiss"
|
||||
></ant-cascader-picker>
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
|
||||
<ant-list header="默认值">
|
||||
<ant-list-item>
|
||||
请选择城市
|
||||
<ant-cascader-picker
|
||||
slot="extra"
|
||||
defaultValue="{{ ['34', '330'] }}"
|
||||
defaultValue="{{['34', '330']}}"
|
||||
placeholder="请选择城市"
|
||||
options="{{ cityList }}"
|
||||
options="{{cityList}}"
|
||||
onChange="handleCityPickerChange"
|
||||
onOk="handleCityOnOk" />
|
||||
onOk="handleCityOnOk"
|
||||
></ant-cascader-picker>
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
|
||||
<ant-list header="受控模式">
|
||||
<ant-list-item>
|
||||
请选择城市
|
||||
<ant-cascader-picker
|
||||
slot="extra"
|
||||
value="{{ value }}"
|
||||
value="{{value}}"
|
||||
placeholder="请选择城市"
|
||||
options="{{ cityList }}"
|
||||
options="{{cityList}}"
|
||||
onChange="handleCityPickerChange"
|
||||
onOk="handleOk" />
|
||||
onOk="handleOk"
|
||||
></ant-cascader-picker>
|
||||
</ant-list-item>
|
||||
<view class="btn-wrapper">
|
||||
<ant-button
|
||||
inline
|
||||
onTap="handleChangeControlled"
|
||||
style="margin-right: 8px">
|
||||
style="margin-right: 8px"
|
||||
>
|
||||
选择上海
|
||||
</ant-button>
|
||||
<ant-button
|
||||
inline
|
||||
onTap="handleClearControlled">
|
||||
onTap="handleClearControlled"
|
||||
>
|
||||
清空
|
||||
</ant-button>
|
||||
</view>
|
||||
</ant-list>
|
||||
|
||||
<ant-container style="margin-top: 20rpx">
|
||||
<ant-list header="外部控制选择器是否显示">
|
||||
<ant-list-item>
|
||||
请选择省市
|
||||
<ant-cascader-picker
|
||||
slot="extra"
|
||||
visible="{{ pickerVisible }}"
|
||||
visible="{{pickerVisible}}"
|
||||
placeholder="请选择归属地"
|
||||
options="{{ cityList }}"
|
||||
options="{{cityList}}"
|
||||
onChange="handleCityPickerChange"
|
||||
onVisibleChange="handleTriggerControlledPicker"
|
||||
onOk="handleCityOnOk"
|
||||
onCancel="handleDismiss" />
|
||||
onCancel="handleDismiss"
|
||||
></ant-cascader-picker>
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
|
||||
<ant-button
|
||||
size="medium"
|
||||
type="primary"
|
||||
onTap="handleOpenPicker">
|
||||
onTap="handleOpenPicker"
|
||||
>
|
||||
打开 CascaderPicker
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,36 +1,34 @@
|
||||
<ant-container title="基础用法">
|
||||
<ant-checkbox onChange="onChange">Checkbox</ant-checkbox>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="初始值">
|
||||
<ant-checkbox defaultChecked="{{ true }}">Checkbox</ant-checkbox>
|
||||
<ant-checkbox defaultChecked="{{true}}">Checkbox</ant-checkbox>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="禁用模式">
|
||||
<ant-checkbox disabled>Checkbox1</ant-checkbox>
|
||||
<ant-checkbox
|
||||
defaultChecked
|
||||
disabled>
|
||||
disabled
|
||||
>
|
||||
Checkbox2
|
||||
</ant-checkbox>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="自定义颜色">
|
||||
<ant-checkbox
|
||||
color="red"
|
||||
defaultChecked>
|
||||
defaultChecked
|
||||
>
|
||||
Checkbox
|
||||
</ant-checkbox>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="控制模式">
|
||||
<view>
|
||||
<ant-checkbox
|
||||
checked="{{ checked }}"
|
||||
onChange="handleChange">
|
||||
checked="{{checked}}"
|
||||
onChange="handleChange"
|
||||
>
|
||||
Checkbox
|
||||
</ant-checkbox>
|
||||
</view>
|
||||
|
||||
<ant-button onTap="toggleChange">切换</ant-button>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,26 +1,29 @@
|
||||
<import-sjs
|
||||
from="./index.sjs"
|
||||
name="utils" />
|
||||
|
||||
name="utils"
|
||||
></import-sjs>
|
||||
<ant-container title="自定义分组">
|
||||
<block
|
||||
a:for="{{ options }}"
|
||||
a:for="{{options}}"
|
||||
a:for-index="index"
|
||||
a:for-item="option">
|
||||
<ant-list header="{{ option.title }}">
|
||||
a:for-item="option"
|
||||
>
|
||||
<ant-list header="{{option.title}}">
|
||||
<block
|
||||
a:for="{{ option.list }}"
|
||||
a:for="{{option.list}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item">
|
||||
a:for-item="item"
|
||||
>
|
||||
<ant-list-item>
|
||||
<ant-checkbox
|
||||
data-value="{{ item.value }}"
|
||||
checked="{{ utils.indexOf(value, item.value) > -1 }}"
|
||||
onChange="onChange">
|
||||
{{ item.title }}
|
||||
data-value="{{item.value}}"
|
||||
checked="{{utils.indexOf(value, item.value) > -1}}"
|
||||
onChange="onChange"
|
||||
>
|
||||
{{item.title}}
|
||||
</ant-checkbox>
|
||||
</ant-list-item>
|
||||
</block>
|
||||
</ant-list>
|
||||
</block>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,42 +1,49 @@
|
||||
<ant-container title="基础用法">
|
||||
<ant-checkbox-group
|
||||
options="{{ options }}"
|
||||
onChange="onChange" />
|
||||
options="{{options}}"
|
||||
onChange="onChange"
|
||||
></ant-checkbox-group>
|
||||
</ant-container>
|
||||
<ant-container title="初始值">
|
||||
<ant-checkbox-group
|
||||
defaultValue="{{ ['banana'] }}"
|
||||
options="{{ options }}"
|
||||
onChange="onChange" />
|
||||
defaultValue="{{['banana']}}"
|
||||
options="{{options}}"
|
||||
onChange="onChange"
|
||||
></ant-checkbox-group>
|
||||
</ant-container>
|
||||
<ant-container title="横向布局">
|
||||
<ant-checkbox-group
|
||||
options="{{ options }}"
|
||||
position="horizontal" />
|
||||
options="{{options}}"
|
||||
position="horizontal"
|
||||
></ant-checkbox-group>
|
||||
</ant-container>
|
||||
<ant-container title="禁用模式">
|
||||
<ant-checkbox-group
|
||||
options="{{ options }}"
|
||||
disabled />
|
||||
options="{{options}}"
|
||||
disabled
|
||||
></ant-checkbox-group>
|
||||
</ant-container>
|
||||
<ant-container title="受控模式">
|
||||
<ant-checkbox-group
|
||||
value="{{ value }}"
|
||||
options="{{ options }}"
|
||||
onChange="handleChange" />
|
||||
value="{{value}}"
|
||||
options="{{options}}"
|
||||
onChange="handleChange"
|
||||
></ant-checkbox-group>
|
||||
</ant-container>
|
||||
<ant-container title="自定义颜色">
|
||||
<ant-checkbox-group
|
||||
options="{{ options }}"
|
||||
defaultValue="{{ ['apple', 'banana'] }}"
|
||||
color="red" />
|
||||
options="{{options}}"
|
||||
defaultValue="{{['apple', 'banana']}}"
|
||||
color="red"
|
||||
></ant-checkbox-group>
|
||||
</ant-container>
|
||||
<ant-container title="自定义 Label">
|
||||
<ant-checkbox-group options="{{ options }}">
|
||||
<ant-checkbox-group options="{{options}}">
|
||||
<view
|
||||
slot="label"
|
||||
slot-scope="item">
|
||||
{{ item.index + 1 }} {{ item.value.label }}
|
||||
slot-scope="item"
|
||||
>
|
||||
{{item.index + 1}} {{item.value.label}}
|
||||
</view>
|
||||
</ant-checkbox-group>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,59 +1,62 @@
|
||||
<ant-container title="简单布局-单选">
|
||||
<ant-checklist
|
||||
defaultValue="{{ [1] }}"
|
||||
options="{{ options_1 }}"
|
||||
data-options="{{ options_1 }}"
|
||||
onChange="onChange" />
|
||||
defaultValue="{{[1]}}"
|
||||
options="{{options_1}}"
|
||||
data-options="{{options_1}}"
|
||||
onChange="onChange"
|
||||
></ant-checklist>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="复杂布局-多选">
|
||||
<ant-checklist
|
||||
defaultValue="{{ [1, 2] }}"
|
||||
options="{{ options_2 }}"
|
||||
defaultValue="{{[1, 2]}}"
|
||||
options="{{options_2}}"
|
||||
multiple
|
||||
onChange="onChange" />
|
||||
onChange="onChange"
|
||||
></ant-checklist>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="受控模式">
|
||||
<ant-checklist
|
||||
value="{{ value }}"
|
||||
options="{{ options_2 }}"
|
||||
value="{{value}}"
|
||||
options="{{options_2}}"
|
||||
multiple
|
||||
onChange="onChangeControlled" />
|
||||
onChange="onChangeControlled"
|
||||
></ant-checklist>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="禁用状态">
|
||||
<ant-checklist
|
||||
defaultValue="{{ [2] }}"
|
||||
options="{{ options_3 }}"
|
||||
defaultValue="{{[2]}}"
|
||||
options="{{options_3}}"
|
||||
multiple
|
||||
onChange="onChange" />
|
||||
onChange="onChange"
|
||||
></ant-checklist>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="只读状态">
|
||||
<ant-checklist
|
||||
defaultValue="{{ [2] }}"
|
||||
options="{{ options_4 }}"
|
||||
defaultValue="{{[2]}}"
|
||||
options="{{options_4}}"
|
||||
multiple
|
||||
onChange="onChange" />
|
||||
onChange="onChange"
|
||||
></ant-checklist>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="自定义勾选图标&&组件内容">
|
||||
<ant-checklist
|
||||
defaultValue="{{ [2] }}"
|
||||
options="{{ options_3 }}"
|
||||
defaultValue="{{[2]}}"
|
||||
options="{{options_3}}"
|
||||
multiple
|
||||
onChange="onChange">
|
||||
onChange="onChange"
|
||||
>
|
||||
<view slot="icon">
|
||||
<ant-icon
|
||||
style="color: red"
|
||||
type="LikeOutline"
|
||||
className="demo-checklist-checked-icon" />
|
||||
className="demo-checklist-checked-icon"
|
||||
></ant-icon>
|
||||
</view>
|
||||
<view
|
||||
slot="content"
|
||||
slot-scope="props">
|
||||
title: {{ props.item.title }}
|
||||
slot-scope="props"
|
||||
>
|
||||
title: {{props.item.title}}
|
||||
</view>
|
||||
</ant-checklist>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,4 +1,5 @@
|
||||
<ant-collapse
|
||||
defaultCurrent="{{ [0] }}"
|
||||
items="{{ items }}"
|
||||
onChange="onChange" />
|
||||
defaultCurrent="{{[0]}}"
|
||||
items="{{items}}"
|
||||
onChange="onChange"
|
||||
></ant-collapse>
|
@ -1,4 +1,5 @@
|
||||
<ant-collapse
|
||||
items="{{ items }}"
|
||||
items="{{items}}"
|
||||
onChange="onChange"
|
||||
accordion />
|
||||
accordion
|
||||
></ant-collapse>
|
@ -1,20 +1,24 @@
|
||||
<ant-button
|
||||
onTap="toggle"
|
||||
inline>
|
||||
inline
|
||||
>
|
||||
切换
|
||||
</ant-button>
|
||||
<ant-button
|
||||
onTap="changeContent"
|
||||
inline>
|
||||
inline
|
||||
>
|
||||
修改content
|
||||
</ant-button>
|
||||
<ant-button
|
||||
onTap="addItems"
|
||||
inline>
|
||||
inline
|
||||
>
|
||||
添加items
|
||||
</ant-button>
|
||||
{{ current }}
|
||||
{{current}}
|
||||
<collapse
|
||||
items="{{ items }}"
|
||||
current="{{ current }}"
|
||||
onChange="onChange" />
|
||||
items="{{items}}"
|
||||
current="{{current}}"
|
||||
onChange="onChange"
|
||||
></collapse>
|
@ -1,23 +1,24 @@
|
||||
<import-sjs
|
||||
from="./index.sjs"
|
||||
name="_sjs" />
|
||||
|
||||
<collapse items="{{ items }}">
|
||||
name="_sjs"
|
||||
></import-sjs>
|
||||
<collapse items="{{items}}">
|
||||
<view
|
||||
slot="title"
|
||||
slot-scope="item">
|
||||
{{ item.value.title }} {{ _sjs.itemContent(item.current, item) }}
|
||||
slot-scope="item"
|
||||
>
|
||||
{{item.value.title}} {{_sjs.itemContent(item.current, item)}}
|
||||
</view>
|
||||
|
||||
<view
|
||||
slot="brief"
|
||||
slot-scope="item">
|
||||
{{ item.value.brief }}
|
||||
slot-scope="item"
|
||||
>
|
||||
{{item.value.brief}}
|
||||
</view>
|
||||
|
||||
<view
|
||||
slot="icon"
|
||||
slot-scope="item">
|
||||
{{ _sjs.extraText(item.current, item) }}
|
||||
slot-scope="item"
|
||||
>
|
||||
{{_sjs.extraText(item.current, item)}}
|
||||
</view>
|
||||
</collapse>
|
||||
</collapse>
|
@ -1,26 +1,28 @@
|
||||
<ant-collapse items="{{ items }}">
|
||||
<ant-collapse items="{{items}}">
|
||||
<view
|
||||
class="title"
|
||||
slot="title"
|
||||
slot-scope="item"
|
||||
class="title">
|
||||
>
|
||||
<view catchTap="true">
|
||||
<ant-checkbox
|
||||
data-index="{{ item.index }}"
|
||||
onChange="onChange" />
|
||||
data-index="{{item.index}}"
|
||||
onChange="onChange"
|
||||
></ant-checkbox>
|
||||
</view>
|
||||
<view>{{ item.value.title }}</view>
|
||||
<view>{{item.value.title}}</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="content"
|
||||
slot="content"
|
||||
slot-scope="item"
|
||||
class="content">
|
||||
{{ item.value.content }}
|
||||
>
|
||||
{{item.value.content}}
|
||||
</view>
|
||||
</ant-collapse>
|
||||
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="onTap">
|
||||
onTap="onTap"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
</ant-button>
|
@ -1,30 +1,31 @@
|
||||
<ant-container title="标题">
|
||||
<view class="content" />
|
||||
<view class="content"></view>
|
||||
</ant-container>
|
||||
<ant-container headerInBox="{{ false }}">
|
||||
<ant-container headerInBox="{{false}}">
|
||||
<view slot="title">
|
||||
<view class="icon">
|
||||
<ant-icon
|
||||
type="SmileOutline"
|
||||
style="margin-right: 8px" />
|
||||
style="margin-right: 8px"
|
||||
></ant-icon>
|
||||
标题
|
||||
</view>
|
||||
</view>
|
||||
<view slot="headerRight">右侧内容</view>
|
||||
<view class="content" />
|
||||
<view class="content"></view>
|
||||
</ant-container>
|
||||
<ant-container title="标题">
|
||||
<view slot="headerRight">右侧内容</view>
|
||||
<view class="content">
|
||||
<view class="box" />
|
||||
<view class="box" />
|
||||
<view class="box" />
|
||||
<view class="box"></view>
|
||||
<view class="box"></view>
|
||||
<view class="box"></view>
|
||||
</view>
|
||||
</ant-container>
|
||||
<ant-container>
|
||||
<view class="content" />
|
||||
<view class="content"></view>
|
||||
<view slot="headerRight">右侧内容</view>
|
||||
</ant-container>
|
||||
<ant-container>
|
||||
<view class="content" />
|
||||
</ant-container>
|
||||
<view class="content"></view>
|
||||
</ant-container>
|
@ -2,28 +2,30 @@
|
||||
<ant-list-item>
|
||||
请选择日期
|
||||
<ant-date-picker
|
||||
min="{{ min }}"
|
||||
max="{{ max }}"
|
||||
min="{{min}}"
|
||||
max="{{max}}"
|
||||
slot="extra"
|
||||
defaultValue="{{ defaultDate }}"
|
||||
defaultValue="{{defaultDate}}"
|
||||
placeholder="请选择"
|
||||
onPickerChange="handlePickerChange"
|
||||
onVisibleChange="handleTriggerPicker"
|
||||
onCancel="handleDismiss"
|
||||
onOk="handleOk" />
|
||||
onOk="handleOk"
|
||||
></ant-date-picker>
|
||||
</ant-list-item>
|
||||
<ant-list-item>
|
||||
请选择日期(点击蒙层不关闭)
|
||||
<ant-date-picker
|
||||
min="{{ min }}"
|
||||
max="{{ max }}"
|
||||
min="{{min}}"
|
||||
max="{{max}}"
|
||||
slot="extra"
|
||||
defaultValue="{{ defaultDate }}"
|
||||
defaultValue="{{defaultDate}}"
|
||||
placeholder="请选择"
|
||||
onPickerChange="handlePickerChange"
|
||||
onVisibleChange="handleTriggerPicker"
|
||||
maskClosable="{{ false }}"
|
||||
onOk="handleOk" />
|
||||
maskClosable="{{false}}"
|
||||
onOk="handleOk"
|
||||
></ant-date-picker>
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
<ant-list header="选择精度">
|
||||
@ -34,7 +36,8 @@
|
||||
precision="year"
|
||||
format="YYYY"
|
||||
placeholder="选择"
|
||||
onOk="handleOk" />
|
||||
onOk="handleOk"
|
||||
></ant-date-picker>
|
||||
</ant-list-item>
|
||||
<ant-list-item>
|
||||
请选择月份
|
||||
@ -44,7 +47,8 @@
|
||||
format="YYYY-MM"
|
||||
placeholder="选择"
|
||||
onVisibleChange="handleTriggerPicker"
|
||||
onOk="handleOk" />
|
||||
onOk="handleOk"
|
||||
></ant-date-picker>
|
||||
</ant-list-item>
|
||||
<ant-list-item>
|
||||
请选择时间
|
||||
@ -54,7 +58,8 @@
|
||||
format="YYYY-MM-DD HH:mm"
|
||||
placeholder="选择"
|
||||
onVisibleChange="handleTriggerPicker"
|
||||
onOk="handleOk" />
|
||||
onOk="handleOk"
|
||||
></ant-date-picker>
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
<ant-list header="禁用状态">
|
||||
@ -62,24 +67,26 @@
|
||||
请选择日期
|
||||
<ant-date-picker
|
||||
slot="extra"
|
||||
defaultValue="{{ defaultDate }}"
|
||||
disabled />
|
||||
defaultValue="{{defaultDate}}"
|
||||
disabled
|
||||
></ant-date-picker>
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
<ant-list header="自定义每列的渲染内容">
|
||||
<ant-list-item>
|
||||
每列不显示单位
|
||||
<ant-date-picker
|
||||
min="{{ min }}"
|
||||
max="{{ max }}"
|
||||
min="{{min}}"
|
||||
max="{{max}}"
|
||||
slot="extra"
|
||||
defaultValue="{{ defaultDate }}"
|
||||
defaultValue="{{defaultDate}}"
|
||||
placeholder="请选择"
|
||||
onPickerChange="handlePickerChange"
|
||||
onVisibleChange="handleTriggerPicker"
|
||||
onCancel="handleDismiss"
|
||||
onOk="handleOk"
|
||||
onFormatLabel="{{ handleFormatLabel ? handleFormatLabel : 'handleFormatLabel' }}" />
|
||||
onFormatLabel="{{handleFormatLabel ? handleFormatLabel : 'handleFormatLabel'}}"
|
||||
></ant-date-picker>
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
<ant-list header="时间范围选择">
|
||||
@ -88,29 +95,32 @@
|
||||
<ant-range-picker
|
||||
slot="extra"
|
||||
placeholder="请选择"
|
||||
defaultValue="{{ defaultDateRange }}"
|
||||
defaultValue="{{defaultDateRange}}"
|
||||
onPickerChange="handlePickerRangeChange"
|
||||
onVisibleChange="handleTriggerPicker"
|
||||
onOk="handleRangeOk" />
|
||||
onOk="handleRangeOk"
|
||||
></ant-range-picker>
|
||||
</ant-list-item>
|
||||
<ant-list-item>
|
||||
受控模式
|
||||
<ant-range-picker
|
||||
slot="extra"
|
||||
placeholder="请选择"
|
||||
value="{{ controlledDateRange }}"
|
||||
onOk="handleControlledRangeOk" />
|
||||
value="{{controlledDateRange}}"
|
||||
onOk="handleControlledRangeOk"
|
||||
></ant-range-picker>
|
||||
</ant-list-item>
|
||||
<ant-list-item>
|
||||
每列不显示单位
|
||||
<ant-range-picker
|
||||
slot="extra"
|
||||
placeholder="请选择"
|
||||
defaultValue="{{ defaultDateRange }}"
|
||||
defaultValue="{{defaultDateRange}}"
|
||||
onPickerChange="handlePickerRangeChange"
|
||||
onVisibleChange="handleTriggerPicker"
|
||||
onOk="handleRangeOk"
|
||||
onFormatLabel="{{ handleFormatLabel ? handleFormatLabel : 'handleFormatLabel' }}" />
|
||||
onFormatLabel="{{handleFormatLabel ? handleFormatLabel : 'handleFormatLabel'}}"
|
||||
></ant-range-picker>
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
<ant-container style="margin-top: 20rpx">
|
||||
@ -118,23 +128,24 @@
|
||||
<ant-list-item>
|
||||
请选择时间
|
||||
<ant-date-picker
|
||||
min="{{ min }}"
|
||||
max="{{ max }}"
|
||||
min="{{min}}"
|
||||
max="{{max}}"
|
||||
slot="extra"
|
||||
visible="{{ pickerVisible }}"
|
||||
defaultValue="{{ defaultDate }}"
|
||||
visible="{{pickerVisible}}"
|
||||
defaultValue="{{defaultDate}}"
|
||||
placeholder="请选择"
|
||||
onPickerChange="handlePickerChange"
|
||||
onVisibleChange="handleTriggerControlledPicker"
|
||||
onCancel="handleDismiss"
|
||||
onOk="handleOk" />
|
||||
onOk="handleOk"
|
||||
></ant-date-picker>
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
|
||||
<ant-button
|
||||
size="medium"
|
||||
type="primary"
|
||||
onTap="handleOpenPicker">
|
||||
onTap="handleOpenPicker"
|
||||
>
|
||||
打开 DatePicker
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
@ -144,19 +155,20 @@
|
||||
请选择日期范围
|
||||
<ant-range-picker
|
||||
slot="extra"
|
||||
visible="{{ dateRangePickerVisible }}"
|
||||
visible="{{dateRangePickerVisible}}"
|
||||
placeholder="请选择"
|
||||
defaultValue="{{ defaultDateRange }}"
|
||||
defaultValue="{{defaultDateRange}}"
|
||||
onPickerChange="handlePickerRangeChange"
|
||||
onVisibleChange="handleTriggerControlledDateRangePicker"
|
||||
onOk="handleRangeOk" />
|
||||
onOk="handleRangeOk"
|
||||
></ant-range-picker>
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
|
||||
<ant-button
|
||||
size="medium"
|
||||
type="primary"
|
||||
onTap="handleOpenDateRangePicker">
|
||||
onTap="handleOpenDateRangePicker"
|
||||
>
|
||||
打开 DateRangePicker
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,38 +1,42 @@
|
||||
<ant-container
|
||||
title="水平分割线"
|
||||
headerInBox="{{ false }}">
|
||||
<ant-divider />
|
||||
headerInBox="{{false}}"
|
||||
>
|
||||
<ant-divider></ant-divider>
|
||||
</ant-container>
|
||||
|
||||
<ant-container
|
||||
title="水平分割线-带文字"
|
||||
headerInBox="{{ false }}">
|
||||
<ant-divider text="中间内容" />
|
||||
headerInBox="{{false}}"
|
||||
>
|
||||
<ant-divider text="中间内容"></ant-divider>
|
||||
<ant-divider
|
||||
text="左侧内容"
|
||||
textPosition="left" />
|
||||
textPosition="left"
|
||||
></ant-divider>
|
||||
<ant-divider
|
||||
text="右侧内容"
|
||||
textPosition="right" />
|
||||
textPosition="right"
|
||||
></ant-divider>
|
||||
</ant-container>
|
||||
|
||||
<ant-container
|
||||
title="水平分割线-自定义"
|
||||
headerInBox="{{ false }}">
|
||||
headerInBox="{{false}}"
|
||||
>
|
||||
<ant-divider
|
||||
text="自定义样式"
|
||||
textStyle="color:#1677ff; fontWeight:600"
|
||||
lineHeight="{{ 2 }}"
|
||||
lineHeight="{{2}}"
|
||||
lineType="dashed"
|
||||
lineColor="#1677ff" />
|
||||
lineColor="#1677ff"
|
||||
></ant-divider>
|
||||
</ant-container>
|
||||
|
||||
<ant-container
|
||||
title="垂直分割线"
|
||||
headerInBox="{{ false }}">
|
||||
headerInBox="{{false}}"
|
||||
>
|
||||
<view class="divider-vertical">
|
||||
<view>100m</view>
|
||||
<ant-divider direction="vertical" />
|
||||
<ant-divider direction="vertical"></ant-divider>
|
||||
<view>浙江省杭州市西湖区西溪路556号</view>
|
||||
</view>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,33 +1,36 @@
|
||||
<ant-container title="基础样式">
|
||||
<ant-empty
|
||||
title="这里什么也没有"
|
||||
message="看看其它吧" />
|
||||
message="看看其它吧"
|
||||
></ant-empty>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="添加操作按钮组">
|
||||
<ant-empty
|
||||
title="这里什么也没有"
|
||||
message="看看其它吧">
|
||||
message="看看其它吧"
|
||||
>
|
||||
<view slot="extra">
|
||||
<ant-button
|
||||
size="small"
|
||||
inline>
|
||||
inline
|
||||
>
|
||||
操作1
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="primary"
|
||||
size="small"
|
||||
inline
|
||||
style="margin-left: 12px">
|
||||
style="margin-left: 12px"
|
||||
>
|
||||
操作2
|
||||
</ant-button>
|
||||
</view>
|
||||
</ant-empty>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="自定义图片">
|
||||
<ant-empty
|
||||
title="这里什么也没有"
|
||||
message="看看其它吧"
|
||||
image="https://gw.alipayobjects.com/mdn/rms_7cc883/afts/img/A*PG7NQoXbN38AAAAAAAAAAAAAARQnAQ" />
|
||||
</ant-container>
|
||||
image="https://gw.alipayobjects.com/mdn/rms_7cc883/afts/img/A*PG7NQoXbN38AAAAAAAAAAAAAARQnAQ"
|
||||
></ant-empty>
|
||||
</ant-container>
|
@ -1,27 +1,23 @@
|
||||
<form-input
|
||||
label="用户名"
|
||||
name="user.account"
|
||||
name="account"
|
||||
placeholder="请输入用户名"
|
||||
tooltip="用户名说明"
|
||||
allowClear
|
||||
ref="handleRef" />
|
||||
<form-input
|
||||
label="手机号"
|
||||
name="user.phone"
|
||||
placeholder="请输入手机号"
|
||||
tooltip="手机号说明"
|
||||
allowClear
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></form-input>
|
||||
<form-input
|
||||
label="密码"
|
||||
name="user.password"
|
||||
name="password"
|
||||
placeholder="请输入密码"
|
||||
allowClear
|
||||
ref="handleRef">
|
||||
ref="handleRef"
|
||||
>
|
||||
<view slot="tooltip">
|
||||
<ant-icon
|
||||
onTap="showToast"
|
||||
type="QuestionCircleOutline" />
|
||||
type="QuestionCircleOutline"
|
||||
></ant-icon>
|
||||
</view>
|
||||
</form-input>
|
||||
<form-input
|
||||
@ -29,91 +25,102 @@
|
||||
name="address"
|
||||
placeholder="请输入地址"
|
||||
allowClear
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></form-input>
|
||||
<form-switch
|
||||
label="选择"
|
||||
name="needDelivery"
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></form-switch>
|
||||
<form-stepper
|
||||
label="数量"
|
||||
name="quantity"
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></form-stepper>
|
||||
<form-picker
|
||||
label="水果"
|
||||
arrow
|
||||
name="fruit"
|
||||
options="{{ fruitList }}"
|
||||
ref="handleRef" />
|
||||
options="{{fruitList}}"
|
||||
ref="handleRef"
|
||||
></form-picker>
|
||||
<form-date-picker
|
||||
label="出生日期"
|
||||
arrow
|
||||
name="birthday"
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></form-date-picker>
|
||||
<form-range-picker
|
||||
label="时间范围"
|
||||
arrow
|
||||
name="range"
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></form-range-picker>
|
||||
<form-cascader-picker
|
||||
label="城市"
|
||||
arrow
|
||||
options="{{ cityList }}"
|
||||
options="{{cityList}}"
|
||||
name="city"
|
||||
tooltip="选择城市"
|
||||
placeholder="请输入城市"
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></form-cascader-picker>
|
||||
<form-radio-group
|
||||
label="动物单选"
|
||||
name="animalChoose"
|
||||
color="red"
|
||||
options="{{ radioGroupOptions }}"
|
||||
ref="handleRef" />
|
||||
options="{{radioGroupOptions}}"
|
||||
ref="handleRef"
|
||||
></form-radio-group>
|
||||
<form-checkbox-group
|
||||
label="蔬菜多选"
|
||||
name="fruitChoose"
|
||||
options="{{ checkboxGroupOptions }}"
|
||||
ref="handleRef" />
|
||||
options="{{checkboxGroupOptions}}"
|
||||
ref="handleRef"
|
||||
></form-checkbox-group>
|
||||
<form-selector
|
||||
label="喜好"
|
||||
name="likeChoose"
|
||||
options="{{ selectorOptions }}"
|
||||
ref="handleRef" />
|
||||
options="{{selectorOptions}}"
|
||||
ref="handleRef"
|
||||
></form-selector>
|
||||
<form-slider
|
||||
label="选择分数"
|
||||
name="slider"
|
||||
showTooltip
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></form-slider>
|
||||
<form-upload-image
|
||||
label="图片"
|
||||
name="image"
|
||||
onUpload="{{ onUpload ? onUpload : 'onUpload' }}"
|
||||
ref="handleRef" />
|
||||
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
|
||||
ref="handleRef"
|
||||
></form-upload-image>
|
||||
<form-textarea
|
||||
label="说明"
|
||||
name="description"
|
||||
placeholder="请输入说明"
|
||||
allowClear
|
||||
autoHeight
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></form-textarea>
|
||||
<form-rate
|
||||
label="评分"
|
||||
name="rate"
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></form-rate>
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="submit"
|
||||
style="margin-bottom: 12px">
|
||||
style="margin-bottom: 12px"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
<ant-button
|
||||
onTap="reset"
|
||||
style="margin-bottom: 12px">
|
||||
重置
|
||||
</ant-button>
|
||||
<ant-button onTap="update">修改</ant-button>
|
||||
<ant-button onTap="reset">重置</ant-button>
|
||||
</view>
|
||||
<ant-toast
|
||||
content="密码的自定义 tooltip"
|
||||
visible="{{ toastShow }}"
|
||||
onClose="handleCloseToast" />
|
||||
visible="{{toastShow}}"
|
||||
onClose="handleCloseToast"
|
||||
></ant-toast>
|
@ -1,51 +1,56 @@
|
||||
<import-sjs
|
||||
from="./index.sjs"
|
||||
name="utils" />
|
||||
|
||||
name="utils"
|
||||
></import-sjs>
|
||||
<form-item
|
||||
className="{{ className }}"
|
||||
position="{{ position }}"
|
||||
label="{{ label }}"
|
||||
status="{{ formData.status }}"
|
||||
errors="{{ formData.errors }}"
|
||||
tooltip="{{ tooltip }}"
|
||||
required="{{ formData.required }}"
|
||||
requiredMark="{{ requiredMark }}"
|
||||
validateStatus="{{ validateStatus }}"
|
||||
help="{{ help }}">
|
||||
className="{{className}}"
|
||||
position="{{position}}"
|
||||
label="{{label}}"
|
||||
status="{{formData.status}}"
|
||||
errors="{{formData.errors}}"
|
||||
tooltip="{{tooltip}}"
|
||||
required="{{formData.required}}"
|
||||
requiredMark="{{requiredMark}}"
|
||||
validateStatus="{{validateStatus}}"
|
||||
help="{{help}}"
|
||||
>
|
||||
<view
|
||||
class="input"
|
||||
onTap="showPopup">
|
||||
onTap="showPopup"
|
||||
>
|
||||
<view class="input-items">
|
||||
<block
|
||||
a:for="{{ formData.value }}"
|
||||
a:for="{{formData.value}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item">
|
||||
<view class="input-item">{{ utils.getTitle(options, item) }}</view>
|
||||
a:for-item="item"
|
||||
>
|
||||
<view class="input-item">{{utils.getTitle(options, item)}}</view>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<view class="choose">
|
||||
请选择
|
||||
<icon type="RightOutline" />
|
||||
<icon type="RightOutline"></icon>
|
||||
</view>
|
||||
</view>
|
||||
<view slot="extra">
|
||||
<slot name="extra">{{ extra }}</slot>
|
||||
<slot name="extra">
|
||||
{{extra}}
|
||||
</slot>
|
||||
</view>
|
||||
</form-item>
|
||||
|
||||
<popup
|
||||
visible="{{ visible }}"
|
||||
height="{{ 250 }}"
|
||||
width="{{ 250 }}"
|
||||
visible="{{visible}}"
|
||||
height="{{250}}"
|
||||
width="{{250}}"
|
||||
position="right"
|
||||
onClose="handlePopupClose">
|
||||
onClose="handlePopupClose"
|
||||
>
|
||||
<view style="padding: 12px">
|
||||
<checklist
|
||||
options="{{ options }}"
|
||||
options="{{options}}"
|
||||
multiple
|
||||
value="{{ formData.value }}"
|
||||
onChange="onChange" />
|
||||
value="{{formData.value}}"
|
||||
onChange="onChange"
|
||||
></checklist>
|
||||
</view>
|
||||
</popup>
|
||||
</popup>
|
@ -6,35 +6,37 @@
|
||||
placeholder="请输入用户名"
|
||||
position="vertical"
|
||||
inputClassName="input"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></form-input>
|
||||
<form-checklist
|
||||
label="喜欢"
|
||||
name="like"
|
||||
required
|
||||
message="需要选择"
|
||||
options="{{ likeOptions }}"
|
||||
options="{{likeOptions}}"
|
||||
position="vertical"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></form-checklist>
|
||||
<form-location
|
||||
label="位置"
|
||||
name="location"
|
||||
required
|
||||
message="需要选择位置"
|
||||
position="vertical"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></form-location>
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="submit"
|
||||
className="button">
|
||||
className="button"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
<ant-button
|
||||
onTap="reset"
|
||||
className="button">
|
||||
className="button"
|
||||
>
|
||||
重置
|
||||
</ant-button>
|
||||
</view>
|
||||
</view>
|
@ -1,28 +1,31 @@
|
||||
<form-item
|
||||
className="{{ className }}"
|
||||
position="{{ position }}"
|
||||
label="{{ label }}"
|
||||
status="{{ formData.status }}"
|
||||
errors="{{ formData.errors }}"
|
||||
tooltip="{{ tooltip }}"
|
||||
required="{{ formData.required }}"
|
||||
requiredMark="{{ requiredMark }}"
|
||||
validateStatus="{{ validateStatus }}"
|
||||
help="{{ help }}">
|
||||
className="{{className}}"
|
||||
position="{{position}}"
|
||||
label="{{label}}"
|
||||
status="{{formData.status}}"
|
||||
errors="{{formData.errors}}"
|
||||
tooltip="{{tooltip}}"
|
||||
required="{{formData.required}}"
|
||||
requiredMark="{{requiredMark}}"
|
||||
validateStatus="{{validateStatus}}"
|
||||
help="{{help}}"
|
||||
>
|
||||
<view
|
||||
class="input"
|
||||
onTap="showPopup">
|
||||
onTap="showPopup"
|
||||
>
|
||||
<view class="input-location">
|
||||
<view a:if="{{ formData.value }}">{{ formData.value.name }}</view>
|
||||
<view a:if="{{ formData.value }}">{{ formData.value.address }}</view>
|
||||
<view a:if="{{formData.value}}">{{formData.value.name}}</view>
|
||||
<view a:if="{{formData.value}}">{{formData.value.address}}</view>
|
||||
</view>
|
||||
|
||||
<view class="choose">
|
||||
请选择
|
||||
<icon type="RightOutline" />
|
||||
<icon type="RightOutline"></icon>
|
||||
</view>
|
||||
</view>
|
||||
<view slot="extra">
|
||||
<slot name="extra">{{ extra }}</slot>
|
||||
<slot name="extra">
|
||||
{{extra}}
|
||||
</slot>
|
||||
</view>
|
||||
</form-item>
|
||||
</form-item>
|
@ -5,21 +5,24 @@
|
||||
placeholder="请输入用户名"
|
||||
message="需要输入用户名"
|
||||
validateStatus="success"
|
||||
ref="handleRef">
|
||||
ref="handleRef"
|
||||
>
|
||||
<view
|
||||
slot="footer"
|
||||
slot-scope="item">
|
||||
slot-scope="item"
|
||||
>
|
||||
<view
|
||||
a:if="{{ item.status === 'error' }}"
|
||||
class="errors">
|
||||
a:if="{{item.status === 'error'}}"
|
||||
class="errors"
|
||||
>
|
||||
<ant-icon
|
||||
type="CloseCircleOutline"
|
||||
style="margin-right: 4px" />
|
||||
{{ item.errors }}
|
||||
style="margin-right: 4px"
|
||||
></ant-icon>
|
||||
{{item.errors}}
|
||||
</view>
|
||||
</view>
|
||||
</ant-form-input>
|
||||
|
||||
<ant-form-input
|
||||
label="地址"
|
||||
name="address"
|
||||
@ -27,31 +30,36 @@
|
||||
placeholder="请输入地址"
|
||||
message="需要输入地址"
|
||||
validateStatus="success"
|
||||
ref="handleRef">
|
||||
ref="handleRef"
|
||||
>
|
||||
<view
|
||||
slot="footer"
|
||||
slot-scope="item">
|
||||
slot-scope="item"
|
||||
>
|
||||
<view
|
||||
a:if="{{ item.status === 'error' }}"
|
||||
class="errors">
|
||||
a:if="{{item.status === 'error'}}"
|
||||
class="errors"
|
||||
>
|
||||
<ant-icon
|
||||
type="CloseCircleOutline"
|
||||
style="margin-right: 4px" />
|
||||
{{ item.errors }}
|
||||
style="margin-right: 4px"
|
||||
></ant-icon>
|
||||
{{item.errors}}
|
||||
</view>
|
||||
</view>
|
||||
</ant-form-input>
|
||||
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="submit"
|
||||
style="margin-bottom: 12px">
|
||||
style="margin-bottom: 12px"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
<ant-button
|
||||
onTap="reset"
|
||||
style="margin-bottom: 12px">
|
||||
style="margin-bottom: 12px"
|
||||
>
|
||||
重置
|
||||
</ant-button>
|
||||
</view>
|
||||
</view>
|
@ -2,27 +2,29 @@
|
||||
label="需要水果"
|
||||
name="needFruit"
|
||||
onChange="onChange"
|
||||
ref="handleRef" />
|
||||
|
||||
<view a:if="{{ needFruit }}">
|
||||
ref="handleRef"
|
||||
></form-switch>
|
||||
<view a:if="{{needFruit}}">
|
||||
<form-stepper
|
||||
label="数量"
|
||||
name="quantity"
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></form-stepper>
|
||||
<form-input
|
||||
label="收货地址"
|
||||
name="address"
|
||||
required
|
||||
message="需要填写收货地址"
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></form-input>
|
||||
</view>
|
||||
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="submit"
|
||||
style="margin-bottom: 12px">
|
||||
style="margin-bottom: 12px"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
<ant-button onTap="reset">重置</ant-button>
|
||||
</view>
|
||||
</view>
|
@ -1,38 +1,44 @@
|
||||
<block
|
||||
a:for="{{ list }}"
|
||||
a:for="{{list}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item"
|
||||
a:key="id">
|
||||
key="{{item['id']}}"
|
||||
>
|
||||
<ant-form-input
|
||||
label="{{ list[index].id }}"
|
||||
name="account{{ list[index].id }}"
|
||||
label="{{list[index].id}}"
|
||||
name="account{{list[index].id}}"
|
||||
required
|
||||
message="需要输入用户名"
|
||||
ref="handleRef">
|
||||
ref="handleRef"
|
||||
>
|
||||
<view
|
||||
slot="extra"
|
||||
onTap="minus"
|
||||
data-index="{{ index }}">
|
||||
<ant-icon type="MinusCircleOutline" />
|
||||
data-index="{{index}}"
|
||||
>
|
||||
<ant-icon type="MinusCircleOutline"></ant-icon>
|
||||
</view>
|
||||
</ant-form-input>
|
||||
</block>
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
onTap="add"
|
||||
className="button">
|
||||
className="button"
|
||||
>
|
||||
添加用户
|
||||
<ant-icon type="AddCircleOutline" />
|
||||
<ant-icon type="AddCircleOutline"></ant-icon>
|
||||
</ant-button>
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="submit"
|
||||
className="button">
|
||||
className="button"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
<ant-button
|
||||
onTap="reset"
|
||||
className="button">
|
||||
className="button"
|
||||
>
|
||||
重置
|
||||
</ant-button>
|
||||
</view>
|
||||
</view>
|
@ -1,20 +1,23 @@
|
||||
<ant-form-input
|
||||
label="用户名"
|
||||
name="username"
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<ant-form-image-upload
|
||||
label="图片上传"
|
||||
name="imageList"
|
||||
onUpload="{{ onUpload ? onUpload : 'onUpload' }}"
|
||||
maxCount="{{ 3 }}"
|
||||
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
|
||||
maxCount="{{3}}"
|
||||
tooltip="需要上传3张图片"
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></ant-form-image-upload>
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="submit"
|
||||
style="margin-bottom: 12px">
|
||||
style="margin-bottom: 12px"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
<ant-button onTap="reset">重置</ant-button>
|
||||
</view>
|
||||
</view>
|
@ -5,30 +5,31 @@
|
||||
allowClear
|
||||
required
|
||||
message="需要填写用户名"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<ant-form-input
|
||||
label="地址"
|
||||
name="address"
|
||||
allowClear
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<ant-form-switch
|
||||
label="选择"
|
||||
name="needDelivery"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-switch>
|
||||
<ant-form-stepper
|
||||
label="数量"
|
||||
name="quantity"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-stepper>
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="submit"
|
||||
style="margin-bottom: 12px">
|
||||
style="margin-bottom: 12px"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
<ant-button onTap="reset">重置</ant-button>
|
||||
</view>
|
||||
</view>
|
@ -5,30 +5,31 @@
|
||||
allowClear
|
||||
required
|
||||
message="需要填写用户名"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<ant-form-input
|
||||
label="地址"
|
||||
name="address"
|
||||
allowClear
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<ant-form-switch
|
||||
label="选择"
|
||||
name="needDelivery"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-switch>
|
||||
<ant-form-stepper
|
||||
label="数量"
|
||||
name="quantity"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-stepper>
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="submit"
|
||||
style="margin-bottom: 12px">
|
||||
style="margin-bottom: 12px"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
<ant-button onTap="reset">重置</ant-button>
|
||||
</view>
|
||||
</view>
|
@ -1,4 +1,8 @@
|
||||
<block a:for="{{config.formItems}}">
|
||||
<block
|
||||
a:for="{{config.formItems}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item"
|
||||
>
|
||||
<form-input
|
||||
a:if="{{item.type === 'input'}}"
|
||||
label="{{item.label}}"
|
||||
@ -6,39 +10,40 @@
|
||||
required="{{item.required}}"
|
||||
message="{{item.message}}"
|
||||
placeholder="{{item.placeholder}}"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></form-input>
|
||||
<form-switch
|
||||
a:elif="{{item.type === 'switch'}}"
|
||||
label="{{item.label}}"
|
||||
name="{{item.name}}"
|
||||
message="{{item.message}}"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></form-switch>
|
||||
<form-stepper
|
||||
a:elif="{{item.type === 'stepper'}}"
|
||||
label="{{item.label}}"
|
||||
name="{{item.name}}"
|
||||
required="{{item.required}}"
|
||||
message="{{item.message}}"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></form-stepper>
|
||||
<slot
|
||||
a:else
|
||||
name="{{item.type}}"
|
||||
value="{{item}}" />
|
||||
a:else
|
||||
value="{{item}}"
|
||||
></slot>
|
||||
</block>
|
||||
|
||||
<button
|
||||
type="{{config.submit.type}}"
|
||||
style="{{config.submit.style}}"
|
||||
onTap="submit">
|
||||
onTap="submit"
|
||||
>
|
||||
{{config.submit.text}}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="{{config.reset.type}}"
|
||||
style="{{config.reset.style}}"
|
||||
onTap="reset">
|
||||
onTap="reset"
|
||||
>
|
||||
{{config.reset.text}}
|
||||
</button>
|
||||
</button>
|
@ -1,25 +1,30 @@
|
||||
<form-json
|
||||
config="{{config}}"
|
||||
onSuccess="onSuccess"
|
||||
ref="handleFormJSONRef">
|
||||
ref="handleFormJSONRef"
|
||||
>
|
||||
<view
|
||||
slot="custom-input"
|
||||
slot-scope="item">
|
||||
slot-scope="item"
|
||||
>
|
||||
<form-input
|
||||
label="{{item.value.label}}"
|
||||
name="{{item.value.name}}"
|
||||
required="{{item.value.required}}"
|
||||
placeholder="{{item.value.placeholder}}"
|
||||
message="{{item.value.message}}"
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></form-input>
|
||||
</view>
|
||||
<view
|
||||
slot="custom-switch"
|
||||
slot-scope="item">
|
||||
slot-scope="item"
|
||||
>
|
||||
<form-switch
|
||||
label="{{item.value.label}}"
|
||||
name="{{item.value.name}}"
|
||||
message="{{item.value.message}}"
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></form-switch>
|
||||
</view>
|
||||
</form-json>
|
||||
</form-json>
|
@ -2,42 +2,45 @@
|
||||
label="用户名"
|
||||
name="account"
|
||||
required
|
||||
position="{{ position }}"
|
||||
ref="handleRef" />
|
||||
|
||||
position="{{position}}"
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<ant-form-input
|
||||
label="地址"
|
||||
name="address"
|
||||
position="{{ position }}"
|
||||
ref="handleRef" />
|
||||
|
||||
position="{{position}}"
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<ant-form-switch
|
||||
label="选择"
|
||||
name="needDelivery"
|
||||
position="{{ position }}"
|
||||
ref="handleRef" />
|
||||
|
||||
position="{{position}}"
|
||||
ref="handleRef"
|
||||
></ant-form-switch>
|
||||
<ant-form-stepper
|
||||
label="数量"
|
||||
name="quantity"
|
||||
position="{{ position }}"
|
||||
ref="handleRef" />
|
||||
|
||||
position="{{position}}"
|
||||
ref="handleRef"
|
||||
></ant-form-stepper>
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="submit"
|
||||
className="button">
|
||||
className="button"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
<ant-button
|
||||
onTap="reset"
|
||||
className="button">
|
||||
className="button"
|
||||
>
|
||||
重置
|
||||
</ant-button>
|
||||
<ant-button
|
||||
onTap="toggle"
|
||||
className="button">
|
||||
className="button"
|
||||
>
|
||||
切换表单布局
|
||||
</ant-button>
|
||||
</view>
|
||||
</view>
|
@ -5,25 +5,25 @@
|
||||
allowClear
|
||||
required
|
||||
message="需要填写用户名"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<ant-form-input
|
||||
label="地址"
|
||||
name="address"
|
||||
allowClear
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="submit"
|
||||
style="margin-bottom: 12px">
|
||||
style="margin-bottom: 12px"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
<ant-button onTap="reset">重置</ant-button>
|
||||
</view>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="表单2">
|
||||
<ant-form-input
|
||||
label="用户名"
|
||||
@ -31,21 +31,22 @@
|
||||
allowClear
|
||||
required
|
||||
message="需要填写用户名"
|
||||
ref="handleRef2" />
|
||||
|
||||
ref="handleRef2"
|
||||
></ant-form-input>
|
||||
<ant-form-input
|
||||
label="地址"
|
||||
name="address"
|
||||
allowClear
|
||||
ref="handleRef2" />
|
||||
|
||||
ref="handleRef2"
|
||||
></ant-form-input>
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="submit2"
|
||||
style="margin-bottom: 12px">
|
||||
style="margin-bottom: 12px"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
<ant-button onTap="reset2">重置</ant-button>
|
||||
</view>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -3,32 +3,34 @@
|
||||
name="account"
|
||||
required
|
||||
message="需要输入用户名"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<ant-form-input
|
||||
label="密码"
|
||||
name="password"
|
||||
password
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<ant-form-input
|
||||
label="重复密码"
|
||||
name="confirm"
|
||||
password
|
||||
dependencies="{{ ['password'] }}"
|
||||
ref="handleRef" />
|
||||
|
||||
dependencies="{{['password']}}"
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="submit"
|
||||
style="margin-bottom: 12px">
|
||||
style="margin-bottom: 12px"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
<ant-button
|
||||
onTap="reset"
|
||||
style="margin-bottom: 12px">
|
||||
style="margin-bottom: 12px"
|
||||
>
|
||||
重置
|
||||
</ant-button>
|
||||
<ant-button onTap="fill">Fill表单</ant-button>
|
||||
</view>
|
||||
</view>
|
@ -3,25 +3,26 @@
|
||||
name="account"
|
||||
validateStatus="error"
|
||||
help="需要填写用户名"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<ant-form-input
|
||||
label="地址"
|
||||
name="address"
|
||||
help="需要填写地址"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<ant-form-input
|
||||
label="水果"
|
||||
name="fruit"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="submit"
|
||||
style="margin-bottom: 12px">
|
||||
style="margin-bottom: 12px"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
<ant-button onTap="reset">重置</ant-button>
|
||||
</view>
|
||||
</view>
|
@ -1,26 +1,31 @@
|
||||
<ant-form-input
|
||||
label="用户名"
|
||||
name="account"
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<ant-form-input
|
||||
label="密码"
|
||||
name="password"
|
||||
password
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<ant-form-input
|
||||
label="IP"
|
||||
name="ip"
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="submit"
|
||||
style="margin-bottom: 12px">
|
||||
style="margin-bottom: 12px"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
<ant-button
|
||||
onTap="reset"
|
||||
style="margin-bottom: 12px">
|
||||
style="margin-bottom: 12px"
|
||||
>
|
||||
重置
|
||||
</ant-button>
|
||||
</view>
|
||||
</view>
|
@ -3,33 +3,33 @@
|
||||
name="account"
|
||||
placeholder="请输入用户名"
|
||||
required
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<ant-form-input
|
||||
label="地址"
|
||||
name="address"
|
||||
placeholder="请输入地址"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-form-input>
|
||||
<view style="margin: 12px">
|
||||
onValuesChange:
|
||||
<view style="margin: 12px">
|
||||
<view>修改:{{ changedValuesText }}</view>
|
||||
|
||||
<view>表单:{{ allValuesText }}</view>
|
||||
<view>修改:{{changedValuesText}}</view>
|
||||
<view>表单:{{allValuesText}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
type="primary"
|
||||
onTap="submit"
|
||||
className="button">
|
||||
className="button"
|
||||
>
|
||||
提交
|
||||
</ant-button>
|
||||
<ant-button
|
||||
onTap="reset"
|
||||
className="button">
|
||||
className="button"
|
||||
>
|
||||
重置
|
||||
</ant-button>
|
||||
</view>
|
||||
</view>
|
@ -1,104 +1,122 @@
|
||||
<ant-container title="2列">
|
||||
<ant-grid
|
||||
items="{{ items2 }}"
|
||||
items="{{items2}}"
|
||||
onTap="handleTapItem"
|
||||
columns="{{ 2 }}" />
|
||||
columns="{{2}}"
|
||||
></ant-grid>
|
||||
</ant-container>
|
||||
<ant-container title="3列">
|
||||
<ant-grid
|
||||
items="{{ items3 }}"
|
||||
items="{{items3}}"
|
||||
onTap="handleTapItem"
|
||||
columns="{{ 3 }}" />
|
||||
columns="{{3}}"
|
||||
></ant-grid>
|
||||
</ant-container>
|
||||
<ant-container title="4列">
|
||||
<ant-grid
|
||||
items="{{ items4 }}"
|
||||
items="{{items4}}"
|
||||
onTap="handleTapItem"
|
||||
columns="{{ 4 }}" />
|
||||
columns="{{4}}"
|
||||
></ant-grid>
|
||||
</ant-container>
|
||||
<ant-container title="5列">
|
||||
<ant-grid
|
||||
items="{{ items5 }}"
|
||||
items="{{items5}}"
|
||||
onTap="handleTapItem"
|
||||
columns="{{ 5 }}" />
|
||||
columns="{{5}}"
|
||||
></ant-grid>
|
||||
</ant-container>
|
||||
<ant-container title="5列-展示分割线">
|
||||
<ant-grid
|
||||
items="{{ items5 }}"
|
||||
items="{{items5}}"
|
||||
onTap="handleTapItem"
|
||||
columns="{{ 5 }}"
|
||||
showDivider />
|
||||
columns="{{5}}"
|
||||
showDivider
|
||||
></ant-grid>
|
||||
</ant-container>
|
||||
<ant-container title="2列-带描述">
|
||||
<ant-grid
|
||||
items="{{ items2withDesc }}"
|
||||
items="{{items2withDesc}}"
|
||||
onTap="handleTapItem"
|
||||
columns="{{ 2 }}" />
|
||||
columns="{{2}}"
|
||||
></ant-grid>
|
||||
</ant-container>
|
||||
<ant-container title="3列-带描述">
|
||||
<ant-grid
|
||||
items="{{ items3withDesc }}"
|
||||
items="{{items3withDesc}}"
|
||||
onTap="handleTapItem"
|
||||
columns="{{ 3 }}" />
|
||||
columns="{{3}}"
|
||||
></ant-grid>
|
||||
</ant-container>
|
||||
<ant-container title="2列-元素横向布局">
|
||||
<ant-grid
|
||||
items="{{ items2 }}"
|
||||
items="{{items2}}"
|
||||
onTap="handleTapItem"
|
||||
columns="{{ 2 }}"
|
||||
gridItemLayout="horizontal" />
|
||||
columns="{{2}}"
|
||||
gridItemLayout="horizontal"
|
||||
></ant-grid>
|
||||
</ant-container>
|
||||
<ant-container title="3列-元素横向布局">
|
||||
<ant-grid
|
||||
items="{{ items3 }}"
|
||||
items="{{items3}}"
|
||||
onTap="handleTapItem"
|
||||
columns="{{ 3 }}"
|
||||
gridItemLayout="horizontal" />
|
||||
columns="{{3}}"
|
||||
gridItemLayout="horizontal"
|
||||
></ant-grid>
|
||||
</ant-container>
|
||||
<ant-container title="可滑动">
|
||||
<ant-grid
|
||||
items="{{ scrollItems }}"
|
||||
items="{{scrollItems}}"
|
||||
onTap="handleTapItem"
|
||||
mode="scroll" />
|
||||
mode="scroll"
|
||||
></ant-grid>
|
||||
</ant-container>
|
||||
<ant-container title="自定义图标大小">
|
||||
<ant-grid
|
||||
items="{{ itemsCustom }}"
|
||||
items="{{itemsCustom}}"
|
||||
onTap="handleTapItem"
|
||||
columns="{{ 5 }}"
|
||||
iconSize="{{ 44 }}" />
|
||||
columns="{{5}}"
|
||||
iconSize="{{44}}"
|
||||
></ant-grid>
|
||||
</ant-container>
|
||||
<ant-container title="自定义">
|
||||
<ant-grid
|
||||
items="{{ itemsCustom }}"
|
||||
items="{{itemsCustom}}"
|
||||
onTap="handleTapItem"
|
||||
columns="{{ 5 }}">
|
||||
columns="{{5}}"
|
||||
>
|
||||
<view
|
||||
slot="icon"
|
||||
slot-scope="props">
|
||||
slot-scope="props"
|
||||
>
|
||||
<ant-badge
|
||||
a:if="{{ props.value.tag }}"
|
||||
a:if="{{props.value.tag}}"
|
||||
offsetX="-10px"
|
||||
type="text"
|
||||
text="{{ props.value.tag }}">
|
||||
text="{{props.value.tag}}"
|
||||
>
|
||||
<image
|
||||
src="{{ props.value.icon }}"
|
||||
style="width: 44px; height: 44px" />
|
||||
src="{{props.value.icon}}"
|
||||
style="width: 44px; height: 44px"
|
||||
></image>
|
||||
</ant-badge>
|
||||
<image
|
||||
a:else
|
||||
src="{{ props.value.icon }}"
|
||||
style="width: 44px; height: 44px" />
|
||||
src="{{props.value.icon}}"
|
||||
style="width: 44px; height: 44px"
|
||||
></image>
|
||||
</view>
|
||||
<view
|
||||
slot="title"
|
||||
slot-scope="props">
|
||||
第{{ props.index + 1 }}项
|
||||
slot-scope="props"
|
||||
>
|
||||
第{{props.index + 1}}项
|
||||
</view>
|
||||
<view
|
||||
slot="description"
|
||||
slot-scope="props">
|
||||
描述{{ props.index + 1 }}
|
||||
slot-scope="props"
|
||||
>
|
||||
描述{{props.index + 1}}
|
||||
</view>
|
||||
</ant-grid>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,73 +1,84 @@
|
||||
<ant-guide-tour
|
||||
items="{{ [list[0]] }}"
|
||||
visible="{{ baseVisible }}"
|
||||
onCancel="closeTour"
|
||||
onChange="onChange" />
|
||||
<ant-guide-tour
|
||||
items="{{ list }}"
|
||||
visible="{{ moreVisible }}"
|
||||
onCancel="closeTour"
|
||||
onChange="onChange" />
|
||||
<ant-guide-tour
|
||||
items="{{ list }}"
|
||||
visible="{{ swiperVisible }}"
|
||||
items="{{[list[0]]}}"
|
||||
visible="{{baseVisible}}"
|
||||
onCancel="closeTour"
|
||||
onChange="onChange"
|
||||
swiperable="{{ true }}" />
|
||||
></ant-guide-tour>
|
||||
<ant-guide-tour
|
||||
items="{{ list }}"
|
||||
current="{{ current }}"
|
||||
visible="{{ controlledVisible }}"
|
||||
items="{{list}}"
|
||||
visible="{{moreVisible}}"
|
||||
onCancel="closeTour"
|
||||
onChange="onChangeControlled" />
|
||||
onChange="onChange"
|
||||
></ant-guide-tour>
|
||||
<ant-guide-tour
|
||||
items="{{ list }}"
|
||||
visible="{{ slotVisible }}"
|
||||
items="{{list}}"
|
||||
visible="{{swiperVisible}}"
|
||||
onCancel="closeTour"
|
||||
onChange="onChange"
|
||||
swiperable="{{true}}"
|
||||
></ant-guide-tour>
|
||||
<ant-guide-tour
|
||||
items="{{list}}"
|
||||
current="{{current}}"
|
||||
visible="{{controlledVisible}}"
|
||||
onCancel="closeTour"
|
||||
onChange="onChangeControlled"
|
||||
></ant-guide-tour>
|
||||
<ant-guide-tour
|
||||
items="{{list}}"
|
||||
visible="{{slotVisible}}"
|
||||
onCancel="closeTour"
|
||||
onChange="onChange"
|
||||
jumpText="跳过"
|
||||
gotItText="知道了"
|
||||
prevStepText="上一步"
|
||||
nextStepText="下一步">
|
||||
nextStepText="下一步"
|
||||
>
|
||||
<view
|
||||
class="step-box"
|
||||
slot="step"
|
||||
slot-scope="props">
|
||||
step-{{ props.index }}
|
||||
slot-scope="props"
|
||||
>
|
||||
step-{{props.index}}
|
||||
</view>
|
||||
</ant-guide-tour>
|
||||
|
||||
<ant-container
|
||||
title="基础用法"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
onTap="openTour"
|
||||
data-field="baseVisible">
|
||||
data-field="baseVisible"
|
||||
>
|
||||
单图模式
|
||||
</ant-button>
|
||||
<ant-button
|
||||
onTap="openTour"
|
||||
data-field="moreVisible">
|
||||
data-field="moreVisible"
|
||||
>
|
||||
多图模式
|
||||
</ant-button>
|
||||
<ant-button
|
||||
onTap="openTour"
|
||||
data-field="swiperVisible">
|
||||
data-field="swiperVisible"
|
||||
>
|
||||
滑动模式
|
||||
</ant-button>
|
||||
<ant-button
|
||||
onTap="openTour"
|
||||
data-field="controlledVisible">
|
||||
data-field="controlledVisible"
|
||||
>
|
||||
受控模式
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
|
||||
<ant-container
|
||||
title="插槽用法"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
onTap="openTour"
|
||||
data-field="slotVisible">
|
||||
data-field="slotVisible"
|
||||
>
|
||||
开始
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,42 +1,44 @@
|
||||
<ant-container title="基本使用">
|
||||
<ant-icon type="SmileOutline" />
|
||||
<ant-icon type="PayCircleOutline" />
|
||||
<ant-icon type="LocationFill" />
|
||||
<ant-icon type="SmileOutline"></ant-icon>
|
||||
<ant-icon type="PayCircleOutline"></ant-icon>
|
||||
<ant-icon type="LocationFill"></ant-icon>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="自定义大小">
|
||||
<ant-icon
|
||||
type="SmileOutline"
|
||||
style="font-size: 20px" />
|
||||
style="font-size: 20px"
|
||||
></ant-icon>
|
||||
<ant-icon
|
||||
type="SmileOutline"
|
||||
style="font-size: 30px" />
|
||||
style="font-size: 30px"
|
||||
></ant-icon>
|
||||
<ant-icon
|
||||
type="SmileOutline"
|
||||
className="custom-size" />
|
||||
className="custom-size"
|
||||
></ant-icon>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="自定义颜色">
|
||||
<ant-icon
|
||||
type="SmileOutline"
|
||||
style="color: red" />
|
||||
style="color: red"
|
||||
></ant-icon>
|
||||
<ant-icon
|
||||
type="SmileOutline"
|
||||
className="custom-color" />
|
||||
className="custom-color"
|
||||
></ant-icon>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="更多自定义">
|
||||
<view class="custom">
|
||||
<ant-icon type="SmileOutline" />
|
||||
<ant-icon type="SmileOutline"></ant-icon>
|
||||
</view>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="点击事件">
|
||||
<view style="display: flex">
|
||||
<ant-icon
|
||||
onTap="handleTap"
|
||||
data-id="icon"
|
||||
type="SmileOutline"
|
||||
style="font-size: 50px" />
|
||||
style="font-size: 50px"
|
||||
></ant-icon>
|
||||
</view>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,35 +1,40 @@
|
||||
<ant-container title="基本用法">
|
||||
<ant-uploader
|
||||
onChange="onChange"
|
||||
onUpload="{{ onUpload ? onUpload : 'onUpload' }}"
|
||||
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
|
||||
uploadingText="上传中……"
|
||||
uploadfailedText="上传失败" />
|
||||
uploadfailedText="上传失败"
|
||||
></ant-uploader>
|
||||
</ant-container>
|
||||
<ant-container title="初始值">
|
||||
<ant-uploader
|
||||
defaultFileList="{{ defaultFileList }}"
|
||||
defaultFileList="{{defaultFileList}}"
|
||||
onChange="onChange"
|
||||
onUpload="{{ onUpload ? onUpload : 'onUpload' }}"
|
||||
onPreview="onPreview" />
|
||||
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
|
||||
onPreview="onPreview"
|
||||
></ant-uploader>
|
||||
</ant-container>
|
||||
<ant-container title="上传最大限制">
|
||||
限制只能上传1个
|
||||
<ant-uploader
|
||||
maxCount="{{ 1 }}"
|
||||
maxCount="{{1}}"
|
||||
onChange="onChange"
|
||||
onUpload="{{ onUpload ? onUpload : 'onUpload' }}" />
|
||||
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
|
||||
></ant-uploader>
|
||||
</ant-container>
|
||||
<ant-container title="自定义移除">
|
||||
<ant-uploader
|
||||
defaultFileList="{{ defaultFileList }}"
|
||||
onRemove="{{ onRemove ? onRemove : 'onRemove' }}"
|
||||
defaultFileList="{{defaultFileList}}"
|
||||
onRemove="{{onRemove ? onRemove : 'onRemove'}}"
|
||||
onChange="onChange"
|
||||
onUpload="{{ onUpload ? onUpload : 'onUpload' }}" />
|
||||
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
|
||||
></ant-uploader>
|
||||
</ant-container>
|
||||
<ant-container title="自定义上传前">
|
||||
<ant-uploader
|
||||
defaultFileList="{{ defaultFileList }}"
|
||||
onBeforeUpload="{{ onBeforeUpload ? onBeforeUpload : 'onBeforeUpload' }}"
|
||||
defaultFileList="{{defaultFileList}}"
|
||||
onBeforeUpload="{{onBeforeUpload ? onBeforeUpload : 'onBeforeUpload'}}"
|
||||
onChange="onChange"
|
||||
onUpload="{{ onUpload ? onUpload : 'onUpload' }}" />
|
||||
</ant-container>
|
||||
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
|
||||
></ant-uploader>
|
||||
</ant-container>
|
@ -1,19 +1,22 @@
|
||||
<ant-container title="受控模式">
|
||||
<ant-uploader
|
||||
fileList="{{ fileList }}"
|
||||
fileList="{{fileList}}"
|
||||
onChange="onChange"
|
||||
onUpload="{{ onUpload ? onUpload : 'onUpload' }}" />
|
||||
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
|
||||
></ant-uploader>
|
||||
</ant-container>
|
||||
<ant-container title="手动触发上传">
|
||||
<ant-uploader
|
||||
ref="handleUploaderRef"
|
||||
fileList="{{ fileList }}"
|
||||
fileList="{{fileList}}"
|
||||
onChange="onChange"
|
||||
onUpload="{{ onUpload ? onUpload : 'onUpload' }}" />
|
||||
onUpload="{{onUpload ? onUpload : 'onUpload'}}"
|
||||
></ant-uploader>
|
||||
<ant-button
|
||||
size="medium"
|
||||
onTap="upload"
|
||||
type="primary">
|
||||
type="primary"
|
||||
>
|
||||
上传
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,6 +1,6 @@
|
||||
<view class="base">
|
||||
<list header="基本使用"></list>
|
||||
<view class="indexbar">
|
||||
<index-bar items="{{items}}" />
|
||||
<index-bar items="{{items}}"></index-bar>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
@ -3,15 +3,21 @@
|
||||
className="indexbar"
|
||||
items="{{items}}"
|
||||
defaultCurrent="A"
|
||||
onChange="onChange">
|
||||
<view slot-scope="props">
|
||||
onChange="onChange"
|
||||
>
|
||||
<view
|
||||
slot="$default"
|
||||
slot-scope="props"
|
||||
>
|
||||
<list header="{{props.value.label}}">
|
||||
<list-item
|
||||
a:for="{{4}}"
|
||||
a:for-item="itemX">
|
||||
a:for-index="index"
|
||||
a:for-item="itemX"
|
||||
>
|
||||
{{props.value.label}}-{{itemX}}
|
||||
</list-item>
|
||||
</list>
|
||||
</view>
|
||||
</index-bar>
|
||||
</view>
|
||||
</view>
|
@ -1,78 +1,80 @@
|
||||
<container title="基础用法">
|
||||
<ant-input
|
||||
placeholder="请输入内容"
|
||||
onChange="onChange" />
|
||||
onChange="onChange"
|
||||
></ant-input>
|
||||
</container>
|
||||
|
||||
<container title="初始值">
|
||||
<ant-input
|
||||
placeholder="请输入内容"
|
||||
defaultValue="这是antd mini小程序组件"
|
||||
onChange="onChange" />
|
||||
onChange="onChange"
|
||||
></ant-input>
|
||||
</container>
|
||||
|
||||
<container title="带清除按钮">
|
||||
<ant-input
|
||||
placeholder="请输入内容"
|
||||
allowClear />
|
||||
allowClear
|
||||
></ant-input>
|
||||
</container>
|
||||
|
||||
<container title="带有前缀后缀">
|
||||
<ant-input
|
||||
placeholder="请输入内容"
|
||||
onChange="onChange"
|
||||
allowClear>
|
||||
allowClear
|
||||
>
|
||||
<view slot="prefix">¥</view>
|
||||
<view slot="suffix">RMB</view>
|
||||
</ant-input>
|
||||
</container>
|
||||
|
||||
<container title="禁用状态">
|
||||
<ant-input
|
||||
placeholder="被禁用的输入框"
|
||||
disabled="{{ true }}" />
|
||||
disabled="{{true}}"
|
||||
></ant-input>
|
||||
</container>
|
||||
|
||||
<container title="受控模式">
|
||||
<ant-input
|
||||
controlled="{{ true }}"
|
||||
value="{{ value }}"
|
||||
controlled="{{true}}"
|
||||
value="{{value}}"
|
||||
placeholder="请输入内容"
|
||||
allowClear
|
||||
onChange="handleChange" />
|
||||
onChange="handleChange"
|
||||
></ant-input>
|
||||
<ant-button
|
||||
onTap="clear"
|
||||
inline
|
||||
size="small">
|
||||
size="small"
|
||||
>
|
||||
clear
|
||||
</ant-button>
|
||||
</container>
|
||||
|
||||
<container title="受控模式-输入金额">
|
||||
<ant-input
|
||||
placeholder="请输入金额"
|
||||
value="{{ money }}"
|
||||
value="{{money}}"
|
||||
onChange="handleMoney"
|
||||
type="digit"
|
||||
className="input money"
|
||||
focusClassName="border"
|
||||
allowClear>
|
||||
allowClear
|
||||
>
|
||||
<view slot="prefix">¥</view>
|
||||
<view slot="suffix">RMB</view>
|
||||
</ant-input>
|
||||
</container>
|
||||
|
||||
<container title="非受控模式通过ref修改input">
|
||||
<ant-input
|
||||
placeholder="请输入内容"
|
||||
onChange="onChange"
|
||||
ref="handleRef" />
|
||||
|
||||
ref="handleRef"
|
||||
></ant-input>
|
||||
<view>
|
||||
<ant-button
|
||||
inline
|
||||
onTap="clearByInputRef">
|
||||
onTap="clearByInputRef"
|
||||
>
|
||||
clear
|
||||
</ant-button>
|
||||
</view>
|
||||
</container>
|
||||
</container>
|
@ -2,48 +2,52 @@
|
||||
<ant-input
|
||||
className="custom"
|
||||
placeholder="请输入内容"
|
||||
onChange="onChange" />
|
||||
|
||||
onChange="onChange"
|
||||
></ant-input>
|
||||
<ant-input
|
||||
className="custom"
|
||||
placeholder="请输入内容"
|
||||
onChange="onChange">
|
||||
onChange="onChange"
|
||||
>
|
||||
<ant-icon
|
||||
type="SearchOutline"
|
||||
slot="prefix" />
|
||||
slot="prefix"
|
||||
></ant-icon>
|
||||
<ant-icon
|
||||
type="AudioOutline"
|
||||
slot="suffix" />
|
||||
slot="suffix"
|
||||
></ant-icon>
|
||||
</ant-input>
|
||||
|
||||
<ant-textarea
|
||||
className="custom"
|
||||
placeholder="请输入内容"
|
||||
onChange="onChange" />
|
||||
onChange="onChange"
|
||||
></ant-textarea>
|
||||
</container>
|
||||
|
||||
<container title="自定义背景颜色">
|
||||
<ant-input
|
||||
className="custom-color"
|
||||
placeholder="请输入内容"
|
||||
onChange="onChange" />
|
||||
|
||||
onChange="onChange"
|
||||
></ant-input>
|
||||
<ant-textarea
|
||||
className="custom-color"
|
||||
placeholder="请输入内容"
|
||||
onChange="onChange" />
|
||||
onChange="onChange"
|
||||
></ant-textarea>
|
||||
</container>
|
||||
|
||||
<!--微信不支持 placeholderClassName-->
|
||||
<container title="自定义 placeholderClassName">
|
||||
<ant-input
|
||||
placeholderClassName="placeholder"
|
||||
placeholder="请输入内容"
|
||||
onChange="onChange" />
|
||||
onChange="onChange"
|
||||
></ant-input>
|
||||
</container>
|
||||
|
||||
<container title="自定义 placeholderStyle">
|
||||
<ant-input
|
||||
placeholderStyle="color: red;"
|
||||
placeholder="请输入内容"
|
||||
onChange="onChange" />
|
||||
</container>
|
||||
onChange="onChange"
|
||||
></ant-input>
|
||||
</container>
|
@ -4,17 +4,19 @@
|
||||
onChange="onChange"
|
||||
className="search-bar"
|
||||
focusClassName="search-bar-focus"
|
||||
confirm-type="search"
|
||||
confirmType="search"
|
||||
allowClear
|
||||
focus
|
||||
onConfirm="onConfirm">
|
||||
onConfirm="onConfirm"
|
||||
>
|
||||
<ant-icon
|
||||
slot="prefix"
|
||||
type="SearchOutline" />
|
||||
|
||||
type="SearchOutline"
|
||||
></ant-icon>
|
||||
<ant-icon
|
||||
slot="suffix"
|
||||
type="AudioOutline" />
|
||||
type="AudioOutline"
|
||||
></ant-icon>
|
||||
</ant-input>
|
||||
<view class="cancel">取消</view>
|
||||
</view>
|
||||
</view>
|
@ -2,55 +2,58 @@
|
||||
<ant-textarea
|
||||
placeholder="请输入内容"
|
||||
autoHeight
|
||||
onChange="onChange" />
|
||||
onChange="onChange"
|
||||
></ant-textarea>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="初始值">
|
||||
<ant-textarea
|
||||
placeholder="请输入内容"
|
||||
defaultValue="这是antd mini小程序组件"
|
||||
autoHeight
|
||||
onChange="onChange" />
|
||||
onChange="onChange"
|
||||
></ant-textarea>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="带清除按钮">
|
||||
<ant-textarea
|
||||
placeholder="请输入内容"
|
||||
autoHeight
|
||||
allowClear />
|
||||
allowClear
|
||||
></ant-textarea>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="禁用状态">
|
||||
<ant-textarea
|
||||
placeholder="被禁用的输入框"
|
||||
disabled />
|
||||
disabled
|
||||
></ant-textarea>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="受控模式">
|
||||
<ant-textarea
|
||||
value="{{ value }}"
|
||||
value="{{value}}"
|
||||
placeholder="请输入内容"
|
||||
allowClear
|
||||
onChange="handleChange" />
|
||||
onChange="handleChange"
|
||||
></ant-textarea>
|
||||
<ant-button
|
||||
onTap="clear"
|
||||
inline
|
||||
size="small">
|
||||
size="small"
|
||||
>
|
||||
clear
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="非受控模式通过ref修改input">
|
||||
<ant-textarea
|
||||
placeholder="请输入内容"
|
||||
allowClear
|
||||
onChange="onChange"
|
||||
ref="handleRef" />
|
||||
ref="handleRef"
|
||||
></ant-textarea>
|
||||
<view>
|
||||
<ant-button
|
||||
inline
|
||||
onTap="clearByInputRef">
|
||||
onTap="clearByInputRef"
|
||||
>
|
||||
clear
|
||||
</ant-button>
|
||||
</view>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,54 +1,63 @@
|
||||
<view>
|
||||
<ant-list
|
||||
header="基础用法"
|
||||
radius="{{ radius }}">
|
||||
radius="{{radius}}"
|
||||
>
|
||||
<ant-list-item>1</ant-list-item>
|
||||
<ant-list-item>2</ant-list-item>
|
||||
<ant-list-item>3</ant-list-item>
|
||||
</ant-list>
|
||||
<ant-list
|
||||
header="可点击列表"
|
||||
radius="{{ radius }}">
|
||||
radius="{{radius}}"
|
||||
>
|
||||
<ant-list-item
|
||||
image="PayCircleOutline"
|
||||
arrow="right"
|
||||
onTap="handleTap"
|
||||
data-info="总资产">
|
||||
data-info="总资产"
|
||||
>
|
||||
总资产
|
||||
</ant-list-item>
|
||||
<ant-list-item
|
||||
image="SetOutline"
|
||||
arrow="right"
|
||||
catchTap="catchTap"
|
||||
data-info="设置">
|
||||
data-info="设置"
|
||||
>
|
||||
设置
|
||||
</ant-list-item>
|
||||
<ant-list-item
|
||||
image="https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ"
|
||||
arrow="right"
|
||||
onTap="handleTap"
|
||||
data-info="图片">
|
||||
data-info="图片"
|
||||
>
|
||||
图片
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
<ant-list
|
||||
radius="{{ radius }}"
|
||||
header="复杂布局">
|
||||
radius="{{radius}}"
|
||||
header="复杂布局"
|
||||
>
|
||||
<ant-list-item>
|
||||
圆角
|
||||
<ant-switch
|
||||
slot="extra"
|
||||
checked="{{ radius }}"
|
||||
onChange="handleSetRadius" />
|
||||
checked="{{radius}}"
|
||||
onChange="handleSetRadius"
|
||||
></ant-switch>
|
||||
</ant-list-item>
|
||||
<ant-list-item
|
||||
extraBrief="未开启"
|
||||
arrow="right">
|
||||
arrow="right"
|
||||
>
|
||||
大字号模式
|
||||
</ant-list-item>
|
||||
<ant-list-item
|
||||
brief="管理已授权的产品和设备"
|
||||
arrow="{{ item.arrow }}">
|
||||
arrow="{{item.arrow}}"
|
||||
>
|
||||
授权管理
|
||||
</ant-list-item>
|
||||
<ant-list-item
|
||||
@ -58,30 +67,35 @@
|
||||
extraBrief="次要辅助信息"
|
||||
onTap="handleTap"
|
||||
data-info="三行列表"
|
||||
arrow="right">
|
||||
arrow="right"
|
||||
>
|
||||
三行列表
|
||||
<ant-icon
|
||||
slot="image"
|
||||
type="AlipaySquareFill"
|
||||
style="font-size: 64px" />
|
||||
style="font-size: 64px"
|
||||
></ant-icon>
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
<ant-list
|
||||
radius="{{ radius }}"
|
||||
header="禁用状态">
|
||||
radius="{{radius}}"
|
||||
header="禁用状态"
|
||||
>
|
||||
<ant-list-item
|
||||
disabled
|
||||
image="UnorderedListOutline"
|
||||
arrow="right"
|
||||
data-info="账单">
|
||||
data-info="账单"
|
||||
>
|
||||
账单
|
||||
</ant-list-item>
|
||||
<ant-list-item
|
||||
disabled
|
||||
image="PayCircleOutline"
|
||||
arrow="right"
|
||||
data-info="总资产">
|
||||
data-info="总资产"
|
||||
>
|
||||
总资产
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
</view>
|
||||
</view>
|
@ -1,58 +1,64 @@
|
||||
<ant-container
|
||||
title="基础用法-spin"
|
||||
className="container">
|
||||
className="container"
|
||||
>
|
||||
<view class="list">
|
||||
<ant-loading type="spin" />
|
||||
<ant-loading type="spin"></ant-loading>
|
||||
</view>
|
||||
</ant-container>
|
||||
|
||||
<ant-container
|
||||
title="基础用法-mini"
|
||||
className="container">
|
||||
className="container"
|
||||
>
|
||||
<view class="list">
|
||||
<ant-loading type="mini" />
|
||||
<ant-loading type="mini"></ant-loading>
|
||||
</view>
|
||||
</ant-container>
|
||||
|
||||
<ant-container
|
||||
title="spin大小"
|
||||
className="container">
|
||||
className="container"
|
||||
>
|
||||
<view class="list">
|
||||
<ant-loading
|
||||
type="spin"
|
||||
size="x-large" />
|
||||
size="x-large"
|
||||
></ant-loading>
|
||||
<ant-loading
|
||||
type="spin"
|
||||
size="large" />
|
||||
size="large"
|
||||
></ant-loading>
|
||||
<ant-loading
|
||||
type="spin"
|
||||
size="medium" />
|
||||
size="medium"
|
||||
></ant-loading>
|
||||
<ant-loading
|
||||
type="spin"
|
||||
size="small" />
|
||||
size="small"
|
||||
></ant-loading>
|
||||
</view>
|
||||
</ant-container>
|
||||
|
||||
<ant-container
|
||||
title="自定义颜色"
|
||||
className="container">
|
||||
className="container"
|
||||
>
|
||||
<view class="list">
|
||||
<ant-loading
|
||||
type="mini"
|
||||
color="#1677ff" />
|
||||
<ant-loading color="#1677ff" />
|
||||
<ant-loading color="#34B368" />
|
||||
<ant-loading color="#ff8f1f" />
|
||||
<ant-loading color="#ff0000" />
|
||||
color="#1677ff"
|
||||
></ant-loading>
|
||||
<ant-loading color="#1677ff"></ant-loading>
|
||||
<ant-loading color="#34B368"></ant-loading>
|
||||
<ant-loading color="#ff8f1f"></ant-loading>
|
||||
<ant-loading color="#ff0000"></ant-loading>
|
||||
</view>
|
||||
</ant-container>
|
||||
|
||||
<ant-container
|
||||
title="自定义大小"
|
||||
className="container">
|
||||
className="container"
|
||||
>
|
||||
<view class="list">
|
||||
<ant-loading style="width: 40px; height: 40px" />
|
||||
<ant-loading style="width: 30px; height: 30px" />
|
||||
<ant-loading className="custom-size" />
|
||||
<ant-loading style="width: 40px; height: 40px"></ant-loading>
|
||||
<ant-loading style="width: 30px; height: 30px"></ant-loading>
|
||||
<ant-loading className="custom-size"></ant-loading>
|
||||
</view>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,146 +1,168 @@
|
||||
<ant-modal
|
||||
content="人在天边月上明"
|
||||
visible="{{ basicVisible }}"
|
||||
visible="{{basicVisible}}"
|
||||
onClose="handleClose"
|
||||
primaryButtonText="我知道了"
|
||||
onPrimaryButtonTap="handlePrimaryButtonTap" />
|
||||
onPrimaryButtonTap="handlePrimaryButtonTap"
|
||||
></ant-modal>
|
||||
<ant-modal
|
||||
title="带标题的弹窗"
|
||||
content="人在天边月上明"
|
||||
visible="{{ withTitleVisible }}"
|
||||
visible="{{withTitleVisible}}"
|
||||
onClose="handleClose"
|
||||
primaryButtonText="我知道了"
|
||||
onPrimaryButtonTap="handlePrimaryButtonTap" />
|
||||
onPrimaryButtonTap="handlePrimaryButtonTap"
|
||||
></ant-modal>
|
||||
<ant-modal
|
||||
title="确定删除吗?"
|
||||
content="删除后无法恢复"
|
||||
visible="{{ basicTwoVisible }}"
|
||||
visible="{{basicTwoVisible}}"
|
||||
onClose="handleClose"
|
||||
primaryButtonText="确定"
|
||||
secondaryButtonText="取消"
|
||||
onPrimaryButtonTap="handlePrimaryButtonTap"
|
||||
onSecondaryButtonTap="handleSecondaryButtonTap" />
|
||||
onSecondaryButtonTap="handleSecondaryButtonTap"
|
||||
></ant-modal>
|
||||
<ant-modal
|
||||
title="标题"
|
||||
content="人在天边月上明"
|
||||
visible="{{ basicThreeVisible }}"
|
||||
visible="{{basicThreeVisible}}"
|
||||
onClose="handleClose"
|
||||
primaryButtonText="主按钮"
|
||||
secondaryButtonText="更多"
|
||||
cancelButtonText="取消"
|
||||
onPrimaryButtonTap="handlePrimaryButtonTap"
|
||||
onSecondaryButtonTap="handleSecondaryButtonTap"
|
||||
onCancelButtonTap="handleCancelButtonTap" />
|
||||
onCancelButtonTap="handleCancelButtonTap"
|
||||
></ant-modal>
|
||||
<ant-modal
|
||||
title="强调模式"
|
||||
content="主操作按钮是Button,右上角可有关闭按钮,是用来强调让用户去注意到主操作"
|
||||
type="focus"
|
||||
visible="{{ focusOneVisible }}"
|
||||
visible="{{focusOneVisible}}"
|
||||
onClose="handleClose"
|
||||
primaryButtonText="我知道了"
|
||||
onPrimaryButtonTap="handlePrimaryButtonTap" />
|
||||
onPrimaryButtonTap="handlePrimaryButtonTap"
|
||||
></ant-modal>
|
||||
<ant-modal
|
||||
title="强调模式"
|
||||
content="主操作按钮是Button,右上角可有关闭按钮,是用来强调让用户去注意到主操作"
|
||||
type="focus"
|
||||
visible="{{ focusTwoVisible }}"
|
||||
visible="{{focusTwoVisible}}"
|
||||
onClose="handleClose"
|
||||
primaryButtonText="我知道了"
|
||||
secondaryButtonText="辅助操作"
|
||||
onPrimaryButtonTap="handlePrimaryButtonTap"
|
||||
onSecondaryButtonTap="handleSecondaryButtonTap" />
|
||||
onSecondaryButtonTap="handleSecondaryButtonTap"
|
||||
></ant-modal>
|
||||
<ant-modal
|
||||
title="强调模式"
|
||||
content="主操作按钮是Button,右上角可有关闭按钮,是用来强调让用户去注意到主操作"
|
||||
type="focus"
|
||||
visible="{{ focusThreeVisible }}"
|
||||
visible="{{focusThreeVisible}}"
|
||||
onClose="handleClose"
|
||||
primaryButtonText="我知道了"
|
||||
secondaryButtonText="辅助操作"
|
||||
cancelButtonText="取消"
|
||||
onPrimaryButtonTap="handlePrimaryButtonTap"
|
||||
onSecondaryButtonTap="handleSecondaryButtonTap"
|
||||
onCancelButtonTap="handleCancelButtonTap" />
|
||||
onCancelButtonTap="handleCancelButtonTap"
|
||||
></ant-modal>
|
||||
<ant-modal
|
||||
title="确定删除吗?"
|
||||
content="删除后无法恢复"
|
||||
visible="{{ customVisible }}"
|
||||
visible="{{customVisible}}"
|
||||
onClose="handleClose"
|
||||
primaryButtonText="删除"
|
||||
primaryButtonStyle="color:red;"
|
||||
secondaryButtonText="取消"
|
||||
onPrimaryButtonTap="handlePrimaryButtonTap"
|
||||
onSecondaryButtonTap="handleSecondaryButtonTap" />
|
||||
onSecondaryButtonTap="handleSecondaryButtonTap"
|
||||
></ant-modal>
|
||||
<ant-modal
|
||||
visible="{{ customBodyVisible }}"
|
||||
onClose="handleClose">
|
||||
visible="{{customBodyVisible}}"
|
||||
onClose="handleClose"
|
||||
>
|
||||
<view class="body">
|
||||
<image
|
||||
mode="scaleToFill"
|
||||
src="https://mdn.alipayobjects.com/huamei_yujk1o/afts/img/A*xYjqRJiKsvoAAAAAAAAAAAAADuaJAQ/original"
|
||||
class="bodyImg" />
|
||||
class="bodyImg"
|
||||
></image>
|
||||
<view class="bodyAction">
|
||||
<ant-icon
|
||||
type="CloseCircleOutline"
|
||||
onTap="handleClose" />
|
||||
onTap="handleClose"
|
||||
></ant-icon>
|
||||
</view>
|
||||
</view>
|
||||
</ant-modal>
|
||||
|
||||
<ant-container
|
||||
title="基础用法"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
data-field="basicVisible"
|
||||
onTap="handleOpen">
|
||||
onTap="handleOpen"
|
||||
>
|
||||
最简单的弹框
|
||||
</ant-button>
|
||||
<ant-button
|
||||
data-field="withTitleVisible"
|
||||
onTap="handleOpen">
|
||||
onTap="handleOpen"
|
||||
>
|
||||
带有标题
|
||||
</ant-button>
|
||||
<ant-button
|
||||
data-field="basicTwoVisible"
|
||||
onTap="handleOpen">
|
||||
onTap="handleOpen"
|
||||
>
|
||||
带辅助按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
data-field="basicThreeVisible"
|
||||
onTap="handleOpen">
|
||||
onTap="handleOpen"
|
||||
>
|
||||
带辅助和取消按钮
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
<ant-container
|
||||
title="强调模式"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
data-field="focusOneVisible"
|
||||
onTap="handleOpen">
|
||||
onTap="handleOpen"
|
||||
>
|
||||
只有主按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
data-field="focusTwoVisible"
|
||||
onTap="handleOpen">
|
||||
onTap="handleOpen"
|
||||
>
|
||||
带辅助按钮
|
||||
</ant-button>
|
||||
<ant-button
|
||||
data-field="focusThreeVisible"
|
||||
onTap="handleOpen">
|
||||
onTap="handleOpen"
|
||||
>
|
||||
带辅助和取消按钮
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
<ant-container
|
||||
title="自定义"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
data-field="customVisible"
|
||||
onTap="handleOpen">
|
||||
onTap="handleOpen"
|
||||
>
|
||||
自定义按钮样式
|
||||
</ant-button>
|
||||
<ant-button
|
||||
data-field="customBodyVisible"
|
||||
onTap="handleOpen">
|
||||
onTap="handleOpen"
|
||||
>
|
||||
完全自定义内容区
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,89 +1,93 @@
|
||||
<ant-container title="基础用法">
|
||||
<block
|
||||
a:for="{{ typeList }}"
|
||||
a:for="{{typeList}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item">
|
||||
a:for-item="item"
|
||||
>
|
||||
<ant-notice
|
||||
style="margin-bottom: 8px"
|
||||
type="{{ item }}">
|
||||
{{ item }}
|
||||
type="{{item}}"
|
||||
>
|
||||
{{item}}
|
||||
</ant-notice>
|
||||
</block>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="可关闭通告栏">
|
||||
<ant-notice
|
||||
onTap="handleClose"
|
||||
mode="closeable">
|
||||
mode="closeable"
|
||||
>
|
||||
这条通知可以关闭
|
||||
</ant-notice>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="可滚动通告栏">
|
||||
<block
|
||||
a:for="{{ typeList }}"
|
||||
a:for="{{typeList}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item">
|
||||
a:for-item="item"
|
||||
>
|
||||
<ant-notice
|
||||
type="{{ item }}"
|
||||
type="{{item}}"
|
||||
style="margin-bottom: 8px"
|
||||
enableMarquee="{{ true }}"
|
||||
loop="{{ true }}"
|
||||
enableMarquee="{{true}}"
|
||||
loop="{{true}}"
|
||||
onTap="handleTapLink"
|
||||
mode="link">
|
||||
mode="link"
|
||||
>
|
||||
文本溢出时,开启循环滚动。文字不够继续添加文字凑数。
|
||||
</ant-notice>
|
||||
</block>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="可滚动通告栏(不循环)">
|
||||
<block
|
||||
a:for="{{ typeList }}"
|
||||
a:for="{{typeList}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item">
|
||||
a:for-item="item"
|
||||
>
|
||||
<ant-notice
|
||||
type="{{ item }}"
|
||||
type="{{item}}"
|
||||
style="margin-bottom: 8px"
|
||||
enableMarquee="{{ true }}"
|
||||
enableMarquee="{{true}}"
|
||||
onTap="handleTapLink"
|
||||
mode="link">
|
||||
mode="link"
|
||||
>
|
||||
文本溢出时,开启循环滚动。文字不够继续添加文字凑数。
|
||||
</ant-notice>
|
||||
</block>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="自定义通告栏">
|
||||
<ant-notice style="margin-bottom: 8px">
|
||||
不展示图标
|
||||
<view slot="icon" />
|
||||
<view slot="icon"></view>
|
||||
</ant-notice>
|
||||
|
||||
<ant-notice
|
||||
type="primary"
|
||||
icon="GlobalOutline"
|
||||
style="margin-bottom: 8px"
|
||||
mode="link">
|
||||
mode="link"
|
||||
>
|
||||
自定义左侧图标
|
||||
</ant-notice>
|
||||
|
||||
<ant-notice
|
||||
type="primary"
|
||||
icon="https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ"
|
||||
style="margin-bottom: 8px"
|
||||
mode="link">
|
||||
mode="link"
|
||||
>
|
||||
自定义左侧图标图片
|
||||
</ant-notice>
|
||||
|
||||
<ant-notice
|
||||
mode="link"
|
||||
style="margin-bottom: 8px"
|
||||
onTap="handleTapLink">
|
||||
onTap="handleTapLink"
|
||||
>
|
||||
自定义右侧按钮
|
||||
<view
|
||||
slot="extra"
|
||||
class="extra">
|
||||
class="extra"
|
||||
>
|
||||
<view onTap="handleTapAction">不再提示</view>
|
||||
<view onTap="handleTapAction">查看详情</view>
|
||||
</view>
|
||||
</ant-notice>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,54 +1,58 @@
|
||||
<ant-list header="基础使用">
|
||||
<ant-list-item onTap="onTap">默认键盘</ant-list-item>
|
||||
<ant-number-keyboard
|
||||
visible="{{ visible }}"
|
||||
onClose="onTap" />
|
||||
|
||||
visible="{{visible}}"
|
||||
onClose="onTap"
|
||||
></ant-number-keyboard>
|
||||
<ant-list-item onTap="onTap1">没有小数点</ant-list-item>
|
||||
<ant-number-keyboard
|
||||
point="{{ false }}"
|
||||
visible="{{ visible1 }}"
|
||||
onClose="onTap1" />
|
||||
|
||||
point="{{false}}"
|
||||
visible="{{visible1}}"
|
||||
onClose="onTap1"
|
||||
></ant-number-keyboard>
|
||||
<ant-list-item onTap="onTap2">带确认按钮</ant-list-item>
|
||||
<ant-number-keyboard
|
||||
confirmText="确认"
|
||||
visible="{{ visible2 }}"
|
||||
onClose="onTap2" />
|
||||
|
||||
visible="{{visible2}}"
|
||||
onClose="onTap2"
|
||||
></ant-number-keyboard>
|
||||
<ant-list-item onTap="onTap3">带关闭箭头</ant-list-item>
|
||||
<ant-number-keyboard
|
||||
closeable="{{ true }}"
|
||||
visible="{{ visible3 }}"
|
||||
onClose="onTap3" />
|
||||
|
||||
closeable="{{true}}"
|
||||
visible="{{visible3}}"
|
||||
onClose="onTap3"
|
||||
></ant-number-keyboard>
|
||||
<ant-list-item onTap="onTap4">乱序键盘</ant-list-item>
|
||||
<ant-number-keyboard
|
||||
random="{{ true }}"
|
||||
visible="{{ visible4 }}"
|
||||
onClose="onTap4" />
|
||||
random="{{true}}"
|
||||
visible="{{visible4}}"
|
||||
onClose="onTap4"
|
||||
></ant-number-keyboard>
|
||||
</ant-list>
|
||||
<ant-list header="自定义按钮">
|
||||
<ant-list-item onTap="onTap6">自定义标题</ant-list-item>
|
||||
<ant-number-keyboard
|
||||
visible="{{ visible6 }}"
|
||||
onClose="onTap6">
|
||||
visible="{{visible6}}"
|
||||
onClose="onTap6"
|
||||
>
|
||||
<view
|
||||
slot="header"
|
||||
class="number-keyboard-header">
|
||||
class="number-keyboard-header"
|
||||
>
|
||||
支付宝安全键盘
|
||||
</view>
|
||||
</ant-number-keyboard>
|
||||
|
||||
<ant-list-item onTap="onTap7">自定义确认按钮</ant-list-item>
|
||||
<ant-number-keyboard
|
||||
confirmText="确认"
|
||||
visible="{{ visible7 }}"
|
||||
onClose="onTap7">
|
||||
visible="{{visible7}}"
|
||||
onClose="onTap7"
|
||||
>
|
||||
<view
|
||||
slot="confirm"
|
||||
class="number-keyboard-confirm">
|
||||
<ant-icon type="DownOutline" />
|
||||
class="number-keyboard-confirm"
|
||||
>
|
||||
<ant-icon type="DownOutline"></ant-icon>
|
||||
</view>
|
||||
</ant-number-keyboard>
|
||||
</ant-list>
|
||||
</ant-list>
|
@ -1,26 +1,28 @@
|
||||
<list header="数字键盘示例: 金额输入">
|
||||
<list-item>
|
||||
<view
|
||||
class="number-content {{ value ? '' : 'number-placeholder' }}"
|
||||
catchTap="onAmountFocus">
|
||||
<!-- display: inline -->
|
||||
<text a:if="{{ value }}">{{ value }}</text>
|
||||
<!-- display: inline -->
|
||||
class="number-content {{value ? '' : 'number-placeholder'}}"
|
||||
catchTap="onAmountFocus"
|
||||
>
|
||||
<!--display: inline-->
|
||||
<text a:if="{{value}}">{{value}}</text>
|
||||
<!--display: inline-->
|
||||
<text
|
||||
a:else
|
||||
class="number-content-tip"
|
||||
>0.00</text
|
||||
>
|
||||
>0.00</text>
|
||||
<view
|
||||
a:if="{{ visible }}"
|
||||
a:if="{{visible}}"
|
||||
class="number-light"
|
||||
style="position: {{ value ? 'static' : 'absolute' }}" />
|
||||
style="position: {{value ? 'static' : 'absolute'}}"
|
||||
></view>
|
||||
</view>
|
||||
</list-item>
|
||||
<number-keyboard
|
||||
visible="{{ visible }}"
|
||||
closeable="{{ true }}"
|
||||
value="{{ value }}"
|
||||
visible="{{visible}}"
|
||||
closeable="{{true}}"
|
||||
value="{{value}}"
|
||||
onChange="onChange"
|
||||
onClose="onClose" />
|
||||
</list>
|
||||
onClose="onClose"
|
||||
></number-keyboard>
|
||||
</list>
|
@ -2,26 +2,29 @@
|
||||
<list-item>
|
||||
<view
|
||||
class="number-code"
|
||||
catchTap="onCodeFocus">
|
||||
catchTap="onCodeFocus"
|
||||
>
|
||||
<block
|
||||
a:for="{{ 4 }}"
|
||||
a:for="{{4}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item">
|
||||
<view
|
||||
class="number-code-view {{ visible && value.length === index ? 'number-code-border' : '' }}">
|
||||
{{ value[index] || '' }}
|
||||
a:for-item="item"
|
||||
>
|
||||
<view class="number-code-view {{visible && value.length === index ? 'number-code-border' : ''}}">
|
||||
{{value[index] || ''}}
|
||||
<view
|
||||
a:if="{{ visible && value.length === index }}"
|
||||
class="number-code-tip" />
|
||||
a:if="{{visible && value.length === index}}"
|
||||
class="number-code-tip"
|
||||
></view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</list-item>
|
||||
<number-keyboard
|
||||
visible="{{ visible }}"
|
||||
point="{{ false }}"
|
||||
closeable="{{ true }}"
|
||||
value="{{ value }}"
|
||||
visible="{{visible}}"
|
||||
point="{{false}}"
|
||||
closeable="{{true}}"
|
||||
value="{{value}}"
|
||||
onChange="onChange"
|
||||
onClose="onClose" />
|
||||
</list>
|
||||
onClose="onClose"
|
||||
></number-keyboard>
|
||||
</list>
|
@ -1,27 +1,29 @@
|
||||
<list header="数字输入框示例">
|
||||
<list-item>
|
||||
<view
|
||||
class="number-content {{ value ? '' : 'number-placeholder' }}"
|
||||
catchTap="onNumberFocus">
|
||||
<!-- display: inline -->
|
||||
<text a:if="{{ value }}">{{ value }}</text>
|
||||
<!-- display: inline -->
|
||||
class="number-content {{value ? '' : 'number-placeholder'}}"
|
||||
catchTap="onNumberFocus"
|
||||
>
|
||||
<!--display: inline-->
|
||||
<text a:if="{{value}}">{{value}}</text>
|
||||
<!--display: inline-->
|
||||
<text
|
||||
a:else
|
||||
class="number-content-tip"
|
||||
>0.00</text
|
||||
>
|
||||
>0.00</text>
|
||||
<view
|
||||
a:if="{{ visible }}"
|
||||
a:if="{{visible}}"
|
||||
class="number-light"
|
||||
style="{{ value ? 'position: static;' : 'position: absolute;' }}" />
|
||||
style="{{value ? 'position: static;' : 'position: absolute;'}}"
|
||||
></view>
|
||||
</view>
|
||||
</list-item>
|
||||
<number-keyboard
|
||||
visible="{{ visible }}"
|
||||
point="{{ false }}"
|
||||
closeable="{{ true }}"
|
||||
value="{{ value }}"
|
||||
visible="{{visible}}"
|
||||
point="{{false}}"
|
||||
closeable="{{true}}"
|
||||
value="{{value}}"
|
||||
onChange="onChange"
|
||||
onClose="onClose" />
|
||||
</list>
|
||||
onClose="onClose"
|
||||
></number-keyboard>
|
||||
</list>
|
@ -108,5 +108,8 @@
|
||||
>
|
||||
正常
|
||||
</ant-button>
|
||||
<ant-loading slot="loading" color="#999" />
|
||||
</ant-page>
|
||||
<ant-loading
|
||||
slot="loading"
|
||||
color="#999"
|
||||
></ant-loading>
|
||||
</ant-page>
|
@ -6,12 +6,13 @@
|
||||
onCancel="handleDismissPicker"
|
||||
onVisibleChange="handleTriggerPicker"
|
||||
onOk="handleOk"
|
||||
defaultValue="{{ defaultValue }}"
|
||||
defaultValue="{{defaultValue}}"
|
||||
placeholder="请选择"
|
||||
title="请选择"
|
||||
onChange="handleChange"
|
||||
options="{{ list }}"
|
||||
emptyText="暂无数据" />
|
||||
options="{{list}}"
|
||||
emptyText="暂无数据"
|
||||
></ant-picker>
|
||||
</ant-list-item>
|
||||
<ant-list-item>
|
||||
选择城市(点击蒙层不关闭)
|
||||
@ -20,12 +21,13 @@
|
||||
onCancel="handleDismissPicker"
|
||||
onVisibleChange="handleTriggerPicker"
|
||||
onOk="handleOk"
|
||||
defaultValue="{{ defaultValue }}"
|
||||
defaultValue="{{defaultValue}}"
|
||||
placeholder="请选择"
|
||||
title="请选择"
|
||||
onChange="handleChange"
|
||||
maskClosable="{{ false }}"
|
||||
options="{{ list }}" />
|
||||
maskClosable="{{false}}"
|
||||
options="{{list}}"
|
||||
></ant-picker>
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
<ant-list header="受控模式">
|
||||
@ -34,21 +36,24 @@
|
||||
<ant-picker
|
||||
slot="extra"
|
||||
onOk="handleControlledOk"
|
||||
value="{{ value }}"
|
||||
value="{{value}}"
|
||||
placeholder="请选择"
|
||||
title="请选择"
|
||||
options="{{ list }}" />
|
||||
options="{{list}}"
|
||||
></ant-picker>
|
||||
</ant-list-item>
|
||||
<view class="btn-wrapper">
|
||||
<ant-button
|
||||
inline
|
||||
onTap="handleChangeControlled"
|
||||
style="margin-right: 8px">
|
||||
style="margin-right: 8px"
|
||||
>
|
||||
选择深圳
|
||||
</ant-button>
|
||||
<ant-button
|
||||
inline
|
||||
onTap="handleClearControlled">
|
||||
onTap="handleClearControlled"
|
||||
>
|
||||
清空
|
||||
</ant-button>
|
||||
</view>
|
||||
@ -64,10 +69,10 @@
|
||||
placeholder="请选择"
|
||||
title="请选择"
|
||||
onChange="handleChange"
|
||||
options="{{ weekList }}" />
|
||||
options="{{weekList}}"
|
||||
></ant-picker>
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
|
||||
<ant-list header="多列复杂类型数据">
|
||||
<ant-list-item>
|
||||
请选择时间
|
||||
@ -78,32 +83,33 @@
|
||||
defaultValue="{{['Tues', 'pm']}}"
|
||||
title="请选择"
|
||||
onOk="handleOk"
|
||||
onFormat="{{ formatTime ? formatTime : 'formatTime' }}"
|
||||
options="{{ columns }}" />
|
||||
onFormat="{{formatTime ? formatTime : 'formatTime'}}"
|
||||
options="{{columns}}"
|
||||
></ant-picker>
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
|
||||
<ant-container style="margin-top: 20rpx">
|
||||
<ant-list header="多列复杂类型数据">
|
||||
<ant-list-item>
|
||||
请选择时间
|
||||
<ant-picker
|
||||
slot="extra"
|
||||
visible="{{ pickerVisible }}"
|
||||
visible="{{pickerVisible}}"
|
||||
placeholder="请选择"
|
||||
onVisibleChange="handleTriggerControlledPicker"
|
||||
defaultValue="{{['Tues', 'pm']}}"
|
||||
title="请选择"
|
||||
onOk="handleOk"
|
||||
onFormat="{{ formatTime ? formatTime : 'formatTime' }}"
|
||||
options="{{ columns }}" />
|
||||
onFormat="{{formatTime ? formatTime : 'formatTime'}}"
|
||||
options="{{columns}}"
|
||||
></ant-picker>
|
||||
</ant-list-item>
|
||||
</ant-list>
|
||||
|
||||
<ant-button
|
||||
size="medium"
|
||||
type="primary"
|
||||
onTap="handleOpenPicker">
|
||||
onTap="handleOpenPicker"
|
||||
>
|
||||
打开 Picker
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,98 +1,102 @@
|
||||
<container title="基础用法">
|
||||
<popover
|
||||
content="prompt"
|
||||
style="display: inline-block">
|
||||
style="display: inline-block"
|
||||
>
|
||||
<ant-button
|
||||
size="small"
|
||||
inline>
|
||||
inline
|
||||
>
|
||||
点我
|
||||
</ant-button>
|
||||
</popover>
|
||||
</container>
|
||||
|
||||
<container title="基础用法-回调函数">
|
||||
<popover
|
||||
content="prompt"
|
||||
placement="top"
|
||||
onVisibleChange="onVisibleChange">
|
||||
onVisibleChange="onVisibleChange"
|
||||
>
|
||||
<ant-button>点我</ant-button>
|
||||
</popover>
|
||||
</container>
|
||||
|
||||
<container title="自定义颜色">
|
||||
<view class="custom">
|
||||
<popover
|
||||
content="红色"
|
||||
color="red">
|
||||
<!-- display: inline -->
|
||||
color="red"
|
||||
>
|
||||
<!--display: inline-->
|
||||
<text>点我红色</text>
|
||||
</popover>
|
||||
|
||||
<popover
|
||||
content="蓝色"
|
||||
color="blue">
|
||||
<!-- display: inline -->
|
||||
color="blue"
|
||||
>
|
||||
<!--display: inline-->
|
||||
<text>点我蓝色</text>
|
||||
</popover>
|
||||
</view>
|
||||
</container>
|
||||
|
||||
<container title="点击icon查看">
|
||||
查看说明
|
||||
<popover
|
||||
content="说明"
|
||||
style="display: inline-block">
|
||||
<icon type="QuestionCircleOutline" />
|
||||
style="display: inline-block"
|
||||
>
|
||||
<icon type="QuestionCircleOutline"></icon>
|
||||
</popover>
|
||||
</container>
|
||||
|
||||
<container title="自定义位置">
|
||||
<view class="custom">
|
||||
<block
|
||||
a:for="{{ placements }}"
|
||||
a:for="{{placements}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item">
|
||||
<popover placement="{{ item }}">
|
||||
a:for-item="item"
|
||||
>
|
||||
<popover placement="{{item}}">
|
||||
<ant-button
|
||||
size="small"
|
||||
inline
|
||||
className="custom-child">
|
||||
className="custom-child"
|
||||
>
|
||||
<view>点我</view>
|
||||
{{ item }}
|
||||
{{item}}
|
||||
</ant-button>
|
||||
|
||||
<view
|
||||
slot="content"
|
||||
class="content">
|
||||
{{ item }}
|
||||
class="content"
|
||||
>
|
||||
{{item}}
|
||||
</view>
|
||||
</popover>
|
||||
</block>
|
||||
</view>
|
||||
</container>
|
||||
|
||||
<container title="自定义mask">
|
||||
<popover
|
||||
content="prompt"
|
||||
maskStyle="background: rgba(0, 0, 0, 0.6);"
|
||||
style="display: inline-block">
|
||||
style="display: inline-block"
|
||||
>
|
||||
<ant-button
|
||||
size="small"
|
||||
inline>
|
||||
inline
|
||||
>
|
||||
点我
|
||||
</ant-button>
|
||||
</popover>
|
||||
</container>
|
||||
|
||||
<container title="受控">
|
||||
<view>
|
||||
<popover
|
||||
content="prompt"
|
||||
placement="right"
|
||||
showMask="{{ false }}"
|
||||
visible="{{ visible }}"
|
||||
style="display: inline-block">
|
||||
<!-- display: inline -->
|
||||
showMask="{{false}}"
|
||||
visible="{{visible}}"
|
||||
style="display: inline-block"
|
||||
>
|
||||
<!--display: inline-->
|
||||
<text>点击按钮修改visible</text>
|
||||
</popover>
|
||||
</view>
|
||||
@ -100,7 +104,8 @@
|
||||
size="small"
|
||||
inline
|
||||
onTap="handleVisibleChange"
|
||||
style="margin-top: 8px">
|
||||
style="margin-top: 8px"
|
||||
>
|
||||
change visible
|
||||
</ant-button>
|
||||
</container>
|
||||
</container>
|
@ -1,34 +1,38 @@
|
||||
<popover
|
||||
placement="bottom-right"
|
||||
visible="{{ visible }}"
|
||||
visible="{{visible}}"
|
||||
style="display: inline-block; margin: 20px"
|
||||
onVisibleChange="handleVisibleChange"
|
||||
color="#fff">
|
||||
color="#fff"
|
||||
>
|
||||
<ant-button inline>点我</ant-button>
|
||||
<list
|
||||
slot="content"
|
||||
className="popover">
|
||||
className="popover"
|
||||
>
|
||||
<list-item
|
||||
onTap="handleTapItem"
|
||||
image="ScanningOutline">
|
||||
image="ScanningOutline"
|
||||
>
|
||||
扫一扫
|
||||
</list-item>
|
||||
|
||||
<list-item
|
||||
onTap="handleTapItem"
|
||||
image="ReceivePaymentOutline">
|
||||
image="ReceivePaymentOutline"
|
||||
>
|
||||
付钱/收钱
|
||||
</list-item>
|
||||
|
||||
<list-item
|
||||
onTap="handleTapItem"
|
||||
image="TransportQRcodeOutline">
|
||||
image="TransportQRcodeOutline"
|
||||
>
|
||||
乘车码
|
||||
</list-item>
|
||||
<list-item
|
||||
onTap="handleTapItem"
|
||||
image="{{ url }}">
|
||||
image="{{url}}"
|
||||
>
|
||||
图片
|
||||
</list-item>
|
||||
</list>
|
||||
</popover>
|
||||
</popover>
|
@ -1,38 +1,43 @@
|
||||
<ant-popup
|
||||
visible="{{ basicVisible }}"
|
||||
height="{{ 250 }}"
|
||||
width="{{ 250 }}"
|
||||
position="{{ position }}"
|
||||
animation="{{ animation }}"
|
||||
onClose="handlePopupClose">
|
||||
visible="{{basicVisible}}"
|
||||
height="{{250}}"
|
||||
width="{{250}}"
|
||||
position="{{position}}"
|
||||
animation="{{animation}}"
|
||||
onClose="handlePopupClose"
|
||||
>
|
||||
<view style="padding: 12px">
|
||||
从屏幕滑出或弹出一块自定义内容区,用于展示弹窗、信息提示、选择输入、切换等内容。
|
||||
</view>
|
||||
</ant-popup>
|
||||
<ant-popup
|
||||
visible="{{ closeVisible }}"
|
||||
height="{{ 250 }}"
|
||||
visible="{{closeVisible}}"
|
||||
height="{{250}}"
|
||||
position="bottom"
|
||||
animation="{{ animation }}"
|
||||
onClose="handlePopupClose">
|
||||
animation="{{animation}}"
|
||||
onClose="handlePopupClose"
|
||||
>
|
||||
<view style="padding: 12px">
|
||||
从屏幕滑出或弹出一块自定义内容区,用于展示弹窗、信息提示、选择输入、切换等内容。
|
||||
</view>
|
||||
<ant-icon
|
||||
style="position: absolute; right: 12px; top: 12px"
|
||||
type="CloseOutline"
|
||||
onTap="handlePopupClose" />
|
||||
onTap="handlePopupClose"
|
||||
></ant-icon>
|
||||
</ant-popup>
|
||||
<ant-popup
|
||||
visible="{{ scrollVisible }}"
|
||||
visible="{{scrollVisible}}"
|
||||
position="bottom"
|
||||
animation="{{ animation }}"
|
||||
onClose="handlePopupClose">
|
||||
animation="{{animation}}"
|
||||
onClose="handlePopupClose"
|
||||
>
|
||||
<scroll-view
|
||||
scroll-y
|
||||
scrollY
|
||||
style="padding: 12px; height: 300px"
|
||||
disable-lower-scroll="out-of-bounds"
|
||||
disable-upper-scroll="out-of-bounds">
|
||||
disableLowerScroll="out-of-bounds"
|
||||
disableUpperScroll="out-of-bounds"
|
||||
>
|
||||
Ea consectetur ipsum consequat exercitation laboris excepteur pariatur
|
||||
excepteur labore dolor cillum tempor esse. Ad adipisicing nostrud fugiat eu
|
||||
mollit. Proident nisi voluptate sunt ea laboris Lorem ullamco deserunt aute
|
||||
@ -96,25 +101,30 @@
|
||||
</ant-popup>
|
||||
<container
|
||||
title="弹出位置"
|
||||
className="list">
|
||||
className="list"
|
||||
>
|
||||
<ant-button
|
||||
data-position="top"
|
||||
onTap="handleShowBasic">
|
||||
onTap="handleShowBasic"
|
||||
>
|
||||
顶部弹出
|
||||
</ant-button>
|
||||
<ant-button
|
||||
data-position="bottom"
|
||||
onTap="handleShowBasic">
|
||||
onTap="handleShowBasic"
|
||||
>
|
||||
底部弹出
|
||||
</ant-button>
|
||||
<ant-button
|
||||
data-position="left"
|
||||
onTap="handleShowBasic">
|
||||
onTap="handleShowBasic"
|
||||
>
|
||||
左侧弹出
|
||||
</ant-button>
|
||||
<ant-button
|
||||
data-position="right"
|
||||
onTap="handleShowBasic">
|
||||
onTap="handleShowBasic"
|
||||
>
|
||||
右侧弹出
|
||||
</ant-button>
|
||||
<ant-button onTap="handleShowClose">自定义弹窗内关闭</ant-button>
|
||||
@ -125,7 +135,8 @@
|
||||
开启过渡动画
|
||||
<switch
|
||||
slot="extra"
|
||||
checked="{{ animation }}"
|
||||
onChange="handleChangeAnimation" />
|
||||
checked="{{animation}}"
|
||||
onChange="handleChangeAnimation"
|
||||
></switch>
|
||||
</list-item>
|
||||
</list>
|
||||
</list>
|
@ -2,81 +2,90 @@
|
||||
<view class="line2">
|
||||
<progress
|
||||
type="circle"
|
||||
percent="{{ percent1 }}" />
|
||||
percent="{{percent1}}"
|
||||
></progress>
|
||||
<progress
|
||||
type="circle"
|
||||
percent="{{ percent1 }}"
|
||||
animation="{{ false }}" />
|
||||
percent="{{percent1}}"
|
||||
animation="{{false}}"
|
||||
></progress>
|
||||
</view>
|
||||
<view class="buttonwrapper">
|
||||
<ant-button
|
||||
inline
|
||||
style="margin-right: 16rpx"
|
||||
onTap="handleDelete">
|
||||
onTap="handleDelete"
|
||||
>
|
||||
减少
|
||||
</ant-button>
|
||||
<ant-button
|
||||
inline
|
||||
onTap="handleAdd">
|
||||
onTap="handleAdd"
|
||||
>
|
||||
增加
|
||||
</ant-button>
|
||||
</view>
|
||||
</container>
|
||||
|
||||
<container title="自定义进度条宽度">
|
||||
<view class="line2">
|
||||
<progress
|
||||
type="circle"
|
||||
percent="{{ percent2 }}"
|
||||
strokeWidth="{{ 12 }}" />
|
||||
percent="{{percent2}}"
|
||||
strokeWidth="{{12}}"
|
||||
></progress>
|
||||
<progress
|
||||
type="circle"
|
||||
percent="{{ percent2 }}"
|
||||
strokeWidth="{{ 2 }}" />
|
||||
percent="{{percent2}}"
|
||||
strokeWidth="{{2}}"
|
||||
></progress>
|
||||
</view>
|
||||
</container>
|
||||
|
||||
<container title="自定义颜色">
|
||||
<view class="line2">
|
||||
<progress
|
||||
type="circle"
|
||||
percent="{{ percent3 }}"
|
||||
strokeColor="#00B578" />
|
||||
percent="{{percent3}}"
|
||||
strokeColor="#00B578"
|
||||
></progress>
|
||||
<progress
|
||||
type="circle"
|
||||
percent="{{ percent3 }}"
|
||||
strokeColor="#FF8F1F" />
|
||||
percent="{{percent3}}"
|
||||
strokeColor="#FF8F1F"
|
||||
></progress>
|
||||
</view>
|
||||
</container>
|
||||
|
||||
<container title="自定义提示文案">
|
||||
<view class="line2">
|
||||
<progress
|
||||
type="circle"
|
||||
percent="{{ percent5 }}">
|
||||
<view slot="indicator">{{ percent5 }}GB</view>
|
||||
percent="{{percent5}}"
|
||||
>
|
||||
<view slot="indicator">{{percent5}}GB</view>
|
||||
</progress>
|
||||
<progress
|
||||
type="circle"
|
||||
percent="{{ percent5 }}">
|
||||
<view slot="indicator">{{ percent5 }}步</view>
|
||||
percent="{{percent5}}"
|
||||
>
|
||||
<view slot="indicator">{{percent5}}步</view>
|
||||
</progress>
|
||||
</view>
|
||||
</container>
|
||||
|
||||
<container title="自定义大小">
|
||||
<view class="line2">
|
||||
<progress
|
||||
type="circle"
|
||||
percent="{{ percent5 }}"
|
||||
width="{{ 80 }}" />
|
||||
percent="{{percent5}}"
|
||||
width="{{80}}"
|
||||
></progress>
|
||||
<progress
|
||||
type="circle"
|
||||
percent="{{ percent5 }}"
|
||||
width="{{ 100 }}" />
|
||||
percent="{{percent5}}"
|
||||
width="{{100}}"
|
||||
></progress>
|
||||
<progress
|
||||
type="circle"
|
||||
percent="{{ percent5 }}"
|
||||
width="{{ 120 }}" />
|
||||
percent="{{percent5}}"
|
||||
width="{{120}}"
|
||||
></progress>
|
||||
</view>
|
||||
</container>
|
||||
</container>
|
@ -1,62 +1,67 @@
|
||||
<container title="控制进度">
|
||||
<progress percent="{{ progress1 }}" />
|
||||
<progress percent="{{progress1}}"></progress>
|
||||
<view class="buttonwrapper">
|
||||
<ant-button
|
||||
size="small"
|
||||
inline
|
||||
style="margin-right: 16rpx"
|
||||
onTap="handleDelete">
|
||||
onTap="handleDelete"
|
||||
>
|
||||
减少
|
||||
</ant-button>
|
||||
<ant-button
|
||||
size="small"
|
||||
inline
|
||||
onTap="handleAdd">
|
||||
onTap="handleAdd"
|
||||
>
|
||||
增加
|
||||
</ant-button>
|
||||
</view>
|
||||
</container>
|
||||
|
||||
<container title="语义进度条">
|
||||
<progress
|
||||
status="success"
|
||||
percent="100" />
|
||||
percent="100"
|
||||
></progress>
|
||||
<progress
|
||||
status="exception"
|
||||
percent="50" />
|
||||
percent="50"
|
||||
></progress>
|
||||
</container>
|
||||
|
||||
<container title="自定义进度条高度">
|
||||
<progress
|
||||
percent="{{ progress2 }}"
|
||||
strokeWidth="15" />
|
||||
percent="{{progress2}}"
|
||||
strokeWidth="15"
|
||||
></progress>
|
||||
</container>
|
||||
|
||||
<container title="自定义颜色样式">
|
||||
<progress
|
||||
percent="{{ progress4 }}"
|
||||
trailColor="#FFCF9F" />
|
||||
percent="{{progress4}}"
|
||||
trailColor="#FFCF9F"
|
||||
></progress>
|
||||
<progress
|
||||
percent="{{ progress4 }}"
|
||||
strokeColor="#FFCF9F" />
|
||||
<progress percent="{{ progress4 }}" />
|
||||
percent="{{progress4}}"
|
||||
strokeColor="#FFCF9F"
|
||||
></progress>
|
||||
<progress percent="{{progress4}}"></progress>
|
||||
</container>
|
||||
|
||||
<container title="自定义长度">
|
||||
<progress
|
||||
percent="{{ progress4 }}"
|
||||
style="width: 100%" />
|
||||
percent="{{progress4}}"
|
||||
style="width: 100%"
|
||||
></progress>
|
||||
<progress
|
||||
percent="{{ progress4 }}"
|
||||
style="width: 70%" />
|
||||
percent="{{progress4}}"
|
||||
style="width: 70%"
|
||||
></progress>
|
||||
<progress
|
||||
percent="{{ progress4 }}"
|
||||
style="width: 50%" />
|
||||
percent="{{progress4}}"
|
||||
style="width: 50%"
|
||||
></progress>
|
||||
</container>
|
||||
|
||||
<container title="自定义进度条指示器">
|
||||
<progress percent="{{ progress3 }}">
|
||||
<!-- display: inline -->
|
||||
<text slot="indicator">{{ (progress3 / 100) * 200 }}步</text>
|
||||
<progress percent="{{progress3}}">
|
||||
<!--display: inline-->
|
||||
<text slot="indicator">{{progress3 / 100 * 200}}步</text>
|
||||
</progress>
|
||||
</container>
|
||||
</container>
|
@ -1,32 +1,31 @@
|
||||
<container title="基础用法">
|
||||
<radio onChange="onChange">Radio</radio>
|
||||
</container>
|
||||
|
||||
<container title="初始值">
|
||||
<radio defaultChecked="{{ true }}">Radio</radio>
|
||||
<radio defaultChecked="{{true}}">Radio</radio>
|
||||
</container>
|
||||
|
||||
<container title="禁用模式">
|
||||
<radio disabled>Radio1</radio>
|
||||
<radio
|
||||
defaultChecked
|
||||
disabled>
|
||||
disabled
|
||||
>
|
||||
Radio2
|
||||
</radio>
|
||||
</container>
|
||||
|
||||
<container title="自定义颜色">
|
||||
<radio
|
||||
color="red"
|
||||
defaultChecked>
|
||||
defaultChecked
|
||||
>
|
||||
Radio
|
||||
</radio>
|
||||
</container>
|
||||
|
||||
<container title="控制模式">
|
||||
<radio
|
||||
checked="{{ checked }}"
|
||||
onChange="handleChange">
|
||||
checked="{{checked}}"
|
||||
onChange="handleChange"
|
||||
>
|
||||
Radio
|
||||
</radio>
|
||||
</container>
|
||||
</container>
|
@ -1,48 +1,49 @@
|
||||
<ant-container title="基础用法">
|
||||
<ant-radio-group
|
||||
options="{{ options }}"
|
||||
onChange="onChange" />
|
||||
options="{{options}}"
|
||||
onChange="onChange"
|
||||
></ant-radio-group>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="初始值">
|
||||
<ant-radio-group
|
||||
defaultValue="banana"
|
||||
options="{{ options }}"
|
||||
onChange="onChange" />
|
||||
options="{{options}}"
|
||||
onChange="onChange"
|
||||
></ant-radio-group>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="横向布局">
|
||||
<ant-radio-group
|
||||
options="{{ options }}"
|
||||
position="horizontal" />
|
||||
options="{{options}}"
|
||||
position="horizontal"
|
||||
></ant-radio-group>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="禁用模式-所有禁用">
|
||||
<ant-radio-group
|
||||
options="{{ options }}"
|
||||
disabled />
|
||||
options="{{options}}"
|
||||
disabled
|
||||
></ant-radio-group>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="禁用模式-其中有的禁用">
|
||||
<ant-radio-group options="{{ optionsWithDisabled }}" />
|
||||
<ant-radio-group options="{{optionsWithDisabled}}"></ant-radio-group>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="控制模式">
|
||||
<ant-radio-group
|
||||
value="{{ value }}"
|
||||
options="{{ options }}"
|
||||
onChange="handleChange" />
|
||||
value="{{value}}"
|
||||
options="{{options}}"
|
||||
onChange="handleChange"
|
||||
></ant-radio-group>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="自定义">
|
||||
<ant-radio-group
|
||||
options="{{ options }}"
|
||||
options="{{options}}"
|
||||
color="red"
|
||||
defaultValue="banana">
|
||||
defaultValue="banana"
|
||||
>
|
||||
<view
|
||||
slot="label"
|
||||
slot-scope="item">
|
||||
{{ item.index + 1 }} {{ item.value.label }}
|
||||
slot-scope="item"
|
||||
>
|
||||
{{item.index + 1}} {{item.value.label}}
|
||||
</view>
|
||||
</ant-radio-group>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -2,37 +2,36 @@
|
||||
<container title="姓名">
|
||||
<ant-input
|
||||
placeholder="请输入姓名"
|
||||
value="{{ value }}"
|
||||
onChange="onInputChange">
|
||||
value="{{value}}"
|
||||
onChange="onInputChange"
|
||||
>
|
||||
<view
|
||||
slot="suffix"
|
||||
class="tips"
|
||||
onTap="onTap">
|
||||
onTap="onTap"
|
||||
>
|
||||
生僻字?
|
||||
</view>
|
||||
</ant-input>
|
||||
</container>
|
||||
|
||||
<list-item onTap="onTap">默认键盘</list-item>
|
||||
|
||||
<rare-words-keyboard
|
||||
visible="{{ visible }}"
|
||||
visible="{{visible}}"
|
||||
onClose="onClose"
|
||||
onChange="onChange" />
|
||||
|
||||
onChange="onChange"
|
||||
></rare-words-keyboard>
|
||||
<list-item onTap="onTap2">不带蒙层</list-item>
|
||||
|
||||
<rare-words-keyboard
|
||||
visible="{{ visible2 }}"
|
||||
showMask="{{ false }}"
|
||||
visible="{{visible2}}"
|
||||
showMask="{{false}}"
|
||||
onClose="onClose2"
|
||||
onChange="onChange" />
|
||||
|
||||
onChange="onChange"
|
||||
></rare-words-keyboard>
|
||||
<list-item onTap="onTap3">监听输入完成、出错的回调</list-item>
|
||||
|
||||
<rare-words-keyboard
|
||||
visible="{{ visible3 }}"
|
||||
visible="{{visible3}}"
|
||||
onClose="onClose3"
|
||||
onChange="onChange"
|
||||
onError="onKeyBoardError" />
|
||||
</list>
|
||||
onError="onKeyBoardError"
|
||||
></rare-words-keyboard>
|
||||
</list>
|
@ -1,58 +1,60 @@
|
||||
<ant-container title="基础用法">
|
||||
<ant-rate
|
||||
defaultValue="{{ 3 }}"
|
||||
onChange="onChange" />
|
||||
defaultValue="{{3}}"
|
||||
onChange="onChange"
|
||||
></ant-rate>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="半星">
|
||||
<ant-rate
|
||||
defaultValue="{{ 3.5 }}"
|
||||
defaultValue="{{3.5}}"
|
||||
allowHalf
|
||||
onChange="onChange" />
|
||||
onChange="onChange"
|
||||
></ant-rate>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="清除">
|
||||
<ant-rate
|
||||
defaultValue="{{ 4 }}"
|
||||
onChange="onChange" />
|
||||
defaultValue="{{4}}"
|
||||
onChange="onChange"
|
||||
></ant-rate>
|
||||
<view class="description">allowClear: true</view>
|
||||
<ant-rate
|
||||
defaultValue="{{ 4 }}"
|
||||
allowClear="{{ false }}"
|
||||
onChange="onChange" />
|
||||
defaultValue="{{4}}"
|
||||
allowClear="{{false}}"
|
||||
onChange="onChange"
|
||||
></ant-rate>
|
||||
<view class="description">allowClear: false</view>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="只读">
|
||||
<ant-rate
|
||||
defaultValue="{{ 3.5 }}"
|
||||
readonly />
|
||||
defaultValue="{{3.5}}"
|
||||
readonly
|
||||
></ant-rate>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="多个count">
|
||||
<ant-rate
|
||||
defaultValue="{{ 5 }}"
|
||||
count="{{ 8 }}" />
|
||||
defaultValue="{{5}}"
|
||||
count="{{8}}"
|
||||
></ant-rate>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="受控模式">
|
||||
<view style="display: flex; justify-content: space-around">
|
||||
<view>
|
||||
<ant-rate
|
||||
value="{{ value }}"
|
||||
onChange="handleChange" />
|
||||
|
||||
value="{{value}}"
|
||||
onChange="handleChange"
|
||||
></ant-rate>
|
||||
<view style="margin-top: 8px">
|
||||
<ant-stepper
|
||||
value="{{ value }}"
|
||||
min="{{ 0 }}"
|
||||
max="{{ 5 }}"
|
||||
onChange="handleChange" />
|
||||
value="{{value}}"
|
||||
min="{{0}}"
|
||||
max="{{5}}"
|
||||
onChange="handleChange"
|
||||
></ant-stepper>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<ant-rate value="{{ value }}" />
|
||||
<ant-rate value="{{value}}"></ant-rate>
|
||||
<view class="description">无 onChange 函数</view>
|
||||
</view>
|
||||
</view>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -1,84 +1,87 @@
|
||||
<ant-container title="自定义间距">
|
||||
<ant-rate
|
||||
defaultValue="{{ 3 }}"
|
||||
gutter="{{ 8 }}" />
|
||||
defaultValue="{{3}}"
|
||||
gutter="{{8}}"
|
||||
></ant-rate>
|
||||
<view class="description">8px</view>
|
||||
|
||||
<ant-rate
|
||||
defaultValue="{{ 4 }}"
|
||||
gutter="{{ 16 }}" />
|
||||
defaultValue="{{4}}"
|
||||
gutter="{{16}}"
|
||||
></ant-rate>
|
||||
<view class="description">16px</view>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="自定义大小">
|
||||
<ant-rate
|
||||
defaultValue="{{ 3 }}"
|
||||
className="rate" />
|
||||
defaultValue="{{3}}"
|
||||
className="rate"
|
||||
></ant-rate>
|
||||
<view class="description">30px</view>
|
||||
|
||||
<ant-rate
|
||||
defaultValue="{{ 3 }}"
|
||||
style="font-size: 40px" />
|
||||
defaultValue="{{3}}"
|
||||
style="font-size: 40px"
|
||||
></ant-rate>
|
||||
<view class="description">40px</view>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="自定义颜色">
|
||||
<ant-rate
|
||||
defaultValue="{{ 3 }}"
|
||||
defaultValue="{{3}}"
|
||||
characterClassName="star"
|
||||
characterActiveClassName="star-active" />
|
||||
characterActiveClassName="star-active"
|
||||
></ant-rate>
|
||||
<view class="description">基础</view>
|
||||
|
||||
<ant-rate
|
||||
defaultValue="{{ 3 }}"
|
||||
defaultValue="{{3}}"
|
||||
characterClassName="star-gradient"
|
||||
characterActiveClassName="star-active-gradient" />
|
||||
characterActiveClassName="star-active-gradient"
|
||||
></ant-rate>
|
||||
<view class="description">渐变</view>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="自定义图标">
|
||||
<ant-rate defaultValue="{{ 3 }}">
|
||||
<ant-rate defaultValue="{{3}}">
|
||||
<ant-icon
|
||||
slot="character"
|
||||
type="HeartFill" />
|
||||
type="HeartFill"
|
||||
></ant-icon>
|
||||
</ant-rate>
|
||||
<view class="description">自定义为HeartFill</view>
|
||||
|
||||
<ant-rate
|
||||
defaultValue="{{ 3.5 }}"
|
||||
allowHalf>
|
||||
defaultValue="{{3.5}}"
|
||||
allowHalf
|
||||
>
|
||||
<ant-icon
|
||||
slot="character"
|
||||
type="StarOutline" />
|
||||
type="StarOutline"
|
||||
></ant-icon>
|
||||
</ant-rate>
|
||||
<view class="description">自定义为StarOutline</view>
|
||||
|
||||
<ant-rate
|
||||
defaultValue="{{ 3.5 }}"
|
||||
defaultValue="{{3.5}}"
|
||||
allowHalf
|
||||
characterClassName="character">
|
||||
characterClassName="character"
|
||||
>
|
||||
<view slot="character">正</view>
|
||||
</ant-rate>
|
||||
<view class="description">自定义为正</view>
|
||||
|
||||
<ant-rate
|
||||
defaultValue="{{ 2.5 }}"
|
||||
defaultValue="{{2.5}}"
|
||||
allowHalf
|
||||
characterClassName="character">
|
||||
characterClassName="character"
|
||||
>
|
||||
<view slot="character">A</view>
|
||||
</ant-rate>
|
||||
<view class="description">自定义为A</view>
|
||||
|
||||
<ant-rate
|
||||
defaultValue="{{ 2.5 }}"
|
||||
defaultValue="{{2.5}}"
|
||||
allowHalf
|
||||
gutter="{{ 20 }}"
|
||||
characterClassName="character">
|
||||
gutter="{{20}}"
|
||||
characterClassName="character"
|
||||
>
|
||||
<view
|
||||
slot="character"
|
||||
slot-scope="rate">
|
||||
{{ rate.index }}
|
||||
slot-scope="rate"
|
||||
>
|
||||
{{rate.index}}
|
||||
</view>
|
||||
</ant-rate>
|
||||
<view class="description">自定义为索引</view>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -2,40 +2,39 @@
|
||||
<result
|
||||
title="操作成功"
|
||||
message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"
|
||||
type="success" />
|
||||
type="success"
|
||||
></result>
|
||||
</container>
|
||||
|
||||
<container title="等待状态">
|
||||
<result
|
||||
title="等待处理"
|
||||
message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"
|
||||
type="wait" />
|
||||
type="wait"
|
||||
></result>
|
||||
</container>
|
||||
|
||||
<container title="提示状态">
|
||||
<result
|
||||
title="信息提示"
|
||||
message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"
|
||||
type="info" />
|
||||
type="info"
|
||||
></result>
|
||||
</container>
|
||||
|
||||
<container title="警告状态">
|
||||
<result
|
||||
title="警告提示"
|
||||
message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"
|
||||
type="warning" />
|
||||
type="warning"
|
||||
></result>
|
||||
</container>
|
||||
|
||||
<container title="失败状态">
|
||||
<result
|
||||
title="无法完成操作"
|
||||
message="内容详情可折行,建议不超过两行\n建议不超过两行建议不超过两行"
|
||||
type="error" />
|
||||
type="error"
|
||||
></result>
|
||||
</container>
|
||||
|
||||
<container title="自定义">
|
||||
<result
|
||||
image="https://gw.alipayobjects.com/mdn/miniProgram_mendian/afts/img/A*wiFYTo5I0m8AAAAAAAAAAABjAQAAAQ/original">
|
||||
<result image="https://gw.alipayobjects.com/mdn/miniProgram_mendian/afts/img/A*wiFYTo5I0m8AAAAAAAAAAABjAQAAAQ/original">
|
||||
<view slot="title">标题插槽</view>
|
||||
<view slot="message">描述插槽</view>
|
||||
<view slot="extra">
|
||||
@ -43,9 +42,10 @@
|
||||
<button
|
||||
type="primary"
|
||||
inline
|
||||
style="margin-left: 12px">
|
||||
style="margin-left: 12px"
|
||||
>
|
||||
主要操作
|
||||
</button>
|
||||
</view>
|
||||
</result>
|
||||
</container>
|
||||
</container>
|
@ -1,61 +1,62 @@
|
||||
<ant-container title="单选">
|
||||
<ant-selector options="{{ items1 }}" />
|
||||
<ant-selector options="{{items1}}"></ant-selector>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="单选-选项带有副标题">
|
||||
<ant-selector
|
||||
defaultValue="2"
|
||||
options="{{ items2 }}" />
|
||||
options="{{items2}}"
|
||||
></ant-selector>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="多选">
|
||||
<ant-selector
|
||||
defaultValue="{{ ['1', '2'] }}"
|
||||
options="{{ items1 }}"
|
||||
multiple />
|
||||
defaultValue="{{['1', '2']}}"
|
||||
options="{{items1}}"
|
||||
multiple
|
||||
></ant-selector>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="多选 (最少选 2 个 最多选 4 个)">
|
||||
<ant-selector
|
||||
defaultValue="{{ ['1'] }}"
|
||||
options="{{ items1 }}"
|
||||
defaultValue="{{['1']}}"
|
||||
options="{{items1}}"
|
||||
multiple
|
||||
maxSelectedCount="{{ 4 }}"
|
||||
minSelectedCount="{{ 2 }}"
|
||||
onSelectMax="onSelectMax" />
|
||||
maxSelectedCount="{{4}}"
|
||||
minSelectedCount="{{2}}"
|
||||
onSelectMax="onSelectMax"
|
||||
></ant-selector>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="全禁用">
|
||||
<ant-selector
|
||||
value="{{ ['1', '2'] }}"
|
||||
options="{{ items1 }}"
|
||||
value="{{['1', '2']}}"
|
||||
options="{{items1}}"
|
||||
disabled
|
||||
multiple />
|
||||
multiple
|
||||
></ant-selector>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="部分禁用">
|
||||
<ant-selector
|
||||
defaultValue="{{ ['1', '2'] }}"
|
||||
options="{{ items3 }}"
|
||||
multiple />
|
||||
defaultValue="{{['1', '2']}}"
|
||||
options="{{items3}}"
|
||||
multiple
|
||||
></ant-selector>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="受控模式">
|
||||
<ant-selector
|
||||
value="{{ value }}"
|
||||
options="{{ items1 }}"
|
||||
onChange="handleChange" />
|
||||
value="{{value}}"
|
||||
options="{{items1}}"
|
||||
onChange="handleChange"
|
||||
></ant-selector>
|
||||
<ant-button
|
||||
size="large"
|
||||
onTap="handleChangeValue">
|
||||
onTap="handleChangeValue"
|
||||
>
|
||||
改变选中值为选项三
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
|
||||
<ant-container title="单选-不允许清空">
|
||||
<ant-selector
|
||||
defaultValue="1"
|
||||
minSelectedCount="{{ 1 }}"
|
||||
minSelectedCount="{{1}}"
|
||||
onSelectMin="onSelectMin"
|
||||
options="{{ items1 }}" />
|
||||
</ant-container>
|
||||
options="{{items1}}"
|
||||
></ant-selector>
|
||||
</ant-container>
|
@ -1,33 +1,39 @@
|
||||
<view class="filterDemo">
|
||||
<view class="filterDemo-bar">
|
||||
<block
|
||||
a:for="{{ items }}"
|
||||
a:for="{{items}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item">
|
||||
a:for-item="item"
|
||||
>
|
||||
<view
|
||||
class="filterDemo-bar-item {{ currentOpen === index ? 'filterDemo-bar-item-active' : '' }}"
|
||||
class="filterDemo-bar-item {{currentOpen === index ? 'filterDemo-bar-item-active' : ''}}"
|
||||
onTap="onTapItem"
|
||||
data-index="{{ index }}">
|
||||
{{ item.title }}
|
||||
data-index="{{index}}"
|
||||
>
|
||||
{{item.title}}
|
||||
<ant-icon
|
||||
type="DownFill"
|
||||
className="filterDemo-bar-item-icon {{ currentOpen === index ? 'filterDemo-bar-item-icon-up' : '' }}" />
|
||||
className="filterDemo-bar-item-icon {{currentOpen === index ? 'filterDemo-bar-item-icon-up' : ''}}"
|
||||
></ant-icon>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="filterDemo-items">
|
||||
<block
|
||||
a:for="{{ items }}"
|
||||
a:for="{{items}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item">
|
||||
a:for-item="item"
|
||||
>
|
||||
<view
|
||||
class="filterDemo-items-content {{ currentOpen === index ? 'filterDemo-items-content-active' : '' }} {{ contentClassName || '' }}"
|
||||
style="{{ contentStyle || '' }}">
|
||||
class="filterDemo-items-content {{currentOpen === index ? 'filterDemo-items-content-active' : ''}} {{contentClassName || ''}}"
|
||||
style="{{contentStyle || ''}}"
|
||||
>
|
||||
<ant-selector
|
||||
options="{{ item.options }}"
|
||||
options="{{item.options}}"
|
||||
onChange="handleChange"
|
||||
data-index="{{ index }}" />
|
||||
data-index="{{index}}"
|
||||
></ant-selector>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
@ -1,39 +1,37 @@
|
||||
<container title="基础用法">
|
||||
<skeleton />
|
||||
<skeleton></skeleton>
|
||||
</container>
|
||||
|
||||
<container title="有动画的骨架屏">
|
||||
<skeleton animate="{{ true }}" />
|
||||
<skeleton animate="{{true}}"></skeleton>
|
||||
</container>
|
||||
|
||||
<container title="带avatar">
|
||||
<skeleton avatar="{{ true }}" />
|
||||
<skeleton avatar="{{true}}"></skeleton>
|
||||
</container>
|
||||
|
||||
<container title="自定义组合">
|
||||
<view class="list">
|
||||
<skeleton-avatar className="custom" />
|
||||
<skeleton-avatar className="custom"></skeleton-avatar>
|
||||
<skeleton-paragraph
|
||||
className="custom"
|
||||
rows="{{ 1 }}" />
|
||||
<skeleton-input className="custom" />
|
||||
<skeleton-input className="custom" />
|
||||
<skeleton-input className="custom" />
|
||||
rows="{{1}}"
|
||||
></skeleton-paragraph>
|
||||
<skeleton-input className="custom"></skeleton-input>
|
||||
<skeleton-input className="custom"></skeleton-input>
|
||||
<skeleton-input className="custom"></skeleton-input>
|
||||
<skeleton-button
|
||||
className="custom"
|
||||
size="small" />
|
||||
size="small"
|
||||
></skeleton-button>
|
||||
</view>
|
||||
</container>
|
||||
|
||||
<container title="复杂组合">
|
||||
<skeleton
|
||||
loading="{{ showLoading }}"
|
||||
title="{{ false }}"
|
||||
avatar="{{ true }}"
|
||||
paragraph="{{ paragraph }}">
|
||||
loading="{{showLoading}}"
|
||||
title="{{false}}"
|
||||
avatar="{{true}}"
|
||||
paragraph="{{paragraph}}"
|
||||
>
|
||||
<view class="container">
|
||||
<avatar
|
||||
src="https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ" />
|
||||
<avatar src="https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ"></avatar>
|
||||
<view class="content">
|
||||
We supply a series of design principles, practical patterns and high
|
||||
quality design resources, to help people create their product prototypes
|
||||
@ -45,7 +43,8 @@
|
||||
显示骨架
|
||||
<switch
|
||||
style="margin-left: 8px"
|
||||
checked="{{ showLoading }}"
|
||||
onChange="handleToggleShowLoading" />
|
||||
checked="{{showLoading}}"
|
||||
onChange="handleToggleShowLoading"
|
||||
></switch>
|
||||
</view>
|
||||
</container>
|
||||
</container>
|
@ -1,116 +1,117 @@
|
||||
<container title="基本使用">
|
||||
<ant-slider
|
||||
defaultValue="{{ 80 }}"
|
||||
defaultValue="{{80}}"
|
||||
onChange="onChange"
|
||||
onAfterChange="onAfterChange" />
|
||||
onAfterChange="onAfterChange"
|
||||
></ant-slider>
|
||||
</container>
|
||||
|
||||
<container title="无节点双滑块">
|
||||
<ant-slider
|
||||
defaultValue="{{ [20, 60] }}"
|
||||
defaultValue="{{[20, 60]}}"
|
||||
range
|
||||
onChange="onChange"
|
||||
onAfterChange="onAfterChange" />
|
||||
onAfterChange="onAfterChange"
|
||||
></ant-slider>
|
||||
</container>
|
||||
|
||||
<container title="节点单滑块">
|
||||
<ant-slider
|
||||
defaultValue="{{ 60 }}"
|
||||
step="{{ 20 }}"
|
||||
defaultValue="{{60}}"
|
||||
step="{{20}}"
|
||||
showTicks
|
||||
onChange="onChange"
|
||||
onAfterChange="onAfterChange" />
|
||||
onAfterChange="onAfterChange"
|
||||
></ant-slider>
|
||||
</container>
|
||||
|
||||
<container title="有数字节点单滑块">
|
||||
<ant-slider
|
||||
defaultValue="{{ 80 }}"
|
||||
step="{{ 20 }}"
|
||||
defaultValue="{{80}}"
|
||||
step="{{20}}"
|
||||
showTicks
|
||||
showNumber
|
||||
onChange="onChange"
|
||||
onAfterChange="onAfterChange" />
|
||||
onAfterChange="onAfterChange"
|
||||
></ant-slider>
|
||||
</container>
|
||||
|
||||
<container title="节点双滑块">
|
||||
<ant-slider
|
||||
defaultValue="{{ [10, 50] }}"
|
||||
step="{{ 10 }}"
|
||||
defaultValue="{{[10, 50]}}"
|
||||
step="{{10}}"
|
||||
showTicks
|
||||
range
|
||||
onChange="onChange"
|
||||
onAfterChange="onAfterChange" />
|
||||
onAfterChange="onAfterChange"
|
||||
></ant-slider>
|
||||
</container>
|
||||
|
||||
<container title="有数字节点双滑块">
|
||||
<ant-slider
|
||||
defaultValue="{{ [10, 50] }}"
|
||||
step="{{ 10 }}"
|
||||
defaultValue="{{[10, 50]}}"
|
||||
step="{{10}}"
|
||||
showTicks
|
||||
showNumber
|
||||
range
|
||||
onChange="onChange"
|
||||
onAfterChange="onAfterChange" />
|
||||
onAfterChange="onAfterChange"
|
||||
></ant-slider>
|
||||
</container>
|
||||
|
||||
<container title="在拖动时显示悬浮提示">
|
||||
<ant-slider
|
||||
defaultValue="{{ 80 }}"
|
||||
defaultValue="{{80}}"
|
||||
showTooltip
|
||||
onChange="onChange"
|
||||
onAfterChange="onAfterChange" />
|
||||
onAfterChange="onAfterChange"
|
||||
></ant-slider>
|
||||
</container>
|
||||
|
||||
<container title="受控模式">
|
||||
<ant-slider
|
||||
min="{{ 0 }}"
|
||||
max="{{ 100 }}"
|
||||
value="{{ value }}"
|
||||
onChange="handleChange" />
|
||||
min="{{0}}"
|
||||
max="{{100}}"
|
||||
value="{{value}}"
|
||||
onChange="handleChange"
|
||||
></ant-slider>
|
||||
<ant-stepper
|
||||
min="{{ 0 }}"
|
||||
max="{{ 100 }}"
|
||||
value="{{ value }}"
|
||||
onChange="handleChange" />
|
||||
min="{{0}}"
|
||||
max="{{100}}"
|
||||
value="{{value}}"
|
||||
onChange="handleChange"
|
||||
></ant-stepper>
|
||||
</container>
|
||||
|
||||
<container title="自定义">
|
||||
<ant-slider
|
||||
defaultValue="{{ 80 }}"
|
||||
step="{{ 20 }}"
|
||||
defaultValue="{{80}}"
|
||||
step="{{20}}"
|
||||
showTooltip
|
||||
showTicks
|
||||
showNumber
|
||||
activeLineStyle="background-color: #ff8f1f"
|
||||
activeDotStyle="background-color: red"
|
||||
onChange="onChange"
|
||||
onAfterChange="onAfterChange">
|
||||
<!-- display: inline -->
|
||||
<text
|
||||
slot="tick"
|
||||
slot-scope="props"
|
||||
>{{ props.value }}°C</text
|
||||
>
|
||||
<!-- display: inline -->
|
||||
<text
|
||||
slot="tooltip"
|
||||
slot-scope="props"
|
||||
>{{ props.value }}°C</text
|
||||
>
|
||||
|
||||
onAfterChange="onAfterChange"
|
||||
>
|
||||
<view slot="slider">
|
||||
<view class="custom-slider-handler">
|
||||
<ant-icon
|
||||
type="SmileOutline"
|
||||
style="color: #ff8f1f" />
|
||||
style="color: #ff8f1f"
|
||||
></ant-icon>
|
||||
</view>
|
||||
</view>
|
||||
<!--微信暂时不支持 slot-->
|
||||
<!--display: inline-->
|
||||
<text
|
||||
slot="tick"
|
||||
slot-scope="props"
|
||||
>{{props.value}}°C</text>
|
||||
<!--display: inline-->
|
||||
<text
|
||||
slot="tooltip"
|
||||
slot-scope="props"
|
||||
>{{props.value}}°C</text>
|
||||
</ant-slider>
|
||||
</container>
|
||||
|
||||
<container title="禁用状态">
|
||||
<ant-slider
|
||||
defaultValue="{{ 80 }}"
|
||||
defaultValue="{{80}}"
|
||||
disabled
|
||||
onChange="onChange" />
|
||||
</container>
|
||||
onChange="onChange"
|
||||
></ant-slider>
|
||||
</container>
|
@ -3,64 +3,74 @@
|
||||
onChange="onChange"
|
||||
onBlur="onBlur"
|
||||
onConfirm="onConfirm"
|
||||
onFocus="onFocus" />
|
||||
onFocus="onFocus"
|
||||
></stepper>
|
||||
</container>
|
||||
<container title="初始值">
|
||||
<stepper defaultValue="{{ 0 }}" />
|
||||
<stepper defaultValue="{{0}}"></stepper>
|
||||
</container>
|
||||
<container title="step 0.01">
|
||||
<stepper
|
||||
defaultValue="{{ 0 }}"
|
||||
step="{{ 0.01 }}"
|
||||
inputStyle="width: 60px" />
|
||||
defaultValue="{{0}}"
|
||||
step="{{0.01}}"
|
||||
inputStyle="width: 60px"
|
||||
></stepper>
|
||||
</container>
|
||||
<container title="precision 1">
|
||||
<stepper
|
||||
defaultValue="{{ 0 }}"
|
||||
precision="{{ 1 }}"
|
||||
inputStyle="width: 60px" />
|
||||
defaultValue="{{0}}"
|
||||
precision="{{1}}"
|
||||
inputStyle="width: 60px"
|
||||
></stepper>
|
||||
</container>
|
||||
<container title="限制输入范围 [0, 10]">
|
||||
<stepper
|
||||
defaultValue="{{ 0 }}"
|
||||
min="{{ 0 }}"
|
||||
max="{{ 10 }}"
|
||||
step="{{ 1 }}" />
|
||||
defaultValue="{{0}}"
|
||||
min="{{0}}"
|
||||
max="{{10}}"
|
||||
step="{{1}}"
|
||||
></stepper>
|
||||
</container>
|
||||
<container title="禁用状态">
|
||||
<stepper
|
||||
defaultValue="{{ 0 }}"
|
||||
disabled />
|
||||
defaultValue="{{0}}"
|
||||
disabled
|
||||
></stepper>
|
||||
</container>
|
||||
<container title="输入框只读">
|
||||
<stepper
|
||||
defaultValue="{{ 0 }}"
|
||||
inputReadOnly />
|
||||
defaultValue="{{0}}"
|
||||
inputReadOnly
|
||||
></stepper>
|
||||
</container>
|
||||
<container title="受控组件">
|
||||
<stepper
|
||||
value="{{ value }}"
|
||||
value="{{value}}"
|
||||
onChange="handleChange"
|
||||
style="margin: 8px 0"
|
||||
onBlur="onBlur"
|
||||
onConfirm="onConfirm"
|
||||
onFocus="onFocus" />
|
||||
value: {{ value }}
|
||||
onFocus="onFocus"
|
||||
></stepper>
|
||||
value: {{value}}
|
||||
<view class="list">
|
||||
<ant-button
|
||||
inline
|
||||
onTap="add">
|
||||
onTap="add"
|
||||
>
|
||||
add
|
||||
</ant-button>
|
||||
<ant-button
|
||||
inline
|
||||
onTap="minus">
|
||||
onTap="minus"
|
||||
>
|
||||
minus
|
||||
</ant-button>
|
||||
<ant-button
|
||||
inline
|
||||
onTap="clear">
|
||||
onTap="clear"
|
||||
>
|
||||
clear
|
||||
</ant-button>
|
||||
</view>
|
||||
</container>
|
||||
</container>
|
@ -1,59 +1,61 @@
|
||||
<container title="横向步骤条">
|
||||
<steps items="{{ items }}" />
|
||||
<steps items="{{items}}"></steps>
|
||||
</container>
|
||||
|
||||
<container title="横向步骤条失败">
|
||||
<steps
|
||||
items="{{ items }}"
|
||||
items="{{items}}"
|
||||
status="error"
|
||||
current="{{ 1 }}" />
|
||||
current="{{1}}"
|
||||
></steps>
|
||||
</container>
|
||||
|
||||
<container title="纵向步骤条">
|
||||
<steps
|
||||
items="{{ items }}"
|
||||
direction="vertical" />
|
||||
items="{{items}}"
|
||||
direction="vertical"
|
||||
></steps>
|
||||
</container>
|
||||
|
||||
<container title="纵向步骤条失败">
|
||||
<steps
|
||||
items="{{ items }}"
|
||||
items="{{items}}"
|
||||
status="error"
|
||||
current="{{ 1 }}"
|
||||
direction="vertical" />
|
||||
current="{{1}}"
|
||||
direction="vertical"
|
||||
></steps>
|
||||
</container>
|
||||
|
||||
<container title="自定义图标">
|
||||
<steps items="{{ items }}">
|
||||
<steps items="{{items}}">
|
||||
<icon
|
||||
slot="icon"
|
||||
type="SmileFill" />
|
||||
type="SmileFill"
|
||||
></icon>
|
||||
</steps>
|
||||
</container>
|
||||
|
||||
<container title="更多自定义">
|
||||
<steps
|
||||
items="{{ items }}"
|
||||
current="{{ 2 }}">
|
||||
items="{{items}}"
|
||||
current="{{2}}"
|
||||
>
|
||||
<block
|
||||
slot="icon"
|
||||
slot-scope="item">
|
||||
slot-scope="item"
|
||||
>
|
||||
<icon
|
||||
a:if="{{ iconList[item.index] }}"
|
||||
type="{{ iconList[item.index] }}" />
|
||||
a:if="{{iconList[item.index]}}"
|
||||
type="{{iconList[item.index]}}"
|
||||
></icon>
|
||||
</block>
|
||||
|
||||
<view
|
||||
slot="title"
|
||||
slot-scope="item">
|
||||
{{ item.index + 1 }}
|
||||
slot-scope="item"
|
||||
>
|
||||
{{item.index + 1}}
|
||||
</view>
|
||||
|
||||
<view
|
||||
slot="description"
|
||||
slot-scope="item">
|
||||
<view>{{ item.value.title }}</view>
|
||||
<view>{{ item.value.description }}</view>
|
||||
slot-scope="item"
|
||||
>
|
||||
<view>{{item.value.title}}</view>
|
||||
<view>{{item.value.description}}</view>
|
||||
</view>
|
||||
</steps>
|
||||
</container>
|
||||
</container>
|
@ -1,16 +1,19 @@
|
||||
<ant-container title="步骤条控制">
|
||||
<ant-steps
|
||||
items="{{ items }}"
|
||||
current="{{ current }}" />
|
||||
items="{{items}}"
|
||||
current="{{current}}"
|
||||
></ant-steps>
|
||||
<ant-button
|
||||
onTap="onNextTap"
|
||||
type="primary">
|
||||
<view a:if="{{ current < items.length - 1 }}">下一步</view>
|
||||
type="primary"
|
||||
>
|
||||
<view a:if="{{current < items.length - 1}}">下一步</view>
|
||||
<view a:else>完成</view>
|
||||
</ant-button>
|
||||
<ant-button
|
||||
a:if="{{ current > 0 }}"
|
||||
onTap="onPrevTap">
|
||||
a:if="{{current > 0}}"
|
||||
onTap="onPrevTap"
|
||||
>
|
||||
上一步
|
||||
</ant-button>
|
||||
</ant-container>
|
||||
</ant-container>
|
@ -2,22 +2,23 @@
|
||||
<view class="t-swipe-item">
|
||||
<view class="t-swipe-item-title">基础用法</view>
|
||||
<block
|
||||
a:for="{{ 10 }}"
|
||||
a:for="{{10}}"
|
||||
a:for-index="index"
|
||||
a:for-item="_"
|
||||
a:key="{{ index }}">
|
||||
>
|
||||
<view class="t-swipe-item-con">
|
||||
<ant-swipe-action
|
||||
data-item="{{ index }}"
|
||||
rightButtons="{{ rightBtns }}"
|
||||
elasticity="{{ true }}"
|
||||
swiped="{{ swipeIndex === index }}"
|
||||
data-item="{{index}}"
|
||||
rightButtons="{{rightBtns}}"
|
||||
elasticity="{{true}}"
|
||||
swiped="{{swipeIndex === index}}"
|
||||
onSwipeEnd="onSwipeEnd"
|
||||
onSwipeStart="onSwipeStart"
|
||||
onButtonTap="onButtonTap">
|
||||
onButtonTap="onButtonTap"
|
||||
>
|
||||
<view class="t-swipe-item-con-view">右侧-三个按钮</view>
|
||||
</ant-swipe-action>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
@ -2,22 +2,23 @@
|
||||
<view class="t-swipe-item">
|
||||
<view class="t-swipe-item-title">去除松开手之后的滑动回弹效果</view>
|
||||
<block
|
||||
a:for="{{ 10 }}"
|
||||
a:for="{{10}}"
|
||||
a:for-index="index"
|
||||
a:for-item="_"
|
||||
a:key="{{ index }}">
|
||||
>
|
||||
<view class="t-swipe-item-con">
|
||||
<ant-swipe-action
|
||||
data-item="{{ index }}"
|
||||
rightButtons="{{ rightBtns }}"
|
||||
elasticity="{{ false }}"
|
||||
swiped="{{ swipeIndex === index }}"
|
||||
data-item="{{index}}"
|
||||
rightButtons="{{rightBtns}}"
|
||||
elasticity="{{false}}"
|
||||
swiped="{{swipeIndex === index}}"
|
||||
onSwipeEnd="onSwipeEnd"
|
||||
onSwipeStart="onSwipeStart"
|
||||
onButtonTap="onButtonTap">
|
||||
onButtonTap="onButtonTap"
|
||||
>
|
||||
<view class="t-swipe-item-con-view">右侧-三个按钮</view>
|
||||
</ant-swipe-action>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
@ -2,22 +2,23 @@
|
||||
<view class="t-swipe-item">
|
||||
<view class="t-swipe-item-title">按钮在左侧</view>
|
||||
<block
|
||||
a:for="{{ 10 }}"
|
||||
a:for="{{10}}"
|
||||
a:for-index="index"
|
||||
a:for-item="_"
|
||||
a:key="{{ index }}">
|
||||
>
|
||||
<view class="t-swipe-item-con">
|
||||
<ant-swipe-action
|
||||
data-item="{{ index }}"
|
||||
leftButtons="{{ leftBtns }}"
|
||||
elasticity="{{ true }}"
|
||||
swiped="{{ swipeIndex === index }}"
|
||||
data-item="{{index}}"
|
||||
leftButtons="{{leftBtns}}"
|
||||
elasticity="{{true}}"
|
||||
swiped="{{swipeIndex === index}}"
|
||||
onSwipeEnd="onSwipeEnd"
|
||||
onSwipeStart="onSwipeStart"
|
||||
onButtonTap="onButtonTap">
|
||||
onButtonTap="onButtonTap"
|
||||
>
|
||||
<view class="t-swipe-item-con-view">左侧-三个按钮</view>
|
||||
</ant-swipe-action>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
@ -2,23 +2,24 @@
|
||||
<view class="t-swipe-item">
|
||||
<view class="t-swipe-item-title">左右两侧都有按钮</view>
|
||||
<block
|
||||
a:for="{{ 10 }}"
|
||||
a:for="{{10}}"
|
||||
a:for-index="index"
|
||||
a:for-item="_"
|
||||
a:key="{{ index }}">
|
||||
>
|
||||
<view class="t-swipe-item-con">
|
||||
<ant-swipe-action
|
||||
data-item="{{ index }}"
|
||||
leftButtons="{{ rightBtns }}"
|
||||
rightButtons="{{ rightBtns }}"
|
||||
elasticity="{{ true }}"
|
||||
swiped="{{ swipeIndex === index }}"
|
||||
data-item="{{index}}"
|
||||
leftButtons="{{rightBtns}}"
|
||||
rightButtons="{{rightBtns}}"
|
||||
elasticity="{{true}}"
|
||||
swiped="{{swipeIndex === index}}"
|
||||
onSwipeEnd="onSwipeEnd"
|
||||
onSwipeStart="onSwipeStart"
|
||||
onButtonTap="onButtonTap">
|
||||
onButtonTap="onButtonTap"
|
||||
>
|
||||
<view class="t-swipe-item-con-view">三个按钮</view>
|
||||
</ant-swipe-action>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
@ -2,22 +2,23 @@
|
||||
<view class="t-swipe-item">
|
||||
<view class="t-swipe-item-title">删除按钮滑动到最大距离触发二次确认</view>
|
||||
<block
|
||||
a:for="{{ 10 }}"
|
||||
a:for="{{10}}"
|
||||
a:for-index="index"
|
||||
a:for-item="_"
|
||||
a:key="{{ index }}">
|
||||
>
|
||||
<view class="t-swipe-item-con">
|
||||
<ant-swipe-action
|
||||
data-item="{{ index }}"
|
||||
rightButtons="{{ rightBtns }}"
|
||||
elasticity="{{ true }}"
|
||||
swiped="{{ swipeIndex === index }}"
|
||||
data-item="{{index}}"
|
||||
rightButtons="{{rightBtns}}"
|
||||
elasticity="{{true}}"
|
||||
swiped="{{swipeIndex === index}}"
|
||||
onSwipeEnd="onSwipeEnd"
|
||||
onSwipeStart="onSwipeStart"
|
||||
onButtonTap="onButtonTap">
|
||||
onButtonTap="onButtonTap"
|
||||
>
|
||||
<view class="t-swipe-item-con-view">右侧-三个按钮</view>
|
||||
</ant-swipe-action>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
@ -1,30 +1,30 @@
|
||||
<import-sjs
|
||||
from="./slice.sjs"
|
||||
name="utils" />
|
||||
|
||||
name="utils"
|
||||
></import-sjs>
|
||||
<view class="t-swipe">
|
||||
<view class="t-swipe-item">
|
||||
<view class="t-swipe-item-title">调整按钮数量,最多为3个</view>
|
||||
|
||||
<block
|
||||
a:for="{{ 5 }}"
|
||||
a:for="{{5}}"
|
||||
a:for-index="index"
|
||||
a:for-item="_"
|
||||
a:key="{{ index }}">
|
||||
>
|
||||
<view class="t-swipe-item-con">
|
||||
<ant-swipe-action
|
||||
data-item="{{ index }}"
|
||||
rightButtons="{{ utils.sliceButton(rightBtns, index) }}"
|
||||
elasticity="{{ index !== 0 }}"
|
||||
swiped="{{ swipeIndex === index }}"
|
||||
data-item="{{index}}"
|
||||
rightButtons="{{utils.sliceButton(rightBtns, index)}}"
|
||||
elasticity="{{index !== 0}}"
|
||||
swiped="{{swipeIndex === index}}"
|
||||
onSwipeEnd="onSwipeEnd"
|
||||
onSwipeStart="onSwipeStart"
|
||||
onButtonTap="onButtonTap">
|
||||
onButtonTap="onButtonTap"
|
||||
>
|
||||
<view class="t-swipe-item-con-view">
|
||||
右侧-{{ index + 1 > 3 ? 3 : index + 1 }}个按钮
|
||||
右侧-{{index + 1 > 3 ? 3 : index + 1}}个按钮
|
||||
</view>
|
||||
</ant-swipe-action>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
@ -2,72 +2,85 @@
|
||||
<view class="t-swipe-item">
|
||||
<view class="t-swipe-item-title">自定义按钮</view>
|
||||
<block
|
||||
a:for="{{ 10 }}"
|
||||
a:for="{{10}}"
|
||||
a:for-index="index"
|
||||
a:for-item="_"
|
||||
a:key="{{ index }}">
|
||||
>
|
||||
<view class="t-swipe-item-con">
|
||||
<ant-swipe-action
|
||||
data-item="{{ index }}"
|
||||
rightButtons="{{ rightBtns }}"
|
||||
leftButtons="{{ leftBtns }}"
|
||||
elasticity="{{ true }}"
|
||||
swiped="{{ swipeIndex === index }}"
|
||||
data-item="{{index}}"
|
||||
rightButtons="{{rightBtns}}"
|
||||
leftButtons="{{leftBtns}}"
|
||||
elasticity="{{true}}"
|
||||
swiped="{{swipeIndex === index}}"
|
||||
onSwipeEnd="onSwipeEnd"
|
||||
onSwipeStart="onSwipeStart"
|
||||
onButtonTap="onButtonTap">
|
||||
onButtonTap="onButtonTap"
|
||||
>
|
||||
<view class="t-swipe-item-con-view">左右自定义按钮</view>
|
||||
<view
|
||||
slot="delete"
|
||||
class="t-swipe-item-con-btn">
|
||||
class="t-swipe-item-con-btn"
|
||||
>
|
||||
<ant-icon
|
||||
type="DeleteOutline"
|
||||
className="t-swipe-item-con-btn-icon" />
|
||||
<!-- display: inline -->
|
||||
className="t-swipe-item-con-btn-icon"
|
||||
></ant-icon>
|
||||
<!--display: inline-->
|
||||
<text class="t-swipe-item-con-btn-del">删除</text>
|
||||
</view>
|
||||
<view
|
||||
slot="delete-confirm"
|
||||
class="t-swipe-item-con-btn">
|
||||
class="t-swipe-item-con-btn"
|
||||
>
|
||||
<ant-icon
|
||||
type="DeleteOutline"
|
||||
className="t-swipe-item-con-btn-icon" />
|
||||
className="t-swipe-item-con-btn-icon"
|
||||
></ant-icon>
|
||||
<view class="t-swipe-item-con-btn-del">确认删除吗?</view>
|
||||
</view>
|
||||
<view
|
||||
slot="reName"
|
||||
class="t-swipe-item-con-btn">
|
||||
class="t-swipe-item-con-btn"
|
||||
>
|
||||
<ant-icon
|
||||
type="EditFill"
|
||||
className="t-swipe-item-con-btn-icon" />
|
||||
className="t-swipe-item-con-btn-icon"
|
||||
></ant-icon>
|
||||
<view class="t-swipe-item-con-btn-del">重命名</view>
|
||||
</view>
|
||||
<view
|
||||
slot="reName-confirm"
|
||||
class="t-swipe-item-con-btn">
|
||||
class="t-swipe-item-con-btn"
|
||||
>
|
||||
<ant-icon
|
||||
type="EditFill"
|
||||
className="t-swipe-item-con-btn-icon" />
|
||||
className="t-swipe-item-con-btn-icon"
|
||||
></ant-icon>
|
||||
<view class="t-swipe-item-con-btn-del">确认修改吗?</view>
|
||||
</view>
|
||||
<view
|
||||
slot="reName-left"
|
||||
class="t-swipe-item-con-btn left-slot">
|
||||
class="t-swipe-item-con-btn left-slot"
|
||||
>
|
||||
<ant-icon
|
||||
type="EditFill"
|
||||
className="t-swipe-item-con-btn-icon" />
|
||||
className="t-swipe-item-con-btn-icon"
|
||||
></ant-icon>
|
||||
<view class="t-swipe-item-con-btn-del">重命名</view>
|
||||
</view>
|
||||
<view
|
||||
slot="reName-left-confirm"
|
||||
class="t-swipe-item-con-btn left-slot">
|
||||
class="t-swipe-item-con-btn left-slot"
|
||||
>
|
||||
<ant-icon
|
||||
type="EditFill"
|
||||
className="t-swipe-item-con-btn-icon" />
|
||||
className="t-swipe-item-con-btn-icon"
|
||||
></ant-icon>
|
||||
<view class="t-swipe-item-con-btn-del">确认修改吗?</view>
|
||||
</view>
|
||||
</ant-swipe-action>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
@ -1,25 +1,25 @@
|
||||
<view class="t-swipe">
|
||||
<view class="t-swipe-item">
|
||||
<view class="t-swipe-item-title">滑动速度变慢</view>
|
||||
|
||||
<block
|
||||
a:for="{{ 10 }}"
|
||||
a:for="{{10}}"
|
||||
a:for-index="index"
|
||||
a:for-item="_"
|
||||
a:key="{{ index }}">
|
||||
>
|
||||
<view class="t-swipe-item-con">
|
||||
<ant-swipe-action
|
||||
data-item="{{ index }}"
|
||||
rightButtons="{{ rightBtns }}"
|
||||
elasticity="{{ false }}"
|
||||
data-item="{{index}}"
|
||||
rightButtons="{{rightBtns}}"
|
||||
elasticity="{{false}}"
|
||||
damping="25"
|
||||
swiped="{{ swipeIndex === index }}"
|
||||
swiped="{{swipeIndex === index}}"
|
||||
onSwipeEnd="onSwipeEnd"
|
||||
onSwipeStart="onSwipeStart"
|
||||
onButtonTap="onButtonTap">
|
||||
onButtonTap="onButtonTap"
|
||||
>
|
||||
<view class="t-swipe-item-con-view">右侧-三个按钮</view>
|
||||
</ant-swipe-action>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
@ -1,24 +1,24 @@
|
||||
<view class="t-swipe">
|
||||
<view class="t-swipe-item">
|
||||
<view class="t-swipe-item-title">删除按钮点击二次确认</view>
|
||||
|
||||
<block
|
||||
a:for="{{ 10 }}"
|
||||
a:for="{{10}}"
|
||||
a:for-index="index"
|
||||
a:for-item="_"
|
||||
a:key="{{ index }}">
|
||||
>
|
||||
<view class="t-swipe-item-con">
|
||||
<ant-swipe-action
|
||||
data-item="{{ index }}"
|
||||
rightButtons="{{ rightBtns }}"
|
||||
elasticity="{{ true }}"
|
||||
swiped="{{ swipeIndex === index }}"
|
||||
data-item="{{index}}"
|
||||
rightButtons="{{rightBtns}}"
|
||||
elasticity="{{true}}"
|
||||
swiped="{{swipeIndex === index}}"
|
||||
onSwipeEnd="onSwipeEnd"
|
||||
onSwipeStart="onSwipeStart"
|
||||
onButtonTap="onButtonTap">
|
||||
onButtonTap="onButtonTap"
|
||||
>
|
||||
<view class="t-swipe-item-con-view">右侧-三个按钮</view>
|
||||
</ant-swipe-action>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
@ -1,24 +1,24 @@
|
||||
<view class="t-swipe">
|
||||
<view class="t-swipe-item">
|
||||
<view class="t-swipe-item-title">自定义按钮宽度</view>
|
||||
|
||||
<block
|
||||
a:for="{{ 10 }}"
|
||||
a:for="{{10}}"
|
||||
a:for-index="index"
|
||||
a:for-item="_"
|
||||
a:key="{{ index }}">
|
||||
>
|
||||
<view class="t-swipe-item-con">
|
||||
<ant-swipe-action
|
||||
data-item="{{ index }}"
|
||||
rightButtons="{{ rightBtns }}"
|
||||
elasticity="{{ true }}"
|
||||
swiped="{{ swipeIndex === index }}"
|
||||
data-item="{{index}}"
|
||||
rightButtons="{{rightBtns}}"
|
||||
elasticity="{{true}}"
|
||||
swiped="{{swipeIndex === index}}"
|
||||
onSwipeEnd="onSwipeEnd"
|
||||
onSwipeStart="onSwipeStart"
|
||||
onButtonTap="onButtonTap">
|
||||
onButtonTap="onButtonTap"
|
||||
>
|
||||
<view class="t-swipe-item-con-view">右侧-三个按钮</view>
|
||||
</ant-swipe-action>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
@ -1,64 +1,71 @@
|
||||
<view>
|
||||
<container title="基础用法">
|
||||
<switch />
|
||||
<switch></switch>
|
||||
</container>
|
||||
<container title="有默认值">
|
||||
<switch
|
||||
defaultChecked="{{ true }}"
|
||||
onChange="onChange" />
|
||||
defaultChecked="{{true}}"
|
||||
onChange="onChange"
|
||||
></switch>
|
||||
</container>
|
||||
<container title="文字和图标">
|
||||
<switch
|
||||
checkedText="开"
|
||||
uncheckedText="关"
|
||||
onChange="onChange" />
|
||||
onChange="onChange"
|
||||
></switch>
|
||||
<switch>
|
||||
<ant-icon
|
||||
type="CheckOutline"
|
||||
slot="checkedText" />
|
||||
slot="checkedText"
|
||||
></ant-icon>
|
||||
<ant-icon
|
||||
type="CloseOutline"
|
||||
slot="uncheckedText" />
|
||||
slot="uncheckedText"
|
||||
></ant-icon>
|
||||
</switch>
|
||||
</container>
|
||||
<container title="自定义颜色">
|
||||
<switch
|
||||
defaultChecked="{{ true }}"
|
||||
color="#00b578" />
|
||||
defaultChecked="{{true}}"
|
||||
color="#00b578"
|
||||
></switch>
|
||||
</container>
|
||||
<container title="禁用状态">
|
||||
<switch
|
||||
defaultChecked="{{ true }}"
|
||||
disabled="{{ true }}" />
|
||||
<switch disabled="{{ true }}" />
|
||||
defaultChecked="{{true}}"
|
||||
disabled="{{true}}"
|
||||
></switch>
|
||||
<switch disabled="{{true}}"></switch>
|
||||
</container>
|
||||
<container title="加载状态">
|
||||
<switch loading />
|
||||
<switch loading></switch>
|
||||
</container>
|
||||
<container title="不同尺寸">
|
||||
<view class="line">
|
||||
<view>medium:</view>
|
||||
<switch size="medium" />
|
||||
<switch size="medium"></switch>
|
||||
</view>
|
||||
<view class="line">
|
||||
<view>small:</view>
|
||||
<switch size="small" />
|
||||
<switch size="small"></switch>
|
||||
</view>
|
||||
<view class="line">
|
||||
<view>x-small:</view>
|
||||
<switch size="x-small" />
|
||||
<switch size="x-small"></switch>
|
||||
</view>
|
||||
</container>
|
||||
<container title="受控模式">
|
||||
<switch
|
||||
checked="{{ checked }}"
|
||||
checked="{{checked}}"
|
||||
onChange="handleChange"
|
||||
defaultChecked="{{ true }}" />
|
||||
|
||||
defaultChecked="{{true}}"
|
||||
></switch>
|
||||
<button
|
||||
style="margin-top: 10px"
|
||||
onTap="handleChangeByButton">
|
||||
onTap="handleChangeByButton"
|
||||
>
|
||||
切换
|
||||
</button>
|
||||
</container>
|
||||
</view>
|
||||
</view>
|
@ -1,19 +1,19 @@
|
||||
<container title="基础用法">
|
||||
<tab-bar items="{{ tabs }}" />
|
||||
<tab-bar items="{{tabs}}"></tab-bar>
|
||||
</container>
|
||||
<container title="受控模式">
|
||||
<tab-bar
|
||||
items="{{ tabs }}"
|
||||
current="{{ current }}"
|
||||
onChange="handleChange" />
|
||||
items="{{tabs}}"
|
||||
current="{{current}}"
|
||||
onChange="handleChange"
|
||||
></tab-bar>
|
||||
</container>
|
||||
|
||||
<container title="红点用法">
|
||||
<tab-bar items="{{ tabsBadge }}" />
|
||||
<tab-bar items="{{tabsBadge}}"></tab-bar>
|
||||
</container>
|
||||
|
||||
<container title="自定义高亮颜色">
|
||||
<tab-bar
|
||||
items="{{ tabs }}"
|
||||
activeStyle="color:red;" />
|
||||
</container>
|
||||
items="{{tabs}}"
|
||||
activeStyle="color:red;"
|
||||
></tab-bar>
|
||||
</container>
|
@ -1,65 +1,74 @@
|
||||
<container title="基础用法">
|
||||
<tabs items="{{ items }}" />
|
||||
<tabs items="{{items}}"></tabs>
|
||||
</container>
|
||||
<container title="带有content">
|
||||
<tabs items="{{ items }}">
|
||||
<tabs items="{{items}}">
|
||||
<view
|
||||
class="content"
|
||||
slot-scope="item">
|
||||
{{ item.value.content }}
|
||||
slot="$default"
|
||||
slot-scope="item"
|
||||
>
|
||||
{{item.value.content}}
|
||||
</view>
|
||||
</tabs>
|
||||
</container>
|
||||
<container title="胶囊">
|
||||
<tabs
|
||||
type="capsule"
|
||||
items="{{ items }}"
|
||||
defaultCurrent="{{ 1 }}" />
|
||||
items="{{items}}"
|
||||
defaultCurrent="{{1}}"
|
||||
></tabs>
|
||||
</container>
|
||||
<container title="带副标题">
|
||||
<tabs
|
||||
type="mixin"
|
||||
items="{{ items }}" />
|
||||
items="{{items}}"
|
||||
></tabs>
|
||||
</container>
|
||||
<container title="带徽标">
|
||||
<tabs items="{{ items }}">
|
||||
<tabs items="{{items}}">
|
||||
<view
|
||||
slot="title"
|
||||
slot-scope="item">
|
||||
<view a:if="{{ item.value.badge }}">
|
||||
<badge>{{ item.value.title }}</badge>
|
||||
slot-scope="item"
|
||||
>
|
||||
<view a:if="{{item.value.badge}}">
|
||||
<badge>{{item.value.title}}</badge>
|
||||
</view>
|
||||
<view a:else>{{ item.value.title }}</view>
|
||||
<view a:else>{{item.value.title}}</view>
|
||||
</view>
|
||||
</tabs>
|
||||
</container>
|
||||
<container title="禁用状态">
|
||||
<tabs items="{{ items2 }}" />
|
||||
<tabs items="{{items2}}"></tabs>
|
||||
</container>
|
||||
<container title="onChange">
|
||||
<tabs
|
||||
items="{{ items }}"
|
||||
onChange="onChange" />
|
||||
items="{{items}}"
|
||||
onChange="onChange"
|
||||
></tabs>
|
||||
</container>
|
||||
<container title="plus按钮">
|
||||
<tabs items="{{ items }}">
|
||||
<tabs items="{{items}}">
|
||||
<view slot="plus">
|
||||
<icon
|
||||
type="AddOutline"
|
||||
onTap="onPlus" />
|
||||
onTap="onPlus"
|
||||
></icon>
|
||||
</view>
|
||||
</tabs>
|
||||
</container>
|
||||
<container title="控制模式">
|
||||
<tabs
|
||||
items="{{ items }}"
|
||||
current="{{ current }}"
|
||||
onChange="handleChange" />
|
||||
items="{{items}}"
|
||||
current="{{current}}"
|
||||
onChange="handleChange"
|
||||
></tabs>
|
||||
</container>
|
||||
<container title="content在外层自定义">
|
||||
<tabs
|
||||
items="{{ items }}"
|
||||
current="{{ current }}"
|
||||
onChange="handleChange" />
|
||||
<view class="content">{{ items[current].content }}</view>
|
||||
</container>
|
||||
items="{{items}}"
|
||||
current="{{current}}"
|
||||
onChange="handleChange"
|
||||
></tabs>
|
||||
<view class="content">{{items[current].content}}</view>
|
||||
</container>
|
@ -1,31 +1,34 @@
|
||||
<tabs
|
||||
items="{{ items }}"
|
||||
current="{{ current }}"
|
||||
onChange="onChange">
|
||||
<view class="content">{{ items[current].content }}</view>
|
||||
items="{{items}}"
|
||||
current="{{current}}"
|
||||
onChange="onChange"
|
||||
>
|
||||
<view class="content">{{items[current].content}}</view>
|
||||
</tabs>
|
||||
|
||||
<view class="container">current: {{ current }} length: {{ items.length }}</view>
|
||||
|
||||
<view class="container">current: {{current}} length: {{items.length}}</view>
|
||||
<view class="buttons">
|
||||
<ant-button
|
||||
inline
|
||||
onTap="onPrevTap">
|
||||
onTap="onPrevTap"
|
||||
>
|
||||
上一个
|
||||
</ant-button>
|
||||
<ant-button
|
||||
inline
|
||||
onTap="onNextTap">
|
||||
onTap="onNextTap"
|
||||
>
|
||||
下一个
|
||||
</ant-button>
|
||||
<ant-button
|
||||
inline
|
||||
onTap="onAddTap">
|
||||
onTap="onAddTap"
|
||||
>
|
||||
添加
|
||||
</ant-button>
|
||||
<ant-button
|
||||
inline
|
||||
onTap="onMinusTap">
|
||||
onTap="onMinusTap"
|
||||
>
|
||||
减少
|
||||
</ant-button>
|
||||
</view>
|
||||
</view>
|
@ -1,37 +1,40 @@
|
||||
<tabs
|
||||
items="{{ items }}"
|
||||
current="{{ current }}"
|
||||
items="{{items}}"
|
||||
current="{{current}}"
|
||||
onChange="onChange"
|
||||
className="tabs">
|
||||
<view
|
||||
slot="title"
|
||||
onTap="onTap"
|
||||
slot-scope="item">
|
||||
{{ item.value.title }}
|
||||
</view>
|
||||
|
||||
className="tabs"
|
||||
>
|
||||
<scroll-view
|
||||
id="scroll-view"
|
||||
onScroll="onScroll"
|
||||
onTouchStart="onTouchStart"
|
||||
scroll-top="{{ scrollTop }}"
|
||||
scroll-y="{{ true }}"
|
||||
scroll-with-animation="{{ true }}"
|
||||
scroll-animation-duration="{{ 300 }}"
|
||||
class="content">
|
||||
scrollTop="{{scrollTop}}"
|
||||
scrollY="{{true}}"
|
||||
scrollWithAnimation="{{true}}"
|
||||
scrollAnimationDuration="{{300}}"
|
||||
class="content"
|
||||
>
|
||||
<block
|
||||
a:for="{{ items }}"
|
||||
a:for="{{items}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item"
|
||||
a:key="{{ index }}">
|
||||
>
|
||||
<view class="item">
|
||||
<view
|
||||
class="title"
|
||||
id="tab-item-{{ index }}">
|
||||
{{ item.title }}
|
||||
id="tab-item-{{index}}"
|
||||
>
|
||||
{{item.title}}
|
||||
</view>
|
||||
{{ item.content }}
|
||||
{{item.content}}
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</tabs>
|
||||
<view
|
||||
onTap="onTap"
|
||||
slot="title"
|
||||
slot-scope="item"
|
||||
>
|
||||
{{item.value.title}}
|
||||
</view>
|
||||
</tabs>
|
@ -1,30 +1,30 @@
|
||||
<view class="container">
|
||||
<tabs items="{{ items }}" />
|
||||
<tabs items="{{items}}"></tabs>
|
||||
</view>
|
||||
|
||||
<view class="container">
|
||||
选择后居中滚动
|
||||
<tabs
|
||||
items="{{ items }}"
|
||||
scrollMode="center" />
|
||||
items="{{items}}"
|
||||
scrollMode="center"
|
||||
></tabs>
|
||||
</view>
|
||||
|
||||
<view class="container">
|
||||
<tabs items="{{ items }}">
|
||||
<tabs items="{{items}}">
|
||||
<icon
|
||||
slot="plus"
|
||||
type="AddOutline" />
|
||||
type="AddOutline"
|
||||
></icon>
|
||||
</tabs>
|
||||
</view>
|
||||
|
||||
<view class="container">
|
||||
<tabs
|
||||
items="{{ items }}"
|
||||
type="capsule" />
|
||||
items="{{items}}"
|
||||
type="capsule"
|
||||
></tabs>
|
||||
</view>
|
||||
|
||||
<view class="container">
|
||||
<tabs
|
||||
items="{{ items }}"
|
||||
type="mixin" />
|
||||
</view>
|
||||
items="{{items}}"
|
||||
type="mixin"
|
||||
></tabs>
|
||||
</view>
|
@ -1,19 +1,19 @@
|
||||
<view class="intro">
|
||||
tabs 吸顶模式, 滑动到最顶部会吸顶, 切换tab content会滚动到最顶部
|
||||
</view>
|
||||
|
||||
<tabs
|
||||
items="{{ items }}"
|
||||
current="{{ current }}"
|
||||
items="{{items}}"
|
||||
current="{{current}}"
|
||||
onChange="onChange"
|
||||
className="tabs" />
|
||||
|
||||
className="tabs"
|
||||
></tabs>
|
||||
<scroll-view
|
||||
id="scroll-view"
|
||||
scroll-top="{{ scrollTop }}"
|
||||
scroll-y="{{ true }}"
|
||||
scroll-with-animation="{{ true }}"
|
||||
scroll-animation-duration="{{ 300 }}"
|
||||
class="content">
|
||||
{{ items[current].content }}
|
||||
</scroll-view>
|
||||
scrollTop="{{scrollTop}}"
|
||||
scrollY="{{true}}"
|
||||
scrollWithAnimation="{{true}}"
|
||||
scrollAnimationDuration="{{300}}"
|
||||
class="content"
|
||||
>
|
||||
{{items[current].content}}
|
||||
</scroll-view>
|
@ -1,21 +1,23 @@
|
||||
<ant-tabs
|
||||
items="{{ items }}"
|
||||
current="{{ current }}"
|
||||
onChange="onChange">
|
||||
items="{{items}}"
|
||||
current="{{current}}"
|
||||
onChange="onChange"
|
||||
>
|
||||
<swiper
|
||||
current="{{ current }}"
|
||||
autoplay="{{ false }}"
|
||||
vertical="{{ false }}"
|
||||
circular="{{ false }}"
|
||||
onChange="onSwipeChange">
|
||||
current="{{current}}"
|
||||
autoplay="{{false}}"
|
||||
vertical="{{false}}"
|
||||
circular="{{false}}"
|
||||
onChange="onSwipeChange"
|
||||
>
|
||||
<block
|
||||
a:for="{{ items }}"
|
||||
a:for="{{items}}"
|
||||
a:for-index="index"
|
||||
a:for-item="item"
|
||||
a:key="{{ index }}">
|
||||
>
|
||||
<swiper-item>
|
||||
<view class="content">{{ item.content }}</view>
|
||||
<view class="content">{{item.content}}</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</ant-tabs>
|
||||
</ant-tabs>
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user