mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
100 lines
2.8 KiB
Plaintext
100 lines
2.8 KiB
Plaintext
<import src="/dist/field/index.wxml" />
|
|
|
|
<view class="container">
|
|
<view class="doc-title zan-hairline--bottom">Field</view>
|
|
|
|
<!-- Field 基础用法 -->
|
|
<view class="zan-panel-title">基础用法</view>
|
|
<view class="zan-panel">
|
|
<template
|
|
is="zan-field"
|
|
data="{{ ...config.base.name, value }}"></template>
|
|
<template
|
|
is="zan-field"
|
|
data="{{ ...config.base.tel }}"></template>
|
|
<template
|
|
is="zan-field"
|
|
data="{{ ...config.base.address }}"></template>
|
|
</view>
|
|
|
|
<view class="zan-btns">
|
|
<button
|
|
class="zan-btn zan-btn--primary"
|
|
bindtap="clearInput">清除输入</button>
|
|
</view>
|
|
|
|
<!-- 去除标题后的输入框样式 -->
|
|
<view class="zan-panel-title">无标题输入框</view>
|
|
<view class="zan-panel">
|
|
<template
|
|
is="zan-field"
|
|
data="{{ ...config.notitle, value: textareaValue }}"></template>
|
|
</view>
|
|
|
|
<view class="zan-btns">
|
|
<button
|
|
class="zan-btn zan-btn--primary"
|
|
bindtap="clearTextarea">清除输入</button>
|
|
</view>
|
|
|
|
<!-- 使用 Field 圆角样式 -->
|
|
<view class="zan-panel-title field__title--radius">圆角输入框</view>
|
|
<template
|
|
is="zan-field"
|
|
data="{{ ...config.radius.totalPrice }}"></template>
|
|
<template
|
|
is="zan-field"
|
|
data="{{ ...config.radius.excludePrice }}"></template>
|
|
<template
|
|
is="zan-field"
|
|
data="{{ ...config.radius.notitle }}"></template>
|
|
|
|
<!-- form 中使用 Field -->
|
|
<view class="zan-panel-title">Form 表单中的field应用</view>
|
|
<form bindsubmit="formSubmit" bindreset="formReset">
|
|
<view class="zan-panel">
|
|
<template
|
|
is="zan-field"
|
|
data="{{ ...config.form.name }}"></template>
|
|
<template
|
|
is="zan-field"
|
|
data="{{ ...config.form.tel }}"></template>
|
|
<view class="zan-btns">
|
|
<button
|
|
class="zan-btn zan-btn--primary"
|
|
formType="submit">提交数据</button>
|
|
<button
|
|
class="zan-btn"
|
|
formType="reset">重置数据</button>
|
|
</view>
|
|
</view>
|
|
</form>
|
|
|
|
<view class="zan-panel-title">自定义显示内容</view>
|
|
<view class="zan-panel">
|
|
<view class="zan-cell zan-field">
|
|
<view class="zan-cell__hd zan-field__title">选择区域</view>
|
|
<picker
|
|
mode="selector"
|
|
class="zan-field__input zan-cell__bd"
|
|
range="{{ area }}"
|
|
value="{{ areaIndex }}"
|
|
bindchange="onAreaChange"
|
|
>
|
|
{{ area[areaIndex] }}
|
|
</picker>
|
|
</view>
|
|
|
|
<view class="zan-cell zan-field">
|
|
<view class="zan-cell__hd zan-field__title">验证码</view>
|
|
<input
|
|
type="text"
|
|
placeholder="请输入短信验证码"
|
|
class="zan-field__input zan-cell__bd"/>
|
|
<view class="zan-cell__ft">
|
|
<button class="zan-btn zan-btn--mini zan-btn--primary">获取验证码</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|