diff --git a/main/1306_c5d04e4ae3e14fe9e1fa.js b/main/1306_c5d04e4ae3e14fe9e1fa.js deleted file mode 100644 index 6cc03133..00000000 --- a/main/1306_c5d04e4ae3e14fe9e1fa.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunk_antmjs_vantui=self.webpackChunk_antmjs_vantui||[]).push([[1306],{1306:function(s,a,n){n.r(a),a.default={tile:"Sticky粘性布局",docs:'
Sticky 组件与 CSS 中position: sticky
属性实现的效果一致,当组件在屏幕范围内时,会按照正常的布局排列,当组件滚出屏幕范围时,始终会固定在屏幕顶部。
在 Taro 文件中引入组件
\nimport { Sticky } from '@antmjs/vantui'\n
\n\n\nVant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手
\n
将内容包裹在Sticky
组件内即可。
function Demo() {\n return (\n <Sticky>\n <Button type="primary" style="margin-left: 15px">\n 基础用法\n </Button>\n </Sticky>\n )\n}\n
\n通过offsetTop
属性可以设置组件在吸顶时与顶部的距离。
function Demo() {\n return (\n <Sticky offsetTop={50}>\n <Button type="primary" style="margin-left: 120px">\n 吸顶距离\n </Button>\n </Sticky>\n )\n}\n
\n通过container
属性可以指定组件的容器,页面滚动时,组件会始终保持在容器范围内,当组件即将超出容器底部时,会固定在容器的底部。
import { createSelectorQuery } from '@tarojs/taro'\nfunction Demo() {\n return (\n <View id="stick-in-view" style="height: 150px;background:#fff;">\n <Sticky container={() => createSelectorQuery().select(::::_QA#stick-in-view::::_QA)}>\n <Button type="primary" style="margin-left: 250px">\n 吸顶距离\n </Button>\n </Sticky>\n </View>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
zIndex | \n- | \n number | \n- | \nfalse | \n
offsetTop | \n- | \n number | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
container | \n- | \n () => any | \n- | \nfalse | \n
scrollTop | \n- | \n number | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onScroll | \n- | \n (data: { detail: { scrollTop?: number isFixed?: boolean } }) => any | \n- | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
Sticky 组件与 CSS 中position: sticky
属性实现的效果一致,当组件在屏幕范围内时,会按照正常的布局排列,当组件滚出屏幕范围时,始终会固定在屏幕顶部。
在 Taro 文件中引入组件
\nimport { Sticky } from '@antmjs/vantui'\n
\n\n\nVant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手
\n
将内容包裹在Sticky
组件内即可。
function Demo() {\n return (\n <Sticky>\n <Button type="primary" style="margin-left: 15px">\n 基础用法\n </Button>\n </Sticky>\n )\n}\n
\n通过offsetTop
属性可以设置组件在吸顶时与顶部的距离。
function Demo() {\n return (\n <Sticky offsetTop={50}>\n <Button type="primary" style="margin-left: 120px">\n 吸顶距离\n </Button>\n </Sticky>\n )\n}\n
\n通过container
属性可以指定组件的容器,页面滚动时,组件会始终保持在容器范围内,当组件即将超出容器底部时,会固定在容器的底部。
import { createSelectorQuery } from '@tarojs/taro'\nfunction Demo() {\n return (\n <View id="stick-in-view" style="height: 150px;background:#fff;">\n <Sticky container={() => createSelectorQuery().select(::::_QA#stick-in-view::::_QA)}>\n <Button type="primary" style="margin-left: 250px">\n 吸顶距离\n </Button>\n </Sticky>\n </View>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
zIndex | \n- | \n number | \n- | \nfalse | \n
offsetTop | \n- | \n number | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
container | \n- | \n () => any | \n- | \nfalse | \n
scrollTop | \n- | \n number | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onScroll | \n- | \n (data: { detail: { scrollTop?: number isFixed?: boolean } }) => any | \n- | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
加载图标,用于表示加载中的过渡状态。
\n在 Taro 文件中引入组件
\nimport { Loading } from '@antmjs/vantui'\n
\nfunction Demo() {\n return (\n <>\n <Loading />\n <Loading type="spinner" />\n </>\n )\n}\n
\nfunction Demo() {\n return (\n <>\n <Loading color="#1989fa" />\n <Loading type="spinner" color="#1989fa" />\n </>\n )\n}\n
\nfunction Demo() {\n return <Loading size="24px">加载中...</Loading>\n}\n
\nfunction Demo() {\n return (\n <Loading size="24px" vertical>\n 加载中...\n </Loading>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
color | \n- | \n string | \n- | \nfalse | \n
vertical | \n- | \n boolean | \n- | \nfalse | \n
type | \n- | \n attr: ¦ "spinner" ¦ "circular" | \n- | \nfalse | \n
size | \n- | \n string ¦ number | \n- | \nfalse | \n
textSize | \n- | \n string ¦ number | \n- | \nfalse | \n
children | \n- | \n React.ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--loading-text-color | \n @gray-6; | \n
--loading-text-font-size | \n @font-size-md; | \n
--loading-text-line-height | \n 40px; | \n
--loading-spinner-color | \n @gray-5; | \n
--loading-spinner-size | \n 60px; | \n
--loading-spinner-animation-duration | \n 0.8s; | \n
加载图标,用于表示加载中的过渡状态。
\n在 Taro 文件中引入组件
\nimport { Loading } from '@antmjs/vantui'\n
\nfunction Demo() {\n return (\n <>\n <Loading />\n <Loading type="spinner" />\n </>\n )\n}\n
\nfunction Demo() {\n return (\n <>\n <Loading color="#1989fa" />\n <Loading type="spinner" color="#1989fa" />\n </>\n )\n}\n
\nfunction Demo() {\n return <Loading size="24px">加载中...</Loading>\n}\n
\nfunction Demo() {\n return (\n <Loading size="24px" vertical>\n 加载中...\n </Loading>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
color | \n- | \n string | \n- | \nfalse | \n
vertical | \n- | \n boolean | \n- | \nfalse | \n
type | \n- | \n attr: ¦ "spinner" ¦ "circular" | \n- | \nfalse | \n
size | \n- | \n string ¦ number | \n- | \nfalse | \n
textSize | \n- | \n string ¦ number | \n- | \nfalse | \n
children | \n- | \n React.ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--loading-text-color | \n @gray-6; | \n
--loading-text-font-size | \n @font-size-md; | \n
--loading-text-line-height | \n 40px; | \n
--loading-spinner-color | \n @gray-5; | \n
--loading-spinner-size | \n 60px; | \n
--loading-spinner-animation-duration | \n 0.8s; | \n
页面上添加特定的文字或图案, 作为版权标识或者其他特定信息标识
\n在 Taro 文件中引入组件
\nimport { WaterMark } from '@antmjs/vantui'\n
\nimport { WaterMark } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <WaterMark content="@antmjs/vantui" fontSize={18} width={120} height={90} />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
gapX | \n水印之间的水平间距 | \n number | \n24 | \nfalse | \n
gapY | \n水印之间的垂直间距 | \n number | \n48 | \nfalse | \n
zIndex | \n追加的水印元素的 z-index | \n number | \n2000 | \nfalse | \n
width | \n水印的宽度 | \n number | \n120 | \nfalse | \n
height | \n水印的高度 | \n number | \n64 | \nfalse | \n
rotate | \n水印绘制时,旋转的角度,单位 ° | \n number | \n2000 | \nfalse | \n
image | \n图片源,建议导出 2 倍或 3 倍图,优先使用图片渲染水印 | \n string | \n- | \nfalse | \n
imageWidth | \n图片宽度 | \n number | \n120 | \nfalse | \n
imageHeight | \n图片高度 | \n number | \n64 | \nfalse | \n
content | \n水印文字内容 | \n string | \n- | \nfalse | \n
fontColor | \n字体颜色 | \n string | \nrgba(0,0,0,.15) | \nfalse | \n
fontStyle | \n字体 style | \n attr: ¦ "none" ¦ "normal" ¦ "italic" ¦ "oblique" | \nnormal | \nfalse | \n
fontFamily | \n字体 | \n string | \nsans-serif | \nfalse | \n
fontWeight | \n字体粗细 | \n attr: ¦ "normal" ¦ "light" ¦ "weight" ¦ number | \nnormal | \nfalse | \n
fontSize | \n字体大小 | \n number ¦ string | \n14 | \nfalse | \n
fullPage | \n是否沾满屏幕 | \n boolean | \ntrue | \nfalse | \n
页面上添加特定的文字或图案, 作为版权标识或者其他特定信息标识
\n在 Taro 文件中引入组件
\nimport { WaterMark } from '@antmjs/vantui'\n
\nimport { WaterMark } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <WaterMark content="@antmjs/vantui" fontSize={18} width={120} height={90} />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
gapX | \n水印之间的水平间距 | \n number | \n24 | \nfalse | \n
gapY | \n水印之间的垂直间距 | \n number | \n48 | \nfalse | \n
zIndex | \n追加的水印元素的 z-index | \n number | \n2000 | \nfalse | \n
width | \n水印的宽度 | \n number | \n120 | \nfalse | \n
height | \n水印的高度 | \n number | \n64 | \nfalse | \n
rotate | \n水印绘制时,旋转的角度,单位 ° | \n number | \n2000 | \nfalse | \n
image | \n图片源,建议导出 2 倍或 3 倍图,优先使用图片渲染水印 | \n string | \n- | \nfalse | \n
imageWidth | \n图片宽度 | \n number | \n120 | \nfalse | \n
imageHeight | \n图片高度 | \n number | \n64 | \nfalse | \n
content | \n水印文字内容 | \n string | \n- | \nfalse | \n
fontColor | \n字体颜色 | \n string | \nrgba(0,0,0,.15) | \nfalse | \n
fontStyle | \n字体 style | \n attr: ¦ "none" ¦ "normal" ¦ "italic" ¦ "oblique" | \nnormal | \nfalse | \n
fontFamily | \n字体 | \n string | \nsans-serif | \nfalse | \n
fontWeight | \n字体粗细 | \n attr: ¦ "normal" ¦ "light" ¦ "weight" ¦ number | \nnormal | \nfalse | \n
fontSize | \n字体大小 | \n number ¦ string | \n14 | \nfalse | \n
fullPage | \n是否沾满屏幕 | \n boolean | \ntrue | \nfalse | \n
日历组件用于选择日期或日期区间。
\n在 Taro 文件中引入组件
\nimport { Calendar } from '@antmjs/vantui'\n
\n下面演示了结合单元格来使用日历组件的用法,日期选择完成后会触发confirm
事件。\nlongspan
开启年月快速切换,年份跨度建议不要超过 5 年,5 年以上建议使用DatetimePicker
封装
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<Date>()\n\n const formatDate = react.useCallback((d) => {\n const res = new Date(d)\n return d\n ? ::::_QA::::_ABres.getFullYear()}-::::_ABres.getMonth() + 1}-::::_ABres.getDate()}::::_QA\n : ''\n }, [])\n\n return (\n <View>\n <Cell\n title="选择单个日期"\n value={formatDate(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n longspan\n show={show}\n maxDate={new Date('2018-12-12')}\n minDate={new Date('2015-12-12')}\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n setDate(e.detail.value.valueOf() as Date)\n setShow(false)\n }}\n />\n </View>\n )\n}\n\n
\n设置type
为multiple
后可以选择多个日期,此时confirm
事件返回的 date 为数组结构,数组包含若干个选中的日期。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<Date[]>()\n\n return (\n <View>\n <Cell\n title="选择多个日期"\n value={::::_QA::::_ABdate ? ::::_QA选择了::::_ABdate.length}个日期::::_QA : ''}::::_QA}\n onClick={() => setShow(true)}\n />\n <Calendar\n show={show}\n type="multiple"\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (Array.isArray(e.detail.value)) {\n setDate(e.detail.value)\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n设置type
为range
后可以选择日期区间,此时confirm
事件返回的 date 为数组结构,数组第一项为开始时间,第二项为结束时间。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number[]>()\n // @ts-ignore\n const formatDates = react.useCallback((d) => {\n if (d && d.length) {\n let text: string[] = []\n d.forEach((item) => {\n const res = new Date(item)\n text.push(::::_QA::::_ABres.getMonth()}-::::_ABres.getDate()}::::_QA)\n })\n\n return text.join(::::_QA 至 ::::_QA)\n }\n }, [])\n\n return (\n <View>\n <Cell\n title="选择多个日期"\n value={formatDates(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n show={show}\n type="range"\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (Array.isArray(e.detail.value)) {\n setDate(e.detail.value.map((date) => date?.valueOf()))\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n\n\nTips: 默认情况下,日期区间的起止时间不能为同一天,可以通过设置 allowSameDay 属性来允许选择同一天。
\n
将showConfirm
设置为false
可以隐藏确认按钮,这种情况下选择完成后会立即触发confirm
事件。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number>(Date.now())\n\n const formatDate = react.useCallback((d) => {\n const res = new Date(d)\n return d\n ? ::::_QA::::_ABres.getFullYear()}-::::_ABres.getMonth() + 1}-::::_ABres.getDate()}::::_QA\n : ''\n }, [])\n\n return (\n <View>\n <Cell\n title="选择单个日期"\n value={formatDate(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n showConfirm={false}\n show={show}\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (!Array.isArray(e.detail.value)) {\n setDate(e.detail.value.valueOf())\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n通过color
属性可以自定义日历的颜色,对选中日期和底部按钮生效。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number>(\n Date.now() - 1000 * 60 * 60 * 24 * 10,\n )\n\n const formatDate = react.useCallback((d) => {\n const res = new Date(d)\n return d\n ? ::::_QA::::_ABres.getFullYear()}-::::_ABres.getMonth() + 1}-::::_ABres.getDate()}::::_QA\n : ''\n }, [])\n\n return (\n <View>\n <Cell\n title="选择单个日期"\n value={formatDate(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n defaultDate={date}\n minDate={date}\n color="#07c160"\n showConfirm={false}\n show={show}\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (!Array.isArray(e.detail.value)) {\n setDate(e.detail.value.valueOf())\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n通过minDate
和maxDate
定义日历的范围,需要注意的是minDate
和maxDate
的区间不宜过大,否则会造成严重的性能问题。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number[]>()\n // @ts-ignore\n const formatDates = react.useCallback((d) => {\n if (d && d.length) {\n let text: string[] = []\n d.forEach((item) => {\n const res = new Date(item)\n text.push(::::_QA::::_ABres.getMonth() + 1}-::::_ABres.getDate()}::::_QA)\n })\n\n return text.join(::::_QA 至 ::::_QA)\n }\n }, [])\n\n return (\n <View>\n <Cell\n title="自定义范围选择"\n value={formatDates(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n minDate={new Date(2010, 0, 1).getTime()}\n maxDate={new Date(2010, 1, 28).getTime()}\n show={show}\n type="range"\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (Array.isArray(e.detail.value)) {\n setDate(e.detail.value.map((date) => date?.valueOf()))\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n通过confirmText
设置按钮文字,通过confirmDisabledText
设置按钮禁用时的文字。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number[]>()\n // @ts-ignore\n const formatDates = react.useCallback((d) => {\n if (d && d.length) {\n let text: string[] = []\n d.forEach((item) => {\n const res = new Date(item)\n text.push(::::_QA::::_ABres.getMonth() + 1}-::::_ABres.getDate()}::::_QA)\n })\n\n return text.join(::::_QA 至 ::::_QA)\n }\n }, [])\n\n return (\n <View>\n <Cell\n title="自定按钮文字"\n value={formatDates(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n confirmText="点击确认"\n minDate={new Date(2010, 0, 1).getTime()}\n maxDate={new Date(2010, 1, 28).getTime()}\n show={show}\n type="range"\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (Array.isArray(e.detail.value)) {\n setDate(e.detail.value.map((date) => date?.valueOf()))\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n通过传入formatter
函数来对日历上每一格的内容进行格式化
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number[]>()\n // @ts-ignore\n const formatDates = react.useCallback((d) => {\n if (d && d.length) {\n let text: string[] = []\n d.forEach((item) => {\n const res = new Date(item)\n text.push(::::_QA::::_ABres.getMonth() + 1}-::::_ABres.getDate()}::::_QA)\n })\n\n return text.join(::::_QA 至 ::::_QA)\n }\n }, [])\n\n return (\n <View>\n <Cell\n title="自定按钮文字"\n value={formatDates(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n confirmText="点击确认"\n minDate={new Date(2010, 0, 1).getTime()}\n maxDate={new Date(2010, 1, 28).getTime()}\n show={show}\n type="range"\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (Array.isArray(e.detail.value)) {\n setDate(e.detail.value.map((date) => date?.valueOf()))\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n通过position
属性自定义弹出层的弹出位置,可选值为top
、left
、right
。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number>()\n\n const formatDate = react.useCallback((d) => {\n const res = new Date(d)\n return d\n ? ::::_QA::::_ABres.getFullYear()}-::::_ABres.getMonth() + 1}-::::_ABres.getDate()}::::_QA\n : ''\n }, [])\n\n return (\n <View>\n <Cell\n title="自定义弹出位置"\n value={formatDate(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n round={false}\n position="right"\n show={show}\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (!Array.isArray(e.detail.value)) {\n setDate(e.detail.value.valueOf())\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n选择日期区间时,可以通过maxRange
属性来指定最多可选天数,选择的范围超过最多可选天数时,会弹出相应的提示文案。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number[]>()\n // @ts-ignore\n const formatDates = react.useCallback((d) => {\n if (d && d.length) {\n let text: string[] = []\n d.forEach((item) => {\n const res = new Date(item)\n text.push(::::_QA::::_ABres.getMonth()}-::::_ABres.getDate()}::::_QA)\n })\n\n return text.join(::::_QA 至 ::::_QA)\n }\n }, [])\n\n return (\n <View>\n <Cell\n title="日期区间最大范围"\n value={formatDates(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n maxRange={3}\n type="range"\n show={show}\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (Array.isArray(e.detail.value)) {\n setDate(e.detail.value.map((date) => date?.valueOf()))\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n通过 firstDayOfWeek
属性设置一周从哪天开始。\n::: $demo11 :::
将poppable
设置为false
,日历会直接展示在页面内,而不是以弹层的形式出现。
/* eslint-disable */\nimport { Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Calendar\n title="日历"\n poppable={false}\n showConfirm={false}\n minDate={new Date(2012, 0, 10).getTime()}\n maxDate={new Date(2012, 2, 20).getTime()}\n />\n )\n}\n\n
\n.calendar {\n --calendarHeight: 500px;\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
title | \n日历标题 | \n ReactNode | \n- | \nfalse | \n
color | \n主题色,对底部按钮和选中日期生效 | \n string | \n#ee0a24 | \nfalse | \n
show | \n是否显示日历弹窗 | \n boolean | \nfalse | \nfalse | \n
formatter | \n日期格式化函数 | \n (day: Day) => Day | \n- | \nfalse | \n
confirmText | \n确认按钮的文字 | \n ReactNode | \n- | \nfalse | \n
rangePrompt | \n范围选择超过最多可选天数时的提示文案 | \n string | \n选择天数不能超过 xx 天 | \nfalse | \n
showRangePrompt | \n范围选择超过最多可选天数时,是否展示提示文案 | \n ReactNode | \ntrue | \nfalse | \n
defaultDate | \n默认选中的日期,type 为 multiple 或 range 时为数组 | \n number ¦ number[] | \n今天 | \nfalse | \n
allowSameDay | \n是否允许日期范围的起止时间为同一天 | \n boolean | \nfalse | \nfalse | \n
confirmDisabledText | \n确认按钮处于禁用状态时的文字 | \n ReactNode | \n确定 | \nfalse | \n
type | \n类型 | \n attr: ¦ "single" ¦ "multiple" ¦ "range" | \n- | \nfalse | \n
minDate | \n可选择的最小日期 | \n number ¦ Date | \n当前日期 | \nfalse | \n
maxDate | \n可选择的最大日期 | \n number ¦ Date | \n当前日期六个月后 | \nfalse | \n
position | \n弹窗弹出的位置 | \n attr: ¦ "left" ¦ "right" ¦ "bottom" ¦ "top" | \nbottom | \nfalse | \n
rowHeight | \n日期行高 | \n number ¦ string | \n64 | \nfalse | \n
round | \n弹窗是否圆角 | \n boolean | \ntrue | \nfalse | \n
poppable | \n是否以弹层的形式展示日历 | \n boolean | \ntrue | \nfalse | \n
showMark | \n是否显示月份背景水印 | \n boolean | \ntrue | \nfalse | \n
showTitle | \n是否展示日历标题 | \n boolean | \ntrue | \nfalse | \n
showConfirm | \n是否展示确认按钮 | \n boolean | \ntrue | \nfalse | \n
showSubtitle | \n是否展示日历副标题(年月) | \n boolean | \ntrue | \nfalse | \n
safeAreaInsetBottom | \n是否开启底部安全区适配 | \n boolean | \ntrue | \nfalse | \n
closeOnClickOverlay | \n是否在点击遮罩层后关闭 | \n boolean | \ntrue | \nfalse | \n
maxRange | \n日期区间最多可选天数,默认无限制 | \n number | \n- | \nfalse | \n
firstDayOfWeek | \n设置周起始日 | \n attr: ¦ 0 ¦ 1 ¦ 2 ¦ 3 ¦ 4 ¦ 5 ¦ 6 | \n0 | \nfalse | \n
zIndex | \n弹出层 zIndex | \n number | \n- | \nfalse | \n
onOpen | \n- | \n () => void | \n- | \nfalse | \n
onClose | \n- | \n () => void | \n- | \nfalse | \n
onOpened | \n- | \n () => void | \n- | \nfalse | \n
onClosed | \n- | \n () => void | \n- | \nfalse | \n
onConfirm | \n- | \n ( e: CalendarEvents ) => void | \n- | \nfalse | \n
overRange | \n- | \n () => void | \n- | \nfalse | \n
onUnselect | \n- | \n ( e: CalendarEventsSingle ) => void | \n- | \nfalse | \n
onSelect | \n- | \n ( e: CalendarEvents ) => void | \n- | \nfalse | \n
onClickSubtitle | \n- | \n (a?: any) => void | \n- | \nfalse | \n
renderTitle | \n自定义标题 | \n React.ReactNode | \n- | \nfalse | \n
renderFooter | \n自定义底部区域内容 | \n React.ReactNode | \n- | \nfalse | \n
longspan | \n是否支持年月大跨度的快速切换 | \n boolean | \ntrue | \nfalse | \n
参数 | \n说明 | \n类型 | \n
---|---|---|
date | \n- | \n Date | \n
type | \n- | \n string | \n
text | \n- | \n string ¦ number | \n
bottomInfo | \n- | \n string | \n
className | \n- | \n string | \n
topInfo | \n- | \n string ¦ ReactNode | \n
使用 ref 获取到的组件实例
\n方法 | \n说明 | \n类型 | \n
---|---|---|
reset | \n- | \n ( date?: Date ¦ Date[] ) => void | \n
getSelectedDate | \n- | \n () => ¦ Date ¦ Date[] ¦ null | \n
onConfirm 和 onSelect 的回调函数参数
\n参数 | \n说明 | \n类型 | \n
---|---|---|
detail | \n- | \n { value: Date ¦ Date[] } | \n
onUnselect 的回调函数参数
\n参数 | \n说明 | \n类型 | \n
---|---|---|
detail | \n- | \n { value: Date } | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--calendar-height | \n 100%; | \n
--calendar-background-color | \n @white; | \n
--calendar-popup-height | \n 80%; | \n
--calendar-header-box-shadow | \n 0 4px 20px rgba(125, 126, 128, 0.16); | \n
--calendar-header-title-height | \n 88px; | \n
--calendar-header-title-font-size | \n @font-size-lg; | \n
--calendar-header-subtitle-font-size | \n @font-size-md; | \n
--calendar-weekdays-height | \n 60px; | \n
--calendar-weekdays-font-size | \n @font-size-sm; | \n
--calendar-month-title-font-size | \n @font-size-md; | \n
--calendar-month-mark-color | \n fade(@gray-2, 80%); | \n
--calendar-month-mark-font-size | \n 320px; | \n
--calendar-day-height | \n 128px; | \n
--calendar-day-font-size | \n @font-size-lg; | \n
--calendar-range-edge-color | \n @white; | \n
--calendar-range-edge-background-color | \n var(--primary-color); | \n
--calendar-range-middle-color | \n var(--primary-color); | \n
--calendar-range-middle-background-opacity | \n 0.1; | \n
--calendar-selected-day-size | \n 108px; | \n
--calendar-selected-day-color | \n @white; | \n
--calendar-info-font-size | \n @font-size-xs; | \n
--calendar-info-line-height | \n 28px; | \n
--calendar-selected-day-background-color | \n var(--primary-color); | \n
--calendar-day-disabled-color | \n @gray-5; | \n
--calendar-confirm-button-height | \n 72px; | \n
--calendar-confirm-button-margin | \n 14px 0; | \n
--calendar-confirm-button-line-height | \n 68px; | \n
日历组件用于选择日期或日期区间。
\n在 Taro 文件中引入组件
\nimport { Calendar } from '@antmjs/vantui'\n
\n下面演示了结合单元格来使用日历组件的用法,日期选择完成后会触发confirm
事件。\nlongspan
开启年月快速切换,年份跨度建议不要超过 5 年,5 年以上建议使用DatetimePicker
封装
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<Date>()\n\n const formatDate = react.useCallback((d) => {\n const res = new Date(d)\n return d\n ? ::::_QA::::_ABres.getFullYear()}-::::_ABres.getMonth() + 1}-::::_ABres.getDate()}::::_QA\n : ''\n }, [])\n\n return (\n <View>\n <Cell\n title="选择单个日期"\n value={formatDate(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n longspan\n show={show}\n maxDate={new Date('2018-12-12')}\n minDate={new Date('2015-12-12')}\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n setDate(e.detail.value.valueOf() as Date)\n setShow(false)\n }}\n />\n </View>\n )\n}\n\n
\n设置type
为multiple
后可以选择多个日期,此时confirm
事件返回的 date 为数组结构,数组包含若干个选中的日期。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<Date[]>()\n\n return (\n <View>\n <Cell\n title="选择多个日期"\n value={::::_QA::::_ABdate ? ::::_QA选择了::::_ABdate.length}个日期::::_QA : ''}::::_QA}\n onClick={() => setShow(true)}\n />\n <Calendar\n show={show}\n type="multiple"\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (Array.isArray(e.detail.value)) {\n setDate(e.detail.value)\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n设置type
为range
后可以选择日期区间,此时confirm
事件返回的 date 为数组结构,数组第一项为开始时间,第二项为结束时间。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number[]>()\n // @ts-ignore\n const formatDates = react.useCallback((d) => {\n if (d && d.length) {\n let text: string[] = []\n d.forEach((item) => {\n const res = new Date(item)\n text.push(::::_QA::::_ABres.getMonth()}-::::_ABres.getDate()}::::_QA)\n })\n\n return text.join(::::_QA 至 ::::_QA)\n }\n }, [])\n\n return (\n <View>\n <Cell\n title="选择多个日期"\n value={formatDates(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n show={show}\n type="range"\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (Array.isArray(e.detail.value)) {\n setDate(e.detail.value.map((date) => date?.valueOf()))\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n\n\nTips: 默认情况下,日期区间的起止时间不能为同一天,可以通过设置 allowSameDay 属性来允许选择同一天。
\n
将showConfirm
设置为false
可以隐藏确认按钮,这种情况下选择完成后会立即触发confirm
事件。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number>(Date.now())\n\n const formatDate = react.useCallback((d) => {\n const res = new Date(d)\n return d\n ? ::::_QA::::_ABres.getFullYear()}-::::_ABres.getMonth() + 1}-::::_ABres.getDate()}::::_QA\n : ''\n }, [])\n\n return (\n <View>\n <Cell\n title="选择单个日期"\n value={formatDate(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n showConfirm={false}\n show={show}\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (!Array.isArray(e.detail.value)) {\n setDate(e.detail.value.valueOf())\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n通过color
属性可以自定义日历的颜色,对选中日期和底部按钮生效。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number>(\n Date.now() - 1000 * 60 * 60 * 24 * 10,\n )\n\n const formatDate = react.useCallback((d) => {\n const res = new Date(d)\n return d\n ? ::::_QA::::_ABres.getFullYear()}-::::_ABres.getMonth() + 1}-::::_ABres.getDate()}::::_QA\n : ''\n }, [])\n\n return (\n <View>\n <Cell\n title="选择单个日期"\n value={formatDate(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n defaultDate={date}\n minDate={date}\n color="#07c160"\n showConfirm={false}\n show={show}\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (!Array.isArray(e.detail.value)) {\n setDate(e.detail.value.valueOf())\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n通过minDate
和maxDate
定义日历的范围,需要注意的是minDate
和maxDate
的区间不宜过大,否则会造成严重的性能问题。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number[]>()\n // @ts-ignore\n const formatDates = react.useCallback((d) => {\n if (d && d.length) {\n let text: string[] = []\n d.forEach((item) => {\n const res = new Date(item)\n text.push(::::_QA::::_ABres.getMonth() + 1}-::::_ABres.getDate()}::::_QA)\n })\n\n return text.join(::::_QA 至 ::::_QA)\n }\n }, [])\n\n return (\n <View>\n <Cell\n title="自定义范围选择"\n value={formatDates(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n minDate={new Date(2010, 0, 1).getTime()}\n maxDate={new Date(2010, 1, 28).getTime()}\n show={show}\n type="range"\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (Array.isArray(e.detail.value)) {\n setDate(e.detail.value.map((date) => date?.valueOf()))\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n通过confirmText
设置按钮文字,通过confirmDisabledText
设置按钮禁用时的文字。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number[]>()\n // @ts-ignore\n const formatDates = react.useCallback((d) => {\n if (d && d.length) {\n let text: string[] = []\n d.forEach((item) => {\n const res = new Date(item)\n text.push(::::_QA::::_ABres.getMonth() + 1}-::::_ABres.getDate()}::::_QA)\n })\n\n return text.join(::::_QA 至 ::::_QA)\n }\n }, [])\n\n return (\n <View>\n <Cell\n title="自定按钮文字"\n value={formatDates(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n confirmText="点击确认"\n minDate={new Date(2010, 0, 1).getTime()}\n maxDate={new Date(2010, 1, 28).getTime()}\n show={show}\n type="range"\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (Array.isArray(e.detail.value)) {\n setDate(e.detail.value.map((date) => date?.valueOf()))\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n通过传入formatter
函数来对日历上每一格的内容进行格式化
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number[]>()\n // @ts-ignore\n const formatDates = react.useCallback((d) => {\n if (d && d.length) {\n let text: string[] = []\n d.forEach((item) => {\n const res = new Date(item)\n text.push(::::_QA::::_ABres.getMonth() + 1}-::::_ABres.getDate()}::::_QA)\n })\n\n return text.join(::::_QA 至 ::::_QA)\n }\n }, [])\n\n return (\n <View>\n <Cell\n title="自定按钮文字"\n value={formatDates(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n confirmText="点击确认"\n minDate={new Date(2010, 0, 1).getTime()}\n maxDate={new Date(2010, 1, 28).getTime()}\n show={show}\n type="range"\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (Array.isArray(e.detail.value)) {\n setDate(e.detail.value.map((date) => date?.valueOf()))\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n通过position
属性自定义弹出层的弹出位置,可选值为top
、left
、right
。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number>()\n\n const formatDate = react.useCallback((d) => {\n const res = new Date(d)\n return d\n ? ::::_QA::::_ABres.getFullYear()}-::::_ABres.getMonth() + 1}-::::_ABres.getDate()}::::_QA\n : ''\n }, [])\n\n return (\n <View>\n <Cell\n title="自定义弹出位置"\n value={formatDate(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n round={false}\n position="right"\n show={show}\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (!Array.isArray(e.detail.value)) {\n setDate(e.detail.value.valueOf())\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n选择日期区间时,可以通过maxRange
属性来指定最多可选天数,选择的范围超过最多可选天数时,会弹出相应的提示文案。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [date, setDate] = react.useState<number[]>()\n // @ts-ignore\n const formatDates = react.useCallback((d) => {\n if (d && d.length) {\n let text: string[] = []\n d.forEach((item) => {\n const res = new Date(item)\n text.push(::::_QA::::_ABres.getMonth()}-::::_ABres.getDate()}::::_QA)\n })\n\n return text.join(::::_QA 至 ::::_QA)\n }\n }, [])\n\n return (\n <View>\n <Cell\n title="日期区间最大范围"\n value={formatDates(date)}\n onClick={() => setShow(true)}\n />\n <Calendar\n maxRange={3}\n type="range"\n show={show}\n onClose={() => setShow(false)}\n onConfirm={(e) => {\n if (Array.isArray(e.detail.value)) {\n setDate(e.detail.value.map((date) => date?.valueOf()))\n setShow(false)\n }\n }}\n />\n </View>\n )\n}\n\n
\n通过 firstDayOfWeek
属性设置一周从哪天开始。\n::: $demo11 :::
将poppable
设置为false
,日历会直接展示在页面内,而不是以弹层的形式出现。
/* eslint-disable */\nimport { Calendar } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Calendar\n title="日历"\n poppable={false}\n showConfirm={false}\n minDate={new Date(2012, 0, 10).getTime()}\n maxDate={new Date(2012, 2, 20).getTime()}\n />\n )\n}\n\n
\n.calendar {\n --calendarHeight: 500px;\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
title | \n日历标题 | \n ReactNode | \n- | \nfalse | \n
color | \n主题色,对底部按钮和选中日期生效 | \n string | \n#ee0a24 | \nfalse | \n
show | \n是否显示日历弹窗 | \n boolean | \nfalse | \nfalse | \n
formatter | \n日期格式化函数 | \n (day: Day) => Day | \n- | \nfalse | \n
confirmText | \n确认按钮的文字 | \n ReactNode | \n- | \nfalse | \n
rangePrompt | \n范围选择超过最多可选天数时的提示文案 | \n string | \n选择天数不能超过 xx 天 | \nfalse | \n
showRangePrompt | \n范围选择超过最多可选天数时,是否展示提示文案 | \n ReactNode | \ntrue | \nfalse | \n
defaultDate | \n默认选中的日期,type 为 multiple 或 range 时为数组 | \n number ¦ number[] | \n今天 | \nfalse | \n
allowSameDay | \n是否允许日期范围的起止时间为同一天 | \n boolean | \nfalse | \nfalse | \n
confirmDisabledText | \n确认按钮处于禁用状态时的文字 | \n ReactNode | \n确定 | \nfalse | \n
type | \n类型 | \n attr: ¦ "single" ¦ "multiple" ¦ "range" | \n- | \nfalse | \n
minDate | \n可选择的最小日期 | \n number ¦ Date | \n当前日期 | \nfalse | \n
maxDate | \n可选择的最大日期 | \n number ¦ Date | \n当前日期六个月后 | \nfalse | \n
position | \n弹窗弹出的位置 | \n attr: ¦ "left" ¦ "right" ¦ "bottom" ¦ "top" | \nbottom | \nfalse | \n
rowHeight | \n日期行高 | \n number ¦ string | \n64 | \nfalse | \n
round | \n弹窗是否圆角 | \n boolean | \ntrue | \nfalse | \n
poppable | \n是否以弹层的形式展示日历 | \n boolean | \ntrue | \nfalse | \n
showMark | \n是否显示月份背景水印 | \n boolean | \ntrue | \nfalse | \n
showTitle | \n是否展示日历标题 | \n boolean | \ntrue | \nfalse | \n
showConfirm | \n是否展示确认按钮 | \n boolean | \ntrue | \nfalse | \n
showSubtitle | \n是否展示日历副标题(年月) | \n boolean | \ntrue | \nfalse | \n
safeAreaInsetBottom | \n是否开启底部安全区适配 | \n boolean | \ntrue | \nfalse | \n
closeOnClickOverlay | \n是否在点击遮罩层后关闭 | \n boolean | \ntrue | \nfalse | \n
maxRange | \n日期区间最多可选天数,默认无限制 | \n number | \n- | \nfalse | \n
firstDayOfWeek | \n设置周起始日 | \n attr: ¦ 0 ¦ 1 ¦ 2 ¦ 3 ¦ 4 ¦ 5 ¦ 6 | \n0 | \nfalse | \n
zIndex | \n弹出层 zIndex | \n number | \n- | \nfalse | \n
onOpen | \n- | \n () => void | \n- | \nfalse | \n
onClose | \n- | \n () => void | \n- | \nfalse | \n
onOpened | \n- | \n () => void | \n- | \nfalse | \n
onClosed | \n- | \n () => void | \n- | \nfalse | \n
onConfirm | \n- | \n ( e: CalendarEvents ) => void | \n- | \nfalse | \n
overRange | \n- | \n () => void | \n- | \nfalse | \n
onUnselect | \n- | \n ( e: CalendarEventsSingle ) => void | \n- | \nfalse | \n
onSelect | \n- | \n ( e: CalendarEvents ) => void | \n- | \nfalse | \n
onClickSubtitle | \n- | \n (a?: any) => void | \n- | \nfalse | \n
renderTitle | \n自定义标题 | \n React.ReactNode | \n- | \nfalse | \n
renderFooter | \n自定义底部区域内容 | \n React.ReactNode | \n- | \nfalse | \n
longspan | \n是否支持年月大跨度的快速切换 | \n boolean | \ntrue | \nfalse | \n
参数 | \n说明 | \n类型 | \n
---|---|---|
date | \n- | \n Date | \n
type | \n- | \n string | \n
text | \n- | \n string ¦ number | \n
bottomInfo | \n- | \n string | \n
className | \n- | \n string | \n
topInfo | \n- | \n string ¦ ReactNode | \n
使用 ref 获取到的组件实例
\n方法 | \n说明 | \n类型 | \n
---|---|---|
reset | \n- | \n ( date?: Date ¦ Date[] ) => void | \n
getSelectedDate | \n- | \n () => ¦ Date ¦ Date[] ¦ null | \n
onConfirm 和 onSelect 的回调函数参数
\n参数 | \n说明 | \n类型 | \n
---|---|---|
detail | \n- | \n { value: Date ¦ Date[] } | \n
onUnselect 的回调函数参数
\n参数 | \n说明 | \n类型 | \n
---|---|---|
detail | \n- | \n { value: Date } | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--calendar-height | \n 100%; | \n
--calendar-background-color | \n @white; | \n
--calendar-popup-height | \n 80%; | \n
--calendar-header-box-shadow | \n 0 4px 20px rgba(125, 126, 128, 0.16); | \n
--calendar-header-title-height | \n 88px; | \n
--calendar-header-title-font-size | \n @font-size-lg; | \n
--calendar-header-subtitle-font-size | \n @font-size-md; | \n
--calendar-weekdays-height | \n 60px; | \n
--calendar-weekdays-font-size | \n @font-size-sm; | \n
--calendar-month-title-font-size | \n @font-size-md; | \n
--calendar-month-mark-color | \n fade(@gray-2, 80%); | \n
--calendar-month-mark-font-size | \n 320px; | \n
--calendar-day-height | \n 128px; | \n
--calendar-day-font-size | \n @font-size-lg; | \n
--calendar-range-edge-color | \n @white; | \n
--calendar-range-edge-background-color | \n var(--primary-color); | \n
--calendar-range-middle-color | \n var(--primary-color); | \n
--calendar-range-middle-background-opacity | \n 0.1; | \n
--calendar-selected-day-size | \n 108px; | \n
--calendar-selected-day-color | \n @white; | \n
--calendar-info-font-size | \n @font-size-xs; | \n
--calendar-info-line-height | \n 28px; | \n
--calendar-selected-day-background-color | \n var(--primary-color); | \n
--calendar-day-disabled-color | \n @gray-5; | \n
--calendar-confirm-button-height | \n 72px; | \n
--calendar-confirm-button-margin | \n 14px 0; | \n
--calendar-confirm-button-line-height | \n 68px; | \n
垂直展示的导航栏,用于在不同的内容区域之间进行切换。
\n在 Taro 文件中引入组件
\nimport { Sidebar, SidebarItem } from '@antmjs/vantui'\n
\n通过在vanSidebar
上设置activeKey
属性来控制选中项。
function Demo() {\n return (\n <Sidebar activeKey={0}>\n <SidebarItem title="标签名" />\n <SidebarItem title="标签名" />\n <SidebarItem title="标签名" />\n </Sidebar>\n )\n}\n
\n设置dot
属性后,会在右上角展示一个小红点。设置badge
属性后,会在右上角展示相应的徽标。
function Demo() {\n return (\n <Sidebar activeKey={1}>\n <SidebarItem title="标签名" dot />\n <SidebarItem title="标签名" badge="5" />\n <SidebarItem title="标签名" badge="99+" />\n </Sidebar>\n )\n}\n
\n通过disabled
属性禁用选项。
function Demo() {\n return (\n <Sidebar activeKey={2}>\n <SidebarItem title="标签名" dot={true} />\n <SidebarItem title="标签名" disabled />\n <SidebarItem title="标签名" badge="66+" />\n </Sidebar>\n )\n}\n
\n设置change
方法来监听切换导航项时的事件。
function Demo() {\n return (\n <>\n <Sidebar\n activeKey={0}\n onChange={(e) =>\n Notify.show({\n type: 'primary',\n message: e.detail,\n })\n }\n >\n <SidebarItem title="标签名1" />\n <SidebarItem title="标签名2" />\n <SidebarItem title="标签名3" />\n </Sidebar>\n <Notify />\n </>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
dot | \n- | \n boolean | \n- | \nfalse | \n
badge | \n- | \n ReactNode ¦ null | \n- | \nfalse | \n
info | \n- | \n ReactNode | \n- | \nfalse | \n
title | \n- | \n ReactNode | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
onClick | \n- | \n (a: any) => void | \n- | \nfalse | \n
onChange | \n- | \n ( a: OnChangeEvent ) => void | \n- | \nfalse | \n
renderTitle | \n- | \n ( a: any ) => ReactNode | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
onChange | \n- | \n ( a: OnChangeEvent ) => any | \n- | \nfalse | \n
activeKey | \n- | \n number | \n- | \ntrue | \n
children | \n- | \n ReactNode | \n- | \ntrue | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--sidebar-width | \n 160px; | \n
垂直展示的导航栏,用于在不同的内容区域之间进行切换。
\n在 Taro 文件中引入组件
\nimport { Sidebar, SidebarItem } from '@antmjs/vantui'\n
\n通过在vanSidebar
上设置activeKey
属性来控制选中项。
function Demo() {\n return (\n <Sidebar activeKey={0}>\n <SidebarItem title="标签名" />\n <SidebarItem title="标签名" />\n <SidebarItem title="标签名" />\n </Sidebar>\n )\n}\n
\n设置dot
属性后,会在右上角展示一个小红点。设置badge
属性后,会在右上角展示相应的徽标。
function Demo() {\n return (\n <Sidebar activeKey={1}>\n <SidebarItem title="标签名" dot />\n <SidebarItem title="标签名" badge="5" />\n <SidebarItem title="标签名" badge="99+" />\n </Sidebar>\n )\n}\n
\n通过disabled
属性禁用选项。
function Demo() {\n return (\n <Sidebar activeKey={2}>\n <SidebarItem title="标签名" dot={true} />\n <SidebarItem title="标签名" disabled />\n <SidebarItem title="标签名" badge="66+" />\n </Sidebar>\n )\n}\n
\n设置change
方法来监听切换导航项时的事件。
function Demo() {\n return (\n <>\n <Sidebar\n activeKey={0}\n onChange={(e) =>\n Notify.show({\n type: 'primary',\n message: e.detail,\n })\n }\n >\n <SidebarItem title="标签名1" />\n <SidebarItem title="标签名2" />\n <SidebarItem title="标签名3" />\n </Sidebar>\n <Notify />\n </>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
dot | \n- | \n boolean | \n- | \nfalse | \n
badge | \n- | \n ReactNode ¦ null | \n- | \nfalse | \n
info | \n- | \n ReactNode | \n- | \nfalse | \n
title | \n- | \n ReactNode | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
onClick | \n- | \n (a: any) => void | \n- | \nfalse | \n
onChange | \n- | \n ( a: OnChangeEvent ) => void | \n- | \nfalse | \n
renderTitle | \n- | \n ( a: any ) => ReactNode | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
onChange | \n- | \n ( a: OnChangeEvent ) => any | \n- | \nfalse | \n
activeKey | \n- | \n number | \n- | \ntrue | \n
children | \n- | \n ReactNode | \n- | \ntrue | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--sidebar-width | \n 160px; | \n
商品卡片,用于展示商品的图片、价格等信息。
\n在 Taro 文件中引入组件
\nimport { Card } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport { Card } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Card\n num="2"\n price="2.00"\n desc="描述信息"\n title="商品标题"\n thumb="https://img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg"\n />\n )\n}\n\n
\n可以通过插槽添加定制内容。
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Card, Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Card\n num="2"\n tag="标签"\n price="10.00"\n desc="描述信息"\n title="商品标题"\n thumb="https://img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg"\n renderFooter={\n <View>\n <Button size="mini">按钮1</Button>\n <Button size="mini">按钮2</Button>\n </View>\n }\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
tag | \n- | \n string | \n- | \nfalse | \n
num | \n- | \n string | \n- | \nfalse | \n
desc | \n- | \n string | \n- | \nfalse | \n
thumb | \n- | \n string | \n- | \nfalse | \n
title | \n- | \n string | \n- | \nfalse | \n
price | \n- | \n string | \n- | \ntrue | \n
centered | \n- | \n boolean | \n- | \nfalse | \n
lazyLoad | \n- | \n boolean | \n- | \nfalse | \n
thumbLink | \n- | \n string | \n- | \nfalse | \n
originPrice | \n- | \n string | \n- | \nfalse | \n
thumbMode | \n- | \n keyof ImageProps.Mode | \n- | \nfalse | \n
currency | \n- | \n string | \n- | \nfalse | \n
renderFooter | \n- | \n ReactNode | \n- | \nfalse | \n
renderBottom | \n- | \n ReactNode | \n- | \nfalse | \n
renderNum | \n- | \n ReactNode | \n- | \nfalse | \n
renderOriginPrice | \n- | \n ReactNode | \n- | \nfalse | \n
renderPrice | \n- | \n ReactNode | \n- | \nfalse | \n
renderPriceTop | \n- | \n ReactNode | \n- | \nfalse | \n
renderTags | \n- | \n ReactNode | \n- | \nfalse | \n
renderDesc | \n- | \n ReactNode | \n- | \nfalse | \n
renderTitle | \n- | \n ReactNode | \n- | \nfalse | \n
renderTag | \n- | \n ReactNode | \n- | \nfalse | \n
renderThumb | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--card-padding | \n @padding-xs @padding-md; | \n
--card-font-size | \n @font-size-sm; | \n
--card-text-color | \n @text-color; | \n
--card-background-color | \n @background-color-light; | \n
--card-thumb-size | \n 176px; | \n
--card-title-line-height | \n 32px; | \n
--card-desc-color | \n @gray-7; | \n
--card-desc-line-height | \n 40px; | \n
--card-price-color | \n @red; | \n
--card-origin-price-color | \n @gray-7; | \n
--card-origin-price-font-size | \n @font-size-xs; | \n
--card-price-font-size | \n @font-size-sm; | \n
--card-price-integer-font-size | \n @font-size-lg; | \n
--card-price-font-family | \n @price-integer-font-family; | \n
商品卡片,用于展示商品的图片、价格等信息。
\n在 Taro 文件中引入组件
\nimport { Card } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport { Card } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Card\n num="2"\n price="2.00"\n desc="描述信息"\n title="商品标题"\n thumb="https://img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg"\n />\n )\n}\n\n
\n可以通过插槽添加定制内容。
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Card, Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Card\n num="2"\n tag="标签"\n price="10.00"\n desc="描述信息"\n title="商品标题"\n thumb="https://img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg"\n renderFooter={\n <View>\n <Button size="mini">按钮1</Button>\n <Button size="mini">按钮2</Button>\n </View>\n }\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
tag | \n- | \n string | \n- | \nfalse | \n
num | \n- | \n string | \n- | \nfalse | \n
desc | \n- | \n string | \n- | \nfalse | \n
thumb | \n- | \n string | \n- | \nfalse | \n
title | \n- | \n string | \n- | \nfalse | \n
price | \n- | \n string | \n- | \ntrue | \n
centered | \n- | \n boolean | \n- | \nfalse | \n
lazyLoad | \n- | \n boolean | \n- | \nfalse | \n
thumbLink | \n- | \n string | \n- | \nfalse | \n
originPrice | \n- | \n string | \n- | \nfalse | \n
thumbMode | \n- | \n keyof ImageProps.Mode | \n- | \nfalse | \n
currency | \n- | \n string | \n- | \nfalse | \n
renderFooter | \n- | \n ReactNode | \n- | \nfalse | \n
renderBottom | \n- | \n ReactNode | \n- | \nfalse | \n
renderNum | \n- | \n ReactNode | \n- | \nfalse | \n
renderOriginPrice | \n- | \n ReactNode | \n- | \nfalse | \n
renderPrice | \n- | \n ReactNode | \n- | \nfalse | \n
renderPriceTop | \n- | \n ReactNode | \n- | \nfalse | \n
renderTags | \n- | \n ReactNode | \n- | \nfalse | \n
renderDesc | \n- | \n ReactNode | \n- | \nfalse | \n
renderTitle | \n- | \n ReactNode | \n- | \nfalse | \n
renderTag | \n- | \n ReactNode | \n- | \nfalse | \n
renderThumb | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--card-padding | \n @padding-xs @padding-md; | \n
--card-font-size | \n @font-size-sm; | \n
--card-text-color | \n @text-color; | \n
--card-background-color | \n @background-color-light; | \n
--card-thumb-size | \n 176px; | \n
--card-title-line-height | \n 32px; | \n
--card-desc-color | \n @gray-7; | \n
--card-desc-line-height | \n 40px; | \n
--card-price-color | \n @red; | \n
--card-origin-price-color | \n @gray-7; | \n
--card-origin-price-font-size | \n @font-size-xs; | \n
--card-price-font-size | \n @font-size-sm; | \n
--card-price-integer-font-size | \n @font-size-lg; | \n
--card-price-font-family | \n @price-integer-font-family; | \n
展示文本内容过多的时候,隐去部分内容并用“…”替代,可以自定义收起内容后的行数,可以手动控制内容是否全部展示
\n在 Taro 文件中引入组件
\nimport { Ellipsis } from '@antmjs/vantui'\n
\nfunction Demo() {\n return (\n <Ellipsis rows={4}>\n 整个组件库是依赖开源项目 Vant Weapp\n 的代码经过全量编译而来,所有样式文件及代码结构都与其保持高度一致,只是生命周期经过改造使其支持\n React,很大程度避免了重新造轮子带来的各种问题,同时保留了 Vant Weapp\n 多年积累的经验 收到了一些反馈,这里说明一下吧。关于 demo\n 的质量和文档现在确实是有一些不足的地方的,因为做这件事的人并不多暂时,我们把更多的精力放在了组件本身,确保大家在实际的应用中能够更少的被中断。目前除了\n 50 多个组件要维护,还有 Taro Demo 和 React Demo\n 和文档,同时公司也有业务要跟进,所以希望大家能够体谅,当然非常欢迎有兴趣的人一起来完善它!\n </Ellipsis>\n )\n}\n
\nfunction Demo() {\n return (\n <Ellipsis rows={4} hiddenAction>\n 整个组件库是依赖开源项目 Vant Weapp\n 的代码经过全量编译而来,所有样式文件及代码结构都与其保持高度一致,只是生命周期经过改造使其支持\n React,很大程度避免了重新造轮子带来的各种问题,同时保留了 Vant Weapp\n 多年积累的经验 收到了一些反馈,这里说明一下吧。关于 demo\n 的质量和文档现在确实是有一些不足的地方的,因为做这件事的人并不多暂时,我们把更多的精力放在了组件本身,确保大家在实际的应用中能够更少的被中断。目前除了\n 50 多个组件要维护,还有 Taro Demo 和 React Demo\n 和文档,同时公司也有业务要跟进,所以希望大家能够体谅,当然非常欢迎有兴趣的人一起来完善它!\n </Ellipsis>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
children | \n内容 | \n string | \n- | \ntrue | \n
defaultExpand | \n默认是否展开 | \n boolean | \nfalse | \nfalse | \n
rows | \n展示几行 | \n number | \n1 | \nfalse | \n
expandText | \n展开文案 | \n string | \n展开 | \nfalse | \n
collapseText | \n收起文案 | \n string | \n收起 | \nfalse | \n
symbol | \n省略的文案 | \n ReactNode | \n... | \nfalse | \n
hiddenAction | \n是否要隐藏操作按钮 | \n boolean | \nfalse | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--ellipsis-font-size | \n 28px; | \n
--ellipsis-line-height | \n 50px; | \n
--ellipsis-action-font-size | \n 30px; | \n
--ellipsis-primary-color | \n var(--primary-color); | \n
展示文本内容过多的时候,隐去部分内容并用“…”替代,可以自定义收起内容后的行数,可以手动控制内容是否全部展示
\n在 Taro 文件中引入组件
\nimport { Ellipsis } from '@antmjs/vantui'\n
\nfunction Demo() {\n return (\n <Ellipsis rows={4}>\n 整个组件库是依赖开源项目 Vant Weapp\n 的代码经过全量编译而来,所有样式文件及代码结构都与其保持高度一致,只是生命周期经过改造使其支持\n React,很大程度避免了重新造轮子带来的各种问题,同时保留了 Vant Weapp\n 多年积累的经验 收到了一些反馈,这里说明一下吧。关于 demo\n 的质量和文档现在确实是有一些不足的地方的,因为做这件事的人并不多暂时,我们把更多的精力放在了组件本身,确保大家在实际的应用中能够更少的被中断。目前除了\n 50 多个组件要维护,还有 Taro Demo 和 React Demo\n 和文档,同时公司也有业务要跟进,所以希望大家能够体谅,当然非常欢迎有兴趣的人一起来完善它!\n </Ellipsis>\n )\n}\n
\nfunction Demo() {\n return (\n <Ellipsis rows={4} hiddenAction>\n 整个组件库是依赖开源项目 Vant Weapp\n 的代码经过全量编译而来,所有样式文件及代码结构都与其保持高度一致,只是生命周期经过改造使其支持\n React,很大程度避免了重新造轮子带来的各种问题,同时保留了 Vant Weapp\n 多年积累的经验 收到了一些反馈,这里说明一下吧。关于 demo\n 的质量和文档现在确实是有一些不足的地方的,因为做这件事的人并不多暂时,我们把更多的精力放在了组件本身,确保大家在实际的应用中能够更少的被中断。目前除了\n 50 多个组件要维护,还有 Taro Demo 和 React Demo\n 和文档,同时公司也有业务要跟进,所以希望大家能够体谅,当然非常欢迎有兴趣的人一起来完善它!\n </Ellipsis>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
children | \n内容 | \n string | \n- | \ntrue | \n
defaultExpand | \n默认是否展开 | \n boolean | \nfalse | \nfalse | \n
rows | \n展示几行 | \n number | \n1 | \nfalse | \n
expandText | \n展开文案 | \n string | \n展开 | \nfalse | \n
collapseText | \n收起文案 | \n string | \n收起 | \nfalse | \n
symbol | \n省略的文案 | \n ReactNode | \n... | \nfalse | \n
hiddenAction | \n是否要隐藏操作按钮 | \n boolean | \nfalse | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--ellipsis-font-size | \n 28px; | \n
--ellipsis-line-height | \n 50px; | \n
--ellipsis-action-font-size | \n 30px; | \n
--ellipsis-primary-color | \n var(--primary-color); | \n
用于列表的索引分类显示和快速定位。
\n在 Taro 文件中引入组件
\nimport { IndexBar, IndexAnchor } from '@antmjs/vantui'\n
\n点击索引栏时,会自动跳转到对应的IndexAnchor
锚点位置。\n不要将 IndexBar 放置在含有 css 动画元素里面,会导致 IndexAnchor 定位失效
import { Block } from '@tarojs/components'\nimport { IndexBar, IndexAnchor, Cell } from '@antmjs/vantui'\n\nconst arr: string[] = []\nconst charCodeOfA = 'A'.charCodeAt(0)\nfor (let i = 0; i < 26; i++) {\n arr.push(String.fromCharCode(charCodeOfA + i))\n}\nexport default function Demo() {\n return (\n <IndexBar>\n {arr.map((item) => (\n <Block key={item}>\n <IndexAnchor index={item}></IndexAnchor>\n <Cell title="文本"></Cell>\n <Cell title="文本"></Cell>\n <Cell title="文本"></Cell>\n </Block>\n ))}\n </IndexBar>\n )\n}\n\n
\n可以通过indexList
属性自定义展示的索引字符列表。
<View>\n <IndexBar indexList={[1,2,...]}>\n <IndexAnchor index="1">标题1</IndexAnchor>\n <Cell title="文本" />\n <Cell title="文本" />\n <Cell title="文本" />\n <IndexAnchor index="2">标题2</IndexAnchor>\n <Cell title="文本" />\n <Cell title="文本" />\n <Cell title="文本" />\n ...\n </IndexBar>\n</View>\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
sticky | \n- | \n boolean | \n- | \nfalse | \n
zIndex | \n- | \n number | \n- | \nfalse | \n
highlightColor | \n- | \n string | \n- | \nfalse | \n
stickyOffsetTop | \n- | \n number | \n- | \nfalse | \n
indexList | \n- | \n attr: ¦ string[] ¦ number[] | \n- | \nfalse | \n
onSelect | \n- | \n (event: { detail: ¦ string ¦ number }) => void | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--index-bar-index-font-size | \n @font-size-xs; | \n
--index-bar-index-line-height | \n 28px; | \n
--index-bar-index-popup-width | \n 70vw; | \n
--index-bar-index-sidebar-zindex | \n 9999; | \n
用于列表的索引分类显示和快速定位。
\n在 Taro 文件中引入组件
\nimport { IndexBar, IndexAnchor } from '@antmjs/vantui'\n
\n点击索引栏时,会自动跳转到对应的IndexAnchor
锚点位置。\n不要将 IndexBar 放置在含有 css 动画元素里面,会导致 IndexAnchor 定位失效
import { Block } from '@tarojs/components'\nimport { IndexBar, IndexAnchor, Cell } from '@antmjs/vantui'\n\nconst arr: string[] = []\nconst charCodeOfA = 'A'.charCodeAt(0)\nfor (let i = 0; i < 26; i++) {\n arr.push(String.fromCharCode(charCodeOfA + i))\n}\nexport default function Demo() {\n return (\n <IndexBar>\n {arr.map((item) => (\n <Block key={item}>\n <IndexAnchor index={item}></IndexAnchor>\n <Cell title="文本"></Cell>\n <Cell title="文本"></Cell>\n <Cell title="文本"></Cell>\n </Block>\n ))}\n </IndexBar>\n )\n}\n\n
\n可以通过indexList
属性自定义展示的索引字符列表。
<View>\n <IndexBar indexList={[1,2,...]}>\n <IndexAnchor index="1">标题1</IndexAnchor>\n <Cell title="文本" />\n <Cell title="文本" />\n <Cell title="文本" />\n <IndexAnchor index="2">标题2</IndexAnchor>\n <Cell title="文本" />\n <Cell title="文本" />\n <Cell title="文本" />\n ...\n </IndexBar>\n</View>\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
sticky | \n- | \n boolean | \n- | \nfalse | \n
zIndex | \n- | \n number | \n- | \nfalse | \n
highlightColor | \n- | \n string | \n- | \nfalse | \n
stickyOffsetTop | \n- | \n number | \n- | \nfalse | \n
indexList | \n- | \n attr: ¦ string[] ¦ number[] | \n- | \nfalse | \n
onSelect | \n- | \n (event: { detail: ¦ string ¦ number }) => void | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--index-bar-index-font-size | \n @font-size-xs; | \n
--index-bar-index-line-height | \n 28px; | \n
--index-bar-index-popup-width | \n 70vw; | \n
--index-bar-index-sidebar-zindex | \n 9999; | \n
在列表中通过手指下拉刷新加载新内容的交互操作。
\nimport { PullToRefresh } from '@antmjs/vantui'\n
\nimport { View } from '@tarojs/components'\nimport { PullToRefresh, IPullToRefreshProps } from '@antmjs/vantui'\n\nexport default function Demo() {\n const onRefresh: IPullToRefreshProps['onRefresh'] = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(undefined)\n }, 1000)\n })\n }\n\n return (\n <PullToRefresh onRefresh={onRefresh}>\n <View style={{ padding: '0 12px' }}>\n {new Array(10).fill(1).map((_, index) => (\n <View\n style={{ padding: 12, background: '#fff', marginBottom: 12 }}\n key={::::_QAPullToRefresh::::_ABindex}::::_QA}\n >\n {index}\n </View>\n ))}\n </View>\n </PullToRefresh>\n )\n}\n\n
\n解决和滚动操作冲突问题
\nfunction Index() {\n const [scrollTop, setTop] = useState(0)\n const onscroll = (e) => setTop(e.detail.scrollTop)\n // ....\n return (\n <PullToRefresh disable={scrollTop > 0} onRefresh={onRefresh}>\n <ScrollView onScroll={onscroll}>\n <View>xxxx</View>\n </ScrollView>\n </PullToRefresh>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
children | \n- | \n React.ReactNode | \n- | \nfalse | \n
pullText | \n下拉文案 | \n React.ReactNode | \n下拉刷新 | \nfalse | \n
releaseText | \n放开文案 | \n React.ReactNode | \n松开刷新 | \nfalse | \n
loadingText | \n加载文案 | \n React.ReactNode | \n加载中... | \nfalse | \n
renderLoading | \n自定义加载 | \n React.ReactNode | \n- | \nfalse | \n
successText | \n加载成功文案 | \n React.ReactNode | \n刷新成功 | \nfalse | \n
onRefresh | \n触发刷新方法,返回 Promise 成功 | \n () => Promise | \n- | \ntrue | \n
touchMaxStart | \n可触发下拉的 y 轴间距,相对于 PullToRefresh 组件 | \n number | \n300 | \nfalse | \n
headHeight | \n高度 | \n number | \n40 | \nfalse | \n
disable | \n是否禁用 | \n boolean | \nfalse | \nfalse | \n
successDuration | \n成功状态展示时长 | \n number | \n1000 | \nfalse | \n
touchMinTime | \n触摸触发拖拽的最小停留时间 | \n number | \n400 | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--pull-to-refresh-font-size | \n @font-size-md; | \n
--pull-to-refresh-animation-duration | \n 0.4s; | \n
在列表中通过手指下拉刷新加载新内容的交互操作。
\nimport { PullToRefresh } from '@antmjs/vantui'\n
\nimport { View } from '@tarojs/components'\nimport { PullToRefresh, IPullToRefreshProps } from '@antmjs/vantui'\n\nexport default function Demo() {\n const onRefresh: IPullToRefreshProps['onRefresh'] = () => {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(undefined)\n }, 1000)\n })\n }\n\n return (\n <PullToRefresh onRefresh={onRefresh}>\n <View style={{ padding: '0 12px' }}>\n {new Array(10).fill(1).map((_, index) => (\n <View\n style={{ padding: 12, background: '#fff', marginBottom: 12 }}\n key={::::_QAPullToRefresh::::_ABindex}::::_QA}\n >\n {index}\n </View>\n ))}\n </View>\n </PullToRefresh>\n )\n}\n\n
\n解决和滚动操作冲突问题
\nfunction Index() {\n const [scrollTop, setTop] = useState(0)\n const onscroll = (e) => setTop(e.detail.scrollTop)\n // ....\n return (\n <PullToRefresh disable={scrollTop > 0} onRefresh={onRefresh}>\n <ScrollView onScroll={onscroll}>\n <View>xxxx</View>\n </ScrollView>\n </PullToRefresh>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
children | \n- | \n React.ReactNode | \n- | \nfalse | \n
pullText | \n下拉文案 | \n React.ReactNode | \n下拉刷新 | \nfalse | \n
releaseText | \n放开文案 | \n React.ReactNode | \n松开刷新 | \nfalse | \n
loadingText | \n加载文案 | \n React.ReactNode | \n加载中... | \nfalse | \n
renderLoading | \n自定义加载 | \n React.ReactNode | \n- | \nfalse | \n
successText | \n加载成功文案 | \n React.ReactNode | \n刷新成功 | \nfalse | \n
onRefresh | \n触发刷新方法,返回 Promise 成功 | \n () => Promise | \n- | \ntrue | \n
touchMaxStart | \n可触发下拉的 y 轴间距,相对于 PullToRefresh 组件 | \n number | \n300 | \nfalse | \n
headHeight | \n高度 | \n number | \n40 | \nfalse | \n
disable | \n是否禁用 | \n boolean | \nfalse | \nfalse | \n
successDuration | \n成功状态展示时长 | \n number | \n1000 | \nfalse | \n
touchMinTime | \n触摸触发拖拽的最小停留时间 | \n number | \n400 | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--pull-to-refresh-font-size | \n @font-size-md; | \n
--pull-to-refresh-animation-duration | \n 0.4s; | \n
底部导航栏,用于在不同页面之间进行切换。
\n在 Taro 文件中引入组件
\nimport { Tabbar, TabbarItem } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Tabbar, TabbarItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [active, setActive] = react.useState<string | number>(0)\n return (\n <Tabbar\n active={active}\n onChange={(e) => setActive(e.detail)}\n safeAreaInsetBottom={false}\n >\n <TabbarItem icon="home-o">标签</TabbarItem>\n <TabbarItem icon="search">标签</TabbarItem>\n <TabbarItem icon="friends-o">标签</TabbarItem>\n <TabbarItem icon="setting-o">标签</TabbarItem>\n </Tabbar>\n )\n}\n\n
\n在标签指定name
属性的情况下,vModel
的值为当前标签的name
。
/* eslint-disable */\nimport react from 'react'\nimport { Tabbar, TabbarItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [active, setActive] = react.useState<string | number>('home')\n return (\n <Tabbar active={active} onChange={(e) => setActive(e.detail)}>\n <TabbarItem name="home" icon="home-o">\n 标签\n </TabbarItem>\n <TabbarItem name="search" icon="search">\n 标签\n </TabbarItem>\n <TabbarItem name="friends" icon="friends-o">\n 标签\n </TabbarItem>\n <TabbarItem name="setting" icon="setting-o">\n 标签\n </TabbarItem>\n </Tabbar>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Tabbar, TabbarItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [active, setActive] = react.useState<string | number>('home')\n return (\n <Tabbar active={active} onChange={(e) => setActive(e.detail)}>\n <TabbarItem icon="home-o">标签</TabbarItem>\n <TabbarItem icon="search" dot>\n 标签\n </TabbarItem>\n <TabbarItem icon="friends-o" info="5">\n 标签\n </TabbarItem>\n <TabbarItem icon="setting-o" info="20">\n 标签\n </TabbarItem>\n </Tabbar>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Tabbar, TabbarItem, Image } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [active, setActive] = react.useState<string | number>('home')\n\n return (\n <Tabbar active={active} onChange={(e) => setActive(e.detail)}>\n <TabbarItem\n info="3"\n renderIcon={\n <Image\n src="https://img.yzcdn.cn/vant/user-inactive.png"\n fit="fill"\n style="width: 30px; height: 18px;"\n ></Image>\n }\n renderIconActive={\n <Image\n src="https://img.yzcdn.cn/vant/user-active.png"\n fit="fill"\n style="width: 30px; height: 18px;"\n ></Image>\n }\n >\n 自定义\n </TabbarItem>\n <TabbarItem icon="search">标签</TabbarItem>\n <TabbarItem icon="setting-o">标签</TabbarItem>\n </Tabbar>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Tabbar, TabbarItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [active, setActive] = react.useState<string | number>(0)\n return (\n <Tabbar\n activeColor="#07c160"\n inactiveColor="#000"\n active={active}\n onChange={(e) => setActive(e.detail)}\n >\n <TabbarItem icon="home-o">标签</TabbarItem>\n <TabbarItem icon="search">标签</TabbarItem>\n <TabbarItem icon="friends-o">标签</TabbarItem>\n <TabbarItem icon="setting-o">标签</TabbarItem>\n </Tabbar>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
active | \n- | \n string ¦ number | \n- | \nfalse | \n
activeColor | \n- | \n string | \n- | \nfalse | \n
inactiveColor | \n- | \n string | \n- | \nfalse | \n
fixed | \n- | \n boolean | \n- | \nfalse | \n
placeholder | \n- | \n boolean | \n- | \nfalse | \n
border | \n- | \n boolean | \n- | \nfalse | \n
zIndex | \n- | \n number | \n- | \nfalse | \n
safeAreaInsetBottom | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onChange | \n- | \n (event: { detail: ¦ string ¦ number }) => void | \n- | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
info | \n- | \n ReactNode | \n- | \nfalse | \n
name | \n- | \n string ¦ number | \n- | \nfalse | \n
icon | \n- | \n string | \n- | \nfalse | \n
dot | \n- | \n boolean | \n- | \nfalse | \n
iconPrefix | \n- | \n string | \n- | \nfalse | \n
renderIconActive | \n- | \n ReactNode | \n- | \nfalse | \n
renderIcon | \n- | \n ReactNode | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onClick | \n- | \n ( name: string ¦ number ) => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--tabbar-height | \n 100px; | \n
--tabbar-background-color | \n @white; | \n
底部导航栏,用于在不同页面之间进行切换。
\n在 Taro 文件中引入组件
\nimport { Tabbar, TabbarItem } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Tabbar, TabbarItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [active, setActive] = react.useState<string | number>(0)\n return (\n <Tabbar\n active={active}\n onChange={(e) => setActive(e.detail)}\n safeAreaInsetBottom={false}\n >\n <TabbarItem icon="home-o">标签</TabbarItem>\n <TabbarItem icon="search">标签</TabbarItem>\n <TabbarItem icon="friends-o">标签</TabbarItem>\n <TabbarItem icon="setting-o">标签</TabbarItem>\n </Tabbar>\n )\n}\n\n
\n在标签指定name
属性的情况下,vModel
的值为当前标签的name
。
/* eslint-disable */\nimport react from 'react'\nimport { Tabbar, TabbarItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [active, setActive] = react.useState<string | number>('home')\n return (\n <Tabbar active={active} onChange={(e) => setActive(e.detail)}>\n <TabbarItem name="home" icon="home-o">\n 标签\n </TabbarItem>\n <TabbarItem name="search" icon="search">\n 标签\n </TabbarItem>\n <TabbarItem name="friends" icon="friends-o">\n 标签\n </TabbarItem>\n <TabbarItem name="setting" icon="setting-o">\n 标签\n </TabbarItem>\n </Tabbar>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Tabbar, TabbarItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [active, setActive] = react.useState<string | number>('home')\n return (\n <Tabbar active={active} onChange={(e) => setActive(e.detail)}>\n <TabbarItem icon="home-o">标签</TabbarItem>\n <TabbarItem icon="search" dot>\n 标签\n </TabbarItem>\n <TabbarItem icon="friends-o" info="5">\n 标签\n </TabbarItem>\n <TabbarItem icon="setting-o" info="20">\n 标签\n </TabbarItem>\n </Tabbar>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Tabbar, TabbarItem, Image } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [active, setActive] = react.useState<string | number>('home')\n\n return (\n <Tabbar active={active} onChange={(e) => setActive(e.detail)}>\n <TabbarItem\n info="3"\n renderIcon={\n <Image\n src="https://img.yzcdn.cn/vant/user-inactive.png"\n fit="fill"\n style="width: 30px; height: 18px;"\n ></Image>\n }\n renderIconActive={\n <Image\n src="https://img.yzcdn.cn/vant/user-active.png"\n fit="fill"\n style="width: 30px; height: 18px;"\n ></Image>\n }\n >\n 自定义\n </TabbarItem>\n <TabbarItem icon="search">标签</TabbarItem>\n <TabbarItem icon="setting-o">标签</TabbarItem>\n </Tabbar>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Tabbar, TabbarItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [active, setActive] = react.useState<string | number>(0)\n return (\n <Tabbar\n activeColor="#07c160"\n inactiveColor="#000"\n active={active}\n onChange={(e) => setActive(e.detail)}\n >\n <TabbarItem icon="home-o">标签</TabbarItem>\n <TabbarItem icon="search">标签</TabbarItem>\n <TabbarItem icon="friends-o">标签</TabbarItem>\n <TabbarItem icon="setting-o">标签</TabbarItem>\n </Tabbar>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
active | \n- | \n string ¦ number | \n- | \nfalse | \n
activeColor | \n- | \n string | \n- | \nfalse | \n
inactiveColor | \n- | \n string | \n- | \nfalse | \n
fixed | \n- | \n boolean | \n- | \nfalse | \n
placeholder | \n- | \n boolean | \n- | \nfalse | \n
border | \n- | \n boolean | \n- | \nfalse | \n
zIndex | \n- | \n number | \n- | \nfalse | \n
safeAreaInsetBottom | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onChange | \n- | \n (event: { detail: ¦ string ¦ number }) => void | \n- | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
info | \n- | \n ReactNode | \n- | \nfalse | \n
name | \n- | \n string ¦ number | \n- | \nfalse | \n
icon | \n- | \n string | \n- | \nfalse | \n
dot | \n- | \n boolean | \n- | \nfalse | \n
iconPrefix | \n- | \n string | \n- | \nfalse | \n
renderIconActive | \n- | \n ReactNode | \n- | \nfalse | \n
renderIcon | \n- | \n ReactNode | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onClick | \n- | \n ( name: string ¦ number ) => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--tabbar-height | \n 100px; | \n
--tabbar-background-color | \n @white; | \n
弹出层容器,用于展示弹窗、信息提示等内容,支持多个弹出层叠加展示。
\n在 Taro 文件中引入组件
\nimport { Popup } from '@antmjs/vantui'\n
\n通过show
属性控制弹出层是否展示。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Popup } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n return (\n <View>\n <Cell title="展示弹出层" isLink onClick={() => setShow(true)} />\n <Popup show={show} onClose={() => setShow(false)}>\n 内容\n </Popup>\n </View>\n )\n}\n\n
\n通过position
属性设置弹出位置,默认居中弹出,可以设置为top
、bottom
、left
、right
。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Popup, PopupProps } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [position, setPosition] = react.useState<PopupProps['position']>('top')\n\n const showAction = function (position) {\n setPosition(position)\n setShow(true)\n }\n\n return (\n <View>\n <Cell title="顶部弹出" isLink onClick={() => showAction('top')} />\n <Cell title="底部弹出" isLink onClick={() => showAction('bottom')} />\n <Cell title="左侧弹出" isLink onClick={() => showAction('left')} />\n <Cell title="右侧弹出" isLink onClick={() => showAction('right')} />\n <Popup show={show} position={position} onClose={() => setShow(false)}>\n 内容{position}\n </Popup>\n </View>\n )\n}\n\n
\n设置closeable
属性后,会在弹出层的右上角显示关闭图标,并且可以通过closeIcon
属性自定义图标,使用closeIconPosition
属性可以自定义图标位置。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Popup } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n return (\n <View>\n <Cell title="关闭图标" isLink onClick={() => setShow(true)} />\n <Popup\n closeable\n closeIcon="close"\n show={show}\n onClose={() => setShow(false)}\n closeIconPosition="top-right"\n >\n 内容\n </Popup>\n </View>\n )\n}\n\n
\n设置round
属性后,弹窗会根据弹出位置添加不同的圆角样式。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Popup } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n return (\n <View>\n <Cell title="圆角弹窗" isLink onClick={() => setShow(true)} />\n <Popup round show={show} onClose={() => setShow(false)}>\n 内容\n </Popup>\n </View>\n )\n}\n\n
\n使用组件时,会发现内容部分滚动到底时,继续划动会导致底层页面的滚动,这就是滚动穿透。
\n目前,组件可以通过 lockScroll
属性处理部分滚动穿透问题。 但由于小程序自身原因,弹窗内容区域仍会出现滚动穿透。 不过,我们为开发者提供了一个推荐方案以完整解决滚动穿透:
当小程序基础库最低版本在 2.9.0 以上时,即可使用 pageMeta 组件动态修改页面样式
\n<View>\n {/* pageMeta 只能是页面内的第一个节点 */}\n <pageMeta pageStyle={state.show ? 'overflow: hidden;' : ''} />\n <Popup show={state.show} />\n</View>\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
round | \n是否显示圆角 | \n boolean | \n- | \nfalse | \n
closeable | \n是否显示关闭图标 | \n boolean | \n- | \nfalse | \n
overlayStyle | \n自定义遮罩层样式 | \n attr: ¦ string ¦ CSSProperties | \n- | \nfalse | \n
transition | \n执行 | \n string | \n- | \nfalse | \n
zIndex | \n弹出层的层级 | \n number | \n- | \nfalse | \n
overlay | \n是否显示遮罩层 | \n boolean | \n- | \nfalse | \n
closeIcon | \n关闭图标名称或图片链接 | \n string | \n- | \nfalse | \n
closeIconPosition | \n关闭图标名称或图片链接的位置 | \n attr: ¦ "top-left" ¦ "top-right" ¦ "bottom-left" ¦ "bottom-right" | \n- | \nfalse | \n
closeOnClickOverlay | \n是否在点击遮罩层后关闭 | \n boolean | \ntrue | \nfalse | \n
position | \n弹出位置 | \n attr: ¦ "top" ¦ "bottom" ¦ "right" ¦ "left" | \ncenter | \nfalse | \n
safeAreaInsetBottom | \n是否为 iPhoneX 留出底部安全距离 | \n boolean | \ntrue | \nfalse | \n
safeAreaInsetTop | \n是否留出顶部安全距离(状态栏高度) | \n boolean | \nfalse | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onClickOverlay | \n点击蒙层触发的方法 | \n () => void | \n- | \nfalse | \n
onClose | \n蒙层关闭触发的方法 | \n () => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--popup-background-color | \n @page-back; | \n
--popup-round-border-radius | \n 32px; | \n
--popup-close-icon-size | \n 36px; | \n
--popup-close-icon-color | \n @gray-6; | \n
--popup-close-icon-margin | \n 16px; | \n
弹出层容器,用于展示弹窗、信息提示等内容,支持多个弹出层叠加展示。
\n在 Taro 文件中引入组件
\nimport { Popup } from '@antmjs/vantui'\n
\n通过show
属性控制弹出层是否展示。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Popup } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n return (\n <View>\n <Cell title="展示弹出层" isLink onClick={() => setShow(true)} />\n <Popup show={show} onClose={() => setShow(false)}>\n 内容\n </Popup>\n </View>\n )\n}\n\n
\n通过position
属性设置弹出位置,默认居中弹出,可以设置为top
、bottom
、left
、right
。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Popup, PopupProps } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [position, setPosition] = react.useState<PopupProps['position']>('top')\n\n const showAction = function (position) {\n setPosition(position)\n setShow(true)\n }\n\n return (\n <View>\n <Cell title="顶部弹出" isLink onClick={() => showAction('top')} />\n <Cell title="底部弹出" isLink onClick={() => showAction('bottom')} />\n <Cell title="左侧弹出" isLink onClick={() => showAction('left')} />\n <Cell title="右侧弹出" isLink onClick={() => showAction('right')} />\n <Popup show={show} position={position} onClose={() => setShow(false)}>\n 内容{position}\n </Popup>\n </View>\n )\n}\n\n
\n设置closeable
属性后,会在弹出层的右上角显示关闭图标,并且可以通过closeIcon
属性自定义图标,使用closeIconPosition
属性可以自定义图标位置。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Popup } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n return (\n <View>\n <Cell title="关闭图标" isLink onClick={() => setShow(true)} />\n <Popup\n closeable\n closeIcon="close"\n show={show}\n onClose={() => setShow(false)}\n closeIconPosition="top-right"\n >\n 内容\n </Popup>\n </View>\n )\n}\n\n
\n设置round
属性后,弹窗会根据弹出位置添加不同的圆角样式。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Popup } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n return (\n <View>\n <Cell title="圆角弹窗" isLink onClick={() => setShow(true)} />\n <Popup round show={show} onClose={() => setShow(false)}>\n 内容\n </Popup>\n </View>\n )\n}\n\n
\n使用组件时,会发现内容部分滚动到底时,继续划动会导致底层页面的滚动,这就是滚动穿透。
\n目前,组件可以通过 lockScroll
属性处理部分滚动穿透问题。 但由于小程序自身原因,弹窗内容区域仍会出现滚动穿透。 不过,我们为开发者提供了一个推荐方案以完整解决滚动穿透:
当小程序基础库最低版本在 2.9.0 以上时,即可使用 pageMeta 组件动态修改页面样式
\n<View>\n {/* pageMeta 只能是页面内的第一个节点 */}\n <pageMeta pageStyle={state.show ? 'overflow: hidden;' : ''} />\n <Popup show={state.show} />\n</View>\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
round | \n是否显示圆角 | \n boolean | \n- | \nfalse | \n
closeable | \n是否显示关闭图标 | \n boolean | \n- | \nfalse | \n
overlayStyle | \n自定义遮罩层样式 | \n attr: ¦ string ¦ CSSProperties | \n- | \nfalse | \n
transition | \n执行 | \n string | \n- | \nfalse | \n
zIndex | \n弹出层的层级 | \n number | \n- | \nfalse | \n
overlay | \n是否显示遮罩层 | \n boolean | \n- | \nfalse | \n
closeIcon | \n关闭图标名称或图片链接 | \n string | \n- | \nfalse | \n
closeIconPosition | \n关闭图标名称或图片链接的位置 | \n attr: ¦ "top-left" ¦ "top-right" ¦ "bottom-left" ¦ "bottom-right" | \n- | \nfalse | \n
closeOnClickOverlay | \n是否在点击遮罩层后关闭 | \n boolean | \ntrue | \nfalse | \n
position | \n弹出位置 | \n attr: ¦ "top" ¦ "bottom" ¦ "right" ¦ "left" | \ncenter | \nfalse | \n
safeAreaInsetBottom | \n是否为 iPhoneX 留出底部安全距离 | \n boolean | \ntrue | \nfalse | \n
safeAreaInsetTop | \n是否留出顶部安全距离(状态栏高度) | \n boolean | \nfalse | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onClickOverlay | \n点击蒙层触发的方法 | \n () => void | \n- | \nfalse | \n
onClose | \n蒙层关闭触发的方法 | \n () => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--popup-background-color | \n @page-back; | \n
--popup-round-border-radius | \n 32px; | \n
--popup-close-icon-size | \n 36px; | \n
--popup-close-icon-color | \n @gray-6; | \n
--popup-close-icon-margin | \n 16px; | \n
级联选择器,用于多层级数据的选择,典型场景为省市区选择。
\n在 Taro 文件中引入组件
\nimport { Cascader } from '@antmjs/vantui'\n
\n传入options
列表。
/* eslint-disable */\nimport react from 'react'\nimport { Cell, Cascader } from '@antmjs/vantui'\nimport { options as opt } from './demo-opt'\n\nexport default function Demo() {\n const [isVisible, setIsVisible] = react.useState(false)\n const [value1, setValue1] = react.useState([])\n const [options] = react.useState(opt)\n const change1 = (value, path) => {\n console.log('onChange', value, path)\n setValue1(value)\n }\n const onPathChange = (value, path) => {\n console.log('onPathChange', value, path)\n }\n\n return (\n <>\n <Cell\n title="选择地址"\n value={value1 ? value1.join('-') : '请选择地址'}\n onClick={() => {\n setIsVisible(true)\n }}\n ></Cell>\n <Cascader\n visible={isVisible}\n value={value1}\n title="地址选择"\n options={options}\n closeable\n onClose={() => {\n setIsVisible(false)\n }}\n onChange={change1}\n onPathChange={onPathChange}\n />\n </>\n )\n}\n\n
\n/* eslint-disable */\nconst options = [\n {\n value: '浙江',\n text: '浙江',\n children: [\n {\n value: '杭州',\n text: '杭州',\n disabled: true,\n children: [\n { value: '西湖区', text: '西湖区', disabled: true },\n { value: '余杭区', text: '余杭区' },\n ],\n },\n {\n value: '温州',\n text: '温州',\n children: [\n { value: '鹿城区', text: '鹿城区' },\n { value: '瓯海区', text: '瓯海区' },\n ],\n },\n ],\n },\n {\n value: '湖南',\n text: '湖南',\n disabled: true,\n children: [\n {\n value: '长沙',\n text: '长沙',\n disabled: true,\n children: [\n { value: '西湖区', text: '西湖区' },\n { value: '余杭区', text: '余杭区' },\n ],\n },\n {\n value: '温州',\n text: '温州',\n children: [\n { value: '鹿城区', text: '鹿城区' },\n { value: '瓯海区', text: '瓯海区' },\n ],\n },\n ],\n },\n {\n value: '福建',\n text: '福建',\n children: [\n {\n value: '福州',\n text: '福州',\n children: [\n { value: '鼓楼区', text: '鼓楼区' },\n { value: '台江区', text: '台江区' },\n ],\n },\n ],\n },\n]\n\nexport { options }\n\n
\n可通过textKey
、valueKey
、childrenKey
指定属性名。
使用自定义数据结构的数据
\n/* eslint-disable */\nimport react from 'react'\nimport { Cell, Cascader, CascaderOption } from '@antmjs/vantui'\nimport { costomOptions } from './demo-costom-opt'\n\nexport default function Demo() {\n const [isVisible, setIsVisible] = react.useState(false)\n const [value, setValue] = react.useState([])\n const [options] = react.useState<CascaderOption[]>(costomOptions)\n const change = (value, path) => {\n console.log('onChange', value, path)\n setValue(value)\n }\n\n return (\n <>\n <Cell\n title="选择地址"\n value={value ? value.join('-') : '请选择地址'}\n onClick={() => {\n setIsVisible(true)\n }}\n ></Cell>\n <Cascader\n textKey="text1"\n valueKey="value1"\n childrenKey="items"\n visible={isVisible}\n value={value}\n title="地址选择"\n options={options}\n closeable\n onClose={() => {\n setIsVisible(false)\n }}\n onChange={change}\n />\n </>\n )\n}\n\n
\nconst costomOptions = [\n {\n value1: '浙江',\n text1: '浙江',\n items: [\n {\n value1: '杭州',\n text1: '杭州',\n items: [\n { value1: '西湖区', text1: '西湖区' },\n { value1: '余杭区', text1: '余杭区' },\n ],\n },\n {\n value1: '温州',\n text1: '温州',\n items: [\n { value1: '鹿城区', text1: '鹿城区' },\n { value1: '瓯海区', text1: '瓯海区' },\n ],\n },\n ],\n },\n {\n value1: '湖南',\n text1: '湖南',\n items: [\n {\n value1: '长沙',\n text1: '长沙',\n items: [\n { value1: '西湖区', text1: '西湖区' },\n { value1: '余杭区', text1: '余杭区' },\n ],\n },\n {\n value1: '温州',\n text1: '温州',\n items: [\n { value1: '鹿城区', text1: '鹿城区' },\n { value1: '瓯海区', text1: '瓯海区' },\n ],\n },\n ],\n },\n {\n value1: '福建',\n text1: '福建',\n items: [\n {\n value1: '福州',\n text1: '福州',\n items: [\n { value1: '鼓楼区', text1: '鼓楼区' },\n { value1: '台江区', text1: '台江区' },\n ],\n },\n ],\n },\n]\n\nexport { costomOptions }\n\n
\n使用饿了么开源地区数据, 数据过多的时候会自动滚动到选中元素,由于 tab 的 ScrollView 和垂直的 scrollView 可能冲突,所以垂直的自动滚动存在延迟,如果不需要自动滚动,可以使用scrollIntoView
false 关闭
/* eslint-disable */\nimport react from 'react'\nimport { Cell, Cascader } from '@antmjs/vantui'\n\nimport { regionData, CodeToText } from 'element-china-area-data'\n\nexport default function Demo() {\n const [isVisible, setIsVisible] = react.useState(false)\n const [value1, setValue1] = react.useState<string[]>([])\n const [title, setTitle] = react.useState<string[]>([])\n const change1 = (value) => {\n setValue1(value)\n setTitle([CodeToText[value[0]], CodeToText[value[1]], CodeToText[value[2]]])\n }\n\n return (\n <>\n <Cell\n title="选择地址"\n value={title.length ? title.join('-') : '请选择地址'}\n onClick={() => {\n setIsVisible(true)\n }}\n ></Cell>\n <Cascader\n // scrollIntoView={false}\n childrenKey="children"\n visible={isVisible}\n value={value1}\n textKey="label"\n title="地址选择"\n options={regionData}\n closeable\n onClose={() => {\n setIsVisible(false)\n }}\n onChange={change1}\n />\n </>\n )\n}\n\n
\n使用lazy
标识是否需要动态获取数据,此时不传options
代表所有数据都需要通过lazyLoad
加载,首次加载通过root
属性区分,当遇到非叶子节点时会调用lazyLoad
方法,参数为当前节点和resolve
方法,注意resolve
方法必须调用,不传子节点时会被当做叶子节点处理。
/* eslint-disable */\nimport react from 'react'\nimport { Cell, Cascader } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [isVisible, setIsVisible] = react.useState(false)\n const [value, setValue] = react.useState(['A0', 'A12', 'A23', 'A32'])\n\n const lazyLoad = (node, resolve) => {\n setTimeout(() => {\n if (node.root) {\n resolve([\n { value: 'A0', text: 'A0' },\n { value: 'B0', text: 'B0' },\n { value: 'C0', text: 'C0' },\n ])\n } else {\n const { value, level } = node\n const text = value.substring(0, 1)\n const value1 = ::::_QA::::_ABtext}::::_ABlevel + 1}1::::_QA\n const value2 = ::::_QA::::_ABtext}::::_ABlevel + 1}2::::_QA\n const value3 = ::::_QA::::_ABtext}::::_ABlevel + 1}3::::_QA\n resolve([\n { value: value1, text: value1, leaf: level >= 6 },\n { value: value2, text: value2, leaf: level >= 6 },\n { value: value3, text: value3, leaf: level >= 6 },\n ])\n }\n }, 2000)\n }\n const change = (value) => {\n setValue(value)\n }\n return (\n <>\n <Cell\n title="选择地址"\n value={value ? value.join('-') : '请选择地址'}\n onClick={() => {\n setIsVisible(true)\n }}\n ></Cell>\n <Cascader\n visible={isVisible}\n value={value}\n title="地址选择"\n closeable\n onClose={() => {\n setIsVisible(false)\n }}\n onChange={change}\n lazy\n lazyLoad={lazyLoad}\n />\n </>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Cell, Cascader } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [isVisible, setIsVisible] = react.useState(false)\n const [value, setvalue] = react.useState([])\n const [options] = react.useState([\n { value: 'A0', text: 'A0' },\n {\n value: 'B0',\n text: 'B0',\n children: [\n { value: 'B11', text: 'B11', leaf: true },\n { value: 'B12', text: 'B12' },\n ],\n },\n { value: 'C0', text: 'C0' },\n ])\n\n const lazyLoad = (node, resolve) => {\n setTimeout(() => {\n const { value, level } = node\n const text = value.substring(0, 1)\n const value1 = ::::_QA::::_ABtext}::::_ABlevel + 1}1::::_QA\n const value2 = ::::_QA::::_ABtext}::::_ABlevel + 1}2::::_QA\n resolve([\n { value: value1, text: value1, leaf: level >= 2 },\n { value: value2, text: value2, leaf: level >= 1 },\n ])\n }, 500)\n }\n const change = (value) => {\n setvalue(value)\n }\n\n return (\n <>\n <Cell\n title="选择地址"\n value={value ? value.join('-') : '请选择地址'}\n onClick={() => {\n setIsVisible(true)\n }}\n ></Cell>\n <Cascader\n visible={isVisible}\n value={value}\n title="地址选择"\n options={options}\n closeable\n onClose={() => {\n setIsVisible(false)\n }}\n onChange={change}\n lazy\n lazyLoad={lazyLoad}\n />\n </>\n )\n}\n\n
\n如果你的数据为可转换为树形结构的扁平结构时,可以通过convertConfig
告诉组件需要进行自动转换,convertConfig
接受 4 个参数,topId
为顶层节点的父级 id,idKey
为节点唯一 id,pidKey
为指向父节点 id 的属性名,存在sortKey
将根据指定字段调用 Array.prototype.sort()进行同层排序。
/* eslint-disable */\nimport react from 'react'\nimport { Cell, Cascader } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [isVisiblevalue, setIsVisiblevalue] = react.useState(false)\n const [value, setValue] = react.useState(['广东省', '广州市'])\n const [optionsvalue] = react.useState([\n { value: '北京', text: '北京', id: 1, pid: null },\n { value: '朝阳区', text: '朝阳区', id: 11, pid: 1 },\n { value: '亦庄', text: '亦庄', id: 111, pid: 11 },\n { value: '广东省', text: '广东省', id: 2, pid: null },\n { value: '广州市', text: '广州市', id: 21, pid: 2 },\n ])\n const [convertConfigvalue] = react.useState({\n topId: null,\n idKey: 'id',\n pidKey: 'pid',\n sortKey: '',\n })\n const change = (value) => {\n setValue(value)\n }\n\n return (\n <>\n <Cell\n title="选择地址"\n value={value ? value.join('-') : '请选择地址'}\n onClick={() => {\n setIsVisiblevalue(true)\n }}\n ></Cell>\n <Cascader\n visible={isVisiblevalue}\n value={value}\n title="地址选择"\n options={optionsvalue}\n convertConfig={convertConfigvalue}\n closeable\n onClose={() => {\n setIsVisiblevalue(false)\n }}\n onChange={change}\n />\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
visible | \n弹窗是否展示 | \n boolean | \n- | \ntrue | \n
options | \n选择数据 | \n CascaderOption[] | \n- | \nfalse | \n
value | \n当前值 | \n string[] | \n- | \nfalse | \n
title | \n- | \n string | \n- | \nfalse | \n
textKey | \n- | \n string | \n- | \nfalse | \n
valueKey | \n- | \n string | \n- | \nfalse | \n
childrenKey | \n- | \n string | \n- | \nfalse | \n
convertConfig | \n当 options 为可转换为树形结构的扁平结构时,配置转换规则 | \n Record< string, string ¦ number ¦ null > | \n- | \nfalse | \n
closeable | \n是否可以手动关闭 | \n boolean | \n- | \nfalse | \n
closeIconPosition | \n关闭图标的位置 | \n string | \n- | \nfalse | \n
closeIcon | \n关闭图标 | \n string | \n- | \nfalse | \n
scrollIntoView | \n数据过多时,选中元素是否滚动到中央 | \n boolean | \ntrue | \nfalse | \n
lazy | \n是否开启动态加载 | \n boolean | \n- | \nfalse | \n
lazyLoad | \n动态加载方法 | \n ( node: any, resolve: any ) => void | \n- | \nfalse | \n
onClose | \n弹窗关闭 | \n () => void | \n- | \nfalse | \n
onChange | \n选中值改变时触发 | \n ( value: any, params: any ) => void | \n- | \nfalse | \n
onPathChange | \n选中项改变时触发 | \n ( value: any, params: any ) => void | \n- | \nfalse | \n
默认的options
的格式
参数 | \n说明 | \n类型 | \n
---|---|---|
value | \n- | \n string | \n
text | \n- | \n string | \n
children | \n- | \n string | \n
异步操作时的options
格式
参数 | \n说明 | \n类型 | \n
---|---|---|
text | \n- | \n string | \n
value | \n- | \n number ¦ string | \n
paneKey | \n- | \n string | \n
disabled | \n是否可选择 | \n boolean | \n
children | \n- | \n CascaderOption[] | \n
leaf | \n是否有下级 | \n boolean | \n
level | \n- | \n number | \n
loading | \n- | \n boolean | \n
root | \n- | \n boolean | \n
当 options 为可转换为树形结构的扁平结构时,配置转换规则
\n参数 | \n说明 | \n类型 | \n
---|---|---|
topId | \n顶层节点的父级 id | \n attr: ¦ string ¦ number ¦ null | \n
idKey | \n节点唯一 id | \n string | \n
pidKey | \n父节点 id 的属性名 | \n string | \n
sortKey | \n根据指定字段调用 Array.prototype.sort()进行同层排序 | \n string | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--cascader-font-size | \n 28px; | \n
--cascader-line-height | \n 44px; | \n
--cascader-tabs-item-padding | \n 0 20px; | \n
--cascader-title-padding | \n 48px 40px 34px; | \n
--cascader-title-font-size | \n 36px; | \n
--cascader-title-line-height | \n 40px; | \n
--cascader-item-padding | \n 20px 40px; | \n
--cascader-item-font-size | \n 28px; | \n
--cascader-item-color | \n #1a1a1a; | \n
--cascader-item-active-color | \n var(--primary-color); | \n
--cascader-pane-height | \n 684px; | \n
--cascader-pane-paddingTop | \n 20px; | \n
--cascader-icon-checklist-marginLeft | \n 20px; | \n
级联选择器,用于多层级数据的选择,典型场景为省市区选择。
\n在 Taro 文件中引入组件
\nimport { Cascader } from '@antmjs/vantui'\n
\n传入options
列表。
/* eslint-disable */\nimport react from 'react'\nimport { Cell, Cascader } from '@antmjs/vantui'\nimport { options as opt } from './demo-opt'\n\nexport default function Demo() {\n const [isVisible, setIsVisible] = react.useState(false)\n const [value1, setValue1] = react.useState([])\n const [options] = react.useState(opt)\n const change1 = (value, path) => {\n console.log('onChange', value, path)\n setValue1(value)\n }\n const onPathChange = (value, path) => {\n console.log('onPathChange', value, path)\n }\n\n return (\n <>\n <Cell\n title="选择地址"\n value={value1 ? value1.join('-') : '请选择地址'}\n onClick={() => {\n setIsVisible(true)\n }}\n ></Cell>\n <Cascader\n visible={isVisible}\n value={value1}\n title="地址选择"\n options={options}\n closeable\n onClose={() => {\n setIsVisible(false)\n }}\n onChange={change1}\n onPathChange={onPathChange}\n />\n </>\n )\n}\n\n
\n/* eslint-disable */\nconst options = [\n {\n value: '浙江',\n text: '浙江',\n children: [\n {\n value: '杭州',\n text: '杭州',\n disabled: true,\n children: [\n { value: '西湖区', text: '西湖区', disabled: true },\n { value: '余杭区', text: '余杭区' },\n ],\n },\n {\n value: '温州',\n text: '温州',\n children: [\n { value: '鹿城区', text: '鹿城区' },\n { value: '瓯海区', text: '瓯海区' },\n ],\n },\n ],\n },\n {\n value: '湖南',\n text: '湖南',\n disabled: true,\n children: [\n {\n value: '长沙',\n text: '长沙',\n disabled: true,\n children: [\n { value: '西湖区', text: '西湖区' },\n { value: '余杭区', text: '余杭区' },\n ],\n },\n {\n value: '温州',\n text: '温州',\n children: [\n { value: '鹿城区', text: '鹿城区' },\n { value: '瓯海区', text: '瓯海区' },\n ],\n },\n ],\n },\n {\n value: '福建',\n text: '福建',\n children: [\n {\n value: '福州',\n text: '福州',\n children: [\n { value: '鼓楼区', text: '鼓楼区' },\n { value: '台江区', text: '台江区' },\n ],\n },\n ],\n },\n]\n\nexport { options }\n\n
\n可通过textKey
、valueKey
、childrenKey
指定属性名。
使用自定义数据结构的数据
\n/* eslint-disable */\nimport react from 'react'\nimport { Cell, Cascader, CascaderOption } from '@antmjs/vantui'\nimport { costomOptions } from './demo-costom-opt'\n\nexport default function Demo() {\n const [isVisible, setIsVisible] = react.useState(false)\n const [value, setValue] = react.useState([])\n const [options] = react.useState<CascaderOption[]>(costomOptions)\n const change = (value, path) => {\n console.log('onChange', value, path)\n setValue(value)\n }\n\n return (\n <>\n <Cell\n title="选择地址"\n value={value ? value.join('-') : '请选择地址'}\n onClick={() => {\n setIsVisible(true)\n }}\n ></Cell>\n <Cascader\n textKey="text1"\n valueKey="value1"\n childrenKey="items"\n visible={isVisible}\n value={value}\n title="地址选择"\n options={options}\n closeable\n onClose={() => {\n setIsVisible(false)\n }}\n onChange={change}\n />\n </>\n )\n}\n\n
\nconst costomOptions = [\n {\n value1: '浙江',\n text1: '浙江',\n items: [\n {\n value1: '杭州',\n text1: '杭州',\n items: [\n { value1: '西湖区', text1: '西湖区' },\n { value1: '余杭区', text1: '余杭区' },\n ],\n },\n {\n value1: '温州',\n text1: '温州',\n items: [\n { value1: '鹿城区', text1: '鹿城区' },\n { value1: '瓯海区', text1: '瓯海区' },\n ],\n },\n ],\n },\n {\n value1: '湖南',\n text1: '湖南',\n items: [\n {\n value1: '长沙',\n text1: '长沙',\n items: [\n { value1: '西湖区', text1: '西湖区' },\n { value1: '余杭区', text1: '余杭区' },\n ],\n },\n {\n value1: '温州',\n text1: '温州',\n items: [\n { value1: '鹿城区', text1: '鹿城区' },\n { value1: '瓯海区', text1: '瓯海区' },\n ],\n },\n ],\n },\n {\n value1: '福建',\n text1: '福建',\n items: [\n {\n value1: '福州',\n text1: '福州',\n items: [\n { value1: '鼓楼区', text1: '鼓楼区' },\n { value1: '台江区', text1: '台江区' },\n ],\n },\n ],\n },\n]\n\nexport { costomOptions }\n\n
\n使用饿了么开源地区数据, 数据过多的时候会自动滚动到选中元素,由于 tab 的 ScrollView 和垂直的 scrollView 可能冲突,所以垂直的自动滚动存在延迟,如果不需要自动滚动,可以使用scrollIntoView
false 关闭
/* eslint-disable */\nimport react from 'react'\nimport { Cell, Cascader } from '@antmjs/vantui'\n\nimport { regionData, CodeToText } from 'element-china-area-data'\n\nexport default function Demo() {\n const [isVisible, setIsVisible] = react.useState(false)\n const [value1, setValue1] = react.useState<string[]>([])\n const [title, setTitle] = react.useState<string[]>([])\n const change1 = (value) => {\n setValue1(value)\n setTitle([CodeToText[value[0]], CodeToText[value[1]], CodeToText[value[2]]])\n }\n\n return (\n <>\n <Cell\n title="选择地址"\n value={title.length ? title.join('-') : '请选择地址'}\n onClick={() => {\n setIsVisible(true)\n }}\n ></Cell>\n <Cascader\n // scrollIntoView={false}\n childrenKey="children"\n visible={isVisible}\n value={value1}\n textKey="label"\n title="地址选择"\n options={regionData}\n closeable\n onClose={() => {\n setIsVisible(false)\n }}\n onChange={change1}\n />\n </>\n )\n}\n\n
\n使用lazy
标识是否需要动态获取数据,此时不传options
代表所有数据都需要通过lazyLoad
加载,首次加载通过root
属性区分,当遇到非叶子节点时会调用lazyLoad
方法,参数为当前节点和resolve
方法,注意resolve
方法必须调用,不传子节点时会被当做叶子节点处理。
/* eslint-disable */\nimport react from 'react'\nimport { Cell, Cascader } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [isVisible, setIsVisible] = react.useState(false)\n const [value, setValue] = react.useState(['A0', 'A12', 'A23', 'A32'])\n\n const lazyLoad = (node, resolve) => {\n setTimeout(() => {\n if (node.root) {\n resolve([\n { value: 'A0', text: 'A0' },\n { value: 'B0', text: 'B0' },\n { value: 'C0', text: 'C0' },\n ])\n } else {\n const { value, level } = node\n const text = value.substring(0, 1)\n const value1 = ::::_QA::::_ABtext}::::_ABlevel + 1}1::::_QA\n const value2 = ::::_QA::::_ABtext}::::_ABlevel + 1}2::::_QA\n const value3 = ::::_QA::::_ABtext}::::_ABlevel + 1}3::::_QA\n resolve([\n { value: value1, text: value1, leaf: level >= 6 },\n { value: value2, text: value2, leaf: level >= 6 },\n { value: value3, text: value3, leaf: level >= 6 },\n ])\n }\n }, 2000)\n }\n const change = (value) => {\n setValue(value)\n }\n return (\n <>\n <Cell\n title="选择地址"\n value={value ? value.join('-') : '请选择地址'}\n onClick={() => {\n setIsVisible(true)\n }}\n ></Cell>\n <Cascader\n visible={isVisible}\n value={value}\n title="地址选择"\n closeable\n onClose={() => {\n setIsVisible(false)\n }}\n onChange={change}\n lazy\n lazyLoad={lazyLoad}\n />\n </>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Cell, Cascader } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [isVisible, setIsVisible] = react.useState(false)\n const [value, setvalue] = react.useState([])\n const [options] = react.useState([\n { value: 'A0', text: 'A0' },\n {\n value: 'B0',\n text: 'B0',\n children: [\n { value: 'B11', text: 'B11', leaf: true },\n { value: 'B12', text: 'B12' },\n ],\n },\n { value: 'C0', text: 'C0' },\n ])\n\n const lazyLoad = (node, resolve) => {\n setTimeout(() => {\n const { value, level } = node\n const text = value.substring(0, 1)\n const value1 = ::::_QA::::_ABtext}::::_ABlevel + 1}1::::_QA\n const value2 = ::::_QA::::_ABtext}::::_ABlevel + 1}2::::_QA\n resolve([\n { value: value1, text: value1, leaf: level >= 2 },\n { value: value2, text: value2, leaf: level >= 1 },\n ])\n }, 500)\n }\n const change = (value) => {\n setvalue(value)\n }\n\n return (\n <>\n <Cell\n title="选择地址"\n value={value ? value.join('-') : '请选择地址'}\n onClick={() => {\n setIsVisible(true)\n }}\n ></Cell>\n <Cascader\n visible={isVisible}\n value={value}\n title="地址选择"\n options={options}\n closeable\n onClose={() => {\n setIsVisible(false)\n }}\n onChange={change}\n lazy\n lazyLoad={lazyLoad}\n />\n </>\n )\n}\n\n
\n如果你的数据为可转换为树形结构的扁平结构时,可以通过convertConfig
告诉组件需要进行自动转换,convertConfig
接受 4 个参数,topId
为顶层节点的父级 id,idKey
为节点唯一 id,pidKey
为指向父节点 id 的属性名,存在sortKey
将根据指定字段调用 Array.prototype.sort()进行同层排序。
/* eslint-disable */\nimport react from 'react'\nimport { Cell, Cascader } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [isVisiblevalue, setIsVisiblevalue] = react.useState(false)\n const [value, setValue] = react.useState(['广东省', '广州市'])\n const [optionsvalue] = react.useState([\n { value: '北京', text: '北京', id: 1, pid: null },\n { value: '朝阳区', text: '朝阳区', id: 11, pid: 1 },\n { value: '亦庄', text: '亦庄', id: 111, pid: 11 },\n { value: '广东省', text: '广东省', id: 2, pid: null },\n { value: '广州市', text: '广州市', id: 21, pid: 2 },\n ])\n const [convertConfigvalue] = react.useState({\n topId: null,\n idKey: 'id',\n pidKey: 'pid',\n sortKey: '',\n })\n const change = (value) => {\n setValue(value)\n }\n\n return (\n <>\n <Cell\n title="选择地址"\n value={value ? value.join('-') : '请选择地址'}\n onClick={() => {\n setIsVisiblevalue(true)\n }}\n ></Cell>\n <Cascader\n visible={isVisiblevalue}\n value={value}\n title="地址选择"\n options={optionsvalue}\n convertConfig={convertConfigvalue}\n closeable\n onClose={() => {\n setIsVisiblevalue(false)\n }}\n onChange={change}\n />\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
visible | \n弹窗是否展示 | \n boolean | \n- | \ntrue | \n
options | \n选择数据 | \n CascaderOption[] | \n- | \nfalse | \n
value | \n当前值 | \n string[] | \n- | \nfalse | \n
title | \n- | \n string | \n- | \nfalse | \n
textKey | \n- | \n string | \n- | \nfalse | \n
valueKey | \n- | \n string | \n- | \nfalse | \n
childrenKey | \n- | \n string | \n- | \nfalse | \n
convertConfig | \n当 options 为可转换为树形结构的扁平结构时,配置转换规则 | \n Record< string, string ¦ number ¦ null > | \n- | \nfalse | \n
closeable | \n是否可以手动关闭 | \n boolean | \n- | \nfalse | \n
closeIconPosition | \n关闭图标的位置 | \n string | \n- | \nfalse | \n
closeIcon | \n关闭图标 | \n string | \n- | \nfalse | \n
scrollIntoView | \n数据过多时,选中元素是否滚动到中央 | \n boolean | \ntrue | \nfalse | \n
lazy | \n是否开启动态加载 | \n boolean | \n- | \nfalse | \n
lazyLoad | \n动态加载方法 | \n ( node: any, resolve: any ) => void | \n- | \nfalse | \n
onClose | \n弹窗关闭 | \n () => void | \n- | \nfalse | \n
onChange | \n选中值改变时触发 | \n ( value: any, params: any ) => void | \n- | \nfalse | \n
onPathChange | \n选中项改变时触发 | \n ( value: any, params: any ) => void | \n- | \nfalse | \n
默认的options
的格式
参数 | \n说明 | \n类型 | \n
---|---|---|
value | \n- | \n string | \n
text | \n- | \n string | \n
children | \n- | \n string | \n
异步操作时的options
格式
参数 | \n说明 | \n类型 | \n
---|---|---|
text | \n- | \n string | \n
value | \n- | \n number ¦ string | \n
paneKey | \n- | \n string | \n
disabled | \n是否可选择 | \n boolean | \n
children | \n- | \n CascaderOption[] | \n
leaf | \n是否有下级 | \n boolean | \n
level | \n- | \n number | \n
loading | \n- | \n boolean | \n
root | \n- | \n boolean | \n
当 options 为可转换为树形结构的扁平结构时,配置转换规则
\n参数 | \n说明 | \n类型 | \n
---|---|---|
topId | \n顶层节点的父级 id | \n attr: ¦ string ¦ number ¦ null | \n
idKey | \n节点唯一 id | \n string | \n
pidKey | \n父节点 id 的属性名 | \n string | \n
sortKey | \n根据指定字段调用 Array.prototype.sort()进行同层排序 | \n string | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--cascader-font-size | \n 28px; | \n
--cascader-line-height | \n 44px; | \n
--cascader-tabs-item-padding | \n 0 20px; | \n
--cascader-title-padding | \n 48px 40px 34px; | \n
--cascader-title-font-size | \n 36px; | \n
--cascader-title-line-height | \n 40px; | \n
--cascader-item-padding | \n 20px 40px; | \n
--cascader-item-font-size | \n 28px; | \n
--cascader-item-color | \n #1a1a1a; | \n
--cascader-item-active-color | \n var(--primary-color); | \n
--cascader-pane-height | \n 684px; | \n
--cascader-pane-paddingTop | \n 20px; | \n
--cascader-icon-checklist-marginLeft | \n 20px; | \n
用于将本地的图片或文件上传至服务器,并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑,该步骤需要自行实现。
\n在 Taro 文件中引入组件
\nimport { Uploader } from '@antmjs/vantui'\n
\n文件上传完毕后会触发afterRead
回调函数,获取到对应的文件的临时地址,然后再使用wx.uploadFile
将图片上传到远程服务器上。
/* eslint-disable */\nimport react from 'react'\nimport { Uploader } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState([\n {\n url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n name: '图片1',\n },\n {\n url: 'https://img.yzcdn.cn/vant/tree.jpg',\n },\n ])\n\n const afterRead = (event) => {\n const { file } = event.detail\n // 可在此处新增云上传图片操作\n setValue(value.concat(file))\n }\n\n const deleteAction = (event) => {\n const { index } = event.detail\n const valueNew = JSON.parse(JSON.stringify(value))\n valueNew.splice(index, 1)\n setValue(valueNew)\n }\n\n return (\n <Uploader\n fileList={value}\n onAfterRead={afterRead}\n onDelete={deleteAction}\n deletable\n />\n )\n}\n\n
\n通过status
属性可以标识上传状态,uploading
表示上传中,failed
表示上传失败,done
表示上传完成。
/* eslint-disable */\nimport react from 'react'\nimport { Uploader } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState([\n {\n url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n status: 'uploading',\n message: '上传中',\n },\n {\n url: 'https://img.yzcdn.cn/vant/tree.jpg',\n status: 'failed',\n message: '上传失败',\n },\n ])\n\n const afterRead = (event) => {\n const { file } = event.detail\n setValue(value.concat(file))\n }\n\n const deleteAction = (event) => {\n const { index } = event.detail\n const valueNew = JSON.parse(JSON.stringify(value))\n valueNew.splice(index, 1)\n setValue(valueNew)\n }\n\n return (\n <Uploader\n fileList={value}\n onAfterRead={afterRead}\n onDelete={deleteAction}\n deletable\n />\n )\n}\n\n
\n通过maxCount
属性可以限制上传文件的数量,上传数量达到限制后,会自动隐藏上传区域。
/* eslint-disable */\nimport react from 'react'\nimport { Uploader } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState([\n { url: 'https://img.yzcdn.cn/vant/sand.jpg' },\n ])\n\n const afterRead = (event) => {\n const { file } = event.detail\n setValue(value.concat(file))\n }\n\n const deleteAction = (event) => {\n const { index } = event.detail\n const valueNew = JSON.parse(JSON.stringify(value))\n valueNew.splice(index, 1)\n setValue(valueNew)\n }\n\n return (\n <Uploader\n fileList={value}\n onAfterRead={afterRead}\n onDelete={deleteAction}\n maxCount={2}\n />\n )\n}\n\n
\n通过插槽可以自定义上传区域的样式。
\n/* eslint-disable */\nimport react from 'react'\nimport { Uploader, Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState([])\n\n const afterRead = (event) => {\n const { file } = event.detail\n setValue(value.concat(file))\n }\n\n const deleteAction = (event) => {\n const { index } = event.detail\n const valueNew = JSON.parse(JSON.stringify(value))\n valueNew.splice(index, 1)\n setValue(valueNew)\n }\n\n return (\n <Uploader fileList={value} onAfterRead={afterRead} onDelete={deleteAction}>\n <Button icon="photo" type="primary">\n 上传图片\n </Button>\n </Uploader>\n )\n}\n\n
\n将useBeforeRead
属性设置为true
,然后绑定 beforeRead
事件可以在上传前进行校验,调用 callback
方法传入 true
表示校验通过,传入 false
表示校验失败。
/* eslint-disable */\nimport react from 'react'\nimport { Uploader } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState([])\n\n const afterRead = (event) => {\n const { file } = event.detail\n setValue(value.concat(file))\n }\n\n const deleteAction = (event) => {\n const { index } = event.detail\n const valueNew = JSON.parse(JSON.stringify(value))\n valueNew.splice(index, 1)\n setValue(valueNew)\n }\n\n return (\n <Uploader\n accept="image"\n fileList={value}\n onAfterRead={afterRead}\n onDelete={deleteAction}\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
disabled | \n- | \n boolean | \n- | \nfalse | \n
multiple | \n- | \n boolean | \n- | \nfalse | \n
uploadText | \n- | \n ReactNode | \n- | \nfalse | \n
useBeforeRead | \n- | \n boolean | \n- | \nfalse | \n
afterRead | \n- | \n any | \n- | \nfalse | \n
beforeRead | \n- | \n any | \n- | \nfalse | \n
previewSize | \n- | \n string ¦ number | \n- | \nfalse | \n
name | \n- | \n string ¦ number | \n- | \nfalse | \n
accept | \n- | \n attr: ¦ "all" ¦ "media" ¦ "image" ¦ "file" ¦ "video" | \n- | \nfalse | \n
fileList | \n- | \n Array | \n- | \nfalse | \n
maxSize | \n- | \n number | \n- | \nfalse | \n
maxCount | \n- | \n number | \n- | \nfalse | \n
deletable | \n- | \n boolean | \n- | \nfalse | \n
showUpload | \n- | \n boolean | \n- | \nfalse | \n
previewImage | \n- | \n boolean | \n- | \nfalse | \n
previewFullImage | \n- | \n boolean | \n- | \nfalse | \n
imageFit | \n- | \n attr: ¦ keyof ImageProps.Mode ¦ undefined | \n- | \nfalse | \n
uploadIcon | \n- | \n string | \n- | \nfalse | \n
sizeType | \n- | \n Array | \n- | \nfalse | \n
capture | \n- | \n attr: ¦ string ¦ Array | \n- | \nfalse | \n
compressed | \n- | \n boolean | \n- | \nfalse | \n
maxDuration | \n- | \n number | \n- | \nfalse | \n
camera | \n- | \n "back" ¦ "front" | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onError | \n- | \n ( error: any ) => any | \n- | \nfalse | \n
onDelete | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
onBeforeRead | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
onAfterRead | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
onOversize | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
onClickPreview | \n- | \n (data: any) => any | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--uploader-size | \n 160px; | \n
--uploader-icon-size | \n 48px; | \n
--uploader-icon-color | \n @gray-4; | \n
--uploader-text-color | \n @gray-6; | \n
--uploader-text-font-size | \n @font-size-sm; | \n
--uploader-upload-background-color | \n @gray-1; | \n
--uploader-upload-active-color | \n @active-color; | \n
--uploader-delete-color | \n @white; | \n
--uploader-delete-icon-size | \n 28px; | \n
--uploader-delete-background-color | \n rgba(0, 0, 0, 0.7); | \n
--uploader-file-background-color | \n @background-color; | \n
--uploader-file-icon-size | \n 40px; | \n
--uploader-file-icon-color | \n @gray-7; | \n
--uploader-file-name-padding | \n 0 @padding-base; | \n
--uploader-file-name-margin-top | \n @padding-xs; | \n
--uploader-file-name-font-size | \n @font-size-sm; | \n
--uploader-file-name-text-color | \n @gray-7; | \n
--uploader-mask-background-color | \n fade(@gray-8, 88%); | \n
--uploader-mask-icon-size | \n 44px; | \n
--uploader-mask-message-font-size | \n @font-size-sm; | \n
--uploader-mask-message-line-height | \n 28px; | \n
--uploader-loading-icon-size | \n 44px; | \n
--uploader-loading-icon-color | \n @white; | \n
--uploader-disabled-opacity | \n @disabled-opacity; | \n
用于将本地的图片或文件上传至服务器,并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑,该步骤需要自行实现。
\n在 Taro 文件中引入组件
\nimport { Uploader } from '@antmjs/vantui'\n
\n文件上传完毕后会触发afterRead
回调函数,获取到对应的文件的临时地址,然后再使用wx.uploadFile
将图片上传到远程服务器上。
/* eslint-disable */\nimport react from 'react'\nimport { Uploader } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState([\n {\n url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n name: '图片1',\n },\n {\n url: 'https://img.yzcdn.cn/vant/tree.jpg',\n },\n ])\n\n const afterRead = (event) => {\n const { file } = event.detail\n // 可在此处新增云上传图片操作\n setValue(value.concat(file))\n }\n\n const deleteAction = (event) => {\n const { index } = event.detail\n const valueNew = JSON.parse(JSON.stringify(value))\n valueNew.splice(index, 1)\n setValue(valueNew)\n }\n\n return (\n <Uploader\n fileList={value}\n onAfterRead={afterRead}\n onDelete={deleteAction}\n deletable\n />\n )\n}\n\n
\n通过status
属性可以标识上传状态,uploading
表示上传中,failed
表示上传失败,done
表示上传完成。
/* eslint-disable */\nimport react from 'react'\nimport { Uploader } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState([\n {\n url: 'https://img.yzcdn.cn/vant/leaf.jpg',\n status: 'uploading',\n message: '上传中',\n },\n {\n url: 'https://img.yzcdn.cn/vant/tree.jpg',\n status: 'failed',\n message: '上传失败',\n },\n ])\n\n const afterRead = (event) => {\n const { file } = event.detail\n setValue(value.concat(file))\n }\n\n const deleteAction = (event) => {\n const { index } = event.detail\n const valueNew = JSON.parse(JSON.stringify(value))\n valueNew.splice(index, 1)\n setValue(valueNew)\n }\n\n return (\n <Uploader\n fileList={value}\n onAfterRead={afterRead}\n onDelete={deleteAction}\n deletable\n />\n )\n}\n\n
\n通过maxCount
属性可以限制上传文件的数量,上传数量达到限制后,会自动隐藏上传区域。
/* eslint-disable */\nimport react from 'react'\nimport { Uploader } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState([\n { url: 'https://img.yzcdn.cn/vant/sand.jpg' },\n ])\n\n const afterRead = (event) => {\n const { file } = event.detail\n setValue(value.concat(file))\n }\n\n const deleteAction = (event) => {\n const { index } = event.detail\n const valueNew = JSON.parse(JSON.stringify(value))\n valueNew.splice(index, 1)\n setValue(valueNew)\n }\n\n return (\n <Uploader\n fileList={value}\n onAfterRead={afterRead}\n onDelete={deleteAction}\n maxCount={2}\n />\n )\n}\n\n
\n通过插槽可以自定义上传区域的样式。
\n/* eslint-disable */\nimport react from 'react'\nimport { Uploader, Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState([])\n\n const afterRead = (event) => {\n const { file } = event.detail\n setValue(value.concat(file))\n }\n\n const deleteAction = (event) => {\n const { index } = event.detail\n const valueNew = JSON.parse(JSON.stringify(value))\n valueNew.splice(index, 1)\n setValue(valueNew)\n }\n\n return (\n <Uploader fileList={value} onAfterRead={afterRead} onDelete={deleteAction}>\n <Button icon="photo" type="primary">\n 上传图片\n </Button>\n </Uploader>\n )\n}\n\n
\n将useBeforeRead
属性设置为true
,然后绑定 beforeRead
事件可以在上传前进行校验,调用 callback
方法传入 true
表示校验通过,传入 false
表示校验失败。
/* eslint-disable */\nimport react from 'react'\nimport { Uploader } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState([])\n\n const afterRead = (event) => {\n const { file } = event.detail\n setValue(value.concat(file))\n }\n\n const deleteAction = (event) => {\n const { index } = event.detail\n const valueNew = JSON.parse(JSON.stringify(value))\n valueNew.splice(index, 1)\n setValue(valueNew)\n }\n\n return (\n <Uploader\n accept="image"\n fileList={value}\n onAfterRead={afterRead}\n onDelete={deleteAction}\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
disabled | \n- | \n boolean | \n- | \nfalse | \n
multiple | \n- | \n boolean | \n- | \nfalse | \n
uploadText | \n- | \n ReactNode | \n- | \nfalse | \n
useBeforeRead | \n- | \n boolean | \n- | \nfalse | \n
afterRead | \n- | \n any | \n- | \nfalse | \n
beforeRead | \n- | \n any | \n- | \nfalse | \n
previewSize | \n- | \n string ¦ number | \n- | \nfalse | \n
name | \n- | \n string ¦ number | \n- | \nfalse | \n
accept | \n- | \n attr: ¦ "all" ¦ "media" ¦ "image" ¦ "file" ¦ "video" | \n- | \nfalse | \n
fileList | \n- | \n Array | \n- | \nfalse | \n
maxSize | \n- | \n number | \n- | \nfalse | \n
maxCount | \n- | \n number | \n- | \nfalse | \n
deletable | \n- | \n boolean | \n- | \nfalse | \n
showUpload | \n- | \n boolean | \n- | \nfalse | \n
previewImage | \n- | \n boolean | \n- | \nfalse | \n
previewFullImage | \n- | \n boolean | \n- | \nfalse | \n
imageFit | \n- | \n attr: ¦ keyof ImageProps.Mode ¦ undefined | \n- | \nfalse | \n
uploadIcon | \n- | \n string | \n- | \nfalse | \n
sizeType | \n- | \n Array | \n- | \nfalse | \n
capture | \n- | \n attr: ¦ string ¦ Array | \n- | \nfalse | \n
compressed | \n- | \n boolean | \n- | \nfalse | \n
maxDuration | \n- | \n number | \n- | \nfalse | \n
camera | \n- | \n "back" ¦ "front" | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onError | \n- | \n ( error: any ) => any | \n- | \nfalse | \n
onDelete | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
onBeforeRead | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
onAfterRead | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
onOversize | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
onClickPreview | \n- | \n (data: any) => any | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--uploader-size | \n 160px; | \n
--uploader-icon-size | \n 48px; | \n
--uploader-icon-color | \n @gray-4; | \n
--uploader-text-color | \n @gray-6; | \n
--uploader-text-font-size | \n @font-size-sm; | \n
--uploader-upload-background-color | \n @gray-1; | \n
--uploader-upload-active-color | \n @active-color; | \n
--uploader-delete-color | \n @white; | \n
--uploader-delete-icon-size | \n 28px; | \n
--uploader-delete-background-color | \n rgba(0, 0, 0, 0.7); | \n
--uploader-file-background-color | \n @background-color; | \n
--uploader-file-icon-size | \n 40px; | \n
--uploader-file-icon-color | \n @gray-7; | \n
--uploader-file-name-padding | \n 0 @padding-base; | \n
--uploader-file-name-margin-top | \n @padding-xs; | \n
--uploader-file-name-font-size | \n @font-size-sm; | \n
--uploader-file-name-text-color | \n @gray-7; | \n
--uploader-mask-background-color | \n fade(@gray-8, 88%); | \n
--uploader-mask-icon-size | \n 44px; | \n
--uploader-mask-message-font-size | \n @font-size-sm; | \n
--uploader-mask-message-line-height | \n 28px; | \n
--uploader-loading-icon-size | \n 44px; | \n
--uploader-loading-icon-color | \n @white; | \n
--uploader-disabled-opacity | \n @disabled-opacity; | \n
空状态时的占位提示。
\n在 Taro 文件中引入组件
\nimport { Empty } from '@antmjs/vantui'\n
\nfunction Demo() {\n return (\n <View>\n <Empty description="描述文字" />\n </View>\n )\n}\n
\nEmpty 组件内置了多种占位图片类型,可以在不同业务场景下使用。
\nfunction Demo() {\n return (\n <View>\n {/* 通用错误 */}\n <Empty image="error" description="描述文字" />\n {/* 网络错误 */}\n <Empty image="network" description="描述文字" />\n {/* 搜索提示 */}\n <Empty image="search" description="描述文字" />\n </View>\n )\n}\n
\n需要自定义图片时,可以在 image 属性中传入任意图片 URL。
\nfunction Demo() {\n return (\n <View>\n <Empty\n class="customImage"\n image="https://img.yzcdn.cn/vant/custom-empty-image.png"\n description="描述文字"\n />\n </View>\n )\n}\n
\n通过默认插槽可以在 Empty 组件的下方插入内容。
\nfunction Demo() {\n return (\n <View>\n <Empty description="描述文字">\n <Button round={true} type="danger" class="bottomButton">\n 按钮\n </Button>\n </Empty>\n </View>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
description | \n- | \n string | \n- | \nfalse | \n
image | \n- | \n attr: ¦ "error" ¦ "search" ¦ "default" ¦ "network" ¦ string | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
renderImage | \n- | \n ReactNode | \n- | \nfalse | \n
renderDescription | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--empty-padding | \n @padding-xl 0; | \n
--empty-image-size | \n 320px; | \n
--empty-description-margin-top | \n @padding-md; | \n
--empty-description-padding | \n 0 120px; | \n
--empty-description-color | \n @gray-6; | \n
--empty-description-font-size | \n 28px; | \n
--empty-description-line-height | \n 40px; | \n
--empty-bottom-margin-top | \n 48px; | \n
空状态时的占位提示。
\n在 Taro 文件中引入组件
\nimport { Empty } from '@antmjs/vantui'\n
\nfunction Demo() {\n return (\n <View>\n <Empty description="描述文字" />\n </View>\n )\n}\n
\nEmpty 组件内置了多种占位图片类型,可以在不同业务场景下使用。
\nfunction Demo() {\n return (\n <View>\n {/* 通用错误 */}\n <Empty image="error" description="描述文字" />\n {/* 网络错误 */}\n <Empty image="network" description="描述文字" />\n {/* 搜索提示 */}\n <Empty image="search" description="描述文字" />\n </View>\n )\n}\n
\n需要自定义图片时,可以在 image 属性中传入任意图片 URL。
\nfunction Demo() {\n return (\n <View>\n <Empty\n class="customImage"\n image="https://img.yzcdn.cn/vant/custom-empty-image.png"\n description="描述文字"\n />\n </View>\n )\n}\n
\n通过默认插槽可以在 Empty 组件的下方插入内容。
\nfunction Demo() {\n return (\n <View>\n <Empty description="描述文字">\n <Button round={true} type="danger" class="bottomButton">\n 按钮\n </Button>\n </Empty>\n </View>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
description | \n- | \n string | \n- | \nfalse | \n
image | \n- | \n attr: ¦ "error" ¦ "search" ¦ "default" ¦ "network" ¦ string | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
renderImage | \n- | \n ReactNode | \n- | \nfalse | \n
renderDescription | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--empty-padding | \n @padding-xl 0; | \n
--empty-image-size | \n 320px; | \n
--empty-description-margin-top | \n @padding-md; | \n
--empty-description-padding | \n 0 120px; | \n
--empty-description-color | \n @gray-6; | \n
--empty-description-font-size | \n 28px; | \n
--empty-description-line-height | \n 40px; | \n
--empty-bottom-margin-top | \n 48px; | \n
提供多个选项集合供用户选择,支持单列选择和多列级联,通常与 弹出层 组件配合使用。
\n在 Taro 文件中引入组件
\nimport { Picker } from '@antmjs/vantui'\n
\nimport { Toast, Picker } from '@antmjs/vantui'\n\nconst columns = ['杭州', '宁波', '温州', '嘉兴', '湖州']\nexport default function Demo() {\n const onChange = (event) => {\n const { value, index } = event.detail\n Toast.show(::::_QA当前值:::::_ABvalue}, 当前索引:::::_ABindex}::::_QA)\n }\n return (\n <>\n <Toast />\n <Picker columns={columns} onChange={onChange} />\n </>\n )\n}\n\n
\n单列选择器可以直接通过defaultIndex
属性设置初始选中项的索引值。
import { Toast, Picker } from '@antmjs/vantui'\n\nconst columns = ['杭州', '宁波', '温州', '嘉兴', '湖州']\nexport default function Demo() {\n const onChange = (event) => {\n const { value, index } = event.detail\n Toast.show(::::_QA当前值:::::_ABvalue}, 当前索引:::::_ABindex}::::_QA)\n }\n return (\n <>\n <Toast />\n <Picker defaultIndex={2} columns={columns} onChange={onChange} />\n </>\n )\n}\n\n
\nimport { Toast, Picker } from '@antmjs/vantui'\n\nconst columns = ['杭州', '宁波', '温州', '嘉兴', '湖州']\nexport default function Demo() {\n const onChange = (event) => {\n const { value, index } = event.detail\n Toast.show(::::_QA当前值:::::_ABvalue}, 当前索引:::::_ABindex}::::_QA)\n }\n return (\n <>\n <Toast />\n <Picker\n showToolbar\n title="标题"\n defaultIndex={2}\n columns={columns}\n onChange={onChange}\n onCancel={() => Toast.show('onCancel')}\n onConfirm={() => Toast.show('onConfirm')}\n />\n </>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Toast, Picker, IPickerInstance } from '@antmjs/vantui'\n\nconst citys = {\n 浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n 福建: ['福州', '厦门'],\n}\nexport default function Demo() {\n const pickerRef = react.useRef<IPickerInstance>()\n\n react.useEffect(() => {\n // 模拟异步数据获取\n setTimeout(async () => {\n const res = ['浙江', '福建'] // 数组项可以是基础类型或对象类型\n await pickerRef.current?.setColumnValues(0, res)\n await pickerRef.current?.setColumnValues(1, citys[res[0] as any])\n }, 1000)\n }, [])\n\n const onChange = (event) => {\n const { picker, value } = event.detail\n picker.setColumnValues(1, citys[value[0]]).then((newValue) => {\n console.info(newValue)\n console.info(pickerRef.current?.getIndexes()) // 异步更新列数据的时候不要使用回调函数里面旧的 picker实例\n })\n }\n return (\n <>\n <Toast />\n <Picker\n ref={pickerRef}\n columns={[{ values: [] }, { values: [] }]}\n onChange={onChange}\n />\n </>\n )\n}\n\n
\n选项可以为对象结构,通过设置 disabled 来禁用该选项。
\nimport { Picker } from '@antmjs/vantui'\n\nconst columns = [\n {\n text: '杭州',\n disabled: true,\n },\n {\n text: '宁波',\n },\n {\n text: '温州',\n },\n]\nexport default function Demo() {\n return <Picker columns={columns} />\n}\n\n
\n当 Picker 数据是通过异步获取时,可以通过 loading
属性显示加载提示。
import { Picker } from '@antmjs/vantui'\n\nconst columns = [\n {\n text: '宁波',\n },\n {\n text: '温州',\n },\n {\n text: '长沙',\n },\n]\nexport default function Demo() {\n return <Picker columns={columns} loading />\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
valueKey | \n选项为对象的时候,文字对应的 key | \n string | \ntext | \nfalse | \n
toolbarPosition | \n顶部栏位置,可选值为 bottom | \n string | \ntop | \nfalse | \n
defaultIndex | \n单列选择器的默认选中项索引,多列选择器请参考下方的 Columns 配置 | \n number | \n0 | \nfalse | \n
columns | \n每一项数据,可为字符或者对象,对象默认展示值是 valueKey 设置的 key | \n any[] | \n[] | \nfalse | \n
title | \n顶部栏标题 | \n ReactNode | \n\'\' | \nfalse | \n
cancelButtonText | \n取消按钮文字 | \n ReactNode | \n取消 | \nfalse | \n
confirmButtonText | \n确认按钮文字 | \n ReactNode | \n确认 | \nfalse | \n
loading | \n加载状态 | \n boolean | \nfalse | \nfalse | \n
itemHeight | \n选项高度,对应单位 PX | \n string ¦ number | \n48 | \nfalse | \n
visibleItemCount | \n可见的选项个数 | \n number | \n6 | \nfalse | \n
onChange | \n变化触发方法 | \n ( e: PickerChangeEvents ) => void | \n- | \nfalse | \n
onCancel | \n取消触发方法 | \n ( e: PickerEvents ) => void | \n- | \nfalse | \n
onConfirm | \n确认触发方法 | \n ( e: PickerEvents ) => void | \n- | \nfalse | \n
showToolbar | \n是否显示顶部栏 | \n boolean | \nfalse | \nfalse | \n
继承了 Taro 的 ITouchEvent 类型
\n参数 | \n说明 | \n类型 | \n
---|---|---|
detail | \n返回选项对应的值和选项对应的下标 | \n { value: any index: ¦ number ¦ number[] } | \n
继承了 Taro 的 ITouchEvent 类型
\n参数 | \n说明 | \n类型 | \n
---|---|---|
detail | \n返回选项对应的值、picker 实例和多列返回当前第多少列、单列返回选项对应值 | \n { value: any picker: IPickerInstance index: number } | \n
通过 ref 获取到的方法如下
\n方法 | \n说明 | \n类型 | \n
---|---|---|
setColumnValues | \n设置每一列的数据,异步获取到最新的 values | \n ( index: number, options: string[] ) => Promise | \n
getColumnValues | \n获取每一列的值 | \n ( index: number[] ) => any[] | \n
setColumnValue | \n设置某一列的值 | \n ( index: number, value: any ) => any | \n
getColumnValue | \n获取某一列的值 | \n ( index: number ) => any | \n
columns | \n每列的数据 | \n any[] | \n
getIndexes | \n获取每一列展示的下标 | \n () => number[] | \n
setIndexes | \n设置每一列展示的下标 | \n ( indexes: number[] ) => void | \n
getValues | \n每一列展示的值 | \n () => any | \n
confirm | \n触发确认的方法 | \n () => void | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--picker-background-color | \n @white; | \n
--picker-toolbar-height | \n 88px; | \n
--picker-title-font-size | \n @font-size-lg; | \n
--picker-action-padding | \n 0 @padding-md; | \n
--picker-action-font-size | \n @font-size-md; | \n
--picker-confirm-action-color | \n @text-link-color; | \n
--picker-cancel-action-color | \n @gray-6; | \n
--picker-option-font-size | \n @font-size-lg; | \n
--picker-option-text-color | \n @black; | \n
--picker-loading-icon-color | \n var(--primary-color); | \n
--picker-loading-mask-color | \n rgba(255, 255, 255, 0.9); | \n
--picker-option-disabled-opacity | \n 0.3; | \n
--picker-option-selected-text-color | \n @text-color; | \n
提供多个选项集合供用户选择,支持单列选择和多列级联,通常与 弹出层 组件配合使用。
\n在 Taro 文件中引入组件
\nimport { Picker } from '@antmjs/vantui'\n
\nimport { Toast, Picker } from '@antmjs/vantui'\n\nconst columns = ['杭州', '宁波', '温州', '嘉兴', '湖州']\nexport default function Demo() {\n const onChange = (event) => {\n const { value, index } = event.detail\n Toast.show(::::_QA当前值:::::_ABvalue}, 当前索引:::::_ABindex}::::_QA)\n }\n return (\n <>\n <Toast />\n <Picker columns={columns} onChange={onChange} />\n </>\n )\n}\n\n
\n单列选择器可以直接通过defaultIndex
属性设置初始选中项的索引值。
import { Toast, Picker } from '@antmjs/vantui'\n\nconst columns = ['杭州', '宁波', '温州', '嘉兴', '湖州']\nexport default function Demo() {\n const onChange = (event) => {\n const { value, index } = event.detail\n Toast.show(::::_QA当前值:::::_ABvalue}, 当前索引:::::_ABindex}::::_QA)\n }\n return (\n <>\n <Toast />\n <Picker defaultIndex={2} columns={columns} onChange={onChange} />\n </>\n )\n}\n\n
\nimport { Toast, Picker } from '@antmjs/vantui'\n\nconst columns = ['杭州', '宁波', '温州', '嘉兴', '湖州']\nexport default function Demo() {\n const onChange = (event) => {\n const { value, index } = event.detail\n Toast.show(::::_QA当前值:::::_ABvalue}, 当前索引:::::_ABindex}::::_QA)\n }\n return (\n <>\n <Toast />\n <Picker\n showToolbar\n title="标题"\n defaultIndex={2}\n columns={columns}\n onChange={onChange}\n onCancel={() => Toast.show('onCancel')}\n onConfirm={() => Toast.show('onConfirm')}\n />\n </>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Toast, Picker, IPickerInstance } from '@antmjs/vantui'\n\nconst citys = {\n 浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],\n 福建: ['福州', '厦门'],\n}\nexport default function Demo() {\n const pickerRef = react.useRef<IPickerInstance>()\n\n react.useEffect(() => {\n // 模拟异步数据获取\n setTimeout(async () => {\n const res = ['浙江', '福建'] // 数组项可以是基础类型或对象类型\n await pickerRef.current?.setColumnValues(0, res)\n await pickerRef.current?.setColumnValues(1, citys[res[0] as any])\n }, 1000)\n }, [])\n\n const onChange = (event) => {\n const { picker, value } = event.detail\n picker.setColumnValues(1, citys[value[0]]).then((newValue) => {\n console.info(newValue)\n console.info(pickerRef.current?.getIndexes()) // 异步更新列数据的时候不要使用回调函数里面旧的 picker实例\n })\n }\n return (\n <>\n <Toast />\n <Picker\n ref={pickerRef}\n columns={[{ values: [] }, { values: [] }]}\n onChange={onChange}\n />\n </>\n )\n}\n\n
\n选项可以为对象结构,通过设置 disabled 来禁用该选项。
\nimport { Picker } from '@antmjs/vantui'\n\nconst columns = [\n {\n text: '杭州',\n disabled: true,\n },\n {\n text: '宁波',\n },\n {\n text: '温州',\n },\n]\nexport default function Demo() {\n return <Picker columns={columns} />\n}\n\n
\n当 Picker 数据是通过异步获取时,可以通过 loading
属性显示加载提示。
import { Picker } from '@antmjs/vantui'\n\nconst columns = [\n {\n text: '宁波',\n },\n {\n text: '温州',\n },\n {\n text: '长沙',\n },\n]\nexport default function Demo() {\n return <Picker columns={columns} loading />\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
valueKey | \n选项为对象的时候,文字对应的 key | \n string | \ntext | \nfalse | \n
toolbarPosition | \n顶部栏位置,可选值为 bottom | \n string | \ntop | \nfalse | \n
defaultIndex | \n单列选择器的默认选中项索引,多列选择器请参考下方的 Columns 配置 | \n number | \n0 | \nfalse | \n
columns | \n每一项数据,可为字符或者对象,对象默认展示值是 valueKey 设置的 key | \n any[] | \n[] | \nfalse | \n
title | \n顶部栏标题 | \n ReactNode | \n\'\' | \nfalse | \n
cancelButtonText | \n取消按钮文字 | \n ReactNode | \n取消 | \nfalse | \n
confirmButtonText | \n确认按钮文字 | \n ReactNode | \n确认 | \nfalse | \n
loading | \n加载状态 | \n boolean | \nfalse | \nfalse | \n
itemHeight | \n选项高度,对应单位 PX | \n string ¦ number | \n48 | \nfalse | \n
visibleItemCount | \n可见的选项个数 | \n number | \n6 | \nfalse | \n
onChange | \n变化触发方法 | \n ( e: PickerChangeEvents ) => void | \n- | \nfalse | \n
onCancel | \n取消触发方法 | \n ( e: PickerEvents ) => void | \n- | \nfalse | \n
onConfirm | \n确认触发方法 | \n ( e: PickerEvents ) => void | \n- | \nfalse | \n
showToolbar | \n是否显示顶部栏 | \n boolean | \nfalse | \nfalse | \n
继承了 Taro 的 ITouchEvent 类型
\n参数 | \n说明 | \n类型 | \n
---|---|---|
detail | \n返回选项对应的值和选项对应的下标 | \n { value: any index: ¦ number ¦ number[] } | \n
继承了 Taro 的 ITouchEvent 类型
\n参数 | \n说明 | \n类型 | \n
---|---|---|
detail | \n返回选项对应的值、picker 实例和多列返回当前第多少列、单列返回选项对应值 | \n { value: any picker: IPickerInstance index: number } | \n
通过 ref 获取到的方法如下
\n方法 | \n说明 | \n类型 | \n
---|---|---|
setColumnValues | \n设置每一列的数据,异步获取到最新的 values | \n ( index: number, options: string[] ) => Promise | \n
getColumnValues | \n获取每一列的值 | \n ( index: number[] ) => any[] | \n
setColumnValue | \n设置某一列的值 | \n ( index: number, value: any ) => any | \n
getColumnValue | \n获取某一列的值 | \n ( index: number ) => any | \n
columns | \n每列的数据 | \n any[] | \n
getIndexes | \n获取每一列展示的下标 | \n () => number[] | \n
setIndexes | \n设置每一列展示的下标 | \n ( indexes: number[] ) => void | \n
getValues | \n每一列展示的值 | \n () => any | \n
confirm | \n触发确认的方法 | \n () => void | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--picker-background-color | \n @white; | \n
--picker-toolbar-height | \n 88px; | \n
--picker-title-font-size | \n @font-size-lg; | \n
--picker-action-padding | \n 0 @padding-md; | \n
--picker-action-font-size | \n @font-size-md; | \n
--picker-confirm-action-color | \n @text-link-color; | \n
--picker-cancel-action-color | \n @gray-6; | \n
--picker-option-font-size | \n @font-size-lg; | \n
--picker-option-text-color | \n @black; | \n
--picker-loading-icon-color | \n var(--primary-color); | \n
--picker-loading-mask-color | \n rgba(255, 255, 255, 0.9); | \n
--picker-option-disabled-opacity | \n 0.3; | \n
--picker-option-selected-text-color | \n @text-color; | \n
用于展示操作的当前进度。
\n在 Taro 文件中引入组件
\nimport { Progress } from '@antmjs/vantui'\n
\n进度条默认为蓝色,使用percentage
属性来设置当前进度。
function Demo() {\n return <Progress percentage="50" />\n}\n
\n通过strokeWidth
可以设置进度条的粗细。
function Demo() {\n return <Progress percentage="50" strokeWidth="8" />\n}\n
\n设置inactive
属性后进度条将置灰。
function Demo() {\n return <Progress inactive={true} percentage="50" />\n}\n
\n可以使用pivotText
属性自定义文字,color
属性自定义进度条颜色。
function Demo() {\n return (\n <View>\n <Progress pivotText="橙色" color="#f2826a" percentage="25" />\n <Progress pivotText="红色" color="#ee0a24" percentage="50" />\n <Progress\n percentage="75"\n pivotText="紫色"\n pivotColor="#7232dd"\n color="linearGradient(to right, #be99ff, #7232dd)"\n />\n </View>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
inactive | \n- | \n boolean | \n- | \nfalse | \n
percentage | \n- | \n number ¦ string | \n- | \ntrue | \n
pivotText | \n- | \n ReactNode | \n- | \nfalse | \n
pivotColor | \n- | \n string | \n- | \nfalse | \n
trackColor | \n- | \n string | \n- | \nfalse | \n
showPivot | \n- | \n boolean | \n- | \nfalse | \n
color | \n- | \n string | \n- | \nfalse | \n
textColor | \n- | \n string | \n- | \nfalse | \n
strokeWidth | \n- | \n number ¦ string | \n- | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--progress-height | \n 8px; | \n
--progress-background-color | \n @gray-3; | \n
--progress-pivot-padding | \n 0 10px; | \n
--progress-color | \n var(--primary-color); | \n
--progress-pivot-font-size | \n @font-size-xs; | \n
--progress-pivot-line-height | \n 1.6; | \n
--progress-pivot-background-color | \n var(--primary-color); | \n
--progress-pivot-text-color | \n @white; | \n
用于展示操作的当前进度。
\n在 Taro 文件中引入组件
\nimport { Progress } from '@antmjs/vantui'\n
\n进度条默认为蓝色,使用percentage
属性来设置当前进度。
function Demo() {\n return <Progress percentage="50" />\n}\n
\n通过strokeWidth
可以设置进度条的粗细。
function Demo() {\n return <Progress percentage="50" strokeWidth="8" />\n}\n
\n设置inactive
属性后进度条将置灰。
function Demo() {\n return <Progress inactive={true} percentage="50" />\n}\n
\n可以使用pivotText
属性自定义文字,color
属性自定义进度条颜色。
function Demo() {\n return (\n <View>\n <Progress pivotText="橙色" color="#f2826a" percentage="25" />\n <Progress pivotText="红色" color="#ee0a24" percentage="50" />\n <Progress\n percentage="75"\n pivotText="紫色"\n pivotColor="#7232dd"\n color="linearGradient(to right, #be99ff, #7232dd)"\n />\n </View>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
inactive | \n- | \n boolean | \n- | \nfalse | \n
percentage | \n- | \n number ¦ string | \n- | \ntrue | \n
pivotText | \n- | \n ReactNode | \n- | \nfalse | \n
pivotColor | \n- | \n string | \n- | \nfalse | \n
trackColor | \n- | \n string | \n- | \nfalse | \n
showPivot | \n- | \n boolean | \n- | \nfalse | \n
color | \n- | \n string | \n- | \nfalse | \n
textColor | \n- | \n string | \n- | \nfalse | \n
strokeWidth | \n- | \n number ¦ string | \n- | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--progress-height | \n 8px; | \n
--progress-background-color | \n @gray-3; | \n
--progress-pivot-padding | \n 0 10px; | \n
--progress-color | \n var(--primary-color); | \n
--progress-pivot-font-size | \n @font-size-xs; | \n
--progress-pivot-line-height | \n 1.6; | \n
--progress-pivot-background-color | \n var(--primary-color); | \n
--progress-pivot-text-color | \n @white; | \n
创建一个遮罩层,用于强调特定的页面元素,并阻止用户进行其他操作。
\n在 Taro 文件中引入组件
\nimport { Overlay } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Button, Overlay } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n return (\n <View>\n <Button type="primary" onClick={() => setShow(true)}>\n 显示遮罩层\n </Button>\n <Overlay show={show} onClick={() => setShow(false)} />\n </View>\n )\n}\n\n
\n通过默认插槽可以在遮罩层上嵌入任意内容。
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Button, Overlay } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n return (\n <View>\n <Button type="primary" onClick={() => setShow(true)}>\n 嵌入内容\n </Button>\n <Overlay show={show} onClick={() => setShow(false)}>\n <View className="wrapper">\n <View className="block" />\n </View>\n </Overlay>\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
show | \n- | \n boolean | \n- | \nfalse | \n
lockScroll | \n- | \n boolean | \n- | \nfalse | \n
zIndex | \n- | \n number | \n- | \nfalse | \n
duration | \n- | \n attr: ¦ string ¦ number ¦ { enter: ¦ string ¦ number leave: ¦ string ¦ number } | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--overlay-background-color | \n rgba(0, 0, 0, 0.7); | \n
创建一个遮罩层,用于强调特定的页面元素,并阻止用户进行其他操作。
\n在 Taro 文件中引入组件
\nimport { Overlay } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Button, Overlay } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n return (\n <View>\n <Button type="primary" onClick={() => setShow(true)}>\n 显示遮罩层\n </Button>\n <Overlay show={show} onClick={() => setShow(false)} />\n </View>\n )\n}\n\n
\n通过默认插槽可以在遮罩层上嵌入任意内容。
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Button, Overlay } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n return (\n <View>\n <Button type="primary" onClick={() => setShow(true)}>\n 嵌入内容\n </Button>\n <Overlay show={show} onClick={() => setShow(false)}>\n <View className="wrapper">\n <View className="block" />\n </View>\n </Overlay>\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
show | \n- | \n boolean | \n- | \nfalse | \n
lockScroll | \n- | \n boolean | \n- | \nfalse | \n
zIndex | \n- | \n number | \n- | \nfalse | \n
duration | \n- | \n attr: ¦ string ¦ number ¦ { enter: ¦ string ¦ number leave: ¦ string ¦ number } | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--overlay-background-color | \n rgba(0, 0, 0, 0.7); | \n
用于对事物进行评级操作。
\n在 Taro 文件中引入组件
\nimport { Rate } from '@antmjs/vantui'\n
\nfunction Demo() {\n const [value, setValue] = react.useState(3)\n return <Rate value={value} onChange={(e) => setValue(e.detail)} />\n}\n
\nfunction Demo() {\n const [value, setValue] = react.useState(4)\n\n return (\n <Rate\n value={value}\n icon="like"\n voidIcon="likeO"\n onChange={(e) => setValue(e.detail)}\n />\n )\n}\n
\nfunction Demo() {\n const [value, setValue] = react.useState(4)\n\n return (\n <Rate\n value={value}\n size={25}\n color="#ffd21e"\n voidIcon="star"\n voidColor="#eee"\n onChange={(e) => setValue(e.detail)}\n />\n )\n}\n
\nfunction Demo() {\n const [value, setValue] = react.useState(4)\n\n return (\n <Rate\n value={value}\n allowHalf\n voidIcon="star"\n voidColor="#eee"\n onChange={(e) => setValue(e.detail)}\n />\n )\n}\n
\nfunction Demo() {\n const [value, setValue] = react.useState(3)\n\n return <Rate value={value} count={6} onChange={(e) => setValue(e.detail)} />\n}\n
\nfunction Demo() {\n const [value, setValue] = react.useState(3)\n\n return <Rate disabled value={value} onChange={(e) => setValue(e.detail)} />\n}\n
\nfunction Demo() {\n const [value, setValue] = react.useState(3)\n\n return <Rate readonly value={value} />\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
value | \n- | \n number | \n- | \nfalse | \n
defaultValue | \n默认值 | \n number | \n- | \nfalse | \n
readonly | \n是否只可读 | \n boolean | \n- | \nfalse | \n
disabled | \n是否禁用 | \n boolean | \n- | \nfalse | \n
allowHalf | \n是否允许选择一般 | \n boolean | \n- | \nfalse | \n
size | \n- | \n string ¦ number | \n- | \nfalse | \n
iconClassPrefix | \n自定义图标的 classPrefix | \n string | \n- | \nfalse | \n
icon | \n选中图标 | \n string | \n- | \nfalse | \n
voidIcon | \n未选中图标 | \n string | \n- | \nfalse | \n
color | \n选中颜色 | \n string | \n- | \nfalse | \n
voidColor | \n未选颜色 | \n string | \n- | \nfalse | \n
disabledColor | \n禁用颜色 | \n string | \n- | \nfalse | \n
count | \n总体数量 | \n number | \n- | \nfalse | \n
gutter | \n图标间距,默认单位为 px | \n string ¦ number | \n- | \nfalse | \n
touchable | \n- | \n boolean | \n- | \nfalse | \n
onChange | \n- | \n ( e: ITouchEvent ) => any | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--rate-horizontal-padding | \n 4px; | \n
--rate-icon-size | \n 40px; | \n
--rate-icon-void-color | \n @gray-5; | \n
--rate-icon-full-color | \n @red; | \n
--rate-icon-disabled-color | \n @gray-5; | \n
--rate-icon-gutter | \n @padding-base; | \n
用于对事物进行评级操作。
\n在 Taro 文件中引入组件
\nimport { Rate } from '@antmjs/vantui'\n
\nfunction Demo() {\n const [value, setValue] = react.useState(3)\n return <Rate value={value} onChange={(e) => setValue(e.detail)} />\n}\n
\nfunction Demo() {\n const [value, setValue] = react.useState(4)\n\n return (\n <Rate\n value={value}\n icon="like"\n voidIcon="likeO"\n onChange={(e) => setValue(e.detail)}\n />\n )\n}\n
\nfunction Demo() {\n const [value, setValue] = react.useState(4)\n\n return (\n <Rate\n value={value}\n size={25}\n color="#ffd21e"\n voidIcon="star"\n voidColor="#eee"\n onChange={(e) => setValue(e.detail)}\n />\n )\n}\n
\nfunction Demo() {\n const [value, setValue] = react.useState(4)\n\n return (\n <Rate\n value={value}\n allowHalf\n voidIcon="star"\n voidColor="#eee"\n onChange={(e) => setValue(e.detail)}\n />\n )\n}\n
\nfunction Demo() {\n const [value, setValue] = react.useState(3)\n\n return <Rate value={value} count={6} onChange={(e) => setValue(e.detail)} />\n}\n
\nfunction Demo() {\n const [value, setValue] = react.useState(3)\n\n return <Rate disabled value={value} onChange={(e) => setValue(e.detail)} />\n}\n
\nfunction Demo() {\n const [value, setValue] = react.useState(3)\n\n return <Rate readonly value={value} />\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
value | \n- | \n number | \n- | \nfalse | \n
defaultValue | \n默认值 | \n number | \n- | \nfalse | \n
readonly | \n是否只可读 | \n boolean | \n- | \nfalse | \n
disabled | \n是否禁用 | \n boolean | \n- | \nfalse | \n
allowHalf | \n是否允许选择一般 | \n boolean | \n- | \nfalse | \n
size | \n- | \n string ¦ number | \n- | \nfalse | \n
iconClassPrefix | \n自定义图标的 classPrefix | \n string | \n- | \nfalse | \n
icon | \n选中图标 | \n string | \n- | \nfalse | \n
voidIcon | \n未选中图标 | \n string | \n- | \nfalse | \n
color | \n选中颜色 | \n string | \n- | \nfalse | \n
voidColor | \n未选颜色 | \n string | \n- | \nfalse | \n
disabledColor | \n禁用颜色 | \n string | \n- | \nfalse | \n
count | \n总体数量 | \n number | \n- | \nfalse | \n
gutter | \n图标间距,默认单位为 px | \n string ¦ number | \n- | \nfalse | \n
touchable | \n- | \n boolean | \n- | \nfalse | \n
onChange | \n- | \n ( e: ITouchEvent ) => any | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--rate-horizontal-padding | \n 4px; | \n
--rate-icon-size | \n 40px; | \n
--rate-icon-void-color | \n @gray-5; | \n
--rate-icon-full-color | \n @red; | \n
--rate-icon-disabled-color | \n @gray-5; | \n
--rate-icon-gutter | \n @padding-base; | \n
瀑布流组件
\n在 Taro 文件中引入组件
\nimport { WaterfallFlow } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Text } from '@tarojs/components'\nimport { WaterfallFlow } from '@antmjs/vantui'\nimport * as COMMON from './common'\nexport default function Demo() {\n const { genTextData } = COMMON\n const [list] = react.useState(genTextData('text_'))\n\n const renderItem = (item) => {\n return (\n <View style={{ background: '#EEE' }}>\n <Text>{item.content}</Text>\n </View>\n )\n }\n\n return (\n <WaterfallFlow\n dataSource={list}\n columnNum={3}\n gutter={4}\n renderItem={renderItem}\n />\n )\n}\n\n
\n/* eslint-disable */\nexport const genTextData = (keyPrefix) => {\n return [\n 'This is an text.',\n 'This is a looooooooooooooooooong text.',\n '基于有赞 VantWeapp 开发的同时支持 Taro 和 React 的 UI 库',\n '短文本',\n '数据源必须包含key字段,.',\n 'This is a loooooooooooooooooooooooooooooooong text.',\n 'This is a loooooooooooooooooooooooooooooooong text.',\n ].map((content, index) => {\n return {\n key: keyPrefix + index,\n content,\n }\n })\n}\nexport const mockGoods = () => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Array(10).fill('').map((_, index) => {\n return {\n key: index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n })\n}\n\n
\ncolumnNum 瀑布流列数,默认两列
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Text } from '@tarojs/components'\nimport { WaterfallFlow, Button } from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nexport default function Demo() {\n const { genTextData } = COMMON\n const [columnNum, setColumnNum] = react.useState(3)\n const [list] = react.useState(genTextData('daymic_'))\n\n const renderItem = (item) => {\n return (\n <View style={{ background: '#EEE' }}>\n <Text>{item.content}</Text>\n </View>\n )\n }\n\n const handleAddColumn = react.useCallback(() => {\n if (columnNum < 5) {\n setColumnNum(columnNum + 1)\n }\n }, [columnNum])\n\n const handleMinusColumn = react.useCallback(() => {\n if (columnNum > 2) {\n setColumnNum(columnNum - 1)\n }\n }, [columnNum])\n\n return (\n <>\n <WaterfallFlow\n dataSource={list}\n columnNum={columnNum}\n gutter={4}\n renderItem={renderItem}\n />\n <View style={{ display: 'flex', marginTop: '16px' }}>\n <Button onClick={handleAddColumn}>加一列</Button>\n <Button onClick={handleMinusColumn}>减一列</Button>\n </View>\n </>\n )\n}\n\n
\n/* eslint-disable */\nexport const genTextData = (keyPrefix) => {\n return [\n 'This is an text.',\n 'This is a looooooooooooooooooong text.',\n '基于有赞 VantWeapp 开发的同时支持 Taro 和 React 的 UI 库',\n '短文本',\n '数据源必须包含key字段,.',\n 'This is a loooooooooooooooooooooooooooooooong text.',\n 'This is a loooooooooooooooooooooooooooooooong text.',\n ].map((content, index) => {\n return {\n key: keyPrefix + index,\n content,\n }\n })\n}\nexport const mockGoods = () => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Array(10).fill('').map((_, index) => {\n return {\n key: index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n })\n}\n\n
\n案例
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Image as TaroImage, Text } from '@tarojs/components'\nimport { WaterfallFlow } from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nexport default function Demo() {\n const { mockGoods } = COMMON\n const [list] = react.useState(mockGoods())\n\n const renderItem = (item, forceResize) => {\n return (\n <View className="van-demo-goods-item-wrapper">\n <View className="van-demo-goods-item">\n <TaroImage\n src={item.image}\n className="img"\n onLoad={forceResize} // 当图片加载完成时触发forceResize\n />\n <View className="title">{item.title}</View>\n {item.isCutPrice && <Text className="cutPrice">最近大降价</Text>}\n <View className="price">{item.price}</View>\n </View>\n </View>\n )\n }\n\n return (\n <>\n <WaterfallFlow\n dataSource={list}\n columnNum={2}\n gutter={8}\n renderItem={renderItem}\n calculationDelay={1000}\n />\n </>\n )\n}\n\n
\n/* eslint-disable */\nexport const genTextData = (keyPrefix) => {\n return [\n 'This is an text.',\n 'This is a looooooooooooooooooong text.',\n '基于有赞 VantWeapp 开发的同时支持 Taro 和 React 的 UI 库',\n '短文本',\n '数据源必须包含key字段,.',\n 'This is a loooooooooooooooooooooooooooooooong text.',\n 'This is a loooooooooooooooooooooooooooooooong text.',\n ].map((content, index) => {\n return {\n key: keyPrefix + index,\n content,\n }\n })\n}\nexport const mockGoods = () => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Array(10).fill('').map((_, index) => {\n return {\n key: index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n })\n}\n\n
\n参数 | \n说明 | \n类型 | \n
---|---|---|
key | \n列表项的唯一标识,同 React 中的 key,必须唯一 | \n string | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
columnNum | \n瀑布流的列数 | \n number | \n2 | \nfalse | \n
dataSource | \n数据源 | \n TRecord[] | \nundefined | \ntrue | \n
renderItem | \n渲染列表项的方法 | \n ( item: TRecord, forceResize: () => void ) => React.ReactNode | \n- | \ntrue | \n
gutter | \n元素间距 | \n attr: ¦ number ¦ [number, number] | \n0 | \nfalse | \n
calculationDelay | \n延迟计算元素尺寸的时间,单位 ms | \n number | \n0 | \nfalse | \n
瀑布流组件
\n在 Taro 文件中引入组件
\nimport { WaterfallFlow } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Text } from '@tarojs/components'\nimport { WaterfallFlow } from '@antmjs/vantui'\nimport * as COMMON from './common'\nexport default function Demo() {\n const { genTextData } = COMMON\n const [list] = react.useState(genTextData('text_'))\n\n const renderItem = (item) => {\n return (\n <View style={{ background: '#EEE' }}>\n <Text>{item.content}</Text>\n </View>\n )\n }\n\n return (\n <WaterfallFlow\n dataSource={list}\n columnNum={3}\n gutter={4}\n renderItem={renderItem}\n />\n )\n}\n\n
\n/* eslint-disable */\nexport const genTextData = (keyPrefix) => {\n return [\n 'This is an text.',\n 'This is a looooooooooooooooooong text.',\n '基于有赞 VantWeapp 开发的同时支持 Taro 和 React 的 UI 库',\n '短文本',\n '数据源必须包含key字段,.',\n 'This is a loooooooooooooooooooooooooooooooong text.',\n 'This is a loooooooooooooooooooooooooooooooong text.',\n ].map((content, index) => {\n return {\n key: keyPrefix + index,\n content,\n }\n })\n}\nexport const mockGoods = () => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Array(10).fill('').map((_, index) => {\n return {\n key: index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n })\n}\n\n
\ncolumnNum 瀑布流列数,默认两列
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Text } from '@tarojs/components'\nimport { WaterfallFlow, Button } from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nexport default function Demo() {\n const { genTextData } = COMMON\n const [columnNum, setColumnNum] = react.useState(3)\n const [list] = react.useState(genTextData('daymic_'))\n\n const renderItem = (item) => {\n return (\n <View style={{ background: '#EEE' }}>\n <Text>{item.content}</Text>\n </View>\n )\n }\n\n const handleAddColumn = react.useCallback(() => {\n if (columnNum < 5) {\n setColumnNum(columnNum + 1)\n }\n }, [columnNum])\n\n const handleMinusColumn = react.useCallback(() => {\n if (columnNum > 2) {\n setColumnNum(columnNum - 1)\n }\n }, [columnNum])\n\n return (\n <>\n <WaterfallFlow\n dataSource={list}\n columnNum={columnNum}\n gutter={4}\n renderItem={renderItem}\n />\n <View style={{ display: 'flex', marginTop: '16px' }}>\n <Button onClick={handleAddColumn}>加一列</Button>\n <Button onClick={handleMinusColumn}>减一列</Button>\n </View>\n </>\n )\n}\n\n
\n/* eslint-disable */\nexport const genTextData = (keyPrefix) => {\n return [\n 'This is an text.',\n 'This is a looooooooooooooooooong text.',\n '基于有赞 VantWeapp 开发的同时支持 Taro 和 React 的 UI 库',\n '短文本',\n '数据源必须包含key字段,.',\n 'This is a loooooooooooooooooooooooooooooooong text.',\n 'This is a loooooooooooooooooooooooooooooooong text.',\n ].map((content, index) => {\n return {\n key: keyPrefix + index,\n content,\n }\n })\n}\nexport const mockGoods = () => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Array(10).fill('').map((_, index) => {\n return {\n key: index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n })\n}\n\n
\n案例
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Image as TaroImage, Text } from '@tarojs/components'\nimport { WaterfallFlow } from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nexport default function Demo() {\n const { mockGoods } = COMMON\n const [list] = react.useState(mockGoods())\n\n const renderItem = (item, forceResize) => {\n return (\n <View className="van-demo-goods-item-wrapper">\n <View className="van-demo-goods-item">\n <TaroImage\n src={item.image}\n className="img"\n onLoad={forceResize} // 当图片加载完成时触发forceResize\n />\n <View className="title">{item.title}</View>\n {item.isCutPrice && <Text className="cutPrice">最近大降价</Text>}\n <View className="price">{item.price}</View>\n </View>\n </View>\n )\n }\n\n return (\n <>\n <WaterfallFlow\n dataSource={list}\n columnNum={2}\n gutter={8}\n renderItem={renderItem}\n calculationDelay={1000}\n />\n </>\n )\n}\n\n
\n/* eslint-disable */\nexport const genTextData = (keyPrefix) => {\n return [\n 'This is an text.',\n 'This is a looooooooooooooooooong text.',\n '基于有赞 VantWeapp 开发的同时支持 Taro 和 React 的 UI 库',\n '短文本',\n '数据源必须包含key字段,.',\n 'This is a loooooooooooooooooooooooooooooooong text.',\n 'This is a loooooooooooooooooooooooooooooooong text.',\n ].map((content, index) => {\n return {\n key: keyPrefix + index,\n content,\n }\n })\n}\nexport const mockGoods = () => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Array(10).fill('').map((_, index) => {\n return {\n key: index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n })\n}\n\n
\n参数 | \n说明 | \n类型 | \n
---|---|---|
key | \n列表项的唯一标识,同 React 中的 key,必须唯一 | \n string | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
columnNum | \n瀑布流的列数 | \n number | \n2 | \nfalse | \n
dataSource | \n数据源 | \n TRecord[] | \nundefined | \ntrue | \n
renderItem | \n渲染列表项的方法 | \n ( item: TRecord, forceResize: () => void ) => React.ReactNode | \n- | \ntrue | \n
gutter | \n元素间距 | \n attr: ¦ number ¦ [number, number] | \n0 | \nfalse | \n
calculationDelay | \n延迟计算元素尺寸的时间,单位 ms | \n number | \n0 | \nfalse | \n
数字键盘,可以配合密码输入框组件或自定义的输入框组件使用
\nimport { NumberKeyboard } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Input } from '@tarojs/components'\nimport { Cell, NumberKeyboard, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [visible, setVisible] = react.useState('')\n const [value, setValue] = react.useState('')\n\n const actions = {\n onClose: () => {\n Toast.show('close')\n setVisible('')\n },\n onInput: (key) => {\n Toast.show(key)\n },\n onDelete: () => {\n Toast.show('delete')\n },\n }\n\n const onDelete = () => {\n setValue(value.slice(0, value.length - 1))\n }\n\n const onInput = (value_) => {\n setValue(value + value_)\n }\n\n return (\n <>\n <Cell title="默认键盘" onClick={() => setVisible('demo1')}></Cell>\n <Cell title="带标题键盘" onClick={() => setVisible('demo2')}></Cell>\n <Cell title="带确认键盘" onClick={() => setVisible('demo3')}></Cell>\n <Cell title="带自定义键盘" onClick={() => setVisible('demo4')}></Cell>\n <Cell title="乱序键盘" onClick={() => setVisible('demo5')}></Cell>\n <Cell title="弹窗内展示键盘" onClick={() => setVisible('demo6')}></Cell>\n <Cell onClick={() => setVisible('demo7')}>\n <Input value={value} placeholder="数字键盘结果" />\n </Cell>\n <NumberKeyboard\n visible={visible === 'demo1'}\n onClose={actions.onClose}\n onInput={actions.onInput}\n onDelete={actions.onDelete}\n />\n <NumberKeyboard\n visible={visible === 'demo2'}\n onClose={actions.onClose}\n onInput={actions.onInput}\n onDelete={actions.onDelete}\n title="数字键盘"\n customKey="-"\n />\n <NumberKeyboard\n visible={visible === 'demo3'}\n onClose={actions.onClose}\n onInput={actions.onInput}\n onDelete={actions.onDelete}\n showCloseButton={false}\n confirmText="确定"\n />\n <NumberKeyboard\n visible={visible === 'demo4'}\n onClose={actions.onClose}\n onInput={actions.onInput}\n onDelete={actions.onDelete}\n customKey="."\n showCloseButton={false}\n confirmText="确定"\n />\n <NumberKeyboard\n visible={visible === 'demo5'}\n onClose={actions.onClose}\n onInput={actions.onInput}\n onDelete={actions.onDelete}\n randomOrder\n customKey="X"\n confirmText="确定"\n />\n <NumberKeyboard\n visible={visible === 'demo6'}\n onClose={actions.onClose}\n onInput={actions.onInput}\n onDelete={actions.onDelete}\n />\n <NumberKeyboard\n visible={visible === 'demo7'}\n onClose={actions.onClose}\n onInput={onInput}\n onDelete={onDelete}\n customKey="X"\n />\n <Toast />\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
visible | \n是否展示 | \n boolean | \n- | \nfalse | \n
title | \n键盘标题 | \n ReactNode | \n- | \nfalse | \n
confirmText | \n完成按钮文案,null 不展示 | \n ReactNode ¦ null | \nnull | \nfalse | \n
customKey | \n自定义按钮 | \n "-" ¦ "." ¦ "X" | \n- | \nfalse | \n
randomOrder | \n是否乱序键盘 | \n boolean | \nfalse | \nfalse | \n
showCloseButton | \n是否展示收起键盘箭头 | \n boolean | \ntrue | \nfalse | \n
onInput | \n输入内容回调 | \n ( v: string ) => void | \ntrue | \nfalse | \n
onDelete | \n删除内容回调 | \n () => void | \n- | \nfalse | \n
onClose | \n点击关闭时触发 | \n () => void | \n- | \nfalse | \n
onConfirm | \n点击确定按钮时触发 | \n () => void | \n- | \nfalse | \n
afterClose | \n键盘完全收起回调 | \n () => void | \n- | \nfalse | \n
closeOnConfirm | \n是否在点击确定按钮时自动关闭 | \n boolean | \ntrue | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--number-keyboard-sign-background-color | \n #eeeeee; | \n
--number-keyboard-week-color | \n #999; | \n
数字键盘,可以配合密码输入框组件或自定义的输入框组件使用
\nimport { NumberKeyboard } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Input } from '@tarojs/components'\nimport { Cell, NumberKeyboard, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [visible, setVisible] = react.useState('')\n const [value, setValue] = react.useState('')\n\n const actions = {\n onClose: () => {\n Toast.show('close')\n setVisible('')\n },\n onInput: (key) => {\n Toast.show(key)\n },\n onDelete: () => {\n Toast.show('delete')\n },\n }\n\n const onDelete = () => {\n setValue(value.slice(0, value.length - 1))\n }\n\n const onInput = (value_) => {\n setValue(value + value_)\n }\n\n return (\n <>\n <Cell title="默认键盘" onClick={() => setVisible('demo1')}></Cell>\n <Cell title="带标题键盘" onClick={() => setVisible('demo2')}></Cell>\n <Cell title="带确认键盘" onClick={() => setVisible('demo3')}></Cell>\n <Cell title="带自定义键盘" onClick={() => setVisible('demo4')}></Cell>\n <Cell title="乱序键盘" onClick={() => setVisible('demo5')}></Cell>\n <Cell title="弹窗内展示键盘" onClick={() => setVisible('demo6')}></Cell>\n <Cell onClick={() => setVisible('demo7')}>\n <Input value={value} placeholder="数字键盘结果" />\n </Cell>\n <NumberKeyboard\n visible={visible === 'demo1'}\n onClose={actions.onClose}\n onInput={actions.onInput}\n onDelete={actions.onDelete}\n />\n <NumberKeyboard\n visible={visible === 'demo2'}\n onClose={actions.onClose}\n onInput={actions.onInput}\n onDelete={actions.onDelete}\n title="数字键盘"\n customKey="-"\n />\n <NumberKeyboard\n visible={visible === 'demo3'}\n onClose={actions.onClose}\n onInput={actions.onInput}\n onDelete={actions.onDelete}\n showCloseButton={false}\n confirmText="确定"\n />\n <NumberKeyboard\n visible={visible === 'demo4'}\n onClose={actions.onClose}\n onInput={actions.onInput}\n onDelete={actions.onDelete}\n customKey="."\n showCloseButton={false}\n confirmText="确定"\n />\n <NumberKeyboard\n visible={visible === 'demo5'}\n onClose={actions.onClose}\n onInput={actions.onInput}\n onDelete={actions.onDelete}\n randomOrder\n customKey="X"\n confirmText="确定"\n />\n <NumberKeyboard\n visible={visible === 'demo6'}\n onClose={actions.onClose}\n onInput={actions.onInput}\n onDelete={actions.onDelete}\n />\n <NumberKeyboard\n visible={visible === 'demo7'}\n onClose={actions.onClose}\n onInput={onInput}\n onDelete={onDelete}\n customKey="X"\n />\n <Toast />\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
visible | \n是否展示 | \n boolean | \n- | \nfalse | \n
title | \n键盘标题 | \n ReactNode | \n- | \nfalse | \n
confirmText | \n完成按钮文案,null 不展示 | \n ReactNode ¦ null | \nnull | \nfalse | \n
customKey | \n自定义按钮 | \n "-" ¦ "." ¦ "X" | \n- | \nfalse | \n
randomOrder | \n是否乱序键盘 | \n boolean | \nfalse | \nfalse | \n
showCloseButton | \n是否展示收起键盘箭头 | \n boolean | \ntrue | \nfalse | \n
onInput | \n输入内容回调 | \n ( v: string ) => void | \ntrue | \nfalse | \n
onDelete | \n删除内容回调 | \n () => void | \n- | \nfalse | \n
onClose | \n点击关闭时触发 | \n () => void | \n- | \nfalse | \n
onConfirm | \n点击确定按钮时触发 | \n () => void | \n- | \nfalse | \n
afterClose | \n键盘完全收起回调 | \n () => void | \n- | \nfalse | \n
closeOnConfirm | \n是否在点击确定按钮时自动关闭 | \n boolean | \ntrue | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--number-keyboard-sign-background-color | \n #eeeeee; | \n
--number-keyboard-week-color | \n #999; | \n
弹出模态框,常用于消息提示、消息确认,或在当前页面内完成特定的交互操作,支持函数调用和组件调用两种方式。
\n\n\n注意:1.8.0 以下的版本取消按钮会触发 catch。1.8.0 及以后的版本取消按钮会触发 then 需要通过返回的 value 为 confirm 或者 cancel 来判断是否点了确认还是取消
\n
在 Taro 文件中引入组件
\nimport { Dialog } from '@antmjs/vantui'\n
\n案例
\n/* eslint-disable */\nimport react from 'react'\nimport { Input, View } from '@tarojs/components'\nimport { Dialog, Cell } from '@antmjs/vantui'\n\nconst Dialog_ = Dialog.createOnlyDialog()\nexport default function Demo() {\n const [value, setValue] = react.useState('')\n const alert = react.useCallback((title) => {\n Dialog_.alert({\n title: title || '',\n message: '弹窗内容',\n }).then((value) => {\n console.log('dialog result', value)\n })\n }, [])\n\n const confirm = react.useCallback(() => {\n Dialog_.confirm({\n title: '标题',\n message: (\n <Input\n placeholder="请输入内容"\n value={value}\n onInput={(e) => setValue(e.detail.value)}\n />\n ),\n }).then((value) => {\n console.log('dialog result', value)\n })\n }, [value])\n\n return (\n <View>\n <Dialog_ />\n <Cell title="提示弹窗" onClick={() => alert('提示一下')} />\n <Cell title="提示弹窗(无标题)" onClick={() => alert('123')} />\n <Cell title="确认弹窗" onClick={confirm} />\n </View>\n )\n}\n\n
\n将 theme 选项设置为 roundButton
可以展示圆角按钮风格的弹窗。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Dialog, Cell } from '@antmjs/vantui'\n\nconst Dialog_ = Dialog.createOnlyDialog()\n\nexport default function Demo() {\n const alert = react.useCallback((title) => {\n Dialog_.alert({\n title: title || '',\n message: '弹窗内容',\n theme: 'round-button',\n }).then((value) => {\n console.log('dialog result', value)\n })\n }, [])\n\n return (\n <View>\n <Dialog_ />\n <Cell title="提示弹窗" onClick={() => alert('提示一下')} />\n <Cell title="提示弹窗(无标题)" onClick={() => alert('123')} />\n </View>\n )\n}\n\n
\n通过 beforeClose
属性可以传入一个回调函数,在弹窗关闭前进行特定操作。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Dialog, Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n const alert = react.useCallback((title) => {\n const beforeClose = (action: string): Promise<boolean> => {\n return new Promise((resolve) => {\n setTimeout(() => {\n if (action === 'confirm') {\n resolve(true)\n } else {\n // 拦截取消操作\n resolve(false)\n }\n }, 1000)\n })\n }\n Dialog.alert({\n title: title || '',\n message: '弹窗内容',\n theme: 'round-button',\n selector: 'vanDialog2',\n beforeClose,\n asyncClose: true,\n }).then((value) => {\n console.log('dialog result11', value)\n })\n }, [])\n\n return (\n <View>\n <Dialog id="vanDialog2" />\n <Cell title="异步关闭" onClick={() => alert('点击等待1s关闭')} />\n </View>\n )\n}\n\n
\n如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Input } from '@tarojs/components'\nimport { Dialog, Image, Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [value, setValue] = react.useState('')\n\n return (\n <View>\n <Dialog\n id="vanDialog3"\n title="标题"\n showCancelButton\n confirmButtonOpenType="getUserInfo"\n show={show}\n onClose={() => setShow(false)}\n >\n {value}\n <Input\n placeholder="请输入内容"\n onInput={(e) => setValue(e.detail.value)}\n />\n <Image\n className="demo-image"\n height="240px"\n src="https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg"\n ></Image>\n </Dialog>\n <Cell title="组件调用" onClick={() => setShow(true)} />\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
show | \n- | \n boolean | \n- | \nfalse | \n
title | \n- | \n ReactNode | \n- | \nfalse | \n
width | \n- | \n string ¦ number | \n- | \nfalse | \n
zIndex | \n- | \n number | \n- | \nfalse | \n
theme | \n- | \n "round-button" | \n- | \nfalse | \n
cancelButtonColor | \n- | \n string | \n- | \nfalse | \n
confirmButtonColor | \n- | \n string | \n- | \nfalse | \n
onConfirm | \n- | \n (event: { detail: { action: string dialog?: { dialog: any } } }) => void | \n- | \nfalse | \n
onCancel | \n- | \n (event: { detail: { action: string dialog?: { dialog: any } } }) => void | \n- | \nfalse | \n
onClose | \n- | \n (event: { detail: string }) => void | \n- | \nfalse | \n
message | \n- | \n ReactNode | \n- | \nfalse | \n
overlay | \n- | \n boolean | \n- | \nfalse | \n
selector | \n- | \n string | \n- | \nfalse | \n
ariaLabel | \n- | \n string | \n- | \nfalse | \n
className | \n- | \n string | \n- | \nfalse | \n
style | \n- | \n string | \n- | \nfalse | \n
transition | \n- | \n "fade" ¦ "none" | \n- | \nfalse | \n
asyncClose | \n- | \n boolean | \n- | \nfalse | \n
beforeClose | \n- | \n ( action: string ) => ¦ Promise< void ¦ boolean > ¦ void ¦ boolean | \n- | \nfalse | \n
messageAlign | \n- | \n "left" ¦ "right" | \n- | \nfalse | \n
confirmButtonText | \n- | \n ReactNode | \n- | \nfalse | \n
cancelButtonText | \n- | \n ReactNode | \n- | \nfalse | \n
showConfirmButton | \n- | \n boolean | \n- | \nfalse | \n
showCancelButton | \n- | \n boolean | \n- | \nfalse | \n
closeOnClickOverlay | \n- | \n boolean | \n- | \nfalse | \n
confirmButtonOpenType | \n- | \n TaroButtonProps.OpenType | \n- | \nfalse | \n
renderTitle | \n- | \n ReactNode | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
alert | \n- | \n ( options: DialogProps ) => Promise< "confirm" ¦ "cancel" > | \n- | \ntrue | \n
confirm | \n- | \n ( options: DialogProps ) => Promise< "confirm" ¦ "cancel" > | \n- | \ntrue | \n
setDefaultOptions | \n- | \n ( options: DialogProps ) => void | \n- | \ntrue | \n
resetDefaultOptions | \n- | \n () => void | \n- | \ntrue | \n
close | \n- | \n () => void | \n- | \ntrue | \n
stopLoading | \n- | \n () => void | \n- | \ntrue | \n
createOnlyDialog | \n创建唯一的 Dialog, 命令式调用不需要设置 selector 和 id | \n () => FunctionComponent dialogProps | \n- | \ntrue | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--dialog-width | \n 640px; | \n
--dialog-small-screen-width | \n 90%; | \n
--dialog-font-size | \n @font-size-lg; | \n
--dialog-border-radius | \n 32px; | \n
--dialog-background-color | \n @white; | \n
--dialog-header-font-weight | \n @font-weight-bold; | \n
--dialog-header-line-height | \n 48px; | \n
--dialog-header-padding-top | \n @padding-lg; | \n
--dialog-header-isolated-padding | \n @padding-lg 0; | \n
--dialog-message-padding | \n @padding-lg; | \n
--dialog-message-font-size | \n @font-size-md; | \n
--dialog-message-line-height | \n 40px; | \n
--dialog-message-max-height | \n 60vh; | \n
--dialog-has-title-message-text-color | \n @gray-7; | \n
--dialog-has-title-message-padding-top | \n @padding-xs; | \n
--dialog-cancel-button-color | \n @gray-7; | \n
--dialog-confirm-button-color | \n @text-link-color; | \n
弹出模态框,常用于消息提示、消息确认,或在当前页面内完成特定的交互操作,支持函数调用和组件调用两种方式。
\n\n\n注意:1.8.0 以下的版本取消按钮会触发 catch。1.8.0 及以后的版本取消按钮会触发 then 需要通过返回的 value 为 confirm 或者 cancel 来判断是否点了确认还是取消
\n
在 Taro 文件中引入组件
\nimport { Dialog } from '@antmjs/vantui'\n
\n案例
\n/* eslint-disable */\nimport react from 'react'\nimport { Input, View } from '@tarojs/components'\nimport { Dialog, Cell } from '@antmjs/vantui'\n\nconst Dialog_ = Dialog.createOnlyDialog()\nexport default function Demo() {\n const [value, setValue] = react.useState('')\n const alert = react.useCallback((title) => {\n Dialog_.alert({\n title: title || '',\n message: '弹窗内容',\n }).then((value) => {\n console.log('dialog result', value)\n })\n }, [])\n\n const confirm = react.useCallback(() => {\n Dialog_.confirm({\n title: '标题',\n message: (\n <Input\n placeholder="请输入内容"\n value={value}\n onInput={(e) => setValue(e.detail.value)}\n />\n ),\n }).then((value) => {\n console.log('dialog result', value)\n })\n }, [value])\n\n return (\n <View>\n <Dialog_ />\n <Cell title="提示弹窗" onClick={() => alert('提示一下')} />\n <Cell title="提示弹窗(无标题)" onClick={() => alert('123')} />\n <Cell title="确认弹窗" onClick={confirm} />\n </View>\n )\n}\n\n
\n将 theme 选项设置为 roundButton
可以展示圆角按钮风格的弹窗。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Dialog, Cell } from '@antmjs/vantui'\n\nconst Dialog_ = Dialog.createOnlyDialog()\n\nexport default function Demo() {\n const alert = react.useCallback((title) => {\n Dialog_.alert({\n title: title || '',\n message: '弹窗内容',\n theme: 'round-button',\n }).then((value) => {\n console.log('dialog result', value)\n })\n }, [])\n\n return (\n <View>\n <Dialog_ />\n <Cell title="提示弹窗" onClick={() => alert('提示一下')} />\n <Cell title="提示弹窗(无标题)" onClick={() => alert('123')} />\n </View>\n )\n}\n\n
\n通过 beforeClose
属性可以传入一个回调函数,在弹窗关闭前进行特定操作。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Dialog, Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n const alert = react.useCallback((title) => {\n const beforeClose = (action: string): Promise<boolean> => {\n return new Promise((resolve) => {\n setTimeout(() => {\n if (action === 'confirm') {\n resolve(true)\n } else {\n // 拦截取消操作\n resolve(false)\n }\n }, 1000)\n })\n }\n Dialog.alert({\n title: title || '',\n message: '弹窗内容',\n theme: 'round-button',\n selector: 'vanDialog2',\n beforeClose,\n asyncClose: true,\n }).then((value) => {\n console.log('dialog result11', value)\n })\n }, [])\n\n return (\n <View>\n <Dialog id="vanDialog2" />\n <Cell title="异步关闭" onClick={() => alert('点击等待1s关闭')} />\n </View>\n )\n}\n\n
\n如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Input } from '@tarojs/components'\nimport { Dialog, Image, Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [value, setValue] = react.useState('')\n\n return (\n <View>\n <Dialog\n id="vanDialog3"\n title="标题"\n showCancelButton\n confirmButtonOpenType="getUserInfo"\n show={show}\n onClose={() => setShow(false)}\n >\n {value}\n <Input\n placeholder="请输入内容"\n onInput={(e) => setValue(e.detail.value)}\n />\n <Image\n className="demo-image"\n height="240px"\n src="https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg"\n ></Image>\n </Dialog>\n <Cell title="组件调用" onClick={() => setShow(true)} />\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
show | \n- | \n boolean | \n- | \nfalse | \n
title | \n- | \n ReactNode | \n- | \nfalse | \n
width | \n- | \n string ¦ number | \n- | \nfalse | \n
zIndex | \n- | \n number | \n- | \nfalse | \n
theme | \n- | \n "round-button" | \n- | \nfalse | \n
cancelButtonColor | \n- | \n string | \n- | \nfalse | \n
confirmButtonColor | \n- | \n string | \n- | \nfalse | \n
onConfirm | \n- | \n (event: { detail: { action: string dialog?: { dialog: any } } }) => void | \n- | \nfalse | \n
onCancel | \n- | \n (event: { detail: { action: string dialog?: { dialog: any } } }) => void | \n- | \nfalse | \n
onClose | \n- | \n (event: { detail: string }) => void | \n- | \nfalse | \n
message | \n- | \n ReactNode | \n- | \nfalse | \n
overlay | \n- | \n boolean | \n- | \nfalse | \n
selector | \n- | \n string | \n- | \nfalse | \n
ariaLabel | \n- | \n string | \n- | \nfalse | \n
className | \n- | \n string | \n- | \nfalse | \n
style | \n- | \n string | \n- | \nfalse | \n
transition | \n- | \n "fade" ¦ "none" | \n- | \nfalse | \n
asyncClose | \n- | \n boolean | \n- | \nfalse | \n
beforeClose | \n- | \n ( action: string ) => ¦ Promise< void ¦ boolean > ¦ void ¦ boolean | \n- | \nfalse | \n
messageAlign | \n- | \n "left" ¦ "right" | \n- | \nfalse | \n
confirmButtonText | \n- | \n ReactNode | \n- | \nfalse | \n
cancelButtonText | \n- | \n ReactNode | \n- | \nfalse | \n
showConfirmButton | \n- | \n boolean | \n- | \nfalse | \n
showCancelButton | \n- | \n boolean | \n- | \nfalse | \n
closeOnClickOverlay | \n- | \n boolean | \n- | \nfalse | \n
confirmButtonOpenType | \n- | \n TaroButtonProps.OpenType | \n- | \nfalse | \n
renderTitle | \n- | \n ReactNode | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
alert | \n- | \n ( options: DialogProps ) => Promise< "confirm" ¦ "cancel" > | \n- | \ntrue | \n
confirm | \n- | \n ( options: DialogProps ) => Promise< "confirm" ¦ "cancel" > | \n- | \ntrue | \n
setDefaultOptions | \n- | \n ( options: DialogProps ) => void | \n- | \ntrue | \n
resetDefaultOptions | \n- | \n () => void | \n- | \ntrue | \n
close | \n- | \n () => void | \n- | \ntrue | \n
stopLoading | \n- | \n () => void | \n- | \ntrue | \n
createOnlyDialog | \n创建唯一的 Dialog, 命令式调用不需要设置 selector 和 id | \n () => FunctionComponent dialogProps | \n- | \ntrue | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--dialog-width | \n 640px; | \n
--dialog-small-screen-width | \n 90%; | \n
--dialog-font-size | \n @font-size-lg; | \n
--dialog-border-radius | \n 32px; | \n
--dialog-background-color | \n @white; | \n
--dialog-header-font-weight | \n @font-weight-bold; | \n
--dialog-header-line-height | \n 48px; | \n
--dialog-header-padding-top | \n @padding-lg; | \n
--dialog-header-isolated-padding | \n @padding-lg 0; | \n
--dialog-message-padding | \n @padding-lg; | \n
--dialog-message-font-size | \n @font-size-md; | \n
--dialog-message-line-height | \n 40px; | \n
--dialog-message-max-height | \n 60vh; | \n
--dialog-has-title-message-text-color | \n @gray-7; | \n
--dialog-has-title-message-padding-top | \n @padding-xs; | \n
--dialog-cancel-button-color | \n @gray-7; | \n
--dialog-confirm-button-color | \n @text-link-color; | \n
这篇指南会指导你如何为 vantui 贡献一份自己的力量,请在你要提 issue 或者 pull request 之前花几分钟来阅读一遍这篇指南
\n我们使用 GitHub Issues 来做 bug 追踪。 如果你想要你发现的 bug 被快速解决,按照给定的issue 模板,向我们提供问题的复现过程、平台和环境等信息
\n如果你有改进我们的 API 或者新增功能的想法, 按照给定的issue 模板,向我们提供具体的需求
\n如果你还不清楚怎么在 GitHub 上提 Pull Request ,可以阅读下面这篇文章来学习:\n如何优雅地在 GitHub 上贡献代码
\nyarn
安装所有依赖后
packages/vantui-cli
下执行: yarn build
packages/vantui
下执行: yarn watch
packages/vantui-demo
下执行: yarn watch: [xx平台]
module.exports = {\n // ::::_QA@octokit/core::::_QA的auth参数,用于release,需要有主干main分支权限\n gitAuth: 'xxxxx',\n // 钉钉webhooks的token, 需要向管理者索要 , 提交代码时通知群内成员package.json等文件的更改\n webhooksToken: 'xxxxx',\n}\n
\neslint
后git commit -m xxxxmessage -n
强制提交message
须按照下面规范, 如新功能git commit -m "feat:xxxx" -n
{\n "feat": {\n "description": "新功能(feature)"\n },\n "fix": {\n "description": "修补bug"\n },\n "style": {\n "description": "格式(不影响代码运行的变动)"\n },\n "chore": {\n "description": "构建过程或辅助工具的变动"\n },\n "typings": {\n "description": "Typescript 类型错误"\n },\n "docs": {\n "description": "文档(documentation)"\n },\n "refactor": {\n "description": "重构(既不是新增功能,也不是修改bug的代码变动)"\n },\n "test": {\n "description": "增加或修改测试用例"\n }\n}\n
\n如果需要更改或新建组件文档的 API,请阅读ts 同步到文档说明
\n这篇指南会指导你如何为 vantui 贡献一份自己的力量,请在你要提 issue 或者 pull request 之前花几分钟来阅读一遍这篇指南
\n我们使用 GitHub Issues 来做 bug 追踪。 如果你想要你发现的 bug 被快速解决,按照给定的issue 模板,向我们提供问题的复现过程、平台和环境等信息
\n如果你有改进我们的 API 或者新增功能的想法, 按照给定的issue 模板,向我们提供具体的需求
\n如果你还不清楚怎么在 GitHub 上提 Pull Request ,可以阅读下面这篇文章来学习:\n如何优雅地在 GitHub 上贡献代码
\nyarn
安装所有依赖后
packages/vantui-cli
下执行: yarn build
packages/vantui
下执行: yarn watch
packages/vantui-demo
下执行: yarn watch: [xx平台]
module.exports = {\n // ::::_QA@octokit/core::::_QA的auth参数,用于release,需要有主干main分支权限\n gitAuth: 'xxxxx',\n // 钉钉webhooks的token, 需要向管理者索要 , 提交代码时通知群内成员package.json等文件的更改\n webhooksToken: 'xxxxx',\n}\n
\neslint
后git commit -m xxxxmessage -n
强制提交message
须按照下面规范, 如新功能git commit -m "feat:xxxx" -n
{\n "feat": {\n "description": "新功能(feature)"\n },\n "fix": {\n "description": "修补bug"\n },\n "style": {\n "description": "格式(不影响代码运行的变动)"\n },\n "chore": {\n "description": "构建过程或辅助工具的变动"\n },\n "typings": {\n "description": "Typescript 类型错误"\n },\n "docs": {\n "description": "文档(documentation)"\n },\n "refactor": {\n "description": "重构(既不是新增功能,也不是修改bug的代码变动)"\n },\n "test": {\n "description": "增加或修改测试用例"\n }\n}\n
\n如果需要更改或新建组件文档的 API,请阅读ts 同步到文档说明
\n用于搜索场景的输入框组件。
\n在 Taro 文件中引入组件
\nimport { Search } from '@antmjs/vantui'\n
\nvanSearch
中,value 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
import { Search } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Search placeholder="请输入搜索关键词" />\n}\n\n
\nvanSearch
提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。
import { Search, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n const onSearch = (e) => {\n Toast.show(::::_QAsearch: ::::_ABe.detail}::::_QA)\n }\n const onCancel = () => {\n Toast.show(::::_QAonCancel::::_QA)\n }\n return (\n <>\n <Search\n placeholder="请输入搜索关键词"\n showAction\n onSearch={onSearch}\n onCancel={onCancel}\n />\n <Toast />\n </>\n )\n}\n\n
\n通过 inputAlign
属性可以设置搜索框内容的对齐方式。
import { Search } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Search placeholder="请输入搜索关键词" inputAlign="center" />\n}\n\n
\n通过 disabled
属性可以将组件设置为禁用状态。
import { Search } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Search disabled placeholder="请输入搜索关键词" />\n}\n\n
\n通过background
属性可以设置搜索框外部的背景色,通过shape
属性设置搜索框的形状,可选值为round
。
import { Search } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Search shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Search, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState('')\n const onSearch = (e) => {\n Toast.show(::::_QAsearch: ::::_ABe.detail}::::_QA)\n }\n\n const searchAction = () => {\n Toast.show(::::_QAsearch: ::::_ABvalue}::::_QA)\n }\n\n return (\n <>\n <Search\n onChange={(e) => setValue(e.detail)}\n placeholder="请输入搜索关键词"\n onSearch={onSearch}\n renderAction={<View onClick={searchAction}>搜索</View>}\n />\n <Toast />\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
value | \n- | \n string ¦ number | \n- | \nfalse | \n
defaultValue | \n- | \n string ¦ number | \n- | \nfalse | \n
label | \n- | \n string | \n- | \nfalse | \n
focus | \n- | \n boolean | \n- | \nfalse | \n
error | \n- | \n boolean | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
readonly | \n- | \n boolean | \n- | \nfalse | \n
inputAlign | \n- | \n string | \n- | \nfalse | \n
showAction | \n- | \n boolean | \n- | \nfalse | \n
leftIcon | \n- | \n string | \n- | \nfalse | \n
rightIcon | \n- | \n string | \n- | \nfalse | \n
placeholder | \n- | \n string | \n- | \nfalse | \n
placeholderStyle | \n- | \n string | \n- | \nfalse | \n
actionText | \n- | \n string | \n- | \nfalse | \n
background | \n- | \n string | \n- | \nfalse | \n
maxlength | \n- | \n number | \n- | \nfalse | \n
shape | \n- | \n string | \n- | \nfalse | \n
clearable | \n- | \n boolean | \n- | \nfalse | \n
clearTrigger | \n- | \n string | \n- | \nfalse | \n
clearIcon | \n- | \n string | \n- | \nfalse | \n
renderLabel | \n- | \n ReactNode | \n- | \nfalse | \n
renderLeftIcon | \n- | \n ReactNode | \n- | \nfalse | \n
renderRightIcon | \n- | \n ReactNode | \n- | \nfalse | \n
renderAction | \n- | \n ReactNode | \n- | \nfalse | \n
onChange | \n- | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onSearch | \n- | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onFocus | \n- | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onBlur | \n- | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onClear | \n- | \n () => void | \n- | \nfalse | \n
onCancel | \n- | \n () => void | \n- | \nfalse | \n
onClickInput | \n- | \n () => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--search-background-color | \n @gray-1; | \n
--search-padding | \n 20px @padding-sm; | \n
--search-input-height | \n 68px; | \n
--search-label-padding | \n 0 10px; | \n
--search-label-color | \n @text-color; | \n
--search-label-font-size | \n @font-size-md; | \n
--search-left-icon-color | \n @gray-6; | \n
--search-action-padding | \n 0 @padding-xs; | \n
--search-action-text-color | \n @text-color; | \n
--search-action-font-size | \n @font-size-md; | \n
用于搜索场景的输入框组件。
\n在 Taro 文件中引入组件
\nimport { Search } from '@antmjs/vantui'\n
\nvanSearch
中,value 用于控制搜索框中的文字。background 可以自定义搜索框外部背景色。
import { Search } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Search placeholder="请输入搜索关键词" />\n}\n\n
\nvanSearch
提供了 search 和 cancel 事件。search 事件在用户点击键盘上的搜索按钮触发。cancel 事件在用户点击搜索框右侧取消按钮时触发。
import { Search, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n const onSearch = (e) => {\n Toast.show(::::_QAsearch: ::::_ABe.detail}::::_QA)\n }\n const onCancel = () => {\n Toast.show(::::_QAonCancel::::_QA)\n }\n return (\n <>\n <Search\n placeholder="请输入搜索关键词"\n showAction\n onSearch={onSearch}\n onCancel={onCancel}\n />\n <Toast />\n </>\n )\n}\n\n
\n通过 inputAlign
属性可以设置搜索框内容的对齐方式。
import { Search } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Search placeholder="请输入搜索关键词" inputAlign="center" />\n}\n\n
\n通过 disabled
属性可以将组件设置为禁用状态。
import { Search } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Search disabled placeholder="请输入搜索关键词" />\n}\n\n
\n通过background
属性可以设置搜索框外部的背景色,通过shape
属性设置搜索框的形状,可选值为round
。
import { Search } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Search shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Search, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState('')\n const onSearch = (e) => {\n Toast.show(::::_QAsearch: ::::_ABe.detail}::::_QA)\n }\n\n const searchAction = () => {\n Toast.show(::::_QAsearch: ::::_ABvalue}::::_QA)\n }\n\n return (\n <>\n <Search\n onChange={(e) => setValue(e.detail)}\n placeholder="请输入搜索关键词"\n onSearch={onSearch}\n renderAction={<View onClick={searchAction}>搜索</View>}\n />\n <Toast />\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
value | \n- | \n string ¦ number | \n- | \nfalse | \n
defaultValue | \n- | \n string ¦ number | \n- | \nfalse | \n
label | \n- | \n string | \n- | \nfalse | \n
focus | \n- | \n boolean | \n- | \nfalse | \n
error | \n- | \n boolean | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
readonly | \n- | \n boolean | \n- | \nfalse | \n
inputAlign | \n- | \n string | \n- | \nfalse | \n
showAction | \n- | \n boolean | \n- | \nfalse | \n
leftIcon | \n- | \n string | \n- | \nfalse | \n
rightIcon | \n- | \n string | \n- | \nfalse | \n
placeholder | \n- | \n string | \n- | \nfalse | \n
placeholderStyle | \n- | \n string | \n- | \nfalse | \n
actionText | \n- | \n string | \n- | \nfalse | \n
background | \n- | \n string | \n- | \nfalse | \n
maxlength | \n- | \n number | \n- | \nfalse | \n
shape | \n- | \n string | \n- | \nfalse | \n
clearable | \n- | \n boolean | \n- | \nfalse | \n
clearTrigger | \n- | \n string | \n- | \nfalse | \n
clearIcon | \n- | \n string | \n- | \nfalse | \n
renderLabel | \n- | \n ReactNode | \n- | \nfalse | \n
renderLeftIcon | \n- | \n ReactNode | \n- | \nfalse | \n
renderRightIcon | \n- | \n ReactNode | \n- | \nfalse | \n
renderAction | \n- | \n ReactNode | \n- | \nfalse | \n
onChange | \n- | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onSearch | \n- | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onFocus | \n- | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onBlur | \n- | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onClear | \n- | \n () => void | \n- | \nfalse | \n
onCancel | \n- | \n () => void | \n- | \nfalse | \n
onClickInput | \n- | \n () => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--search-background-color | \n @gray-1; | \n
--search-padding | \n 20px @padding-sm; | \n
--search-input-height | \n 68px; | \n
--search-label-padding | \n 0 10px; | \n
--search-label-color | \n @text-color; | \n
--search-label-font-size | \n @font-size-md; | \n
--search-left-icon-color | \n @gray-6; | \n
--search-action-padding | \n 0 @padding-xs; | \n
--search-action-text-color | \n @text-color; | \n
--search-action-font-size | \n @font-size-md; | \n
在一组备选项中进行单选。
\n在 Taro 文件中引入组件
\nimport { Radio, RadioGroup } from '@antmjs/vantui'\n
\n通过value
绑定值当前选中项的 name 。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup value={value} onChange={(e) => setValue(e.detail)}>\n <Radio name="1">单选框 1</Radio>\n <Radio name="2">单选框 2</Radio>\n </RadioGroup>\n )\n}\n
\n将direction
属性设置为horizontal
后,单选框组会变成水平排列。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup\n direction="horizontal"\n value={value}\n onChange={(e) => setValue(e.detail)}\n >\n <Radio name="1">单选框 1</Radio>\n <Radio name="2">单选框 2</Radio>\n </RadioGroup>\n )\n}\n
\n通过disabled
属性禁止选项切换,在Radio
上设置diabled
可以禁用单个选项。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup disabled value={value} onChange={(e) => setValue(e.detail)}>\n <Radio name="1">单选框 1</Radio>\n <Radio name="2">单选框 2</Radio>\n </RadioGroup>\n )\n}\n
\n将shape
属性设置为square
,单选框的形状会变成方形。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup value={value} onChange={(e) => setValue(e.detail)}>\n <Radio name="1" shape="square">\n 单选框 1\n </Radio>\n <Radio name="2" shape="square">\n 单选框 2\n </Radio>\n </RadioGroup>\n )\n}\n
\n通过checkedColor
属性设置选中状态的图标颜色。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup value={value} onChange={(e) => setValue(e.detail)}>\n <Radio name="1" checkedColor="#07c160" shape="square">\n 单选框 1\n </Radio>\n <Radio name="2" checkedColor="#07c160" shape="square">\n 单选框 2\n </Radio>\n </RadioGroup>\n )\n}\n
\n通过iconSize
属性可以自定义图标的大小。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup value={value} onChange={(e) => setValue(e.detail)}>\n <Radio name="1" iconSize="24px" shape="square">\n 单选框 1\n </Radio>\n <Radio name="2" iconSize="24px" shape="square">\n 单选框 2\n </Radio>\n </RadioGroup>\n )\n}\n
\nfunction Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup value={value} onChange={(e) => setValue(e.detail)}>\n <Radio\n name="1"\n renderIcon={\n <Image\n style={{ width: '32px', height: '32px' }}\n src={\n value === '2'\n ? 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png'\n : 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'\n }\n />\n }\n shape="square"\n >\n 单选框 1\n </Radio>\n <Radio\n name="2"\n renderIcon={\n <Image\n style={{ width: '32px', height: '32px' }}\n src={\n value === '1'\n ? 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png'\n : 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'\n }\n />\n }\n shape="square"\n >\n 单选框 2\n </Radio>\n </RadioGroup>\n )\n}\n
\n通过设置labelDisabled
属性可以禁用单选框文本点击。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup\n direction="horizontal"\n value={value}\n onChange={(e) => setValue(e.detail)}\n >\n <Radio name="1" labelDisabled>\n 单选框 1\n </Radio>\n <Radio name="2" labelDisabled>\n 单选框 2\n </Radio>\n </RadioGroup>\n )\n}\n
\n此时你需要再引入Cell
和CellGroup
组件。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup value={value}>\n <CellGroup>\n <Cell\n title="单选框 1"\n clickable\n onClick={() => setValue('1')}\n renderRightIcon={<Radio name="1"></Radio>}\n ></Cell>\n <Cell\n title="单选框 2"\n clickable\n onClick={() => setValue('2')}\n renderRightIcon={<Radio name="2"></Radio>}\n ></Cell>\n </CellGroup>\n </RadioGroup>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
name | \n- | \n string ¦ number | \n- | \nfalse | \n
value | \n- | \n any | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
checkedColor | \n- | \n string | \n- | \nfalse | \n
labelPosition | \n- | \n string | \n- | \nfalse | \n
labelDisabled | \n- | \n boolean | \n- | \nfalse | \n
shape | \n- | \n "round" ¦ "square" | \n- | \nfalse | \n
iconSize | \n- | \n number ¦ string | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
renderIcon | \n- | \n ReactNode | \n- | \nfalse | \n
onChange | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
value | \n- | \n any | \n- | \nfalse | \n
direction | \n- | \n attr: ¦ "vertical" ¦ "horizontal" | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onChange | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--radio-size | \n 40px; | \n
--radio-border-color | \n @gray-5; | \n
--radio-transition-duration | \n 0.2s; | \n
--radio-label-margin | \n 20px; | \n
--radio-label-color | \n @text-color; | \n
--radio-checked-icon-color | \n var(--primary-color); | \n
--radio-disabled-icon-color | \n @gray-5; | \n
--radio-disabled-label-color | \n @gray-5; | \n
--radio-disabled-background-color | \n @border-color; | \n
在一组备选项中进行单选。
\n在 Taro 文件中引入组件
\nimport { Radio, RadioGroup } from '@antmjs/vantui'\n
\n通过value
绑定值当前选中项的 name 。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup value={value} onChange={(e) => setValue(e.detail)}>\n <Radio name="1">单选框 1</Radio>\n <Radio name="2">单选框 2</Radio>\n </RadioGroup>\n )\n}\n
\n将direction
属性设置为horizontal
后,单选框组会变成水平排列。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup\n direction="horizontal"\n value={value}\n onChange={(e) => setValue(e.detail)}\n >\n <Radio name="1">单选框 1</Radio>\n <Radio name="2">单选框 2</Radio>\n </RadioGroup>\n )\n}\n
\n通过disabled
属性禁止选项切换,在Radio
上设置diabled
可以禁用单个选项。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup disabled value={value} onChange={(e) => setValue(e.detail)}>\n <Radio name="1">单选框 1</Radio>\n <Radio name="2">单选框 2</Radio>\n </RadioGroup>\n )\n}\n
\n将shape
属性设置为square
,单选框的形状会变成方形。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup value={value} onChange={(e) => setValue(e.detail)}>\n <Radio name="1" shape="square">\n 单选框 1\n </Radio>\n <Radio name="2" shape="square">\n 单选框 2\n </Radio>\n </RadioGroup>\n )\n}\n
\n通过checkedColor
属性设置选中状态的图标颜色。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup value={value} onChange={(e) => setValue(e.detail)}>\n <Radio name="1" checkedColor="#07c160" shape="square">\n 单选框 1\n </Radio>\n <Radio name="2" checkedColor="#07c160" shape="square">\n 单选框 2\n </Radio>\n </RadioGroup>\n )\n}\n
\n通过iconSize
属性可以自定义图标的大小。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup value={value} onChange={(e) => setValue(e.detail)}>\n <Radio name="1" iconSize="24px" shape="square">\n 单选框 1\n </Radio>\n <Radio name="2" iconSize="24px" shape="square">\n 单选框 2\n </Radio>\n </RadioGroup>\n )\n}\n
\nfunction Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup value={value} onChange={(e) => setValue(e.detail)}>\n <Radio\n name="1"\n renderIcon={\n <Image\n style={{ width: '32px', height: '32px' }}\n src={\n value === '2'\n ? 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png'\n : 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'\n }\n />\n }\n shape="square"\n >\n 单选框 1\n </Radio>\n <Radio\n name="2"\n renderIcon={\n <Image\n style={{ width: '32px', height: '32px' }}\n src={\n value === '1'\n ? 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png'\n : 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'\n }\n />\n }\n shape="square"\n >\n 单选框 2\n </Radio>\n </RadioGroup>\n )\n}\n
\n通过设置labelDisabled
属性可以禁用单选框文本点击。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup\n direction="horizontal"\n value={value}\n onChange={(e) => setValue(e.detail)}\n >\n <Radio name="1" labelDisabled>\n 单选框 1\n </Radio>\n <Radio name="2" labelDisabled>\n 单选框 2\n </Radio>\n </RadioGroup>\n )\n}\n
\n此时你需要再引入Cell
和CellGroup
组件。
function Demo() {\n const [value, setValue] = react.useState('1')\n return (\n <RadioGroup value={value}>\n <CellGroup>\n <Cell\n title="单选框 1"\n clickable\n onClick={() => setValue('1')}\n renderRightIcon={<Radio name="1"></Radio>}\n ></Cell>\n <Cell\n title="单选框 2"\n clickable\n onClick={() => setValue('2')}\n renderRightIcon={<Radio name="2"></Radio>}\n ></Cell>\n </CellGroup>\n </RadioGroup>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
name | \n- | \n string ¦ number | \n- | \nfalse | \n
value | \n- | \n any | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
checkedColor | \n- | \n string | \n- | \nfalse | \n
labelPosition | \n- | \n string | \n- | \nfalse | \n
labelDisabled | \n- | \n boolean | \n- | \nfalse | \n
shape | \n- | \n "round" ¦ "square" | \n- | \nfalse | \n
iconSize | \n- | \n number ¦ string | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
renderIcon | \n- | \n ReactNode | \n- | \nfalse | \n
onChange | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
value | \n- | \n any | \n- | \nfalse | \n
direction | \n- | \n attr: ¦ "vertical" ¦ "horizontal" | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onChange | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--radio-size | \n 40px; | \n
--radio-border-color | \n @gray-5; | \n
--radio-transition-duration | \n 0.2s; | \n
--radio-label-margin | \n 20px; | \n
--radio-label-color | \n @text-color; | \n
--radio-checked-icon-color | \n var(--primary-color); | \n
--radio-disabled-icon-color | \n @gray-5; | \n
--radio-disabled-label-color | \n @gray-5; | \n
--radio-disabled-background-color | \n @border-color; | \n
用于为商品相关操作提供便捷交互。
\n在 Taro 文件中引入组件
\nimport { GoodsAction } from '@antmjs/vantui'\nimport { GoodsActionIcon } from '@antmjs/vantui'\nimport { GoodsActionButton } from '@antmjs/vantui'\n
\n\n\nVant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手。
\n
function Demo() {\n const click = function () {\n Toast.show({\n message: '点击demo1',\n })\n }\n\n return (\n <GoodsAction safeAreaInsetBottom={false}>\n <GoodsActionIcon icon="chat-o" text="客服" onClick={click} />\n <GoodsActionIcon icon="cart-o" text="购物车" onClick={click} />\n <GoodsActionButton text="加入购物车" type="warning" onClick={click} />\n <GoodsActionButton text="立即购买" onClick={click} />\n <Toast id="GoodsAction-demo1" />\n </GoodsAction>\n )\n}\n
\n设置dot
属性后,会在图标右上角展示一个小红点。设置info
属性后,会在图标右上角展示相应的徽标。
function Demo() {\n return (\n <GoodsAction>\n <GoodsActionIcon icon="chat-o" text="客服" dot={true} />\n <GoodsActionIcon icon="cart-o" text="购物车" info="5" />\n <GoodsActionIcon icon="shop-o" text="店铺" />\n <GoodsActionButton text="加入购物车" type="warning" />\n <GoodsActionButton text="立即购买" />\n </GoodsAction>\n )\n}\n
\n通过color
属性可以自定义按钮的颜色,支持传入linearGradient
渐变色。
function Demo() {\n return (\n <GoodsAction>\n <GoodsActionIcon icon="chat-o" text="客服" />\n <GoodsActionIcon icon="shop-o" text="店铺" />\n <GoodsActionButton color="#be99ff" text="加入购物车" type="warning" />\n <GoodsActionButton color="#7232dd" text="立即购买" />\n </GoodsAction>\n )\n}\n
\n通过plain
属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。
function Demo() {\n return (\n <GoodsAction>\n <GoodsActionIcon icon="chat-o" text="客服" />\n <GoodsActionIcon icon="cart-o" text="购物车" info="5" />\n <GoodsActionIcon icon="shop-o" text="店铺" />\n <GoodsActionButton color="#7232dd" text="加入购物" type="warning" />\n <GoodsActionButton plain color="#7232dd" text="立即购买" />\n </GoodsAction>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
safeAreaInsetBottom | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \ntrue | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--goods-action-background-color | \n @white; | \n
--goods-action-height | \n 100px; | \n
--goods-action-icon-width | \n 100px; | \n
--goods-action-icon-height | \n @goods-action-height; | \n
--goods-action-icon-color | \n @text-color; | \n
--goods-action-icon-size | \n 36px; | \n
--goods-action-icon-font-size | \n @font-size-xs; | \n
--goods-action-icon-text-color | \n @gray-7; | \n
--goods-action-button-height | \n 80px; | \n
--goods-action-button-line-height | \n @button-line-height; | \n
--goods-action-button-border-radius | \n @border-radius-max; | \n
--goods-action-button-warning-color | \n @gradient-orange; | \n
--goods-action-button-danger-color | \n @gradient-red; | \n
--goods-action-button-plain-color | \n @white; | \n
用于为商品相关操作提供便捷交互。
\n在 Taro 文件中引入组件
\nimport { GoodsAction } from '@antmjs/vantui'\nimport { GoodsActionIcon } from '@antmjs/vantui'\nimport { GoodsActionButton } from '@antmjs/vantui'\n
\n\n\nVant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手。
\n
function Demo() {\n const click = function () {\n Toast.show({\n message: '点击demo1',\n })\n }\n\n return (\n <GoodsAction safeAreaInsetBottom={false}>\n <GoodsActionIcon icon="chat-o" text="客服" onClick={click} />\n <GoodsActionIcon icon="cart-o" text="购物车" onClick={click} />\n <GoodsActionButton text="加入购物车" type="warning" onClick={click} />\n <GoodsActionButton text="立即购买" onClick={click} />\n <Toast id="GoodsAction-demo1" />\n </GoodsAction>\n )\n}\n
\n设置dot
属性后,会在图标右上角展示一个小红点。设置info
属性后,会在图标右上角展示相应的徽标。
function Demo() {\n return (\n <GoodsAction>\n <GoodsActionIcon icon="chat-o" text="客服" dot={true} />\n <GoodsActionIcon icon="cart-o" text="购物车" info="5" />\n <GoodsActionIcon icon="shop-o" text="店铺" />\n <GoodsActionButton text="加入购物车" type="warning" />\n <GoodsActionButton text="立即购买" />\n </GoodsAction>\n )\n}\n
\n通过color
属性可以自定义按钮的颜色,支持传入linearGradient
渐变色。
function Demo() {\n return (\n <GoodsAction>\n <GoodsActionIcon icon="chat-o" text="客服" />\n <GoodsActionIcon icon="shop-o" text="店铺" />\n <GoodsActionButton color="#be99ff" text="加入购物车" type="warning" />\n <GoodsActionButton color="#7232dd" text="立即购买" />\n </GoodsAction>\n )\n}\n
\n通过plain
属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。
function Demo() {\n return (\n <GoodsAction>\n <GoodsActionIcon icon="chat-o" text="客服" />\n <GoodsActionIcon icon="cart-o" text="购物车" info="5" />\n <GoodsActionIcon icon="shop-o" text="店铺" />\n <GoodsActionButton color="#7232dd" text="加入购物" type="warning" />\n <GoodsActionButton plain color="#7232dd" text="立即购买" />\n </GoodsAction>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
safeAreaInsetBottom | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \ntrue | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--goods-action-background-color | \n @white; | \n
--goods-action-height | \n 100px; | \n
--goods-action-icon-width | \n 100px; | \n
--goods-action-icon-height | \n @goods-action-height; | \n
--goods-action-icon-color | \n @text-color; | \n
--goods-action-icon-size | \n 36px; | \n
--goods-action-icon-font-size | \n @font-size-xs; | \n
--goods-action-icon-text-color | \n @gray-7; | \n
--goods-action-button-height | \n 80px; | \n
--goods-action-button-line-height | \n @button-line-height; | \n
--goods-action-button-border-radius | \n @border-radius-max; | \n
--goods-action-button-warning-color | \n @gradient-orange; | \n
--goods-action-button-danger-color | \n @gradient-red; | \n
--goods-action-button-plain-color | \n @white; | \n
用于在打开和关闭状态之间进行切换。
\n在 Taro 文件中引入组件
\nimport { Switch } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Switch } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(false)\n return <Switch checked={value} onChange={(e) => setValue(e.detail)} />\n}\n\n
\nimport { Switch } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Switch disabled />\n}\n\n
\nimport { Switch } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Switch loading checked={true} />\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Switch } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(false)\n return (\n <Switch size="32px" checked={value} onChange={(e) => setValue(e.detail)} />\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Switch } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(false)\n return (\n <Switch\n activeColor="#07c160"\n inactiveColor="#ee0a24"\n checked={value}\n onChange={(e) => setValue(e.detail)}\n />\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Dialog, Switch } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(false)\n\n const action = (e) => {\n Dialog.confirm({\n selector: '#switch-demo',\n title: '提示',\n message: '是否切换开关?',\n })\n .then(() => {\n setValue(e.detail)\n })\n .catch((e) => {\n console.log(e)\n })\n }\n\n return (\n <>\n <Dialog id="switch-demo" />\n <Switch checked={value} onChange={action} />\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
checked | \n- | \n boolean | \n- | \nfalse | \n
loading | \n- | \n boolean | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
activeColor | \n- | \n string | \n- | \nfalse | \n
inactiveColor | \n- | \n string | \n- | \nfalse | \n
size | \n- | \n string | \n- | \nfalse | \n
activeValue | \n- | \n any | \n- | \nfalse | \n
inactiveValue | \n- | \n any | \n- | \nfalse | \n
onChange | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--switch-width | \n 124px; | \n
--switch-height | \n 64px; | \n
--switch-node-size | \n 64px; | \n
--switch-node-z-index | \n 1; | \n
--switch-node-background-color | \n @white; | \n
--switch-node-box-shadow | \n 0 6px 2px 0 rgba(0, 0, 0, 0.05), | \n
--switch-background-color | \n @white; | \n
--switch-on-background-color | \n var(--primary-color); | \n
--switch-transition-duration | \n 0.3s; | \n
--switch-disabled-opacity | \n 0.4; | \n
--switch-border | \n 2px solid rgba(0, 0, 0, 0.1); | \n
用于在打开和关闭状态之间进行切换。
\n在 Taro 文件中引入组件
\nimport { Switch } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Switch } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(false)\n return <Switch checked={value} onChange={(e) => setValue(e.detail)} />\n}\n\n
\nimport { Switch } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Switch disabled />\n}\n\n
\nimport { Switch } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Switch loading checked={true} />\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Switch } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(false)\n return (\n <Switch size="32px" checked={value} onChange={(e) => setValue(e.detail)} />\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Switch } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(false)\n return (\n <Switch\n activeColor="#07c160"\n inactiveColor="#ee0a24"\n checked={value}\n onChange={(e) => setValue(e.detail)}\n />\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Dialog, Switch } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(false)\n\n const action = (e) => {\n Dialog.confirm({\n selector: '#switch-demo',\n title: '提示',\n message: '是否切换开关?',\n })\n .then(() => {\n setValue(e.detail)\n })\n .catch((e) => {\n console.log(e)\n })\n }\n\n return (\n <>\n <Dialog id="switch-demo" />\n <Switch checked={value} onChange={action} />\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
checked | \n- | \n boolean | \n- | \nfalse | \n
loading | \n- | \n boolean | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
activeColor | \n- | \n string | \n- | \nfalse | \n
inactiveColor | \n- | \n string | \n- | \nfalse | \n
size | \n- | \n string | \n- | \nfalse | \n
activeValue | \n- | \n any | \n- | \nfalse | \n
inactiveValue | \n- | \n any | \n- | \nfalse | \n
onChange | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--switch-width | \n 124px; | \n
--switch-height | \n 64px; | \n
--switch-node-size | \n 64px; | \n
--switch-node-z-index | \n 1; | \n
--switch-node-background-color | \n @white; | \n
--switch-node-box-shadow | \n 0 6px 2px 0 rgba(0, 0, 0, 0.05), | \n
--switch-background-color | \n @white; | \n
--switch-on-background-color | \n var(--primary-color); | \n
--switch-transition-duration | \n 0.3s; | \n
--switch-disabled-opacity | \n 0.4; | \n
--switch-border | \n 2px solid rgba(0, 0, 0, 0.1); | \n
用户可以在文本框内输入或编辑文字。\nTaro ^3.6.0
h5 下 focus 导致报错,待官方修复。
在 Taro 文件中引入组件
\nimport { Field } from '@antmjs/vantui'\n
\nfunction Demo() {\n const [value, setValue] = react.useState()\n\n return (\n <CellGroup>\n <Field\n value={value}\n placeholder="请输入用户名"\n border={false}\n onChange={(e) => setValue(e.detail)}\n />\n </CellGroup>\n )\n}\n
\n根据type
属性定义不同类型的输入框。
function Demo() {\n return (\n <CellGroup>\n <Toast id="Field-demo2" />\n <Field\n required\n clearable\n label="用户名"\n icon="questionO"\n placeholder="请输入用户名"\n />\n <Field\n type="password"\n label="密码"\n placeholder="请输入密码"\n required\n border\n />\n </CellGroup>\n )\n}\n
\nfunction Demo() {\n return (\n <CellGroup>\n <Field\n value="输入框已禁用"\n label="用户名"\n leftIcon="contact"\n disabled\n border={false}\n />\n </CellGroup>\n )\n}\n
\n通过error
或者errorMessage
属性增加对应的错误提示。
function Demo() {\n const [state, setState] = react.useState({\n username: '',\n phone: '',\n })\n return (\n <CellGroup>\n <Field\n value={state.username}\n label="用户名"\n placeholder="请输入用户名"\n error\n />\n <Field\n value={state.phone}\n label="手机号"\n placeholder="请输入手机号"\n errorMessage="手机号格式错误"\n border={false}\n />\n </CellGroup>\n )\n}\n
\n可以通过inputAlign
属性设置内容的对齐方式。
function Demo() {\n return (\n <CellGroup>\n <Field label="用户名" placeholder="请输入用户名" inputAlign="right" />\n </CellGroup>\n )\n}\n
\n对于 textarea,可以通过autosize
属性设置高度自适应。
function Demo() {\n return (\n <CellGroup>\n <Field\n label="留言"\n type="textarea"\n placeholder="请输入留言"\n autosize={{ minHeight: '30px' }}\n border={false}\n />\n </CellGroup>\n )\n}\n
\nfunction Demo() {\n return (\n <CellGroup>\n <Field\n center\n clearable\n label="短信验证码"\n placeholder="请输入短信验证码"\n border\n renderButton={\n <Button size="small" type="primary">\n 发送验证码\n </Button>\n }\n />\n </CellGroup>\n )\n}\n
\n由于微信小程序的 input 组件和 textarea 组件是原生组件,聚焦时会将原生的输入框覆盖在对应位置上,导致了这个现象的产生。
\n相关的讨论可以查看微信开放社区。
\n由于微信小程序的 input 组件和 textarea 组件是原生组件,遵循原生组件的限制,详情可以查看原生组件说明。
\n微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同,在 iOS 中会有默认的 padding
,且无法置 0。
同时 placeholderStyle
对 verticalAlign
、lineHeight
等大量 css 属性都不生效。
这一系列的问题导致了 placeholder 在真机上可能会出现偏移。
\n微信已经在 2.10.0
基础库版本后支持移除默认的 padding
,但低版本仍有问题。详情可以查看 微信开放社区。
这是微信小程序的 input 组件本身的问题,如果需要兼容手写输入法的场景,可以在 blur
事件中取到输入的值。
相关的讨论可以查看微信开放社区。
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
value | \n当前输入的值 | \n string ¦ number | \n- | \nfalse | \n
placeholder | \n输入框为空的时候的占位符号 | \n string | \n- | \nfalse | \n
placeholderStyle | \nplaceholder 样式 | \n string | \n- | \nfalse | \n
placeholderClass | \nplaceholder 的样式名 | \n string | \n- | \nfalse | \n
disabled | \n是否禁用 | \n boolean | \nfalse | \nfalse | \n
maxlength | \n最大输入值 | \n number | \n- | \nfalse | \n
cursorSpacing | \n输入框聚焦时底部与键盘的距离 | \n number | \n50 | \nfalse | \n
autoFocus | \n是否默认聚焦,拉起键盘 | \n boolean | \nfalse | \nfalse | \n
focus | \n是否默认聚焦 | \n boolean | \nfalse | \nfalse | \n
cursor | \n光标的位置 | \n number | \n-1 | \nfalse | \n
selectionStart | \n光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 | \n number | \n-1 | \nfalse | \n
selectionEnd | \n光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 | \n number | \n-1 | \nfalse | \n
adjustPosition | \n键盘弹起时,是否自动上推页面 | \n boolean | \ntrue | \nfalse | \n
holdKeyboard | \nfocus 时,点击页面的时候不收起键盘 | \n boolean | \nfalse | \nfalse | \n
type | \n展示的组件类型 | \n attr: ¦ "number" ¦ "text" ¦ "idcard" ¦ "digit" ¦ "textarea" ¦ "password" | \ntext | \nfalse | \n
password | \n是否是密码类型 | \n boolean | \n- | \nfalse | \n
confirmType | \n设置键盘右下角按钮的文字,仅在 type=\'text\' 时生效 | \n attr: ¦ "send" ¦ "search" ¦ "next" ¦ "go" ¦ "done" | \ndone | \nfalse | \n
confirmHold | \n点击键盘右下角按钮时是否保持键盘不收起,在 type=\'textarea\' 时无效 | \n boolean | \nfalse | \nfalse | \n
fixed | \n如果 type 为 textarea 且在一个 position fixed 的区域,需要显示指定属性 fixed 为 true | \n boolean | \nfalse | \nfalse | \n
showConfirmBar | \n是否显示键盘上方带有”完成“按钮那一栏,只对 textarea 有效 | \n boolean | \ntrue | \nfalse | \n
disableDefaultPadding | \n是否去掉 iOS 下的默认内边距,只对 textarea 有效 | \n boolean | \ntrue | \nfalse | \n
size | \n单元格大小,可选值为 large | \n "large" | \n- | \nfalse | \n
icon | \n左侧图标 | \n string | \n- | \nfalse | \n
label | \n输入框左侧占位元素 | \n ReactNode | \n- | \nfalse | \n
error | \n是否将输入内容标红 | \n boolean | \n- | \nfalse | \n
center | \n是否使内容垂直居中 | \n boolean | \n- | \nfalse | \n
isLink | \n是否有箭头 | \n boolean | \n- | \nfalse | \n
leftIcon | \n左侧图标 | \n string | \n- | \nfalse | \n
rightIcon | \n右侧图标 | \n string | \n- | \nfalse | \n
autosize | \n是否自适应内容高度,只对 textarea 有效,可传入对象, 单位为 px | \n attr: ¦ boolean ¦ Record<string, any> | \n- | \nfalse | \n
required | \n是否显示表单必填星号 | \n boolean | \n- | \nfalse | \n
iconClass | \n左图标样式名 | \n string | \n- | \nfalse | \n
clickable | \n是否开启点击反馈 | \n boolean | \nfalse | \nfalse | \n
inputAlign | \n输入框内容对齐方式,可选值为 center right | \n string | \n- | \nfalse | \n
style | \n- | \n string | \n- | \nfalse | \n
errorMessage | \n错误信息 | \n string | \n- | \nfalse | \n
arrowDirection | \n箭头方向 | \n attr: ¦ "left" ¦ "up" ¦ "down" | \n- | \nfalse | \n
showWordLimit | \n是否显示字数统计,需要设置 maxlength 属性 | \n boolean | \nfalse | \nfalse | \n
errorMessageAlign | \n底部错误提示文案对齐方式,可选值为 center right | \n string | \n- | \nfalse | \n
alwaysEmbed | \n强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | \n boolean | \nfalse | \nfalse | \n
readonly | \n是否仅可读 | \n boolean | \nfalse | \nfalse | \n
clearable | \n是否仅可清楚 | \n boolean | \nfalse | \nfalse | \n
clearTrigger | \n显示清除图标的时机,always 表示输入框不为空时展示,focus 表示输入框聚焦且不为空时展示 | \n string | \nfocus | \nfalse | \n
border | \n边框 | \n boolean | \nfalse | \nfalse | \n
titleWidth | \n标题宽度 | \n string | \n6.2em | \nfalse | \n
clearIcon | \n清除按钮图标 | \n string | \n- | \nfalse | \n
renderLeftIcon | \n自定义渲染图标 | \n ReactNode | \n- | \nfalse | \n
renderTitle | \n自定义渲染标题 | \n ReactNode | \n- | \nfalse | \n
renderInput | \n自定义渲染输入组件 | \n ReactNode | \n- | \nfalse | \n
renderRightIcon | \n自定义渲染右侧图标 | \n ReactNode | \n- | \nfalse | \n
renderIcon | \n自定义渲染右侧图标 | \n ReactNode | \n- | \nfalse | \n
renderButton | \n自定义渲染按钮 | \n ReactNode | \n- | \nfalse | \n
onInput | \n输入触发方法 | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onChange | \n输入触发方法 | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onConfirm | \n点击确认触发方法 | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onClickIcon | \n点击尾部图标触发方法 | \n () => void | \n- | \nfalse | \n
onFocus | \n聚焦组件触发方法 | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onBlur | \n组件失去焦点触发方法 | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onClear | \n点击清除触发方法 | \n () => void | \n- | \nfalse | \n
onClickInput | \n点击输入区域触发方法 | \n () => void | \n- | \nfalse | \n
onLineChange | \n输入框行数变化时调用,只对 textarea 有效 | \n CommonEventFunction<TextareaProps.onLineChangeEventDetail> | \n- | \nfalse | \n
onKeyboardHeightChange | \n键盘高度发生变化的时候触发此事件 | \n CommonEventFunction<TextareaProps.onKeyboardHeightChangeEventDetail> | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--field-label-color | \n @gray-7; | \n
--field-input-text-color | \n @text-color; | \n
--field-input-error-text-color | \n @red; | \n
--field-input-disabled-text-color | \n @gray-5; | \n
--field-placeholder-text-color | \n @gray-5; | \n
--field-icon-size | \n 32px; | \n
--field-clear-icon-size | \n 32px; | \n
--field-clear-icon-color | \n @gray-5; | \n
--field-icon-container-color | \n @gray-6; | \n
--field-error-message-color | \n @red; | \n
--field-error-message-text-font-size | \n @font-size-sm; | \n
--field-text-area-min-height | \n 36px; | \n
--field-word-limit-color | \n @gray-7; | \n
--field-word-limit-font-size | \n @font-size-sm; | \n
--field-word-limit-line-height | \n 32px; | \n
--field-word-num-full-color | \n @red; | \n
--field-disabled-text-color | \n @gray-5; | \n
--field-text-area-min-height | \n 148px; | \n
--field-font-size | \n @font-size-md; | \n
用户可以在文本框内输入或编辑文字。\nTaro ^3.6.0
h5 下 focus 导致报错,待官方修复。
在 Taro 文件中引入组件
\nimport { Field } from '@antmjs/vantui'\n
\nfunction Demo() {\n const [value, setValue] = react.useState()\n\n return (\n <CellGroup>\n <Field\n value={value}\n placeholder="请输入用户名"\n border={false}\n onChange={(e) => setValue(e.detail)}\n />\n </CellGroup>\n )\n}\n
\n根据type
属性定义不同类型的输入框。
function Demo() {\n return (\n <CellGroup>\n <Toast id="Field-demo2" />\n <Field\n required\n clearable\n label="用户名"\n icon="questionO"\n placeholder="请输入用户名"\n />\n <Field\n type="password"\n label="密码"\n placeholder="请输入密码"\n required\n border\n />\n </CellGroup>\n )\n}\n
\nfunction Demo() {\n return (\n <CellGroup>\n <Field\n value="输入框已禁用"\n label="用户名"\n leftIcon="contact"\n disabled\n border={false}\n />\n </CellGroup>\n )\n}\n
\n通过error
或者errorMessage
属性增加对应的错误提示。
function Demo() {\n const [state, setState] = react.useState({\n username: '',\n phone: '',\n })\n return (\n <CellGroup>\n <Field\n value={state.username}\n label="用户名"\n placeholder="请输入用户名"\n error\n />\n <Field\n value={state.phone}\n label="手机号"\n placeholder="请输入手机号"\n errorMessage="手机号格式错误"\n border={false}\n />\n </CellGroup>\n )\n}\n
\n可以通过inputAlign
属性设置内容的对齐方式。
function Demo() {\n return (\n <CellGroup>\n <Field label="用户名" placeholder="请输入用户名" inputAlign="right" />\n </CellGroup>\n )\n}\n
\n对于 textarea,可以通过autosize
属性设置高度自适应。
function Demo() {\n return (\n <CellGroup>\n <Field\n label="留言"\n type="textarea"\n placeholder="请输入留言"\n autosize={{ minHeight: '30px' }}\n border={false}\n />\n </CellGroup>\n )\n}\n
\nfunction Demo() {\n return (\n <CellGroup>\n <Field\n center\n clearable\n label="短信验证码"\n placeholder="请输入短信验证码"\n border\n renderButton={\n <Button size="small" type="primary">\n 发送验证码\n </Button>\n }\n />\n </CellGroup>\n )\n}\n
\n由于微信小程序的 input 组件和 textarea 组件是原生组件,聚焦时会将原生的输入框覆盖在对应位置上,导致了这个现象的产生。
\n相关的讨论可以查看微信开放社区。
\n由于微信小程序的 input 组件和 textarea 组件是原生组件,遵循原生组件的限制,详情可以查看原生组件说明。
\n微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同,在 iOS 中会有默认的 padding
,且无法置 0。
同时 placeholderStyle
对 verticalAlign
、lineHeight
等大量 css 属性都不生效。
这一系列的问题导致了 placeholder 在真机上可能会出现偏移。
\n微信已经在 2.10.0
基础库版本后支持移除默认的 padding
,但低版本仍有问题。详情可以查看 微信开放社区。
这是微信小程序的 input 组件本身的问题,如果需要兼容手写输入法的场景,可以在 blur
事件中取到输入的值。
相关的讨论可以查看微信开放社区。
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
value | \n当前输入的值 | \n string ¦ number | \n- | \nfalse | \n
placeholder | \n输入框为空的时候的占位符号 | \n string | \n- | \nfalse | \n
placeholderStyle | \nplaceholder 样式 | \n string | \n- | \nfalse | \n
placeholderClass | \nplaceholder 的样式名 | \n string | \n- | \nfalse | \n
disabled | \n是否禁用 | \n boolean | \nfalse | \nfalse | \n
maxlength | \n最大输入值 | \n number | \n- | \nfalse | \n
cursorSpacing | \n输入框聚焦时底部与键盘的距离 | \n number | \n50 | \nfalse | \n
autoFocus | \n是否默认聚焦,拉起键盘 | \n boolean | \nfalse | \nfalse | \n
focus | \n是否默认聚焦 | \n boolean | \nfalse | \nfalse | \n
cursor | \n光标的位置 | \n number | \n-1 | \nfalse | \n
selectionStart | \n光标起始位置,自动聚集时有效,需与 selection-end 搭配使用 | \n number | \n-1 | \nfalse | \n
selectionEnd | \n光标结束位置,自动聚集时有效,需与 selection-start 搭配使用 | \n number | \n-1 | \nfalse | \n
adjustPosition | \n键盘弹起时,是否自动上推页面 | \n boolean | \ntrue | \nfalse | \n
holdKeyboard | \nfocus 时,点击页面的时候不收起键盘 | \n boolean | \nfalse | \nfalse | \n
type | \n展示的组件类型 | \n attr: ¦ "number" ¦ "text" ¦ "idcard" ¦ "digit" ¦ "textarea" ¦ "password" | \ntext | \nfalse | \n
password | \n是否是密码类型 | \n boolean | \n- | \nfalse | \n
confirmType | \n设置键盘右下角按钮的文字,仅在 type=\'text\' 时生效 | \n attr: ¦ "send" ¦ "search" ¦ "next" ¦ "go" ¦ "done" | \ndone | \nfalse | \n
confirmHold | \n点击键盘右下角按钮时是否保持键盘不收起,在 type=\'textarea\' 时无效 | \n boolean | \nfalse | \nfalse | \n
fixed | \n如果 type 为 textarea 且在一个 position fixed 的区域,需要显示指定属性 fixed 为 true | \n boolean | \nfalse | \nfalse | \n
showConfirmBar | \n是否显示键盘上方带有”完成“按钮那一栏,只对 textarea 有效 | \n boolean | \ntrue | \nfalse | \n
disableDefaultPadding | \n是否去掉 iOS 下的默认内边距,只对 textarea 有效 | \n boolean | \ntrue | \nfalse | \n
size | \n单元格大小,可选值为 large | \n "large" | \n- | \nfalse | \n
icon | \n左侧图标 | \n string | \n- | \nfalse | \n
label | \n输入框左侧占位元素 | \n ReactNode | \n- | \nfalse | \n
error | \n是否将输入内容标红 | \n boolean | \n- | \nfalse | \n
center | \n是否使内容垂直居中 | \n boolean | \n- | \nfalse | \n
isLink | \n是否有箭头 | \n boolean | \n- | \nfalse | \n
leftIcon | \n左侧图标 | \n string | \n- | \nfalse | \n
rightIcon | \n右侧图标 | \n string | \n- | \nfalse | \n
autosize | \n是否自适应内容高度,只对 textarea 有效,可传入对象, 单位为 px | \n attr: ¦ boolean ¦ Record<string, any> | \n- | \nfalse | \n
required | \n是否显示表单必填星号 | \n boolean | \n- | \nfalse | \n
iconClass | \n左图标样式名 | \n string | \n- | \nfalse | \n
clickable | \n是否开启点击反馈 | \n boolean | \nfalse | \nfalse | \n
inputAlign | \n输入框内容对齐方式,可选值为 center right | \n string | \n- | \nfalse | \n
style | \n- | \n string | \n- | \nfalse | \n
errorMessage | \n错误信息 | \n string | \n- | \nfalse | \n
arrowDirection | \n箭头方向 | \n attr: ¦ "left" ¦ "up" ¦ "down" | \n- | \nfalse | \n
showWordLimit | \n是否显示字数统计,需要设置 maxlength 属性 | \n boolean | \nfalse | \nfalse | \n
errorMessageAlign | \n底部错误提示文案对齐方式,可选值为 center right | \n string | \n- | \nfalse | \n
alwaysEmbed | \n强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | \n boolean | \nfalse | \nfalse | \n
readonly | \n是否仅可读 | \n boolean | \nfalse | \nfalse | \n
clearable | \n是否仅可清楚 | \n boolean | \nfalse | \nfalse | \n
clearTrigger | \n显示清除图标的时机,always 表示输入框不为空时展示,focus 表示输入框聚焦且不为空时展示 | \n string | \nfocus | \nfalse | \n
border | \n边框 | \n boolean | \nfalse | \nfalse | \n
titleWidth | \n标题宽度 | \n string | \n6.2em | \nfalse | \n
clearIcon | \n清除按钮图标 | \n string | \n- | \nfalse | \n
renderLeftIcon | \n自定义渲染图标 | \n ReactNode | \n- | \nfalse | \n
renderTitle | \n自定义渲染标题 | \n ReactNode | \n- | \nfalse | \n
renderInput | \n自定义渲染输入组件 | \n ReactNode | \n- | \nfalse | \n
renderRightIcon | \n自定义渲染右侧图标 | \n ReactNode | \n- | \nfalse | \n
renderIcon | \n自定义渲染右侧图标 | \n ReactNode | \n- | \nfalse | \n
renderButton | \n自定义渲染按钮 | \n ReactNode | \n- | \nfalse | \n
onInput | \n输入触发方法 | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onChange | \n输入触发方法 | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onConfirm | \n点击确认触发方法 | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onClickIcon | \n点击尾部图标触发方法 | \n () => void | \n- | \nfalse | \n
onFocus | \n聚焦组件触发方法 | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onBlur | \n组件失去焦点触发方法 | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onClear | \n点击清除触发方法 | \n () => void | \n- | \nfalse | \n
onClickInput | \n点击输入区域触发方法 | \n () => void | \n- | \nfalse | \n
onLineChange | \n输入框行数变化时调用,只对 textarea 有效 | \n CommonEventFunction<TextareaProps.onLineChangeEventDetail> | \n- | \nfalse | \n
onKeyboardHeightChange | \n键盘高度发生变化的时候触发此事件 | \n CommonEventFunction<TextareaProps.onKeyboardHeightChangeEventDetail> | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--field-label-color | \n @gray-7; | \n
--field-input-text-color | \n @text-color; | \n
--field-input-error-text-color | \n @red; | \n
--field-input-disabled-text-color | \n @gray-5; | \n
--field-placeholder-text-color | \n @gray-5; | \n
--field-icon-size | \n 32px; | \n
--field-clear-icon-size | \n 32px; | \n
--field-clear-icon-color | \n @gray-5; | \n
--field-icon-container-color | \n @gray-6; | \n
--field-error-message-color | \n @red; | \n
--field-error-message-text-font-size | \n @font-size-sm; | \n
--field-text-area-min-height | \n 36px; | \n
--field-word-limit-color | \n @gray-7; | \n
--field-word-limit-font-size | \n @font-size-sm; | \n
--field-word-limit-line-height | \n 32px; | \n
--field-word-num-full-color | \n @red; | \n
--field-disabled-text-color | \n @gray-5; | \n
--field-text-area-min-height | \n 148px; | \n
--field-font-size | \n @font-size-md; | \n
Vant 中默认包含了一些常用样式,可以直接通过 className 的方式使用。
\n在 Taro 文件中引入组件
\n@import '@antmjs/vantui/es/style/base.less';\n
\n当文本内容长度超过容器最大宽度时,自动省略多余的文本。
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\n\nexport default function Demo() {\n return (\n <>\n <View\n className="van-ellipsis"\n style={{ width: '200px', marginBottom: '20px' }}\n >\n 这是一段宽度限制 250px 的文字,后面的内容会省略。\n </View>\n\n {/** 最多显示两行**/}\n <View\n className="van-multi-ellipsis--l2"\n style={{ width: '200px', marginBottom: '20px' }}\n >\n 这是一段最多显示两行的文字,后面的内容会省略。\n 这是一段最多显示两行的文字,后面的内容会省略。\n </View>\n\n {/** 最多显示三行**/}\n <View className="van-multi-ellipsis--l3" style={{ width: '200px' }}>\n 这是一段最多显示三行的文字,后面的内容会省略。\n 这是一段最多显示两行的文字,后面的内容会省略。\n 这是一段最多显示两行的文字,后面的内容会省略。\n </View>\n </>\n )\n}\n\n
\n为元素添加 Retina 屏幕下的 1px 边框(即 hairline),基于伪类 transform 实现。
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\n\nexport default function Demo() {\n return (\n <>\n {/** 上边框,可选各个方向 **/}\n <View\n className="van-hairline--top"\n style={{ width: '200px', marginBottom: '20px' }}\n ></View>\n\n {/** 全边框 **/}\n <View\n className="van-hairline--surround"\n style={{ width: '200px', marginBottom: '20px', height: '200px' }}\n >\n 全边框\n </View>\n </>\n )\n}\n\n
\n推荐在 app.wxss 中设置以下全局字体,以保证在不同设备上提供最佳的视觉体验。
\npage {\n fontfamily: -appleSystem, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n sansSerif;\n}\n
\nVant 中默认包含了一些常用样式,可以直接通过 className 的方式使用。
\n在 Taro 文件中引入组件
\n@import '@antmjs/vantui/es/style/base.less';\n
\n当文本内容长度超过容器最大宽度时,自动省略多余的文本。
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\n\nexport default function Demo() {\n return (\n <>\n <View\n className="van-ellipsis"\n style={{ width: '200px', marginBottom: '20px' }}\n >\n 这是一段宽度限制 250px 的文字,后面的内容会省略。\n </View>\n\n {/** 最多显示两行**/}\n <View\n className="van-multi-ellipsis--l2"\n style={{ width: '200px', marginBottom: '20px' }}\n >\n 这是一段最多显示两行的文字,后面的内容会省略。\n 这是一段最多显示两行的文字,后面的内容会省略。\n </View>\n\n {/** 最多显示三行**/}\n <View className="van-multi-ellipsis--l3" style={{ width: '200px' }}>\n 这是一段最多显示三行的文字,后面的内容会省略。\n 这是一段最多显示两行的文字,后面的内容会省略。\n 这是一段最多显示两行的文字,后面的内容会省略。\n </View>\n </>\n )\n}\n\n
\n为元素添加 Retina 屏幕下的 1px 边框(即 hairline),基于伪类 transform 实现。
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\n\nexport default function Demo() {\n return (\n <>\n {/** 上边框,可选各个方向 **/}\n <View\n className="van-hairline--top"\n style={{ width: '200px', marginBottom: '20px' }}\n ></View>\n\n {/** 全边框 **/}\n <View\n className="van-hairline--surround"\n style={{ width: '200px', marginBottom: '20px', height: '200px' }}\n >\n 全边框\n </View>\n </>\n )\n}\n\n
\n推荐在 app.wxss 中设置以下全局字体,以保证在不同设备上提供最佳的视觉体验。
\npage {\n fontfamily: -appleSystem, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,\n Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',\n sansSerif;\n}\n
\n基于字体的图标集,可以通过 Icon 组件使用,也可以在其他组件中通过 icon 属性引用。
\n在 Taro 文件中引入组件
\nimport { Icon } from '@antmjs/vantui'\n
\nIcon
的name
属性支持传入图标名称或图片链接。dot
属性后,会在图标右上角展示一个小红点。设置info
属性后,会在图标右上角展示相应的徽标。color
属性来控制图标颜色。size
属性来控制图标大小。app.less
文件中引入。案例
\nimport { View } from '@tarojs/components'\nimport { Row, Col, Icon } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <>\n <Row>\n <View className="demo-block__title">基本用法</View>\n <Col className="col" span="6">\n <Icon name="chat-o" size="32px" className="icon"></Icon>\n </Col>\n <Col className="col" span="6">\n <Icon\n name="https://b.yzcdn.cn/vant/icon-demo-1126.png"\n size="32px"\n className="icon"\n ></Icon>\n </Col>\n </Row>\n <Row>\n <View className="demo-block__title">提示信息</View>\n <Col className="col" span="6">\n <Icon name="chat-o" size="32px" className="icon" dot></Icon>\n </Col>\n <Col className="col" span="6">\n <Icon name="chat-o" size="32px" className="icon" info="9"></Icon>\n </Col>\n <Col className="col" span="6">\n <Icon name="chat-o" size="32px" className="icon" info="99+"></Icon>\n </Col>\n </Row>\n <Row>\n <View className="demo-block__title">图标颜色</View>\n <Col className="col" span="6">\n <Icon\n color="#1989fa"\n name="chat-o"\n size="32px"\n className="icon"\n ></Icon>\n </Col>\n <Col className="col" span="6">\n <Icon\n color="#07c160"\n name="chat-o"\n size="32px"\n className="icon"\n ></Icon>\n </Col>\n </Row>\n <Row>\n <View className="demo-block__title">图标大小</View>\n <Col className="col" span="6">\n <Icon name="chat-o" size="40" className="icon"></Icon>\n </Col>\n <Col className="col" span="6">\n <Icon name="chat-o" size="3rem" className="icon"></Icon>\n </Col>\n </Row>\n\n <Row>\n <View className="demo-block__title">自定义图标</View>\n <Col className="col" span="6">\n <Icon name="demo1" classPrefix="page-icon" size="40px" />\n </Col>\n <Col className="col" span="6">\n <Icon name="demo2" classPrefix="page-icon" size="40px" />\n </Col>\n <Col className="col" span="6">\n <Icon name="demo3" classPrefix="page-icon" size="40px" />\n </Col>\n </Row>\n </>\n )\n}\n\n
\n引入第三方或自定义的字体图标样式
\n@font-face {\n font-family: 'iconfont';\n src: url('data: charset=utf-8;base64, .......') format('truetype');\n}\n\n.page-icon {\n font-family: 'iconfont' !important;\n font-size: 16px;\n font-style: normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.page-icon-demo1::before {\n content: 'ea3c';\n}\n\n.page-icon-demo2::before {\n content: 'ea3d';\n}\n\n.page-icon-demo3::before {\n content: 'ea3e';\n}\n
\nimport { Text } from '@tarojs/components'\nimport icons from '@vant/icons'\nimport { Col, Icon } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <>\n {icons.basic.map((name, i) => (\n <Col\n key={i}\n span="6"\n style={{ paddingTop: '20px', paddingBottom: '20px' }}\n >\n <Icon name={name} size="32px" />\n <Text>{name}</Text>\n </Col>\n ))}\n </>\n )\n}\n\n
\nimport { Text } from '@tarojs/components'\nimport icons from '@vant/icons'\nimport { Col, Icon } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <>\n {icons.outline.map((name, i) => (\n <Col\n key={i}\n span="6"\n style={{ paddingTop: '20px', paddingBottom: '20px', height: '100px' }}\n >\n <Icon name={name} size="32px" />\n <Text style={{ textAlign: 'center' }}>{name}</Text>\n </Col>\n ))}\n </>\n )\n}\n\n
\nimport { Text } from '@tarojs/components'\nimport icons from '@vant/icons'\nimport { Col, Icon } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <>\n {icons.filled.map((name, i) => (\n <Col\n key={i}\n span="6"\n style={{ paddingTop: '20px', paddingBottom: '20px', height: '100px' }}\n >\n <Icon name={name} size="32px" />\n <Text style={{ textAlign: 'center' }}>{name}</Text>\n </Col>\n ))}\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
dot | \n是否显示图标右上角小红点 | \n boolean | \n- | \nfalse | \n
info | \n图标右上角文字提示 | \n number ¦ string | \nfalse | \nfalse | \n
size | \n图标大小,如 20px,单位为 px | \n number ¦ string | \n- | \nfalse | \n
color | \n图标颜色 | \n string | \n- | \nfalse | \n
style | \n自定义样式 | \n attr: ¦ string ¦ CSSProperties | \n- | \nfalse | \n
classPrefix | \n类名前缀 | \n string | \nvant-icon 传空字符串可去除前缀 | \nfalse | \n
name | \n图标名称或图片链接 | \n string | \n- | \nfalse | \n
基于字体的图标集,可以通过 Icon 组件使用,也可以在其他组件中通过 icon 属性引用。
\n在 Taro 文件中引入组件
\nimport { Icon } from '@antmjs/vantui'\n
\nIcon
的name
属性支持传入图标名称或图片链接。dot
属性后,会在图标右上角展示一个小红点。设置info
属性后,会在图标右上角展示相应的徽标。color
属性来控制图标颜色。size
属性来控制图标大小。app.less
文件中引入。案例
\nimport { View } from '@tarojs/components'\nimport { Row, Col, Icon } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <>\n <Row>\n <View className="demo-block__title">基本用法</View>\n <Col className="col" span="6">\n <Icon name="chat-o" size="32px" className="icon"></Icon>\n </Col>\n <Col className="col" span="6">\n <Icon\n name="https://b.yzcdn.cn/vant/icon-demo-1126.png"\n size="32px"\n className="icon"\n ></Icon>\n </Col>\n </Row>\n <Row>\n <View className="demo-block__title">提示信息</View>\n <Col className="col" span="6">\n <Icon name="chat-o" size="32px" className="icon" dot></Icon>\n </Col>\n <Col className="col" span="6">\n <Icon name="chat-o" size="32px" className="icon" info="9"></Icon>\n </Col>\n <Col className="col" span="6">\n <Icon name="chat-o" size="32px" className="icon" info="99+"></Icon>\n </Col>\n </Row>\n <Row>\n <View className="demo-block__title">图标颜色</View>\n <Col className="col" span="6">\n <Icon\n color="#1989fa"\n name="chat-o"\n size="32px"\n className="icon"\n ></Icon>\n </Col>\n <Col className="col" span="6">\n <Icon\n color="#07c160"\n name="chat-o"\n size="32px"\n className="icon"\n ></Icon>\n </Col>\n </Row>\n <Row>\n <View className="demo-block__title">图标大小</View>\n <Col className="col" span="6">\n <Icon name="chat-o" size="40" className="icon"></Icon>\n </Col>\n <Col className="col" span="6">\n <Icon name="chat-o" size="3rem" className="icon"></Icon>\n </Col>\n </Row>\n\n <Row>\n <View className="demo-block__title">自定义图标</View>\n <Col className="col" span="6">\n <Icon name="demo1" classPrefix="page-icon" size="40px" />\n </Col>\n <Col className="col" span="6">\n <Icon name="demo2" classPrefix="page-icon" size="40px" />\n </Col>\n <Col className="col" span="6">\n <Icon name="demo3" classPrefix="page-icon" size="40px" />\n </Col>\n </Row>\n </>\n )\n}\n\n
\n引入第三方或自定义的字体图标样式
\n@font-face {\n font-family: 'iconfont';\n src: url('data: charset=utf-8;base64, .......') format('truetype');\n}\n\n.page-icon {\n font-family: 'iconfont' !important;\n font-size: 16px;\n font-style: normal;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.page-icon-demo1::before {\n content: 'ea3c';\n}\n\n.page-icon-demo2::before {\n content: 'ea3d';\n}\n\n.page-icon-demo3::before {\n content: 'ea3e';\n}\n
\nimport { Text } from '@tarojs/components'\nimport icons from '@vant/icons'\nimport { Col, Icon } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <>\n {icons.basic.map((name, i) => (\n <Col\n key={i}\n span="6"\n style={{ paddingTop: '20px', paddingBottom: '20px' }}\n >\n <Icon name={name} size="32px" />\n <Text>{name}</Text>\n </Col>\n ))}\n </>\n )\n}\n\n
\nimport { Text } from '@tarojs/components'\nimport icons from '@vant/icons'\nimport { Col, Icon } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <>\n {icons.outline.map((name, i) => (\n <Col\n key={i}\n span="6"\n style={{ paddingTop: '20px', paddingBottom: '20px', height: '100px' }}\n >\n <Icon name={name} size="32px" />\n <Text style={{ textAlign: 'center' }}>{name}</Text>\n </Col>\n ))}\n </>\n )\n}\n\n
\nimport { Text } from '@tarojs/components'\nimport icons from '@vant/icons'\nimport { Col, Icon } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <>\n {icons.filled.map((name, i) => (\n <Col\n key={i}\n span="6"\n style={{ paddingTop: '20px', paddingBottom: '20px', height: '100px' }}\n >\n <Icon name={name} size="32px" />\n <Text style={{ textAlign: 'center' }}>{name}</Text>\n </Col>\n ))}\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
dot | \n是否显示图标右上角小红点 | \n boolean | \n- | \nfalse | \n
info | \n图标右上角文字提示 | \n number ¦ string | \nfalse | \nfalse | \n
size | \n图标大小,如 20px,单位为 px | \n number ¦ string | \n- | \nfalse | \n
color | \n图标颜色 | \n string | \n- | \nfalse | \n
style | \n自定义样式 | \n attr: ¦ string ¦ CSSProperties | \n- | \nfalse | \n
classPrefix | \n类名前缀 | \n string | \nvant-icon 传空字符串可去除前缀 | \nfalse | \n
name | \n图标名称或图片链接 | \n string | \n- | \nfalse | \n
在页面顶部展示消息提示,支持函数调用和组件调用两种方式。
\n在 Taro 文件中引入组件
\nimport { Notify } from '@antmjs/vantui'\n
\nimport { Notify } from 'vantui'\n
\nimport { View } from '@tarojs/components'\nimport { navigateTo } from '@tarojs/taro'\nimport { Button, Notify } from '@antmjs/vantui'\n\nexport default function Demo() {\n const show = () => Notify.show('通知内容')\n\n return (\n <View>\n {/* 在页面内添加对应的节点 */}\n <Button onClick={show} type="danger">\n 基础用法\n </Button>\n <Notify id="vanNotify" />\n <Button\n onClick={() => navigateTo({ url: '/pages/nav-bar/index' })}\n type="danger"\n >\n 跳转也有Notify的页面\n </Button>\n </View>\n )\n}\n\n
\n支持primary
、success
、warning
、danger
四种通知类型,默认为danger
。
import { View } from '@tarojs/components'\nimport { Button, Notify } from '@antmjs/vantui'\n\nexport default function Demo() {\n const primaryShow = () => {\n Notify.show({\n message: '-----通知内容-----',\n type: 'primary',\n })\n }\n\n const successShow = () => {\n Notify.show({\n message: '-----通知内容-----',\n type: 'success',\n })\n }\n\n const dangerShow = () => {\n Notify.show({\n message: '-----通知内容-----',\n type: 'danger',\n })\n }\n\n const warningShow = () => {\n Notify.show({\n message: '-----通知内容-----',\n type: 'warning',\n })\n }\n\n return (\n <View>\n <Button onClick={primaryShow} type="info">\n 主要通知\n </Button>\n <Button onClick={successShow} type="primary">\n 成功通知\n </Button>\n <Button onClick={dangerShow} type="danger">\n 危险通知\n </Button>\n <Button onClick={warningShow} type="warning">\n 警告用法\n </Button>\n <Notify id="vanNotify" />\n </View>\n )\n}\n\n
\n自定义消息通知的颜色和展示时长。
\nimport { View } from '@tarojs/components'\nimport { Button, Notify } from '@antmjs/vantui'\n\nexport default function Demo() {\n const show = () => {\n Notify.show({\n message: '自定义颜色',\n color: '#ad0000',\n background: '#ffe1e1',\n duration: 10000,\n })\n }\n\n return (\n <View>\n <Button onClick={show} type="primary">\n 自定义颜色和时长\n </Button>\n <Notify id="vanNotify" />\n </View>\n )\n}\n\n
\nimport { View } from '@tarojs/components'\nimport { Button, Notify } from '@antmjs/vantui'\n\nexport default function Demo() {\n const show = () => {\n Notify.show({\n message: '自定义节点选择器',\n duration: 1000,\n selector: '#customSelector',\n })\n }\n\n return (\n <View>\n <Button onClick={show} type="primary">\n 自定义选择器\n </Button>\n <Notify id="customSelector" />\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
selector | \n- | \n string | \n- | \nfalse | \n
message | \n- | \n ReactNode | \n- | \nfalse | \n
background | \n- | \n string | \n- | \nfalse | \n
type | \n- | \n string | \n- | \nfalse | \n
color | \n- | \n string | \n- | \nfalse | \n
duration | \n- | \n number | \n- | \nfalse | \n
zIndex | \n- | \n number | \n- | \nfalse | \n
safeAreaInsetTop | \n- | \n boolean | \n- | \nfalse | \n
top | \n- | \n number | \n- | \nfalse | \n
id | \n- | \n string | \n- | \nfalse | \n
onClick | \n- | \n ( data: any ) => void | \n- | \nfalse | \n
onOpened | \n- | \n () => void | \n- | \nfalse | \n
onClose | \n- | \n () => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--notify-padding | \n 12px 30px; | \n
--notify-font-size | \n 28px; | \n
--notify-line-height | \n 40px; | \n
--notify-primary-background-color | \n @blue; | \n
--notify-success-background-color | \n @green; | \n
--notify-danger-background-color | \n @red; | \n
--notify-warning-background-color | \n @orange; | \n
在页面顶部展示消息提示,支持函数调用和组件调用两种方式。
\n在 Taro 文件中引入组件
\nimport { Notify } from '@antmjs/vantui'\n
\nimport { Notify } from 'vantui'\n
\nimport { View } from '@tarojs/components'\nimport { navigateTo } from '@tarojs/taro'\nimport { Button, Notify } from '@antmjs/vantui'\n\nexport default function Demo() {\n const show = () => Notify.show('通知内容')\n\n return (\n <View>\n {/* 在页面内添加对应的节点 */}\n <Button onClick={show} type="danger">\n 基础用法\n </Button>\n <Notify id="vanNotify" />\n <Button\n onClick={() => navigateTo({ url: '/pages/nav-bar/index' })}\n type="danger"\n >\n 跳转也有Notify的页面\n </Button>\n </View>\n )\n}\n\n
\n支持primary
、success
、warning
、danger
四种通知类型,默认为danger
。
import { View } from '@tarojs/components'\nimport { Button, Notify } from '@antmjs/vantui'\n\nexport default function Demo() {\n const primaryShow = () => {\n Notify.show({\n message: '-----通知内容-----',\n type: 'primary',\n })\n }\n\n const successShow = () => {\n Notify.show({\n message: '-----通知内容-----',\n type: 'success',\n })\n }\n\n const dangerShow = () => {\n Notify.show({\n message: '-----通知内容-----',\n type: 'danger',\n })\n }\n\n const warningShow = () => {\n Notify.show({\n message: '-----通知内容-----',\n type: 'warning',\n })\n }\n\n return (\n <View>\n <Button onClick={primaryShow} type="info">\n 主要通知\n </Button>\n <Button onClick={successShow} type="primary">\n 成功通知\n </Button>\n <Button onClick={dangerShow} type="danger">\n 危险通知\n </Button>\n <Button onClick={warningShow} type="warning">\n 警告用法\n </Button>\n <Notify id="vanNotify" />\n </View>\n )\n}\n\n
\n自定义消息通知的颜色和展示时长。
\nimport { View } from '@tarojs/components'\nimport { Button, Notify } from '@antmjs/vantui'\n\nexport default function Demo() {\n const show = () => {\n Notify.show({\n message: '自定义颜色',\n color: '#ad0000',\n background: '#ffe1e1',\n duration: 10000,\n })\n }\n\n return (\n <View>\n <Button onClick={show} type="primary">\n 自定义颜色和时长\n </Button>\n <Notify id="vanNotify" />\n </View>\n )\n}\n\n
\nimport { View } from '@tarojs/components'\nimport { Button, Notify } from '@antmjs/vantui'\n\nexport default function Demo() {\n const show = () => {\n Notify.show({\n message: '自定义节点选择器',\n duration: 1000,\n selector: '#customSelector',\n })\n }\n\n return (\n <View>\n <Button onClick={show} type="primary">\n 自定义选择器\n </Button>\n <Notify id="customSelector" />\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
selector | \n- | \n string | \n- | \nfalse | \n
message | \n- | \n ReactNode | \n- | \nfalse | \n
background | \n- | \n string | \n- | \nfalse | \n
type | \n- | \n string | \n- | \nfalse | \n
color | \n- | \n string | \n- | \nfalse | \n
duration | \n- | \n number | \n- | \nfalse | \n
zIndex | \n- | \n number | \n- | \nfalse | \n
safeAreaInsetTop | \n- | \n boolean | \n- | \nfalse | \n
top | \n- | \n number | \n- | \nfalse | \n
id | \n- | \n string | \n- | \nfalse | \n
onClick | \n- | \n ( data: any ) => void | \n- | \nfalse | \n
onOpened | \n- | \n () => void | \n- | \nfalse | \n
onClose | \n- | \n () => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--notify-padding | \n 12px 30px; | \n
--notify-font-size | \n 28px; | \n
--notify-line-height | \n 40px; | \n
--notify-primary-background-color | \n @blue; | \n
--notify-success-background-color | \n @green; | \n
--notify-danger-background-color | \n @red; | \n
--notify-warning-background-color | \n @orange; | \n
在一组备选项中进行多选。
\n在 Taro 文件中引入组件
\nimport { Checkbox, CheckboxGroup } from '@antmjs/vantui'\n
\n通过value
绑定复选框的勾选状态。
/* eslint-disable */\nimport react from 'react'\nimport { Checkbox } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(true)\n return (\n <Checkbox value={value} onChange={(e) => setValue(e.detail)}>\n 复选框\n </Checkbox>\n )\n}\n\n
\ndisabled
属性可以禁用复选框。labelDisabled
属性可以禁用复选框文本点击。/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Checkbox } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(true)\n return (\n <View style={{ display: 'flex' }}>\n <Checkbox disabled style={{ marginRight: '20px' }}>\n 禁用1\n </Checkbox>\n <Checkbox\n labelDisabled\n value={value}\n onChange={(e) => setValue(e.detail)}\n >\n 禁用2\n </Checkbox>\n </View>\n )\n}\n\n
\nshape
属性设置为square
,复选框的形状会变成方形。checkedColor
属性可以自定义选中状态下的图标颜色。iconSize
属性可以自定义图标的大小。/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Checkbox } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(true)\n const props = {\n value: value,\n onChange: (e) => setValue(e.detail),\n }\n\n return (\n <View>\n <Cell>\n <Checkbox {...props} shape="square">\n 形状\n </Checkbox>\n </Cell>\n <Cell>\n <Checkbox {...props} checkedColor="#07c160">\n 颜色\n </Checkbox>\n </Cell>\n <Cell>\n <Checkbox {...props} iconSize="25px">\n 颜色\n </Checkbox>\n </Cell>\n </View>\n )\n}\n\n
\n通过 icon 插槽自定义图标。
\n/* eslint-disable */\nimport react from 'react'\nimport { Checkbox, Image } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(true)\n\n return (\n <Checkbox\n value={value}\n onChange={(e) => setValue(e.detail)}\n renderIcon={\n <Image\n style={{ width: '30px', height: '30px' }}\n src={\n value\n ? 'https://img.yzcdn.cn/vant/user-active.png'\n : 'https://img.yzcdn.cn/vant/user-inactive.png'\n }\n />\n }\n >\n 自定义图标\n </Checkbox>\n )\n}\n\n
\n需要与vanCheckboxGroup
一起使用,选中值是一个数组,通过value
绑定在vanCheckboxGroup
上,数组中的项即为选中的Checkbox
的name
属性设置的值。
/* eslint-disable */\nimport react from 'react'\nimport { CheckboxGroup, Checkbox } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [values, setValues] = react.useState(['a', 'b'])\n return (\n <CheckboxGroup\n value={values}\n onChange={(e) => {\n console.info(e)\n setValues([...e.detail])\n }}\n >\n <Checkbox name="a">复选框 a</Checkbox>\n <Checkbox name="b">复选框 b</Checkbox>\n <Checkbox name="c">复选框 c</Checkbox>\n </CheckboxGroup>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { CheckboxGroup, Checkbox } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [values, setValues] = react.useState(['a'])\n return (\n <CheckboxGroup\n direction="horizontal"\n value={values}\n max={2}\n onChange={(e) => {\n setValues([...e.detail])\n }}\n >\n <Checkbox name="a">复选框 a</Checkbox>\n <Checkbox name="b">复选框 b</Checkbox>\n <Checkbox name="c">复选框 c</Checkbox>\n </CheckboxGroup>\n )\n}\n\n
\n此时你需要再引入Cell
和CellGroup
组件,并通过 checkbox 的 toggle 方法手动触发切换。
/* eslint-disable */\nimport react from 'react'\nimport { CheckboxGroup, CellGroup, Cell, Checkbox } from '@antmjs/vantui'\n\nconst list = ['aa', 'bb', 'cc']\nexport default function Demo() {\n const [values, setValues] = react.useState(['bb'])\n\n const cellClick = (item) => {\n if (values.includes(item)) {\n values.splice(values.indexOf(item), 1)\n } else values.push(item)\n setValues([...values])\n }\n\n return (\n <CheckboxGroup value={values}>\n <CellGroup>\n {list.map((item) => {\n return (\n <Cell\n key={item}\n title={'复选框 ' + item}\n clickable\n onClick={() => cellClick(item)}\n >\n <Checkbox style={{ justifyContent: 'flex-end' }} name={item} />\n </Cell>\n )\n })}\n </CellGroup>\n </CheckboxGroup>\n )\n}\n\n
\n.valueClass {\n flex: none !important;\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
name | \n- | \n ReactNode | \n- | \nfalse | \n
value | \n- | \n boolean | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
checkedColor | \n- | \n string | \n- | \nfalse | \n
labelPosition | \n- | \n string | \n- | \nfalse | \n
labelDisabled | \n- | \n boolean | \n- | \nfalse | \n
shape | \n- | \n "round" ¦ "square" | \n- | \nfalse | \n
iconSize | \n- | \n string ¦ number | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
renderIcon | \n- | \n ReactNode | \n- | \nfalse | \n
onChange | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
max | \n- | \n number | \n- | \nfalse | \n
value | \n- | \n Array | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
direction | \n- | \n attr: ¦ "horizontal" ¦ "vertical" | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onChange | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--checkbox-size | \n 40px; | \n
--checkbox-border-color | \n @gray-5; | \n
--checkbox-transition-duration | \n 0.2s; | \n
--checkbox-label-margin | \n 20px; | \n
--checkbox-label-color | \n @text-color; | \n
--checkbox-checked-icon-color | \n var(--primary-color); | \n
--checkbox-disabled-icon-color | \n @gray-5; | \n
--checkbox-disabled-label-color | \n @gray-5; | \n
--checkbox-disabled-background-color | \n @border-color; | \n
在一组备选项中进行多选。
\n在 Taro 文件中引入组件
\nimport { Checkbox, CheckboxGroup } from '@antmjs/vantui'\n
\n通过value
绑定复选框的勾选状态。
/* eslint-disable */\nimport react from 'react'\nimport { Checkbox } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(true)\n return (\n <Checkbox value={value} onChange={(e) => setValue(e.detail)}>\n 复选框\n </Checkbox>\n )\n}\n\n
\ndisabled
属性可以禁用复选框。labelDisabled
属性可以禁用复选框文本点击。/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Checkbox } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(true)\n return (\n <View style={{ display: 'flex' }}>\n <Checkbox disabled style={{ marginRight: '20px' }}>\n 禁用1\n </Checkbox>\n <Checkbox\n labelDisabled\n value={value}\n onChange={(e) => setValue(e.detail)}\n >\n 禁用2\n </Checkbox>\n </View>\n )\n}\n\n
\nshape
属性设置为square
,复选框的形状会变成方形。checkedColor
属性可以自定义选中状态下的图标颜色。iconSize
属性可以自定义图标的大小。/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Checkbox } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(true)\n const props = {\n value: value,\n onChange: (e) => setValue(e.detail),\n }\n\n return (\n <View>\n <Cell>\n <Checkbox {...props} shape="square">\n 形状\n </Checkbox>\n </Cell>\n <Cell>\n <Checkbox {...props} checkedColor="#07c160">\n 颜色\n </Checkbox>\n </Cell>\n <Cell>\n <Checkbox {...props} iconSize="25px">\n 颜色\n </Checkbox>\n </Cell>\n </View>\n )\n}\n\n
\n通过 icon 插槽自定义图标。
\n/* eslint-disable */\nimport react from 'react'\nimport { Checkbox, Image } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(true)\n\n return (\n <Checkbox\n value={value}\n onChange={(e) => setValue(e.detail)}\n renderIcon={\n <Image\n style={{ width: '30px', height: '30px' }}\n src={\n value\n ? 'https://img.yzcdn.cn/vant/user-active.png'\n : 'https://img.yzcdn.cn/vant/user-inactive.png'\n }\n />\n }\n >\n 自定义图标\n </Checkbox>\n )\n}\n\n
\n需要与vanCheckboxGroup
一起使用,选中值是一个数组,通过value
绑定在vanCheckboxGroup
上,数组中的项即为选中的Checkbox
的name
属性设置的值。
/* eslint-disable */\nimport react from 'react'\nimport { CheckboxGroup, Checkbox } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [values, setValues] = react.useState(['a', 'b'])\n return (\n <CheckboxGroup\n value={values}\n onChange={(e) => {\n console.info(e)\n setValues([...e.detail])\n }}\n >\n <Checkbox name="a">复选框 a</Checkbox>\n <Checkbox name="b">复选框 b</Checkbox>\n <Checkbox name="c">复选框 c</Checkbox>\n </CheckboxGroup>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { CheckboxGroup, Checkbox } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [values, setValues] = react.useState(['a'])\n return (\n <CheckboxGroup\n direction="horizontal"\n value={values}\n max={2}\n onChange={(e) => {\n setValues([...e.detail])\n }}\n >\n <Checkbox name="a">复选框 a</Checkbox>\n <Checkbox name="b">复选框 b</Checkbox>\n <Checkbox name="c">复选框 c</Checkbox>\n </CheckboxGroup>\n )\n}\n\n
\n此时你需要再引入Cell
和CellGroup
组件,并通过 checkbox 的 toggle 方法手动触发切换。
/* eslint-disable */\nimport react from 'react'\nimport { CheckboxGroup, CellGroup, Cell, Checkbox } from '@antmjs/vantui'\n\nconst list = ['aa', 'bb', 'cc']\nexport default function Demo() {\n const [values, setValues] = react.useState(['bb'])\n\n const cellClick = (item) => {\n if (values.includes(item)) {\n values.splice(values.indexOf(item), 1)\n } else values.push(item)\n setValues([...values])\n }\n\n return (\n <CheckboxGroup value={values}>\n <CellGroup>\n {list.map((item) => {\n return (\n <Cell\n key={item}\n title={'复选框 ' + item}\n clickable\n onClick={() => cellClick(item)}\n >\n <Checkbox style={{ justifyContent: 'flex-end' }} name={item} />\n </Cell>\n )\n })}\n </CellGroup>\n </CheckboxGroup>\n )\n}\n\n
\n.valueClass {\n flex: none !important;\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
name | \n- | \n ReactNode | \n- | \nfalse | \n
value | \n- | \n boolean | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
checkedColor | \n- | \n string | \n- | \nfalse | \n
labelPosition | \n- | \n string | \n- | \nfalse | \n
labelDisabled | \n- | \n boolean | \n- | \nfalse | \n
shape | \n- | \n "round" ¦ "square" | \n- | \nfalse | \n
iconSize | \n- | \n string ¦ number | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
renderIcon | \n- | \n ReactNode | \n- | \nfalse | \n
onChange | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
max | \n- | \n number | \n- | \nfalse | \n
value | \n- | \n Array | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
direction | \n- | \n attr: ¦ "horizontal" ¦ "vertical" | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onChange | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--checkbox-size | \n 40px; | \n
--checkbox-border-color | \n @gray-5; | \n
--checkbox-transition-duration | \n 0.2s; | \n
--checkbox-label-margin | \n 20px; | \n
--checkbox-label-color | \n @text-color; | \n
--checkbox-checked-icon-color | \n var(--primary-color); | \n
--checkbox-disabled-icon-color | \n @gray-5; | \n
--checkbox-disabled-label-color | \n @gray-5; | \n
--checkbox-disabled-background-color | \n @border-color; | \n
步进器由增加按钮、减少按钮和输入框组成,用于在一定范围内输入、调整数字。
\n在 Taro 文件中引入组件
\nimport { Stepper } from '@antmjs/vantui'\n
\n通过value
设置输入值,可以通过change
事件监听到输入值的变化。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={1} />\n}\n\n
\n通过step
属性设置每次点击增加或减少按钮时变化的值,默认为1
。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={1} step="2" />\n}\n\n
\n通过min
和max
属性限制输入值的范围。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={1} step="2" />\n}\n\n
\n设置integer
属性后,输入框将限制只能输入整数。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={5} min="5" max="8" />\n}\n\n
\n通过设置disabled
属性来禁用步进器,禁用状态下无法点击按钮或修改输入框。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={1} integer />\n}\n\n
\n通过设置longPress
属性决定步进器是否开启长按手势。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={1} disabled />\n}\n\n
\n通过设置decimalLength
属性可以保留固定的小数位数。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={1} longPress={false} />\n}\n\n
\n如果需要异步地修改输入框的值,可以设置asyncChange
属性,并在change
事件中手动修改value
。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={1} step="0.2" decimalLength={1} />\n}\n\n
\n通过inputWidth
属性设置输入框宽度,通过buttonSize
属性设置按钮大小和输入框高度。
function Demo() {\n return <Stepper value={1} inputWidth="40px" buttonSize="32px" />\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
name | \n在表单内提交时的标识符 | \n ReactNode | \n- | \nfalse | \n
value | \n输入值 | \n string ¦ number | \n- | \nfalse | \n
integer | \n是否只允许输入整数 | \n boolean | \nfalse | \nfalse | \n
disabled | \n是否禁用 | \n boolean | \nfalse | \nfalse | \n
adjustPosition | \n输入聚焦后,键盘弹起时,是否自动上推页面 | \n boolean | \ntrue | \nfalse | \n
inputWidth | \n输入框宽度 | \n string ¦ number | \n32px | \nfalse | \n
buttonSize | \n按钮大小 | \n string ¦ number | \n28px | \nfalse | \n
asyncChange | \n是否异步更新 | \n boolean | \nfalse | \nfalse | \n
disableInput | \n禁止输入 | \n boolean | \nfalse | \nfalse | \n
decimalLength | \n固定显示的小数位数 | \n number | \n- | \nfalse | \n
min | \n最小值 | \n string ¦ number | \n1 | \nfalse | \n
max | \n最大值 | \n string ¦ number | \n- | \nfalse | \n
step | \n步长 | \n string ¦ number | \n1 | \nfalse | \n
showPlus | \n是否展示新增按钮 | \n boolean | \ntrue | \nfalse | \n
showMinus | \n是否展示减少按钮 | \n boolean | \ntrue | \nfalse | \n
disablePlus | \n是否禁用新增按钮 | \n boolean | \nfalse | \nfalse | \n
disableMinus | \n是否禁用减少按钮 | \n boolean | \nfalse | \nfalse | \n
longPress | \n是否开启长按 | \n boolean | \nfalse | \nfalse | \n
theme | \n可选值 round | \n "round" | \n- | \nfalse | \n
alwaysEmbed | \n强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | \n boolean | \nfalse | \nfalse | \n
onFocus | \n输入框聚焦时触发 | \n CommonEventFunction | \n- | \nfalse | \n
onChange | \n当绑定值变化时触发的事件 | \n (event: { detail: ¦ number ¦ string }) => void | \n- | \nfalse | \n
onBlur | \n输入框失焦时触发 | \n CommonEventFunction | \n- | \nfalse | \n
onOverlimit | \n点击不可用的按钮时触发 | \n () => void | \n- | \nfalse | \n
onPlus | \n点击增加按钮时触发 | \n () => void | \n- | \nfalse | \n
onMinus | \n点击减少按钮时触发 | \n () => void | \n- | \nfalse | \n
renderMinus | \n自定义渲染新增按钮 | \n ReactNode | \n- | \nfalse | \n
renderPlus | \n自定义渲染减少按钮 | \n ReactNode | \n- | \nfalse | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
setValue | \n由于当前组件为非受控,可以通过此方法来设置内部的值 | \n ( v: string ¦ number ) => void | \n
setAutoFocus | \n设置聚焦 | \n () => void | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--stepper-active-color | \n #e8e8e8; | \n
--stepper-background-color | \n @active-color; | \n
--stepper-button-icon-color | \n @text-color; | \n
--stepper-button-disabled-color | \n @background-color; | \n
--stepper-button-disabled-icon-color | \n @gray-5; | \n
--stepper-button-round-theme-color | \n var(--primary-color); | \n
--stepper-input-width | \n 64px; | \n
--stepper-input-height | \n 56px; | \n
--stepper-input-font-size | \n @font-size-md; | \n
--stepper-input-line-height | \n normal; | \n
--stepper-input-text-color | \n @text-color; | \n
--stepper-input-disabled-text-color | \n @gray-5; | \n
--stepper-input-disabled-background-color | \n @active-color; | \n
--stepper-border-radius | \n @border-radius-md; | \n
步进器由增加按钮、减少按钮和输入框组成,用于在一定范围内输入、调整数字。
\n在 Taro 文件中引入组件
\nimport { Stepper } from '@antmjs/vantui'\n
\n通过value
设置输入值,可以通过change
事件监听到输入值的变化。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={1} />\n}\n\n
\n通过step
属性设置每次点击增加或减少按钮时变化的值,默认为1
。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={1} step="2" />\n}\n\n
\n通过min
和max
属性限制输入值的范围。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={1} step="2" />\n}\n\n
\n设置integer
属性后,输入框将限制只能输入整数。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={5} min="5" max="8" />\n}\n\n
\n通过设置disabled
属性来禁用步进器,禁用状态下无法点击按钮或修改输入框。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={1} integer />\n}\n\n
\n通过设置longPress
属性决定步进器是否开启长按手势。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={1} disabled />\n}\n\n
\n通过设置decimalLength
属性可以保留固定的小数位数。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={1} longPress={false} />\n}\n\n
\n如果需要异步地修改输入框的值,可以设置asyncChange
属性,并在change
事件中手动修改value
。
import { Stepper } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Stepper value={1} step="0.2" decimalLength={1} />\n}\n\n
\n通过inputWidth
属性设置输入框宽度,通过buttonSize
属性设置按钮大小和输入框高度。
function Demo() {\n return <Stepper value={1} inputWidth="40px" buttonSize="32px" />\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
name | \n在表单内提交时的标识符 | \n ReactNode | \n- | \nfalse | \n
value | \n输入值 | \n string ¦ number | \n- | \nfalse | \n
integer | \n是否只允许输入整数 | \n boolean | \nfalse | \nfalse | \n
disabled | \n是否禁用 | \n boolean | \nfalse | \nfalse | \n
adjustPosition | \n输入聚焦后,键盘弹起时,是否自动上推页面 | \n boolean | \ntrue | \nfalse | \n
inputWidth | \n输入框宽度 | \n string ¦ number | \n32px | \nfalse | \n
buttonSize | \n按钮大小 | \n string ¦ number | \n28px | \nfalse | \n
asyncChange | \n是否异步更新 | \n boolean | \nfalse | \nfalse | \n
disableInput | \n禁止输入 | \n boolean | \nfalse | \nfalse | \n
decimalLength | \n固定显示的小数位数 | \n number | \n- | \nfalse | \n
min | \n最小值 | \n string ¦ number | \n1 | \nfalse | \n
max | \n最大值 | \n string ¦ number | \n- | \nfalse | \n
step | \n步长 | \n string ¦ number | \n1 | \nfalse | \n
showPlus | \n是否展示新增按钮 | \n boolean | \ntrue | \nfalse | \n
showMinus | \n是否展示减少按钮 | \n boolean | \ntrue | \nfalse | \n
disablePlus | \n是否禁用新增按钮 | \n boolean | \nfalse | \nfalse | \n
disableMinus | \n是否禁用减少按钮 | \n boolean | \nfalse | \nfalse | \n
longPress | \n是否开启长按 | \n boolean | \nfalse | \nfalse | \n
theme | \n可选值 round | \n "round" | \n- | \nfalse | \n
alwaysEmbed | \n强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效) | \n boolean | \nfalse | \nfalse | \n
onFocus | \n输入框聚焦时触发 | \n CommonEventFunction | \n- | \nfalse | \n
onChange | \n当绑定值变化时触发的事件 | \n (event: { detail: ¦ number ¦ string }) => void | \n- | \nfalse | \n
onBlur | \n输入框失焦时触发 | \n CommonEventFunction | \n- | \nfalse | \n
onOverlimit | \n点击不可用的按钮时触发 | \n () => void | \n- | \nfalse | \n
onPlus | \n点击增加按钮时触发 | \n () => void | \n- | \nfalse | \n
onMinus | \n点击减少按钮时触发 | \n () => void | \n- | \nfalse | \n
renderMinus | \n自定义渲染新增按钮 | \n ReactNode | \n- | \nfalse | \n
renderPlus | \n自定义渲染减少按钮 | \n ReactNode | \n- | \nfalse | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
setValue | \n由于当前组件为非受控,可以通过此方法来设置内部的值 | \n ( v: string ¦ number ) => void | \n
setAutoFocus | \n设置聚焦 | \n () => void | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--stepper-active-color | \n #e8e8e8; | \n
--stepper-background-color | \n @active-color; | \n
--stepper-button-icon-color | \n @text-color; | \n
--stepper-button-disabled-color | \n @background-color; | \n
--stepper-button-disabled-icon-color | \n @gray-5; | \n
--stepper-button-round-theme-color | \n var(--primary-color); | \n
--stepper-input-width | \n 64px; | \n
--stepper-input-height | \n 56px; | \n
--stepper-input-font-size | \n @font-size-md; | \n
--stepper-input-line-height | \n normal; | \n
--stepper-input-text-color | \n @text-color; | \n
--stepper-input-disabled-text-color | \n @gray-5; | \n
--stepper-input-disabled-background-color | \n @active-color; | \n
--stepper-border-radius | \n @border-radius-md; | \n
用于将内容分隔为多个区域。
\n在 Taro 文件中引入组件
\nimport { Divider } from '@antmjs/vantui'\n
\n\n\nVant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手。
\n
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Divider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Divider />\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Divider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Divider hairline={true} />\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Divider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Divider dashed={true} />\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Divider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Divider contentPosition="center">文本</Divider>\n <Divider contentPosition="left">文本</Divider>\n <Divider contentPosition="right">文本</Divider>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Divider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Divider contentPosition="center" textColor="#1989fa">\n 文本颜色\n </Divider>\n <Divider contentPosition="center" borderColor="#1989fa">\n border 颜色\n </Divider>\n <Divider contentPosition="center" fontSize="18">\n 字体大小\n </Divider>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Divider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Divider\n contentPosition="center"\n style="color: #1989fa; borderColor: #1989fa; fontSize: 18px;"\n >\n 文本\n </Divider>\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
dashed | \n- | \n boolean | \n- | \nfalse | \n
hairline | \n- | \n boolean | \n- | \nfalse | \n
contentPosition | \n- | \n attr: ¦ "left" ¦ "center" ¦ "right" | \n- | \nfalse | \n
fontSize | \n- | \n string | \n- | \nfalse | \n
borderColor | \n- | \n string | \n- | \nfalse | \n
textColor | \n- | \n string | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--divider-margin | \n @padding-md 0; | \n
--divider-text-color | \n @gray-6; | \n
--divider-font-size | \n @font-size-md; | \n
--divider-line-height | \n 48px; | \n
--divider-border-color | \n @border-color; | \n
--divider-content-padding | \n @padding-md; | \n
--divider-content-left-width | \n 10%; | \n
--divider-content-right-width | \n 10%; | \n
用于将内容分隔为多个区域。
\n在 Taro 文件中引入组件
\nimport { Divider } from '@antmjs/vantui'\n
\n\n\nVant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手。
\n
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Divider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Divider />\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Divider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Divider hairline={true} />\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Divider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Divider dashed={true} />\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Divider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Divider contentPosition="center">文本</Divider>\n <Divider contentPosition="left">文本</Divider>\n <Divider contentPosition="right">文本</Divider>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Divider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Divider contentPosition="center" textColor="#1989fa">\n 文本颜色\n </Divider>\n <Divider contentPosition="center" borderColor="#1989fa">\n border 颜色\n </Divider>\n <Divider contentPosition="center" fontSize="18">\n 字体大小\n </Divider>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Divider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Divider\n contentPosition="center"\n style="color: #1989fa; borderColor: #1989fa; fontSize: 18px;"\n >\n 文本\n </Divider>\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
dashed | \n- | \n boolean | \n- | \nfalse | \n
hairline | \n- | \n boolean | \n- | \nfalse | \n
contentPosition | \n- | \n attr: ¦ "left" ¦ "center" ¦ "right" | \n- | \nfalse | \n
fontSize | \n- | \n string | \n- | \nfalse | \n
borderColor | \n- | \n string | \n- | \nfalse | \n
textColor | \n- | \n string | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--divider-margin | \n @padding-md 0; | \n
--divider-text-color | \n @gray-6; | \n
--divider-font-size | \n @font-size-md; | \n
--divider-line-height | \n 48px; | \n
--divider-border-color | \n @border-color; | \n
--divider-content-padding | \n @padding-md; | \n
--divider-content-left-width | \n 10%; | \n
--divider-content-right-width | \n 10%; | \n
元素排列中保持相同的宽度。
\n适用于多个元素按照水平或垂直方向保持相同的间距。
\nwrap 换行属性默认开启
\nimport { Button, Space } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Space>\n <Button type="primary">按钮1</Button>\n <Button type="primary">按钮2</Button>\n <Button type="primary">按钮3</Button>\n <Button type="primary">按钮4</Button>\n <Button type="primary">按钮5</Button>\n <Button type="primary">按钮6</Button>\n </Space>\n )\n}\n\n
\nimport { Button, Space } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Space direction="vertical">\n <Button type="primary">按钮1</Button>\n <Button type="primary">按钮2</Button>\n <Button type="primary">按钮3</Button>\n </Space>\n )\n}\n\n
\nimport { Button, Space } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Space gap={20}>\n <Button type="primary">按钮----1</Button>\n <Button type="primary">按钮----2</Button>\n <Button type="primary">按钮—---3</Button>\n <Button type="primary">按钮----4</Button>\n </Space>\n )\n}\n\n
\nimport { Button, Space } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Space justify="center" block>\n <Button type="primary">按钮1</Button>\n <Button type="warning" style={{ height: '50px' }}>\n 按钮2\n </Button>\n <Button type="danger" style={{ height: '80px' }}>\n 按钮3\n </Button>\n </Space>\n )\n}\n\n
\nimport { Button, Space } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Space justify="center" align="end" block>\n <Button type="primary">按钮1</Button>\n <Button type="warning" style={{ height: '50px' }}>\n 按钮2\n </Button>\n <Button type="danger" style={{ height: '80px' }}>\n 按钮3\n </Button>\n </Space>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
direction | \n间距方向 | \n attr: ¦ "horizontal" ¦ "vertical" | \n\'horizontal\' | \nfalse | \n
align | \n交叉轴对其方式 | \n attr: ¦ "start" ¦ "end" ¦ "center" ¦ "baseline" | \n- | \nfalse | \n
justify | \n水平轴对其方式 | \n attr: ¦ "start" ¦ "end" ¦ "center" ¦ "between" ¦ "around" ¦ "evenly" ¦ "stretch" | \n- | \nfalse | \n
wrap | \n是否换行 | \n boolean | \nfalse | \nfalse | \n
block | \n是否渲染为块级元素 | \n boolean | \nfalse | \nfalse | \n
gap | \n间距设置,同时设置水平和垂直 | \n number | \n- | \nfalse | \n
gapVertical | \n垂直间距设置 | \n number | \n- | \nfalse | \n
gapHorizontal | \n水平间距设置 | \n number | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
style | \n- | \n React.CSSProperties | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--space-gap | \n 8px; | \n
--space-gap-vertical | \n 8px; | \n
--space-gap-horizontal | \n 8px; | \n
适用于多个元素按照水平或垂直方向保持相同的间距。
\nwrap 换行属性默认开启
\nimport { Button, Space } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Space>\n <Button type="primary">按钮1</Button>\n <Button type="primary">按钮2</Button>\n <Button type="primary">按钮3</Button>\n <Button type="primary">按钮4</Button>\n <Button type="primary">按钮5</Button>\n <Button type="primary">按钮6</Button>\n </Space>\n )\n}\n\n
\nimport { Button, Space } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Space direction="vertical">\n <Button type="primary">按钮1</Button>\n <Button type="primary">按钮2</Button>\n <Button type="primary">按钮3</Button>\n </Space>\n )\n}\n\n
\nimport { Button, Space } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Space gap={20}>\n <Button type="primary">按钮----1</Button>\n <Button type="primary">按钮----2</Button>\n <Button type="primary">按钮—---3</Button>\n <Button type="primary">按钮----4</Button>\n </Space>\n )\n}\n\n
\nimport { Button, Space } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Space justify="center" block>\n <Button type="primary">按钮1</Button>\n <Button type="warning" style={{ height: '50px' }}>\n 按钮2\n </Button>\n <Button type="danger" style={{ height: '80px' }}>\n 按钮3\n </Button>\n </Space>\n )\n}\n\n
\nimport { Button, Space } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Space justify="center" align="end" block>\n <Button type="primary">按钮1</Button>\n <Button type="warning" style={{ height: '50px' }}>\n 按钮2\n </Button>\n <Button type="danger" style={{ height: '80px' }}>\n 按钮3\n </Button>\n </Space>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
direction | \n间距方向 | \n attr: ¦ "horizontal" ¦ "vertical" | \n\'horizontal\' | \nfalse | \n
align | \n交叉轴对其方式 | \n attr: ¦ "start" ¦ "end" ¦ "center" ¦ "baseline" | \n- | \nfalse | \n
justify | \n水平轴对其方式 | \n attr: ¦ "start" ¦ "end" ¦ "center" ¦ "between" ¦ "around" ¦ "evenly" ¦ "stretch" | \n- | \nfalse | \n
wrap | \n是否换行 | \n boolean | \nfalse | \nfalse | \n
block | \n是否渲染为块级元素 | \n boolean | \nfalse | \nfalse | \n
gap | \n间距设置,同时设置水平和垂直 | \n number | \n- | \nfalse | \n
gapVertical | \n垂直间距设置 | \n number | \n- | \nfalse | \n
gapHorizontal | \n水平间距设置 | \n number | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
style | \n- | \n React.CSSProperties | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--space-gap | \n 8px; | \n
--space-gap-vertical | \n 8px; | \n
--space-gap-horizontal | \n 8px; | \n
增强版的 img 标签,提供多种图片填充模式,支持图片懒加载、加载中提示、加载失败提示。
\n在 Taro 文件中引入组件
\nimport { Image } from '@antmjs/vantui'\n
\nimport { Image } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Image\n width="100px"\n height="100px"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n )\n}\n\n
\n通过fit
属性可以设置图片填充模式,可选值见下方表格。
import { View } from '@tarojs/components'\nimport { Row, Col, Image } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Row gutter="20">\n <Col span="8">\n <Image\n width="100%"\n height="100px"\n fit="contain"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n <View>contain</View>\n </Col>\n <Col span="8">\n <Image\n width="100%"\n height="100px"\n fit="cover"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n <View>cover</View>\n </Col>\n <Col span="8">\n <Image\n width="100%"\n height="100px"\n fit="fill"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n <View>fill</View>\n </Col>\n <Col span="8">\n <Image\n width="100%"\n height="100px"\n fit="none"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n <View>none</View>\n </Col>\n <Col span="8">\n <Image\n width="100%"\n height="100px"\n fit="widthFix"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n <View>widthFix</View>\n </Col>\n <Col span="8">\n <Image\n width="100%"\n height="100px"\n fit="heightFix"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n <View>heightFix</View>\n </Col>\n </Row>\n )\n}\n\n
\n通过round
属性可以设置图片变圆,注意当图片宽高不相等且fit
为contain
或scaleDown
时,将无法填充一个完整的圆形。
import { Image } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Image\n round\n width="100px"\n height="100px"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n )\n}\n\n
\n图片懒加载,在即将进入一定范围(上下三屏)时才开始加载。
\nimport { View } from '@tarojs/components'\nimport { Row, Col, Image, Loading } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Row gutter="20">\n <Col span="8">\n <Image\n width="100%"\n height="27vw"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n ></Image>\n <View className="text">默认提示</View>\n </Col>\n <Col span="8">\n <Image\n src=""\n width="100%"\n height="27vw"\n renderLoading={<Loading type="spinner" size="20" vertical></Loading>}\n ></Image>\n <View className="text">自定义提示</View>\n </Col>\n </Row>\n )\n}\n\n
\nImage
组件提供了默认的加载中提示,支持通过loading
插槽自定义内容。
import { View } from '@tarojs/components'\nimport { Row, Col, Image, Loading } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Row gutter="20">\n <Col span="8">\n <Image width="100%" height="27vw" src="x"></Image>\n <View className="text">默认提示</View>\n </Col>\n <Col span="8">\n <Image\n src=""\n width="100%"\n height="27vw"\n renderLoading={<Loading />}\n ></Image>\n <View className="text">自定义加载中</View>\n </Col>\n </Row>\n )\n}\n\n
\nImage
组件提供了默认的加载失败提示,支持通过renderError
来自定义内容。
import { View, Text } from '@tarojs/components'\nimport { Image } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Image\n width="100px"\n height="100px"\n src="xxxx"\n renderError={<Text>加载失败</Text>}\n />\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
src | \n图片链接 | \n string | \n- | \ntrue | \n
round | \n是否圆角 | \n boolean | \nfalse | \nfalse | \n
width | \n宽度,单位为 px | \n number ¦ string | \n- | \nfalse | \n
height | \n高度,单位为 px | \n number ¦ string | \n- | \nfalse | \n
radius | \n圆角大小 | \n number ¦ string | \n0 | \nfalse | \n
lazyLoad | \n是否懒加载 | \n boolean | \nfalse | \nfalse | \n
showMenuByLongpress | \n是否开启长按图片显示识别小程序码菜单 | \n boolean | \nfalse | \nfalse | \n
fit | \n图片填充模式 | \n attr: ¦ "contain" ¦ "cover" ¦ "fill" ¦ "widthFix" ¦ "heightFix" ¦ "none" | \nfill | \nfalse | \n
showError | \n是否展示图片加载失败提示 | \n boolean | \nfalse | \nfalse | \n
showLoading | \n是否使用 loading 状态 | \n boolean | \ntrue | \nfalse | \n
renderLoading | \n渲染 loading 展示元素 | \n ReactNode | \n- | \nfalse | \n
renderError | \n渲染错误描述展示元素 | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--image-placeholder-text-color | \n @gray-6; | \n
--image-placeholder-font-size | \n @font-size-md; | \n
--image-placeholder-background-color | \n @background-color; | \n
--image-loading-icon-size | \n 64px; | \n
--image-loading-icon-color | \n @gray-4; | \n
--image-error-icon-size | \n 64px; | \n
--image-error-icon-color | \n @gray-4; | \n
增强版的 img 标签,提供多种图片填充模式,支持图片懒加载、加载中提示、加载失败提示。
\n在 Taro 文件中引入组件
\nimport { Image } from '@antmjs/vantui'\n
\nimport { Image } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Image\n width="100px"\n height="100px"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n )\n}\n\n
\n通过fit
属性可以设置图片填充模式,可选值见下方表格。
import { View } from '@tarojs/components'\nimport { Row, Col, Image } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Row gutter="20">\n <Col span="8">\n <Image\n width="100%"\n height="100px"\n fit="contain"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n <View>contain</View>\n </Col>\n <Col span="8">\n <Image\n width="100%"\n height="100px"\n fit="cover"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n <View>cover</View>\n </Col>\n <Col span="8">\n <Image\n width="100%"\n height="100px"\n fit="fill"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n <View>fill</View>\n </Col>\n <Col span="8">\n <Image\n width="100%"\n height="100px"\n fit="none"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n <View>none</View>\n </Col>\n <Col span="8">\n <Image\n width="100%"\n height="100px"\n fit="widthFix"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n <View>widthFix</View>\n </Col>\n <Col span="8">\n <Image\n width="100%"\n height="100px"\n fit="heightFix"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n <View>heightFix</View>\n </Col>\n </Row>\n )\n}\n\n
\n通过round
属性可以设置图片变圆,注意当图片宽高不相等且fit
为contain
或scaleDown
时,将无法填充一个完整的圆形。
import { Image } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Image\n round\n width="100px"\n height="100px"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n />\n )\n}\n\n
\n图片懒加载,在即将进入一定范围(上下三屏)时才开始加载。
\nimport { View } from '@tarojs/components'\nimport { Row, Col, Image, Loading } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Row gutter="20">\n <Col span="8">\n <Image\n width="100%"\n height="27vw"\n src="https://img.yzcdn.cn/vant/cat.jpeg"\n ></Image>\n <View className="text">默认提示</View>\n </Col>\n <Col span="8">\n <Image\n src=""\n width="100%"\n height="27vw"\n renderLoading={<Loading type="spinner" size="20" vertical></Loading>}\n ></Image>\n <View className="text">自定义提示</View>\n </Col>\n </Row>\n )\n}\n\n
\nImage
组件提供了默认的加载中提示,支持通过loading
插槽自定义内容。
import { View } from '@tarojs/components'\nimport { Row, Col, Image, Loading } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Row gutter="20">\n <Col span="8">\n <Image width="100%" height="27vw" src="x"></Image>\n <View className="text">默认提示</View>\n </Col>\n <Col span="8">\n <Image\n src=""\n width="100%"\n height="27vw"\n renderLoading={<Loading />}\n ></Image>\n <View className="text">自定义加载中</View>\n </Col>\n </Row>\n )\n}\n\n
\nImage
组件提供了默认的加载失败提示,支持通过renderError
来自定义内容。
import { View, Text } from '@tarojs/components'\nimport { Image } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Image\n width="100px"\n height="100px"\n src="xxxx"\n renderError={<Text>加载失败</Text>}\n />\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
src | \n图片链接 | \n string | \n- | \ntrue | \n
round | \n是否圆角 | \n boolean | \nfalse | \nfalse | \n
width | \n宽度,单位为 px | \n number ¦ string | \n- | \nfalse | \n
height | \n高度,单位为 px | \n number ¦ string | \n- | \nfalse | \n
radius | \n圆角大小 | \n number ¦ string | \n0 | \nfalse | \n
lazyLoad | \n是否懒加载 | \n boolean | \nfalse | \nfalse | \n
showMenuByLongpress | \n是否开启长按图片显示识别小程序码菜单 | \n boolean | \nfalse | \nfalse | \n
fit | \n图片填充模式 | \n attr: ¦ "contain" ¦ "cover" ¦ "fill" ¦ "widthFix" ¦ "heightFix" ¦ "none" | \nfill | \nfalse | \n
showError | \n是否展示图片加载失败提示 | \n boolean | \nfalse | \nfalse | \n
showLoading | \n是否使用 loading 状态 | \n boolean | \ntrue | \nfalse | \n
renderLoading | \n渲染 loading 展示元素 | \n ReactNode | \n- | \nfalse | \n
renderError | \n渲染错误描述展示元素 | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--image-placeholder-text-color | \n @gray-6; | \n
--image-placeholder-font-size | \n @font-size-md; | \n
--image-placeholder-background-color | \n @background-color; | \n
--image-loading-icon-size | \n 64px; | \n
--image-loading-icon-color | \n @gray-4; | \n
--image-error-icon-size | \n 64px; | \n
--image-error-icon-color | \n @gray-4; | \n
将一组内容放置在多个折叠面板中,点击面板的标题可以展开或收缩其内容。
\n在 Taro 文件中引入组件
\nimport { Collapse, CollapseItem } from '@antmjs/vantui'\n
\n通过value
控制展开的面板列表,activeNames
为数组格式。
/* eslint-disable */\nimport react from 'react'\nimport { Collapse, CollapseItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [values, setValues] = react.useState(['1'])\n const [dynamic, setdynamic] = react.useState('')\n\n react.useEffect(() => {\n setTimeout(() => {\n setdynamic('【动态内容动态内容动态内容动态内容动态内容动态内容动态内容】')\n }, 1000)\n }, [])\n\n return (\n <Collapse value={values} onChange={(e) => setValues(e.detail)}>\n <CollapseItem title="有赞微商城" name="1">\n 提供多样店铺模板,快速搭建网上商城\n {dynamic}\n </CollapseItem>\n <CollapseItem title="有赞零售" name="2">\n 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失\n {dynamic}\n </CollapseItem>\n <CollapseItem title="有赞美业" name="3" disabled>\n 线上拓客,随时预约,贴心顺手的开单收银\n {dynamic}\n </CollapseItem>\n </Collapse>\n )\n}\n\n
\n通过accordion
可以设置为手风琴模式,最多展开一个面板,此时activeName
为字符串格式。
/* eslint-disable */\nimport react from 'react'\nimport { Collapse, CollapseItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [values, setValues] = react.useState(['1'])\n\n return (\n <Collapse accordion value={values} onChange={(e) => setValues(e.detail)}>\n <CollapseItem title="有赞微商城" name="1">\n 提供多样店铺模板,快速搭建网上商城\n </CollapseItem>\n <CollapseItem title="有赞零售" name="2">\n 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失\n </CollapseItem>\n <CollapseItem title="有赞美业" name="3">\n 线上拓客,随时预约,贴心顺手的开单收银\n </CollapseItem>\n </Collapse>\n )\n}\n\n
\nvanCollapse
提供了 change
, open
和 close
事件。change
事件在面板切换时触发,open
事件在面板展开时触发,close
事件在面板关闭时触发。
/* eslint-disable */\nimport react from 'react'\nimport { Collapse, CollapseItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [values, setValues] = react.useState(['1'])\n\n return (\n <Collapse accordion value={values} onChange={(e) => setValues(e.detail)}>\n <CollapseItem title="有赞微商城" name="1">\n 提供多样店铺模板,快速搭建网上商城\n </CollapseItem>\n <CollapseItem title="有赞零售" name="2">\n 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失\n </CollapseItem>\n <CollapseItem title="有赞美业" name="3">\n 线上拓客,随时预约,贴心顺手的开单收银\n </CollapseItem>\n </Collapse>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Collapse, CollapseItem, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [values, setValues] = react.useState(['1'])\n\n return (\n <>\n <Collapse\n value={values}\n onChange={(e) => setValues(e.detail)}\n onOpen={(e) => Toast.show(::::_QA打开::::_ABe.detail}::::_QA)}\n onClose={(e) => Toast.show(::::_QA关闭::::_ABe.detail}::::_QA)}\n >\n <CollapseItem title="有赞微商城" name="1">\n 提供多样店铺模板,快速搭建网上商城\n </CollapseItem>\n <CollapseItem title="有赞零售" name="2">\n 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失\n </CollapseItem>\n <CollapseItem title="有赞美业" name="3">\n 线上拓客,随时预约,贴心顺手的开单收银\n </CollapseItem>\n </Collapse>\n <Toast id="collapse-mess" />\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
value | \n- | \n attr: ¦ Array< string ¦ number > ¦ string | \n- | \nfalse | \n
accordion | \n- | \n boolean | \n- | \nfalse | \n
border | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n attr: ¦ Array ¦ ReactNode | \n- | \nfalse | \n
onChange | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
onOpen | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
onClose | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
name | \n- | \n string ¦ number | \n- | \nfalse | \n
title | \n- | \n string ¦ number | \n- | \nfalse | \n
value | \n- | \n string ¦ number | \n- | \nfalse | \n
icon | \n对应 Icon 的 name | \n string | \n- | \nfalse | \n
label | \n- | \n ReactNode | \n- | \nfalse | \n
disabled | \n- | \n boolean | \nfalse | \nfalse | \n
clickable | \n- | \n boolean | \nfalse | \nfalse | \n
border | \n- | \n boolean | \ntrue | \nfalse | \n
isLink | \n- | \n boolean | \ntrue | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
renderTitle | \n- | \n ReactNode | \n- | \nfalse | \n
renderIcon | \n- | \n ReactNode | \n- | \nfalse | \n
renderRightIcon | \nisLink 设置为 false | \n ReactNode | \n- | \nfalse | \n
renderValue | \n- | \n ReactNode | \n- | \nfalse | \n
size | \n- | \n "large" | \n- | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--collapse-item-transition-duration | \n 0.3s; | \n
--collapse-item-content-padding | \n 30px; | \n
--collapse-item-content-font-size | \n 26px; | \n
--collapse-item-content-line-height | \n 1.5; | \n
--collapse-item-content-text-color | \n @gray-6; | \n
--collapse-item-content-background-color | \n @white; | \n
--collapse-item-title-disabled-color | \n @gray-5; | \n
将一组内容放置在多个折叠面板中,点击面板的标题可以展开或收缩其内容。
\n在 Taro 文件中引入组件
\nimport { Collapse, CollapseItem } from '@antmjs/vantui'\n
\n通过value
控制展开的面板列表,activeNames
为数组格式。
/* eslint-disable */\nimport react from 'react'\nimport { Collapse, CollapseItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [values, setValues] = react.useState(['1'])\n const [dynamic, setdynamic] = react.useState('')\n\n react.useEffect(() => {\n setTimeout(() => {\n setdynamic('【动态内容动态内容动态内容动态内容动态内容动态内容动态内容】')\n }, 1000)\n }, [])\n\n return (\n <Collapse value={values} onChange={(e) => setValues(e.detail)}>\n <CollapseItem title="有赞微商城" name="1">\n 提供多样店铺模板,快速搭建网上商城\n {dynamic}\n </CollapseItem>\n <CollapseItem title="有赞零售" name="2">\n 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失\n {dynamic}\n </CollapseItem>\n <CollapseItem title="有赞美业" name="3" disabled>\n 线上拓客,随时预约,贴心顺手的开单收银\n {dynamic}\n </CollapseItem>\n </Collapse>\n )\n}\n\n
\n通过accordion
可以设置为手风琴模式,最多展开一个面板,此时activeName
为字符串格式。
/* eslint-disable */\nimport react from 'react'\nimport { Collapse, CollapseItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [values, setValues] = react.useState(['1'])\n\n return (\n <Collapse accordion value={values} onChange={(e) => setValues(e.detail)}>\n <CollapseItem title="有赞微商城" name="1">\n 提供多样店铺模板,快速搭建网上商城\n </CollapseItem>\n <CollapseItem title="有赞零售" name="2">\n 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失\n </CollapseItem>\n <CollapseItem title="有赞美业" name="3">\n 线上拓客,随时预约,贴心顺手的开单收银\n </CollapseItem>\n </Collapse>\n )\n}\n\n
\nvanCollapse
提供了 change
, open
和 close
事件。change
事件在面板切换时触发,open
事件在面板展开时触发,close
事件在面板关闭时触发。
/* eslint-disable */\nimport react from 'react'\nimport { Collapse, CollapseItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [values, setValues] = react.useState(['1'])\n\n return (\n <Collapse accordion value={values} onChange={(e) => setValues(e.detail)}>\n <CollapseItem title="有赞微商城" name="1">\n 提供多样店铺模板,快速搭建网上商城\n </CollapseItem>\n <CollapseItem title="有赞零售" name="2">\n 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失\n </CollapseItem>\n <CollapseItem title="有赞美业" name="3">\n 线上拓客,随时预约,贴心顺手的开单收银\n </CollapseItem>\n </Collapse>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { Collapse, CollapseItem, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [values, setValues] = react.useState(['1'])\n\n return (\n <>\n <Collapse\n value={values}\n onChange={(e) => setValues(e.detail)}\n onOpen={(e) => Toast.show(::::_QA打开::::_ABe.detail}::::_QA)}\n onClose={(e) => Toast.show(::::_QA关闭::::_ABe.detail}::::_QA)}\n >\n <CollapseItem title="有赞微商城" name="1">\n 提供多样店铺模板,快速搭建网上商城\n </CollapseItem>\n <CollapseItem title="有赞零售" name="2">\n 网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失\n </CollapseItem>\n <CollapseItem title="有赞美业" name="3">\n 线上拓客,随时预约,贴心顺手的开单收银\n </CollapseItem>\n </Collapse>\n <Toast id="collapse-mess" />\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
value | \n- | \n attr: ¦ Array< string ¦ number > ¦ string | \n- | \nfalse | \n
accordion | \n- | \n boolean | \n- | \nfalse | \n
border | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n attr: ¦ Array ¦ ReactNode | \n- | \nfalse | \n
onChange | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
onOpen | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
onClose | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
name | \n- | \n string ¦ number | \n- | \nfalse | \n
title | \n- | \n string ¦ number | \n- | \nfalse | \n
value | \n- | \n string ¦ number | \n- | \nfalse | \n
icon | \n对应 Icon 的 name | \n string | \n- | \nfalse | \n
label | \n- | \n ReactNode | \n- | \nfalse | \n
disabled | \n- | \n boolean | \nfalse | \nfalse | \n
clickable | \n- | \n boolean | \nfalse | \nfalse | \n
border | \n- | \n boolean | \ntrue | \nfalse | \n
isLink | \n- | \n boolean | \ntrue | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
renderTitle | \n- | \n ReactNode | \n- | \nfalse | \n
renderIcon | \n- | \n ReactNode | \n- | \nfalse | \n
renderRightIcon | \nisLink 设置为 false | \n ReactNode | \n- | \nfalse | \n
renderValue | \n- | \n ReactNode | \n- | \nfalse | \n
size | \n- | \n "large" | \n- | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--collapse-item-transition-duration | \n 0.3s; | \n
--collapse-item-content-padding | \n 30px; | \n
--collapse-item-content-font-size | \n 26px; | \n
--collapse-item-content-line-height | \n 1.5; | \n
--collapse-item-content-text-color | \n @gray-6; | \n
--collapse-item-content-background-color | \n @white; | \n
--collapse-item-title-disabled-color | \n @gray-5; | \n
用于展示操作流程的各个环节,让用户了解当前的操作在整体流程中的位置。
\n在 Taro 文件中引入组件
\nimport { Steps } from '@antmjs/vantui'\n
\nconst steps = [\n {\n text: '步骤一',\n desc: '描述信息',\n },\n {\n text: '步骤二',\n desc: '描述信息',\n },\n {\n text: '步骤三',\n desc: '描述信息',\n },\n {\n text: '步骤四',\n desc: '描述信息',\n },\n]\nfunction Demo() {\n return <Steps steps={steps} active={2} />\n}\n
\n可以通过 activeIcon
和 activeColor
属性设置激活状态下的图标和颜色。
const steps = [\n {\n text: '步骤一',\n desc: '描述信息',\n },\n {\n text: '步骤二',\n desc: '描述信息',\n },\n {\n text: '步骤三',\n desc: '描述信息',\n },\n {\n text: '步骤四',\n desc: '描述信息',\n },\n]\nfunction Demo() {\n return (\n <Steps steps={steps} active={1} activeIcon="success" activeColor="#38f" />\n )\n}\n
\n可以通过 inactiveIcon
和 activeIcon
属性分别设置每一项的图标。
const steps = [\n {\n text: '步骤一',\n desc: '描述信息',\n inactiveIcon: 'location-o',\n activeIcon: 'success',\n },\n {\n text: '步骤二',\n desc: '描述信息',\n inactiveIcon: 'like-o',\n activeIcon: 'plus',\n },\n {\n text: '步骤三',\n desc: '描述信息',\n inactiveIcon: 'star-o',\n activeIcon: 'cross',\n },\n]\nfunction Demo() {\n return <Steps steps={steps} active={2} />\n}\n
\n可以通过设置direction
属性来改变步骤条的显示方式。
const steps = [\n {\n text: '步骤一',\n desc: '描述信息',\n },\n {\n text: '步骤二',\n desc: '描述信息',\n },\n {\n text: '步骤三',\n desc: '描述信息',\n },\n]\nfunction Demo() {\n return (\n <Steps\n steps={steps}\n active={1}\n direction="vertical"\n activeColor="#ee0a24"\n />\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
iconClassPrefix | \nicon 统一 class 的前缀 | \n string | \n- | \nfalse | \n
steps | \nStep 配置项数组 | \n { index?: number desc: React.ReactNode text: string activeIcon?: string inactiveIcon?: string }[] | \n- | \nfalse | \n
active | \n当前步骤 | \n number | \n0 | \nfalse | \n
direction | \n显示方向 | \n attr: ¦ "horizontal" ¦ "vertical" | \nhorizontal | \nfalse | \n
activeColor | \n激活颜色 | \n string | \n#07c160 | \nfalse | \n
inactiveColor | \n未激活颜色 | \n string | \n#969799 | \nfalse | \n
activeIcon | \n激活图标 | \n string | \n#checked | \nfalse | \n
inactiveIcon | \n未激活图标 | \n string | \n#checked | \nfalse | \n
onClickStep | \n点击步骤时触发的事件,event.detail 当前步骤的索引 | \n ( event: ITouchEvent & { detail: number } ) => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--steps-background-color | \n @white; | \n
用于展示操作流程的各个环节,让用户了解当前的操作在整体流程中的位置。
\n在 Taro 文件中引入组件
\nimport { Steps } from '@antmjs/vantui'\n
\nconst steps = [\n {\n text: '步骤一',\n desc: '描述信息',\n },\n {\n text: '步骤二',\n desc: '描述信息',\n },\n {\n text: '步骤三',\n desc: '描述信息',\n },\n {\n text: '步骤四',\n desc: '描述信息',\n },\n]\nfunction Demo() {\n return <Steps steps={steps} active={2} />\n}\n
\n可以通过 activeIcon
和 activeColor
属性设置激活状态下的图标和颜色。
const steps = [\n {\n text: '步骤一',\n desc: '描述信息',\n },\n {\n text: '步骤二',\n desc: '描述信息',\n },\n {\n text: '步骤三',\n desc: '描述信息',\n },\n {\n text: '步骤四',\n desc: '描述信息',\n },\n]\nfunction Demo() {\n return (\n <Steps steps={steps} active={1} activeIcon="success" activeColor="#38f" />\n )\n}\n
\n可以通过 inactiveIcon
和 activeIcon
属性分别设置每一项的图标。
const steps = [\n {\n text: '步骤一',\n desc: '描述信息',\n inactiveIcon: 'location-o',\n activeIcon: 'success',\n },\n {\n text: '步骤二',\n desc: '描述信息',\n inactiveIcon: 'like-o',\n activeIcon: 'plus',\n },\n {\n text: '步骤三',\n desc: '描述信息',\n inactiveIcon: 'star-o',\n activeIcon: 'cross',\n },\n]\nfunction Demo() {\n return <Steps steps={steps} active={2} />\n}\n
\n可以通过设置direction
属性来改变步骤条的显示方式。
const steps = [\n {\n text: '步骤一',\n desc: '描述信息',\n },\n {\n text: '步骤二',\n desc: '描述信息',\n },\n {\n text: '步骤三',\n desc: '描述信息',\n },\n]\nfunction Demo() {\n return (\n <Steps\n steps={steps}\n active={1}\n direction="vertical"\n activeColor="#ee0a24"\n />\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
iconClassPrefix | \nicon 统一 class 的前缀 | \n string | \n- | \nfalse | \n
steps | \nStep 配置项数组 | \n { index?: number desc: React.ReactNode text: string activeIcon?: string inactiveIcon?: string }[] | \n- | \nfalse | \n
active | \n当前步骤 | \n number | \n0 | \nfalse | \n
direction | \n显示方向 | \n attr: ¦ "horizontal" ¦ "vertical" | \nhorizontal | \nfalse | \n
activeColor | \n激活颜色 | \n string | \n#07c160 | \nfalse | \n
inactiveColor | \n未激活颜色 | \n string | \n#969799 | \nfalse | \n
activeIcon | \n激活图标 | \n string | \n#checked | \nfalse | \n
inactiveIcon | \n未激活图标 | \n string | \n#checked | \nfalse | \n
onClickStep | \n点击步骤时触发的事件,event.detail 当前步骤的索引 | \n ( event: ITouchEvent & { detail: number } ) => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--steps-background-color | \n @white; | \n
滑动输入条,用于在给定的范围内选择一个值。
\n在 Taro 文件中引入组件
\nimport { Slider } from '@antmjs/vantui'\n
\nimport { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Slider value={50} />\n}\n\n
\n添加 range
属性就可以开启双滑块模式,确保 value
的值是一个数组。
import { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Slider value={[10, 50]} range />\n}\n\n
\nimport { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Slider min={-50} max={50} />\n}\n\n
\nimport { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Slider value={50} disabled />\n}\n\n
\nimport { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Slider value={50} step={10} />\n}\n\n
\nimport { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Slider value={50} barHeight="4px" activeColor="#ee0a24" />\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(50)\n return (\n <Slider\n value={value}\n onDrag={(e) => {\n setValue(e.detail.value)\n }}\n onChange={(e) => {\n setValue(e.detail)\n }}\n renderButton={<View className="customButton">{value}/100</View>}\n />\n )\n}\n\n
\nh5 注意需要需加visibility: visible
.customButton {\n width: 112px;\n color: #ffffff;\n font-size: 20px;\n line-height: 36px;\n text-align: center;\n border-radius: 200px;\n background-color: #ee0a24;\n visibility: visible;\n}\n
\n设置 vertical
属性后,滑块会垂直展示,且高度为 100% 父元素高度。
import { View } from '@tarojs/components'\nimport { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View style={{ height: '200px' }}>\n <Slider value={40} />\n <Slider value={60} vertical={true} />\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
range | \n- | \n boolean | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
activeColor | \n- | \n string | \n- | \nfalse | \n
inactiveColor | \n- | \n string | \n- | \nfalse | \n
max | \n- | \n number | \n- | \nfalse | \n
min | \n- | \n number | \n- | \nfalse | \n
step | \n- | \n number | \n- | \nfalse | \n
value | \n- | \n number ¦ number[] | \n- | \nfalse | \n
barHeight | \n- | \n number ¦ string | \n- | \nfalse | \n
vertical | \n- | \n boolean | \n- | \nfalse | \n
onDrag | \n- | \n ( e: ITouchEvent & SliderEvent ) => void | \n- | \nfalse | \n
onChange | \n- | \n ( e: ITouchEvent & SliderEvent ) => void | \n- | \nfalse | \n
onDragStart | \n- | \n () => void | \n- | \nfalse | \n
onDragEnd | \n- | \n () => void | \n- | \nfalse | \n
renderButton | \n- | \n React.ReactNode | \n- | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--slider-active-background-color | \n var(--primary-color); | \n
--slider-inactive-background-color | \n @gray-3; | \n
--slider-disabled-opacity | \n @disabled-opacity; | \n
--slider-bar-height | \n 4px; | \n
--slider-button-width | \n 48px; | \n
--slider-button-height | \n 48px; | \n
--slider-button-border-radius | \n 50%; | \n
--slider-button-background-color | \n @white; | \n
--slider-button-box-shadow | \n 0 2px 4px rgba(0, 0, 0, 0.5); | \n
滑动输入条,用于在给定的范围内选择一个值。
\n在 Taro 文件中引入组件
\nimport { Slider } from '@antmjs/vantui'\n
\nimport { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Slider value={50} />\n}\n\n
\n添加 range
属性就可以开启双滑块模式,确保 value
的值是一个数组。
import { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Slider value={[10, 50]} range />\n}\n\n
\nimport { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Slider min={-50} max={50} />\n}\n\n
\nimport { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Slider value={50} disabled />\n}\n\n
\nimport { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Slider value={50} step={10} />\n}\n\n
\nimport { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Slider value={50} barHeight="4px" activeColor="#ee0a24" />\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(50)\n return (\n <Slider\n value={value}\n onDrag={(e) => {\n setValue(e.detail.value)\n }}\n onChange={(e) => {\n setValue(e.detail)\n }}\n renderButton={<View className="customButton">{value}/100</View>}\n />\n )\n}\n\n
\nh5 注意需要需加visibility: visible
.customButton {\n width: 112px;\n color: #ffffff;\n font-size: 20px;\n line-height: 36px;\n text-align: center;\n border-radius: 200px;\n background-color: #ee0a24;\n visibility: visible;\n}\n
\n设置 vertical
属性后,滑块会垂直展示,且高度为 100% 父元素高度。
import { View } from '@tarojs/components'\nimport { Slider } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View style={{ height: '200px' }}>\n <Slider value={40} />\n <Slider value={60} vertical={true} />\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
range | \n- | \n boolean | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
activeColor | \n- | \n string | \n- | \nfalse | \n
inactiveColor | \n- | \n string | \n- | \nfalse | \n
max | \n- | \n number | \n- | \nfalse | \n
min | \n- | \n number | \n- | \nfalse | \n
step | \n- | \n number | \n- | \nfalse | \n
value | \n- | \n number ¦ number[] | \n- | \nfalse | \n
barHeight | \n- | \n number ¦ string | \n- | \nfalse | \n
vertical | \n- | \n boolean | \n- | \nfalse | \n
onDrag | \n- | \n ( e: ITouchEvent & SliderEvent ) => void | \n- | \nfalse | \n
onChange | \n- | \n ( e: ITouchEvent & SliderEvent ) => void | \n- | \nfalse | \n
onDragStart | \n- | \n () => void | \n- | \nfalse | \n
onDragEnd | \n- | \n () => void | \n- | \nfalse | \n
renderButton | \n- | \n React.ReactNode | \n- | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--slider-active-background-color | \n var(--primary-color); | \n
--slider-inactive-background-color | \n @gray-3; | \n
--slider-disabled-opacity | \n @disabled-opacity; | \n
--slider-bar-height | \n 4px; | \n
--slider-button-width | \n 48px; | \n
--slider-button-height | \n 48px; | \n
--slider-button-border-radius | \n 50%; | \n
--slider-button-background-color | \n @white; | \n
--slider-button-box-shadow | \n 0 2px 4px rgba(0, 0, 0, 0.5); | \n
底部弹起的分享面板,用于展示各分享渠道对应的操作按钮,不含具体的分享逻辑。
\n在 Taro 文件中引入组件
\nimport { ShareSheet } from '@antmjs/vantui'\n
\n分享面板通过 options
属性来定义分享选项,数组的每一项是一个对象,对象格式见文档下方表格。
当分享选项的数量较多时,可以将 options
定义为数组嵌套的格式,每个子数组会作为一行选项展示。
除了使用内置的几种图标外,可以直接在 icon
中传入图片 URL 来使用自定义的图标。
通过 description
属性可以设置标题下方的描述文字, 在 options
内设置 description
属性可以添加分享选项描述。
[object Object]
\n参数 | \n说明 | \n类型 | \n
---|---|---|
name | \n- | \n string | \n
icon | \n- | \n string | \n
description | \n- | \n string | \n
openType | \n- | \n string | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
show | \n是否展示 | \n boolean | \n- | \nfalse | \n
overlayStyle | \n蒙层样式 | \n string | \n- | \nfalse | \n
zIndex | \n蒙层样式 | \n number | \n2 | \nfalse | \n
title | \n标题 | \n string | \n- | \nfalse | \n
overlay | \n是否展示蒙层 | \n boolean | \n- | \nfalse | \n
safeAreaInsetBottom | \n是否开启底部安全区适配 | \n boolean | \n- | \nfalse | \n
closeOnClickOverlay | \n是否点击关闭蒙层 | \n boolean | \n- | \nfalse | \n
duration | \n动画时间(ms) | \n number ¦ string | \n300 | \nfalse | \n
onClickOverlay | \n- | \n () => void | \n- | \nfalse | \n
onCancel | \n- | \n () => void | \n- | \nfalse | \n
onSelect | \n- | \n (event: { detail: ShareSheetOptionItem }) => void | \n- | \nfalse | \n
onClose | \n- | \n () => void | \n- | \nfalse | \n
renderTitle | \n自定义渲染标题 | \n ReactNode | \n- | \nfalse | \n
renderDescription | \n自定义渲染内容 | \n ReactNode | \n- | \nfalse | \n
cancelText | \n取消按钮名称 | \n string | \n- | \nfalse | \n
description | \n描述 | \n string | \n- | \nfalse | \n
options | \n选项 | \n attr: ¦ ShareSheetOptionItem[] ¦ ShareSheetOptionItem[][] | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n
---|---|---|
name | \n名称 | \n string | \n
icon | \n图标,可以是url | \n string | \n
renderIcon | \n自定义 icon 位置渲染,可以覆盖 icon 属性 | \n ReactNode | \n
description | \n秒速 | \n string | \n
openType | \n按钮 open-type ,可用于实现分享功能,可选值为 share | \n string | \n
参数 | \n说明 | \n类型 | \n
---|---|---|
showBorder | \n- | \n boolean | \n
options | \n- | \n ShareSheetOptionItem[] | \n
onSelect | \n- | \n ( option: ShareSheetOptionItem, index: number ) => void | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--share-sheet-header-padding | \n @padding-sm @padding-md @padding-base; | \n
--share-sheet-title-color | \n @text-color; | \n
--share-sheet-title-font-size | \n @font-size-md; | \n
--share-sheet-title-line-height | \n @line-height-md; | \n
--share-sheet-description-color | \n @gray-6; | \n
--share-sheet-description-font-size | \n @font-size-sm; | \n
--share-sheet-description-line-height | \n 32px; | \n
--share-sheet-icon-size | \n 96px; | \n
--share-sheet-option-name-color | \n @gray-7; | \n
--share-sheet-option-name-font-size | \n @font-size-sm; | \n
--share-sheet-option-description-color | \n @gray-5; | \n
--share-sheet-option-description-font-size | \n @font-size-sm; | \n
--share-sheet-cancel-button-font-size | \n @font-size-lg; | \n
--share-sheet-cancel-button-height | \n 96px; | \n
--share-sheet-cancel-button-background | \n @white; | \n
底部弹起的分享面板,用于展示各分享渠道对应的操作按钮,不含具体的分享逻辑。
\n在 Taro 文件中引入组件
\nimport { ShareSheet } from '@antmjs/vantui'\n
\n分享面板通过 options
属性来定义分享选项,数组的每一项是一个对象,对象格式见文档下方表格。
当分享选项的数量较多时,可以将 options
定义为数组嵌套的格式,每个子数组会作为一行选项展示。
除了使用内置的几种图标外,可以直接在 icon
中传入图片 URL 来使用自定义的图标。
通过 description
属性可以设置标题下方的描述文字, 在 options
内设置 description
属性可以添加分享选项描述。
[object Object]
\n参数 | \n说明 | \n类型 | \n
---|---|---|
name | \n- | \n string | \n
icon | \n- | \n string | \n
description | \n- | \n string | \n
openType | \n- | \n string | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
show | \n是否展示 | \n boolean | \n- | \nfalse | \n
overlayStyle | \n蒙层样式 | \n string | \n- | \nfalse | \n
zIndex | \n蒙层样式 | \n number | \n2 | \nfalse | \n
title | \n标题 | \n string | \n- | \nfalse | \n
overlay | \n是否展示蒙层 | \n boolean | \n- | \nfalse | \n
safeAreaInsetBottom | \n是否开启底部安全区适配 | \n boolean | \n- | \nfalse | \n
closeOnClickOverlay | \n是否点击关闭蒙层 | \n boolean | \n- | \nfalse | \n
duration | \n动画时间(ms) | \n number ¦ string | \n300 | \nfalse | \n
onClickOverlay | \n- | \n () => void | \n- | \nfalse | \n
onCancel | \n- | \n () => void | \n- | \nfalse | \n
onSelect | \n- | \n (event: { detail: ShareSheetOptionItem }) => void | \n- | \nfalse | \n
onClose | \n- | \n () => void | \n- | \nfalse | \n
renderTitle | \n自定义渲染标题 | \n ReactNode | \n- | \nfalse | \n
renderDescription | \n自定义渲染内容 | \n ReactNode | \n- | \nfalse | \n
cancelText | \n取消按钮名称 | \n string | \n- | \nfalse | \n
description | \n描述 | \n string | \n- | \nfalse | \n
options | \n选项 | \n attr: ¦ ShareSheetOptionItem[] ¦ ShareSheetOptionItem[][] | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n
---|---|---|
name | \n名称 | \n string | \n
icon | \n图标,可以是url | \n string | \n
renderIcon | \n自定义 icon 位置渲染,可以覆盖 icon 属性 | \n ReactNode | \n
description | \n秒速 | \n string | \n
openType | \n按钮 open-type ,可用于实现分享功能,可选值为 share | \n string | \n
参数 | \n说明 | \n类型 | \n
---|---|---|
showBorder | \n- | \n boolean | \n
options | \n- | \n ShareSheetOptionItem[] | \n
onSelect | \n- | \n ( option: ShareSheetOptionItem, index: number ) => void | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--share-sheet-header-padding | \n @padding-sm @padding-md @padding-base; | \n
--share-sheet-title-color | \n @text-color; | \n
--share-sheet-title-font-size | \n @font-size-md; | \n
--share-sheet-title-line-height | \n @line-height-md; | \n
--share-sheet-description-color | \n @gray-6; | \n
--share-sheet-description-font-size | \n @font-size-sm; | \n
--share-sheet-description-line-height | \n 32px; | \n
--share-sheet-icon-size | \n 96px; | \n
--share-sheet-option-name-color | \n @gray-7; | \n
--share-sheet-option-name-font-size | \n @font-size-sm; | \n
--share-sheet-option-description-color | \n @gray-5; | \n
--share-sheet-option-description-font-size | \n @font-size-sm; | \n
--share-sheet-cancel-button-font-size | \n @font-size-lg; | \n
--share-sheet-cancel-button-height | \n 96px; | \n
--share-sheet-cancel-button-background | \n @white; | \n
基于 Form 实现配置化渲染表单,统一管理表单信息,支持自定义扩展表单组件
\nimport { FormRender, Form } from '@antmjs/vantui'\n
\nimport { Form, Button, Dialog, FormRender } from '@antmjs/vantui'\n\ntype IParams = {\n account: number\n name: string\n price: string\n radio: string\n}\nconst Dialog_ = Dialog.createOnlyDialog()\n\nexport default function Index() {\n const form = Form.useForm()\n\n return (\n <>\n <Dialog_ />\n <FormRender<IParams>\n form={form}\n config={[\n {\n fields: 'account',\n type: 'inputNumber',\n required: true,\n label: '账号',\n },\n {\n fields: 'name',\n type: 'input',\n label: '名称',\n },\n {\n fields: 'radio',\n type: 'radio',\n label: '价格',\n options: [\n {\n name: '选项1',\n value: '1',\n },\n {\n name: '选项2',\n value: '2',\n },\n ],\n },\n {\n fields: 'price',\n type: 'inputPrice',\n label: '价格',\n },\n ]}\n />\n <Button\n style={{ width: '100%', marginTop: '20px' }}\n type="primary"\n onClick={() => {\n console.info(form.getFieldsValue())\n form.validateFields((err, res) => {\n console.info(form.getFieldsValue())\n if (!err?.length) {\n Dialog_.alert({\n message: JSON.stringify(res),\n })\n }\n })\n }}\n >\n 提交\n </Button>\n </>\n )\n}\n\n
\n内部已经注册的组件类型如下
\nexport type IFormRenderItemProps<T> =\n | IMakeFormCompProps<'input' | 'inputNumber' | 'inputPrice', InputProps, T>\n | IMakeFormCompProps<'swtch', SwitchProps, T>\n | IMakeFormCompProps<'radio', RadioGroupProps, T>\n | IMakeFormCompProps<'checkbox', CheckboxGroupProps, T>\n | IMakeFormCompProps<'slider', SliderProps, T>\n | IMakeFormCompProps<'rate', RateProps, T>\n | IMakeFormCompProps<'stepper', StepperProps, T>\n
\nimport { Form, Button, Dialog } from '@antmjs/vantui'\nimport FormRender from './form-render-new'\n\ntype IParams = {\n date: number\n}\n\nconst Dialog_ = Dialog.createOnlyDialog()\n\nexport default function Index() {\n const form = Form.useForm()\n\n return (\n <>\n <Dialog_ />\n <FormRender<IParams>\n initialValues={{}}\n form={form}\n config={[\n {\n fields: 'date',\n type: 'dateTimePicker',\n label: '日期',\n },\n ]}\n />\n\n <Button\n style={{ width: '100%', marginTop: '20px' }}\n type="primary"\n onClick={() => {\n Dialog_.alert({\n message: JSON.stringify(form.getFieldsValue()),\n })\n }}\n >\n 提交\n </Button>\n </>\n )\n}\n\n
\n/* eslint-disable import/no-named-as-default-member */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport {\n IMakeFormCompProps,\n IFormRenderItemProps,\n IMakeFormRenderProps,\n FormRender,\n Popup,\n DatetimePicker,\n Icon,\n} from '@antmjs/vantui'\n\nexport type IFormBoxItemPropsNew<T> =\n | IFormRenderItemProps<T>\n | IMakeFormCompProps<'dateTimePicker', any, T>\n\nexport type IFormRenderPropsNew<T> = IMakeFormRenderProps<\n T,\n IFormBoxItemPropsNew<T>\n>\n\nFormRender.resiterComponent({\n type: 'dateTimePicker',\n component: DatetimePickerBox,\n valueKey: 'value',\n trigger: 'onConfirm',\n renderRight: <Icon name="arrow" />,\n valueFormat: (e) => e.detail.value,\n})\n\nfunction FormRenderNew<T>(props: IFormRenderPropsNew<T>) {\n return <FormRender {...(props as any)} />\n}\n\nFormRenderNew['resiterComponent'] = FormRender.resiterComponent\nFormRenderNew['showComponents'] = FormRender.showComponents\n\nexport default FormRenderNew\n\nfunction DatetimePickerBox(props: any) {\n const [state, changeState] = react.useState({\n show: false,\n innerValue: null,\n })\n\n const setState = react.useCallback(\n (key, value) => {\n changeState({\n ...state,\n [key]: value,\n })\n },\n [state],\n )\n\n const toggleShow = react.useCallback((show) => {\n setState('show', show)\n }, [])\n\n const onConfirm = react.useCallback((e) => {\n if (props.onConfirm) props.onConfirm(e)\n toggleShow(false)\n }, [])\n\n const onCancel = react.useCallback(() => {\n if (props.onCancel) props.onCancel()\n toggleShow(false)\n }, [])\n\n const preFixZero = react.useCallback((n) => {\n return n > 9 ? ::::_QA::::_ABn}::::_QA : ::::_QA0::::_ABn}::::_QA\n }, [])\n\n const formatDate = react.useCallback((date) => {\n const d = new Date(date)\n return ::::_QA::::_ABd.getFullYear()}-::::_ABpreFixZero(\n Number(d.getMonth() + 1),\n )}-::::_ABd.getDate()} ::::_ABd.getHours()}:::::_ABd.getMinutes()}::::_QA\n }, [])\n\n const { value } = props\n\n return (\n <>\n <View onClick={() => toggleShow(true)} style={{ minWidth: '200px' }}>\n {value ? formatDate(value) : '请选择日期'}\n </View>\n <Popup\n position="bottom"\n show={state.show}\n onClose={() => toggleShow(false)}\n >\n <DatetimePicker\n type="datetime"\n value={state.innerValue || value}\n onConfirm={onConfirm}\n onCancel={onCancel}\n />\n </Popup>\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
queryInit | \n注册组件 | \n boolean | \n- | \nfalse | \n
config | \n- | \n CP[] | \n- | \ntrue | \n
defaultValues | \n- | \n T | \n- | \nfalse | \n
form | \nform 实例 | \n IFormInstanceAPI | \n- | \ntrue | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
type | \n对应组件的 key | \n Type | \n- | \ntrue | \n
props | \n传入组件的 props | \n Props | \n- | \nfalse | \n
fields | \n对应泛型对象的 key 表单字段 | \n attr: ¦ keyof T ¦ Array< string ¦ number > | \n- | \ntrue | \n
label | \n- | \n string | \n- | \ntrue | \n
options | \noption 选项,给 checkebox、radio 等组件使用 | \n { value: string name: string }[] | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n
---|---|---|
type | \n注册组件的 key | \n string | \n
component | \n注册组件 | \n any | \n
transformProps | \n转换组件的 props, props 为组件 props, itemProps 为 formItem 的 props | \n ( props: Record< string, any >, itemProps: Record< string, any > ) => Record<string, any> | \n
基于 Form 实现配置化渲染表单,统一管理表单信息,支持自定义扩展表单组件
\nimport { FormRender, Form } from '@antmjs/vantui'\n
\nimport { Form, Button, Dialog, FormRender } from '@antmjs/vantui'\n\ntype IParams = {\n account: number\n name: string\n price: string\n radio: string\n}\nconst Dialog_ = Dialog.createOnlyDialog()\n\nexport default function Index() {\n const form = Form.useForm()\n\n return (\n <>\n <Dialog_ />\n <FormRender<IParams>\n form={form}\n config={[\n {\n fields: 'account',\n type: 'inputNumber',\n required: true,\n label: '账号',\n },\n {\n fields: 'name',\n type: 'input',\n label: '名称',\n },\n {\n fields: 'radio',\n type: 'radio',\n label: '价格',\n options: [\n {\n name: '选项1',\n value: '1',\n },\n {\n name: '选项2',\n value: '2',\n },\n ],\n },\n {\n fields: 'price',\n type: 'inputPrice',\n label: '价格',\n },\n ]}\n />\n <Button\n style={{ width: '100%', marginTop: '20px' }}\n type="primary"\n onClick={() => {\n console.info(form.getFieldsValue())\n form.validateFields((err, res) => {\n console.info(form.getFieldsValue())\n if (!err?.length) {\n Dialog_.alert({\n message: JSON.stringify(res),\n })\n }\n })\n }}\n >\n 提交\n </Button>\n </>\n )\n}\n\n
\n内部已经注册的组件类型如下
\nexport type IFormRenderItemProps<T> =\n | IMakeFormCompProps<'input' | 'inputNumber' | 'inputPrice', InputProps, T>\n | IMakeFormCompProps<'swtch', SwitchProps, T>\n | IMakeFormCompProps<'radio', RadioGroupProps, T>\n | IMakeFormCompProps<'checkbox', CheckboxGroupProps, T>\n | IMakeFormCompProps<'slider', SliderProps, T>\n | IMakeFormCompProps<'rate', RateProps, T>\n | IMakeFormCompProps<'stepper', StepperProps, T>\n
\nimport { Form, Button, Dialog } from '@antmjs/vantui'\nimport FormRender from './form-render-new'\n\ntype IParams = {\n date: number\n}\n\nconst Dialog_ = Dialog.createOnlyDialog()\n\nexport default function Index() {\n const form = Form.useForm()\n\n return (\n <>\n <Dialog_ />\n <FormRender<IParams>\n initialValues={{}}\n form={form}\n config={[\n {\n fields: 'date',\n type: 'dateTimePicker',\n label: '日期',\n },\n ]}\n />\n\n <Button\n style={{ width: '100%', marginTop: '20px' }}\n type="primary"\n onClick={() => {\n Dialog_.alert({\n message: JSON.stringify(form.getFieldsValue()),\n })\n }}\n >\n 提交\n </Button>\n </>\n )\n}\n\n
\n/* eslint-disable import/no-named-as-default-member */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport {\n IMakeFormCompProps,\n IFormRenderItemProps,\n IMakeFormRenderProps,\n FormRender,\n Popup,\n DatetimePicker,\n Icon,\n} from '@antmjs/vantui'\n\nexport type IFormBoxItemPropsNew<T> =\n | IFormRenderItemProps<T>\n | IMakeFormCompProps<'dateTimePicker', any, T>\n\nexport type IFormRenderPropsNew<T> = IMakeFormRenderProps<\n T,\n IFormBoxItemPropsNew<T>\n>\n\nFormRender.resiterComponent({\n type: 'dateTimePicker',\n component: DatetimePickerBox,\n valueKey: 'value',\n trigger: 'onConfirm',\n renderRight: <Icon name="arrow" />,\n valueFormat: (e) => e.detail.value,\n})\n\nfunction FormRenderNew<T>(props: IFormRenderPropsNew<T>) {\n return <FormRender {...(props as any)} />\n}\n\nFormRenderNew['resiterComponent'] = FormRender.resiterComponent\nFormRenderNew['showComponents'] = FormRender.showComponents\n\nexport default FormRenderNew\n\nfunction DatetimePickerBox(props: any) {\n const [state, changeState] = react.useState({\n show: false,\n innerValue: null,\n })\n\n const setState = react.useCallback(\n (key, value) => {\n changeState({\n ...state,\n [key]: value,\n })\n },\n [state],\n )\n\n const toggleShow = react.useCallback((show) => {\n setState('show', show)\n }, [])\n\n const onConfirm = react.useCallback((e) => {\n if (props.onConfirm) props.onConfirm(e)\n toggleShow(false)\n }, [])\n\n const onCancel = react.useCallback(() => {\n if (props.onCancel) props.onCancel()\n toggleShow(false)\n }, [])\n\n const preFixZero = react.useCallback((n) => {\n return n > 9 ? ::::_QA::::_ABn}::::_QA : ::::_QA0::::_ABn}::::_QA\n }, [])\n\n const formatDate = react.useCallback((date) => {\n const d = new Date(date)\n return ::::_QA::::_ABd.getFullYear()}-::::_ABpreFixZero(\n Number(d.getMonth() + 1),\n )}-::::_ABd.getDate()} ::::_ABd.getHours()}:::::_ABd.getMinutes()}::::_QA\n }, [])\n\n const { value } = props\n\n return (\n <>\n <View onClick={() => toggleShow(true)} style={{ minWidth: '200px' }}>\n {value ? formatDate(value) : '请选择日期'}\n </View>\n <Popup\n position="bottom"\n show={state.show}\n onClose={() => toggleShow(false)}\n >\n <DatetimePicker\n type="datetime"\n value={state.innerValue || value}\n onConfirm={onConfirm}\n onCancel={onCancel}\n />\n </Popup>\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
queryInit | \n注册组件 | \n boolean | \n- | \nfalse | \n
config | \n- | \n CP[] | \n- | \ntrue | \n
defaultValues | \n- | \n T | \n- | \nfalse | \n
form | \nform 实例 | \n IFormInstanceAPI | \n- | \ntrue | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
type | \n对应组件的 key | \n Type | \n- | \ntrue | \n
props | \n传入组件的 props | \n Props | \n- | \nfalse | \n
fields | \n对应泛型对象的 key 表单字段 | \n attr: ¦ keyof T ¦ Array< string ¦ number > | \n- | \ntrue | \n
label | \n- | \n string | \n- | \ntrue | \n
options | \noption 选项,给 checkebox、radio 等组件使用 | \n { value: string name: string }[] | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n
---|---|---|
type | \n注册组件的 key | \n string | \n
component | \n注册组件 | \n any | \n
transformProps | \n转换组件的 props, props 为组件 props, itemProps 为 formItem 的 props | \n ( props: Record< string, any >, itemProps: Record< string, any > ) => Record<string, any> | \n
基于有赞 VantWeapp 开发的同时支持 Taro 和 React 的 UI 库
\n99% 样式文件迁移
\n100% React 化,在 React 化的过程中保留了有赞的大部分 JS 逻辑,尽可能的少重构!
\n10+ 项目接入中
\n使用 TypeScript 编写,提供完整的类型定义
\n支持 Taro(H5、微信小程序、支付宝小程序、抖音小程序...)(注:React Native 不支持)
\n与 VantWeapp 的 UI 和 API 尽可能的保持一致
\n50+ 个高质量组件,覆盖移动端主流场景
\n支持主题定制
\n支持按需加载
\n背景:整个组件库初期是依赖开源项目 Vant Weapp 的代码经过全量编译而来,所有样式文件及代码结构都与其保持高度一致,只是生命周期经过改造使其支持 React,很大程度避免了重新造轮子带来的各种问题
\n组件库本身无法 100%满足大众个性化的 UI 需求,如果有个性化需求的可以自己通过改主题定制或 class 或 style 的形式满足自己的要求
\n\n\n如果觉得不错,给个 Star 哦
\n
本项目基于 MIT 协议,请自由地享受和参与开源
\n小电科技创新事业部前端团队
\n该组件库并不是一个新的轮子,我们只是得益于有赞团队在 vant-weapp 的多年实践、积累、沉淀上做了一些简单的扩展,让它可以以 Taro/React 的方式进行开发接入。
\n我们是 vant-weapp 的锦上添花版本,在此还是需要感谢 Taro 团队以及有赞团队为社区所作出的贡献。
\nLogo 暂时还未获得使用许可,如有侵权,请及时联系我们。
\n\n | \n | \n | \n |
---|---|---|---|
hisanshao | \nChitanda60 | \nBanlangenn | \nzuolung | \n
微信群满 200 人,需手动拉群。添加好友请备注“AntmJS”,我们会尽快拉你进群交流
\n募捐款项将全部用于项目维护,对于社区提出优质 PR 的成员给予奖励,可以是一杯奶茶、一个小红包等
\n基于有赞 VantWeapp 开发的同时支持 Taro 和 React 的 UI 库
\n99% 样式文件迁移
\n100% React 化,在 React 化的过程中保留了有赞的大部分 JS 逻辑,尽可能的少重构!
\n10+ 项目接入中
\n使用 TypeScript 编写,提供完整的类型定义
\n支持 Taro(H5、微信小程序、支付宝小程序、抖音小程序...)(注:React Native 不支持)
\n与 VantWeapp 的 UI 和 API 尽可能的保持一致
\n50+ 个高质量组件,覆盖移动端主流场景
\n支持主题定制
\n支持按需加载
\n背景:整个组件库初期是依赖开源项目 Vant Weapp 的代码经过全量编译而来,所有样式文件及代码结构都与其保持高度一致,只是生命周期经过改造使其支持 React,很大程度避免了重新造轮子带来的各种问题
\n组件库本身无法 100%满足大众个性化的 UI 需求,如果有个性化需求的可以自己通过改主题定制或 class 或 style 的形式满足自己的要求
\n\n\n如果觉得不错,给个 Star 哦
\n
本项目基于 MIT 协议,请自由地享受和参与开源
\n小电科技创新事业部前端团队
\n该组件库并不是一个新的轮子,我们只是得益于有赞团队在 vant-weapp 的多年实践、积累、沉淀上做了一些简单的扩展,让它可以以 Taro/React 的方式进行开发接入。
\n我们是 vant-weapp 的锦上添花版本,在此还是需要感谢 Taro 团队以及有赞团队为社区所作出的贡献。
\nLogo 暂时还未获得使用许可,如有侵权,请及时联系我们。
\n\n | \n | \n | \n |
---|---|---|---|
hisanshao | \nChitanda60 | \nBanlangenn | \nzuolung | \n
微信群满 200 人,需手动拉群。添加好友请备注“AntmJS”,我们会尽快拉你进群交流
\n募捐款项将全部用于项目维护,对于社区提出优质 PR 的成员给予奖励,可以是一杯奶茶、一个小红包等
\n使用 @antmjs/vantui 前,请确保你已经学习过Taro 框架 React 版 或者 React。
\n\n\n2.0 版本起内部不再注入 polyfill 逻辑,需要兼容低版本的请自行进行 polyfill。
\n
# 通过 npm 安装\nnpm install @antmjs/vantui\n\n# 通过 yarn 安装\nyarn add @antmjs/vantui\n
\n\n\n由于引用 node_modules 的模块,默认不会编译,所以需要额外给 H5 配置 esnextModules,在 taro 项目的 config/index.js 中新增如下配置项:
\n
h5: {\n esnextModules: [/@antmjs[\\/]vantui/],\n postcss: {\n autoprefixer: {\n enable: true,\n config: {\n }\n },\n pxtransform: {\n enable: true,\n config: {},\n },\n cssModules: {\n enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true\n config: {\n namingPattern: 'module', // 转换模式,取值为 global/module\n generateScopedName: '[name]__[local]___[hash:base64:5]'\n }\n }\n }\n}\n
\n2.0 之前的组件在编译阶段默认已经使用了 babel/runtime 进行语法转换以及 polyfill,2.0 开始不再默认注入。另外,使用 taro 的默认 babel 配置在支付宝和钉钉等环境会报错,解决方案可以参考temptaro的配置。
\nbabel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 语句自动转换为按需引入的方式。
\n# 安装插件\nnpm i babel-plugin-import -D\n
\n在.babelrc 或 babel.config.js 中添加配置:
\n{\n "plugins": [\n [\n "import",\n {\n "libraryName": "@antmjs/vantui",\n "libraryDirectory": "es",\n "style": true\n },\n "@antmjs/vantui"\n ]\n ]\n}\n
\n{\n "plugins": [\n [\n "import",\n {\n "libraryName": "@antmjs/vantui",\n "libraryDirectory": "es",\n "style": (name) => ::::_QA::::_ABname}/style/less::::_QA,\n },\n "@antmjs/vantui"\n ]\n ]\n}\n
\n接着你可以在代码中直接引入 VantUI 组件,插件会自动将代码转化为按需引入的形式。
\n// 原始代码\nimport { Button } from '@antmjs/vantui'\n\n// 编译后代码\nimport Button from '@antmjs/vantui/es/button'\nimport '@antmjs/vantui/es/button/style'\n
\n对于 vite 项目,可以使用 vite-plugin-style-import 实现按需引入, 原理和 babel-plugin-import
类似。
# 安装插件\nnpm i vite-plugin-style-import -D\n
\n// vite.config.js\nimport styleImport from 'vite-plugin-style-import'\n\nexport default {\n plugins: [\n styleImport({\n libs: [\n {\n libraryName: '@antmjs/vantui',\n esModule: true,\n resolveStyle: (name) => ::::_QA@antmjs/vantui/es/::::_ABname}/style::::_QA,\n },\n ],\n }),\n ],\n}\n
\n在不使用插件的情况下,可以手动引入需要使用的组件和样式。
\n// 引入组件\nimport Button from '@antmjs/vantui/es/button'\n// 引入组件对应的样式,若组件没有样式文件,则无须引入\nimport '@antmjs/vantui/es/button/style'\n
\nVant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法。
\n// 不需要更改主题,引用它\nimport '@antmjs/vantui/lib/index.css'\n// 需要通过less变量/var()更改主题,引用它\nimport '@antmjs/vantui/lib/index.less'\n
\n\n\nTips: 配置按需引入后,将不允许直接导入所有组件。
\n
// Taro小程序\n"miniCssExtractPluginOption": {\n "ignoreOrder": true,\n}\n
\n// react\nnew MiniCssExtractPlugin({\n "ignoreOrder": true,\n ...\n})\n
\n\n\n线上打包的时候会提示 conflicating order between ... 此类警告,可以通过 ignoreOrder:true 关闭
\n
{\n "designWidth": 750,\n "deviceRatio": {\n "640": 2.34 / 2,\n "750": 1,\n "828": 1.81 / 2,\n },\n}\n
\n如何在 js 中转换单位
\nimport { pxTransform } from '@antmjs/vantui'\n// 小程序转rpx H5转rem\npxTransform(10)\n
\nconfig = {\n designWidth(input) {\n if (input.file.replace(/\\+/g, '/').indexOf('@antmjs/vantui') > -1) {\n return 750\n }\n return 375\n },\n deviceRatio: {\n 640: 2.34 / 2,\n 750: 1,\n 828: 1.81 / 2,\n 375: 2 / 1,\n },\n}\n
\n使用 @antmjs/vantui 前,请确保你已经学习过Taro 框架 React 版 或者 React。
\n\n\n2.0 版本起内部不再注入 polyfill 逻辑,需要兼容低版本的请自行进行 polyfill。
\n
# 通过 npm 安装\nnpm install @antmjs/vantui\n\n# 通过 yarn 安装\nyarn add @antmjs/vantui\n
\n\n\n由于引用 node_modules 的模块,默认不会编译,所以需要额外给 H5 配置 esnextModules,在 taro 项目的 config/index.js 中新增如下配置项:
\n
h5: {\n esnextModules: [/@antmjs[\\/]vantui/],\n postcss: {\n autoprefixer: {\n enable: true,\n config: {\n }\n },\n pxtransform: {\n enable: true,\n config: {},\n },\n cssModules: {\n enable: false, // 默认为 false,如需使用 css modules 功能,则设为 true\n config: {\n namingPattern: 'module', // 转换模式,取值为 global/module\n generateScopedName: '[name]__[local]___[hash:base64:5]'\n }\n }\n }\n}\n
\n2.0 之前的组件在编译阶段默认已经使用了 babel/runtime 进行语法转换以及 polyfill,2.0 开始不再默认注入。另外,使用 taro 的默认 babel 配置在支付宝和钉钉等环境会报错,解决方案可以参考temptaro的配置。
\nbabel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 语句自动转换为按需引入的方式。
\n# 安装插件\nnpm i babel-plugin-import -D\n
\n在.babelrc 或 babel.config.js 中添加配置:
\n{\n "plugins": [\n [\n "import",\n {\n "libraryName": "@antmjs/vantui",\n "libraryDirectory": "es",\n "style": true\n },\n "@antmjs/vantui"\n ]\n ]\n}\n
\n{\n "plugins": [\n [\n "import",\n {\n "libraryName": "@antmjs/vantui",\n "libraryDirectory": "es",\n "style": (name) => ::::_QA::::_ABname}/style/less::::_QA,\n },\n "@antmjs/vantui"\n ]\n ]\n}\n
\n接着你可以在代码中直接引入 VantUI 组件,插件会自动将代码转化为按需引入的形式。
\n// 原始代码\nimport { Button } from '@antmjs/vantui'\n\n// 编译后代码\nimport Button from '@antmjs/vantui/es/button'\nimport '@antmjs/vantui/es/button/style'\n
\n对于 vite 项目,可以使用 vite-plugin-style-import 实现按需引入, 原理和 babel-plugin-import
类似。
# 安装插件\nnpm i vite-plugin-style-import -D\n
\n// vite.config.js\nimport styleImport from 'vite-plugin-style-import'\n\nexport default {\n plugins: [\n styleImport({\n libs: [\n {\n libraryName: '@antmjs/vantui',\n esModule: true,\n resolveStyle: (name) => ::::_QA@antmjs/vantui/es/::::_ABname}/style::::_QA,\n },\n ],\n }),\n ],\n}\n
\n在不使用插件的情况下,可以手动引入需要使用的组件和样式。
\n// 引入组件\nimport Button from '@antmjs/vantui/es/button'\n// 引入组件对应的样式,若组件没有样式文件,则无须引入\nimport '@antmjs/vantui/es/button/style'\n
\nVant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法。
\n// 不需要更改主题,引用它\nimport '@antmjs/vantui/lib/index.css'\n// 需要通过less变量/var()更改主题,引用它\nimport '@antmjs/vantui/lib/index.less'\n
\n\n\nTips: 配置按需引入后,将不允许直接导入所有组件。
\n
// Taro小程序\n"miniCssExtractPluginOption": {\n "ignoreOrder": true,\n}\n
\n// react\nnew MiniCssExtractPlugin({\n "ignoreOrder": true,\n ...\n})\n
\n\n\n线上打包的时候会提示 conflicating order between ... 此类警告,可以通过 ignoreOrder:true 关闭
\n
{\n "designWidth": 750,\n "deviceRatio": {\n "640": 2.34 / 2,\n "750": 1,\n "828": 1.81 / 2,\n },\n}\n
\n如何在 js 中转换单位
\nimport { pxTransform } from '@antmjs/vantui'\n// 小程序转rpx H5转rem\npxTransform(10)\n
\nconfig = {\n designWidth(input) {\n if (input.file.replace(/\\+/g, '/').indexOf('@antmjs/vantui') > -1) {\n return 750\n }\n return 375\n },\n deviceRatio: {\n 640: 2.34 / 2,\n 750: 1,\n 828: 1.81 / 2,\n 375: 2 / 1,\n },\n}\n
\n在页面中间弹出黑色半透明提示,用于消息通知、加载提示、操作结果提示等场景。\n(一个 toast 弹出的时候会先关闭其它 Toast, 后续支持多 Toast)
\n在 Taro 文件中引入组件
\nimport { Toast } from '@antmjs/vantui'\n
\n须要在 JSX 里面申明后,才能用命令式调用
\nimport { Toast } from 'vantui'\n
\nconst Toast_ = Toast.createOnlyToast()\nfunction Demo() {\n const show = () => {\n Toast_.show('我是提示文案')\n }\n\n const showLong = () => {\n Toast_.show('我是提示文案, 超过了十五就会换行额~~~')\n }\n\n return (\n <View>\n <Button type="primary" onClick={show}>\n 文字提示\n </Button>\n <Button type="primary" onClick={showLong}>\n 长文字提示\n </Button>\n <Toast_ />\n </View>\n )\n}\n
\n使用 Toast.loading
方法展示加载提示,通过 forbidClick
属性可以禁用背景点击,通过 loadingType
属性可以自定义加载图标类型。
const Toast_ = Toast.createOnlyToast()\n\nfunction Demo() {\n const show = () => {\n Toast_.success({\n message: '成功文案',\n })\n }\n\n const showLong = () => {\n Toast_.fail({\n message: '失败文案',\n })\n }\n\n return (\n <View>\n <Button type="primary" onClick={show}>\n 加载提示\n </Button>\n <Button type="primary" onClick={showLong}>\n 自定义加载图标\n </Button>\n <Toast_ />\n </View>\n )\n}\n
\nfunction Demo() {\n const show = () => {\n Toast.success({\n message: '成功文案',\n selector: '#vanToast-demo2',\n })\n }\n\n const showLong = () => {\n Toast.loading({\n message: '失败文案',\n selector: '#vanToast-demo2',\n })\n }\n\n return (\n <View>\n <Button type="info" onClick={show}>\n 成功\n </Button>\n <Button type="danger" onClick={showLong}>\n 失败\n </Button>\n <Toast id="vanToast-demo2" />\n </View>\n )\n}\n
\nfunction Demo() {\n const show = () => {\n Toast.loading({\n duration: 0, // 持续展示 toast\n forbidClick: true,\n message: '倒计时 3 秒',\n selector: '#customSelector',\n })\n\n let second = 3\n const timer = setInterval(() => {\n second--\n if (second) {\n Toast.loading({\n message: ::::_QA倒计时 ::::_ABsecond} 秒::::_QA,\n })\n } else {\n clearInterval(timer)\n Toast.clear()\n }\n }, 1000)\n }\n\n return (\n <View>\n <Button type="info" onClick={show}>\n 动态提示\n </Button>\n <Toast id="customSelector" />\n </View>\n )\n}\n
\nToast.show({\n type: 'success',\n message: '提交成功',\n onClose: () => {\n console.log('执行OnClose函数')\n },\n})\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
zIndex | \n弹出层的层级 | \n number | \n1000 | \nfalse | \n
duration | \n展示时长(ms),值为 0 时,toast 不会消失 | \n number | \n2000 | \nfalse | \n
mask | \n是否有蒙层 | \n boolean | \nfalse | \nfalse | \n
forbidClick | \n是否禁止背景点击 | \n boolean | \nfalse | \nfalse | \n
type | \n提示类型 | \n attr: ¦ "loading" ¦ "success" ¦ "fail" ¦ "html" ¦ "text" | \ntext | \nfalse | \n
position | \n展示位置 | \n attr: ¦ "top" ¦ "middle" ¦ "bottom" | \nmiddle | \nfalse | \n
message | \n内容 | \n ReactNode | \n- | \nfalse | \n
loadingType | \n加载图标类型 | \n attr: ¦ "circular" ¦ "spinner" ¦ undefined | \nspinner | \nfalse | \n
selector | \n自定义选择器, 对应元素 id | \n string | \nvan-toast | \nfalse | \n
id | \n设置 id,配合 selector 使用 | \n string | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onClose | \n关闭时的回调函数 | \n () => any | \n- | \nfalse | \n
调用方式传入 ToastProps 或者 ToastProps.message 执行
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
show | \n- | \n ( options: ¦ ToastProps ¦ string ) => any | \n- | \ntrue | \n
loading | \n- | \n ( options: ¦ ToastProps ¦ string ) => any | \n- | \ntrue | \n
success | \n- | \n ( options: ¦ ToastProps ¦ string ) => any | \n- | \ntrue | \n
fail | \n- | \n ( options: ¦ ToastProps ¦ string ) => any | \n- | \ntrue | \n
clear | \n- | \n ( options?: ToastProps ) => void | \n- | \ntrue | \n
setDefaultOptions | \n- | \n ( options: ToastProps ) => void | \n- | \ntrue | \n
resetDefaultOptions | \n- | \n ( options: any ) => void | \n- | \ntrue | \n
createOnlyToast | \n获取唯一的 toast 组件,不需要手动设置 id 和 selector | \n () => FunctionComponent toastProps | \n- | \ntrue | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--toast-max-width | \n 70%; | \n
--toast-font-size | \n 28px; | \n
--toast-text-color | \n @white; | \n
--toast-line-height | \n 40px; | \n
--toast-border-radius | \n @border-radius-lg; | \n
--toast-background-color | \n fade(@black, 70%); | \n
--toast-icon-size | \n 72px; | \n
--toast-text-min-width | \n 192px; | \n
--toast-text-padding | \n @padding-xs @padding-sm; | \n
--toast-default-padding | \n @padding-md; | \n
--toast-default-width | \n 176px; | \n
--toast-default-min-height | \n 176px; | \n
在页面中间弹出黑色半透明提示,用于消息通知、加载提示、操作结果提示等场景。\n(一个 toast 弹出的时候会先关闭其它 Toast, 后续支持多 Toast)
\n在 Taro 文件中引入组件
\nimport { Toast } from '@antmjs/vantui'\n
\n须要在 JSX 里面申明后,才能用命令式调用
\nimport { Toast } from 'vantui'\n
\nconst Toast_ = Toast.createOnlyToast()\nfunction Demo() {\n const show = () => {\n Toast_.show('我是提示文案')\n }\n\n const showLong = () => {\n Toast_.show('我是提示文案, 超过了十五就会换行额~~~')\n }\n\n return (\n <View>\n <Button type="primary" onClick={show}>\n 文字提示\n </Button>\n <Button type="primary" onClick={showLong}>\n 长文字提示\n </Button>\n <Toast_ />\n </View>\n )\n}\n
\n使用 Toast.loading
方法展示加载提示,通过 forbidClick
属性可以禁用背景点击,通过 loadingType
属性可以自定义加载图标类型。
const Toast_ = Toast.createOnlyToast()\n\nfunction Demo() {\n const show = () => {\n Toast_.success({\n message: '成功文案',\n })\n }\n\n const showLong = () => {\n Toast_.fail({\n message: '失败文案',\n })\n }\n\n return (\n <View>\n <Button type="primary" onClick={show}>\n 加载提示\n </Button>\n <Button type="primary" onClick={showLong}>\n 自定义加载图标\n </Button>\n <Toast_ />\n </View>\n )\n}\n
\nfunction Demo() {\n const show = () => {\n Toast.success({\n message: '成功文案',\n selector: '#vanToast-demo2',\n })\n }\n\n const showLong = () => {\n Toast.loading({\n message: '失败文案',\n selector: '#vanToast-demo2',\n })\n }\n\n return (\n <View>\n <Button type="info" onClick={show}>\n 成功\n </Button>\n <Button type="danger" onClick={showLong}>\n 失败\n </Button>\n <Toast id="vanToast-demo2" />\n </View>\n )\n}\n
\nfunction Demo() {\n const show = () => {\n Toast.loading({\n duration: 0, // 持续展示 toast\n forbidClick: true,\n message: '倒计时 3 秒',\n selector: '#customSelector',\n })\n\n let second = 3\n const timer = setInterval(() => {\n second--\n if (second) {\n Toast.loading({\n message: ::::_QA倒计时 ::::_ABsecond} 秒::::_QA,\n })\n } else {\n clearInterval(timer)\n Toast.clear()\n }\n }, 1000)\n }\n\n return (\n <View>\n <Button type="info" onClick={show}>\n 动态提示\n </Button>\n <Toast id="customSelector" />\n </View>\n )\n}\n
\nToast.show({\n type: 'success',\n message: '提交成功',\n onClose: () => {\n console.log('执行OnClose函数')\n },\n})\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
zIndex | \n弹出层的层级 | \n number | \n1000 | \nfalse | \n
duration | \n展示时长(ms),值为 0 时,toast 不会消失 | \n number | \n2000 | \nfalse | \n
mask | \n是否有蒙层 | \n boolean | \nfalse | \nfalse | \n
forbidClick | \n是否禁止背景点击 | \n boolean | \nfalse | \nfalse | \n
type | \n提示类型 | \n attr: ¦ "loading" ¦ "success" ¦ "fail" ¦ "html" ¦ "text" | \ntext | \nfalse | \n
position | \n展示位置 | \n attr: ¦ "top" ¦ "middle" ¦ "bottom" | \nmiddle | \nfalse | \n
message | \n内容 | \n ReactNode | \n- | \nfalse | \n
loadingType | \n加载图标类型 | \n attr: ¦ "circular" ¦ "spinner" ¦ undefined | \nspinner | \nfalse | \n
selector | \n自定义选择器, 对应元素 id | \n string | \nvan-toast | \nfalse | \n
id | \n设置 id,配合 selector 使用 | \n string | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onClose | \n关闭时的回调函数 | \n () => any | \n- | \nfalse | \n
调用方式传入 ToastProps 或者 ToastProps.message 执行
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
show | \n- | \n ( options: ¦ ToastProps ¦ string ) => any | \n- | \ntrue | \n
loading | \n- | \n ( options: ¦ ToastProps ¦ string ) => any | \n- | \ntrue | \n
success | \n- | \n ( options: ¦ ToastProps ¦ string ) => any | \n- | \ntrue | \n
fail | \n- | \n ( options: ¦ ToastProps ¦ string ) => any | \n- | \ntrue | \n
clear | \n- | \n ( options?: ToastProps ) => void | \n- | \ntrue | \n
setDefaultOptions | \n- | \n ( options: ToastProps ) => void | \n- | \ntrue | \n
resetDefaultOptions | \n- | \n ( options: any ) => void | \n- | \ntrue | \n
createOnlyToast | \n获取唯一的 toast 组件,不需要手动设置 id 和 selector | \n () => FunctionComponent toastProps | \n- | \ntrue | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--toast-max-width | \n 70%; | \n
--toast-font-size | \n 28px; | \n
--toast-text-color | \n @white; | \n
--toast-line-height | \n 40px; | \n
--toast-border-radius | \n @border-radius-lg; | \n
--toast-background-color | \n fade(@black, 70%); | \n
--toast-icon-size | \n 72px; | \n
--toast-text-min-width | \n 192px; | \n
--toast-text-padding | \n @padding-xs @padding-sm; | \n
--toast-default-padding | \n @padding-md; | \n
--toast-default-width | \n 176px; | \n
--toast-default-min-height | \n 176px; | \n
基于 Canvas 的签名组件
\nimport { Signature } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Signature, Button, Image, ISignatureInstance } from '@antmjs/vantui'\n\nexport default function Demo() {\n const instance = react.useRef<ISignatureInstance>()\n const [img, setImage] = react.useState<string>('')\n\n const getImageAction = async () => {\n const res = await instance.current?.getImage()\n if (res) {\n setImage(res.tempFilePath)\n }\n }\n\n const clear = () => {\n instance.current?.clear()\n setImage('')\n }\n\n return (\n <View>\n <Signature ref={instance} />\n <View style={{ marginTop: 20, display: 'flex' }}>\n <Button onClick={getImageAction} type="primary">\n 截图\n </Button>\n <Button onClick={clear} type="danger">\n 重绘\n </Button>\n </View>\n <Image\n src={img}\n style={{\n backgroundColor: '#fff',\n border: '1px solid #ddd',\n marginTop: '20px',\n }}\n width="100%"\n height="150px"\n />\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Signature, Button, Image, ISignatureInstance } from '@antmjs/vantui'\n\nexport default function Demo() {\n const instance = react.useRef<ISignatureInstance>()\n const [img, setImage] = react.useState('')\n\n const getImageAction = async () => {\n const res = await instance.current?.getImage()\n if (res?.tempFilePath) {\n setImage(res.tempFilePath)\n }\n }\n\n const clear = () => {\n instance.current?.clear()\n setImage('')\n }\n\n return (\n <View>\n <Signature ref={instance} lineWidth={4} strokeStyle="green" />\n <View style={{ marginTop: 20, display: 'flex' }}>\n <Button onClick={getImageAction} type="primary">\n 截图\n </Button>\n <Button onClick={clear} type="danger">\n 重绘\n </Button>\n </View>\n <Image\n src={img}\n style={{\n backgroundColor: '#fff',\n border: '1px solid #ddd',\n marginTop: '20px',\n }}\n width="100%"\n height="150px"\n fit="widthFix"\n />\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
canvasId | \n画布元素 id | \n string | \nspcanvas | \nfalse | \n
type | \n获取图片的类型 | \n "jpg" ¦ "png" | \npng | \nfalse | \n
lineWidth | \n线条的宽度 | \n number | \n3 | \nfalse | \n
strokeStyle | \n绘图颜色 | \n string | \n#000 | \nfalse | \n
className | \n样式名 | \n string | \n- | \nfalse | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
getImage | \n获取绘制生成的图片相关数据,tempFilePath 在 h5 为 base64,小程序为临时图片,由于 canvasToTempFilePath 在部分小程序 IDE 无法调试 | \n () => Promise<{ base64: string tempFilePath: string canvas: HTMLCanvasElement }> | \n
clear | \n清除画布方法 | \n () => void | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--signature-border-color | \n #dadada; | \n
--signature-border-width | \n 1px; | \n
--signature-height | \n 300px; | \n
--signature-margin-bottom | \n 20px; | \n
基于 Canvas 的签名组件
\nimport { Signature } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Signature, Button, Image, ISignatureInstance } from '@antmjs/vantui'\n\nexport default function Demo() {\n const instance = react.useRef<ISignatureInstance>()\n const [img, setImage] = react.useState<string>('')\n\n const getImageAction = async () => {\n const res = await instance.current?.getImage()\n if (res) {\n setImage(res.tempFilePath)\n }\n }\n\n const clear = () => {\n instance.current?.clear()\n setImage('')\n }\n\n return (\n <View>\n <Signature ref={instance} />\n <View style={{ marginTop: 20, display: 'flex' }}>\n <Button onClick={getImageAction} type="primary">\n 截图\n </Button>\n <Button onClick={clear} type="danger">\n 重绘\n </Button>\n </View>\n <Image\n src={img}\n style={{\n backgroundColor: '#fff',\n border: '1px solid #ddd',\n marginTop: '20px',\n }}\n width="100%"\n height="150px"\n />\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Signature, Button, Image, ISignatureInstance } from '@antmjs/vantui'\n\nexport default function Demo() {\n const instance = react.useRef<ISignatureInstance>()\n const [img, setImage] = react.useState('')\n\n const getImageAction = async () => {\n const res = await instance.current?.getImage()\n if (res?.tempFilePath) {\n setImage(res.tempFilePath)\n }\n }\n\n const clear = () => {\n instance.current?.clear()\n setImage('')\n }\n\n return (\n <View>\n <Signature ref={instance} lineWidth={4} strokeStyle="green" />\n <View style={{ marginTop: 20, display: 'flex' }}>\n <Button onClick={getImageAction} type="primary">\n 截图\n </Button>\n <Button onClick={clear} type="danger">\n 重绘\n </Button>\n </View>\n <Image\n src={img}\n style={{\n backgroundColor: '#fff',\n border: '1px solid #ddd',\n marginTop: '20px',\n }}\n width="100%"\n height="150px"\n fit="widthFix"\n />\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
canvasId | \n画布元素 id | \n string | \nspcanvas | \nfalse | \n
type | \n获取图片的类型 | \n "jpg" ¦ "png" | \npng | \nfalse | \n
lineWidth | \n线条的宽度 | \n number | \n3 | \nfalse | \n
strokeStyle | \n绘图颜色 | \n string | \n#000 | \nfalse | \n
className | \n样式名 | \n string | \n- | \nfalse | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
getImage | \n获取绘制生成的图片相关数据,tempFilePath 在 h5 为 base64,小程序为临时图片,由于 canvasToTempFilePath 在部分小程序 IDE 无法调试 | \n () => Promise<{ base64: string tempFilePath: string canvas: HTMLCanvasElement }> | \n
clear | \n清除画布方法 | \n () => void | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--signature-border-color | \n #dadada; | \n
--signature-border-width | \n 1px; | \n
--signature-height | \n 300px; | \n
--signature-margin-bottom | \n 20px; | \n
指渲染可视区域的元素,支持等高单列、不等高单列、瀑布流
\nimport { VirtualList } from '@antmjs/vantui'\n
\nshowCount
必须大于可视区域可展示的最大数量N
个元素,组件内永远只渲染2N
个元素dataSource
传入二维数组,请通过ItemRender
去渲染多列Taro
自带的案例如下
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Image as TaroImage, Text } from '@tarojs/components'\nimport { VirtualList } from '@antmjs/vantui'\nimport * as COMMON from './common'\nconst data = COMMON.mockGoods()\n\nexport default function Demo() {\n return (\n <VirtualList\n style={{ padding: 10, boxSizing: 'border-box' }}\n height="calc(100vh - 125px)"\n dataSource={data}\n showCount={3}\n ItemRender={react.memo(({ index, item, className, ...props }) => {\n return (\n <View\n className={::::_QAvan-demo-goods-item-wrapper ::::_ABclassName}::::_QA}\n {...props}\n >\n <View className="van-demo-goods-item">\n <TaroImage src={item.image || ''} className="img" />\n <View className="title">{item.title}</View>\n {item.isCutPrice && <Text className="cutPrice">最近大降价</Text>}\n <View className="price">{item.price}</View>\n </View>\n </View>\n )\n })}\n />\n )\n}\n\n
\n/* eslint-disable */\nexport const mockGoods = () => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Array(33).fill('').map((_, index) => {\n return {\n index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n })\n}\n\n
\n模拟商品数据
\nconst mockGoods = () => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Array(33).fill('').map((item, index) => {\n return {\n index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n })\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
listStyle | \n列容器的样式 | \n CSSProperties | \n- | \nfalse | \n
listClssName | \n列容器的样式名 | \n string | \n- | \nfalse | \n
height | \n滚动外层容器高度 | \n number ¦ string | \n- | \ntrue | \n
footer | \n底部额外渲染 | \n ReactNode | \n- | \nfalse | \n
showCount | \n可视区域展示的最大数量, 高度不一的时候按全部最小高度展示去计算 | \n number | \n- | \ntrue | \n
dataSource | \n数据源,数组 | \n Array | \n- | \ntrue | \n
ItemRender | \n自定义渲染每一项 | \n FunctionComponent< { item: T index?: number } & ViewProps > | \n- | \ntrue | \n
renderBackToTop | \n自定义回到顶部按钮渲染 | \n ReactNode | \n- | \nfalse | \n
backToTopSuccess | \n成功返回顶部后执行 | \n () => void | \n- | \nfalse | \n
backToTopCritical | \n展示返回顶端按钮的临界值,上方隐藏了多少个 ItemRender | \n number | \nshowCount | \nfalse | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
reset | \n重置状态 | \n () => void | \n
backToTop | \n返回顶部 | \n () => void | \n
指渲染可视区域的元素,支持等高单列、不等高单列、瀑布流
\nimport { VirtualList } from '@antmjs/vantui'\n
\nshowCount
必须大于可视区域可展示的最大数量N
个元素,组件内永远只渲染2N
个元素dataSource
传入二维数组,请通过ItemRender
去渲染多列Taro
自带的案例如下
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Image as TaroImage, Text } from '@tarojs/components'\nimport { VirtualList } from '@antmjs/vantui'\nimport * as COMMON from './common'\nconst data = COMMON.mockGoods()\n\nexport default function Demo() {\n return (\n <VirtualList\n style={{ padding: 10, boxSizing: 'border-box' }}\n height="calc(100vh - 125px)"\n dataSource={data}\n showCount={3}\n ItemRender={react.memo(({ index, item, className, ...props }) => {\n return (\n <View\n className={::::_QAvan-demo-goods-item-wrapper ::::_ABclassName}::::_QA}\n {...props}\n >\n <View className="van-demo-goods-item">\n <TaroImage src={item.image || ''} className="img" />\n <View className="title">{item.title}</View>\n {item.isCutPrice && <Text className="cutPrice">最近大降价</Text>}\n <View className="price">{item.price}</View>\n </View>\n </View>\n )\n })}\n />\n )\n}\n\n
\n/* eslint-disable */\nexport const mockGoods = () => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Array(33).fill('').map((_, index) => {\n return {\n index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n })\n}\n\n
\n模拟商品数据
\nconst mockGoods = () => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Array(33).fill('').map((item, index) => {\n return {\n index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n })\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
listStyle | \n列容器的样式 | \n CSSProperties | \n- | \nfalse | \n
listClssName | \n列容器的样式名 | \n string | \n- | \nfalse | \n
height | \n滚动外层容器高度 | \n number ¦ string | \n- | \ntrue | \n
footer | \n底部额外渲染 | \n ReactNode | \n- | \nfalse | \n
showCount | \n可视区域展示的最大数量, 高度不一的时候按全部最小高度展示去计算 | \n number | \n- | \ntrue | \n
dataSource | \n数据源,数组 | \n Array | \n- | \ntrue | \n
ItemRender | \n自定义渲染每一项 | \n FunctionComponent< { item: T index?: number } & ViewProps > | \n- | \ntrue | \n
renderBackToTop | \n自定义回到顶部按钮渲染 | \n ReactNode | \n- | \nfalse | \n
backToTopSuccess | \n成功返回顶部后执行 | \n () => void | \n- | \nfalse | \n
backToTopCritical | \n展示返回顶端按钮的临界值,上方隐藏了多少个 ItemRender | \n number | \nshowCount | \nfalse | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
reset | \n重置状态 | \n () => void | \n
backToTop | \n返回顶部 | \n () => void | \n
使元素从一种样式逐渐变化为另一种样式的效果。
\n在 Taro 文件中引入组件
\nimport { Transition } from '@antmjs/vantui'\n
\nname
字段指定动画类型。案例如下
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Transition } from '@antmjs/vantui'\n\nconst animations = [\n 'fade',\n 'fade-up',\n 'fade-down',\n 'fade-left',\n 'fade-right',\n 'slide-up',\n 'slide-down',\n 'slide-left',\n 'slide-right',\n]\nexport default function Demo() {\n const [show, setShow] = react.useState('')\n const animationAction = (ss) => {\n setShow(ss)\n setTimeout(() => {\n setShow('')\n }, 1000)\n }\n\n return (\n <View>\n {animations.map((item) => (\n <Cell\n title={item}\n key={item}\n onClick={() => animationAction(item)}\n ></Cell>\n ))}\n {animations.map((item) => (\n <Transition\n duration={{ enter: 300, leave: 1000 }}\n className="center-x"\n enterClass="vanEnterClass"\n enterActiveClass="vanEnterActiveClass"\n leaveActiveClass="vanLeaveActiveClass"\n leaveToClass="vanLeaveToClass"\n key={::::_QA::::_ABitem}tran::::_QA}\n show={show === item}\n name={item}\n />\n ))}\n </View>\n )\n}\n\n
\n.vanEnterActiveClass,\n.vanLeaveActiveClass {\n transitionproperty: backgroundColor, transform;\n}\n\n.vanEnterClass,\n.vanLeaveToClass {\n backgroundcolor: red;\n transform: rotate(-360deg) translate3d(-100%, -100%, 0);\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
children | \n- | \n ReactNode | \n- | \nfalse | \n
使元素从一种样式逐渐变化为另一种样式的效果。
\n在 Taro 文件中引入组件
\nimport { Transition } from '@antmjs/vantui'\n
\nname
字段指定动画类型。案例如下
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Cell, Transition } from '@antmjs/vantui'\n\nconst animations = [\n 'fade',\n 'fade-up',\n 'fade-down',\n 'fade-left',\n 'fade-right',\n 'slide-up',\n 'slide-down',\n 'slide-left',\n 'slide-right',\n]\nexport default function Demo() {\n const [show, setShow] = react.useState('')\n const animationAction = (ss) => {\n setShow(ss)\n setTimeout(() => {\n setShow('')\n }, 1000)\n }\n\n return (\n <View>\n {animations.map((item) => (\n <Cell\n title={item}\n key={item}\n onClick={() => animationAction(item)}\n ></Cell>\n ))}\n {animations.map((item) => (\n <Transition\n duration={{ enter: 300, leave: 1000 }}\n className="center-x"\n enterClass="vanEnterClass"\n enterActiveClass="vanEnterActiveClass"\n leaveActiveClass="vanLeaveActiveClass"\n leaveToClass="vanLeaveToClass"\n key={::::_QA::::_ABitem}tran::::_QA}\n show={show === item}\n name={item}\n />\n ))}\n </View>\n )\n}\n\n
\n.vanEnterActiveClass,\n.vanLeaveActiveClass {\n transitionproperty: backgroundColor, transform;\n}\n\n.vanEnterClass,\n.vanLeaveToClass {\n backgroundcolor: red;\n transform: rotate(-360deg) translate3d(-100%, -100%, 0);\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
children | \n- | \n ReactNode | \n- | \nfalse | \n
对前一步操作的结果进行反馈, 当有重要操作需告知用户处理结果,且反馈内容较为复杂时使用
\n/* eslint-disable */\nimport { Result } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Result\n title="操作成功"\n message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"\n type="success"\n />\n )\n}\n\n
\n/* eslint-disable */\nimport { Result } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Result\n title="等待处理"\n message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"\n type="wait"\n />\n )\n}\n\n
\n/* eslint-disable */\nimport { Result } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Result\n title="信息提示"\n message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"\n type="info"\n />\n )\n}\n\n
\n/* eslint-disable */\nimport { Result } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Result\n title="警告提示"\n message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"\n type="warning"\n />\n )\n}\n\n
\n/* eslint-disable */\nimport { Result } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Result\n title="无法完成操作"\n message="内容详情可折行,建议不超过两行\n建议不超过两行建议不超过两行"\n type="error"\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
type | \n内置类型 success=成功 error=错误/危险 info=信息提示 wait=等待处理 | \n attr: ¦ "success" ¦ "error" ¦ "info" ¦ "warning" ¦ "wait" | \n- | \ntrue | \n
renderIcon | \n自定义图片,如果配置了 type, 则不生效 | \n React.ReactNode | \n- | \nfalse | \n
title | \n主文案 | \n attr: ¦ string ¦ React.ReactNode | \n- | \ntrue | \n
message | \n副文案 | \n attr: ¦ string ¦ React.ReactNode | \n- | \nfalse | \n
extra | \n下方额外内容 | \n string | \n- | \nfalse | \n
iconSize | \n图标大小 | \n number | \n120 | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--result-padding | \n 64px 24px; | \n
--result-success-color | \n #07c160; | \n
--result-wait-color | \n #4dd3b5; | \n
--result-info-color | \n #1677ff; | \n
--result-warning-color | \n #ff8f1f; | \n
--result-error-color | \n #fc3e39; | \n
对前一步操作的结果进行反馈, 当有重要操作需告知用户处理结果,且反馈内容较为复杂时使用
\n/* eslint-disable */\nimport { Result } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Result\n title="操作成功"\n message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"\n type="success"\n />\n )\n}\n\n
\n/* eslint-disable */\nimport { Result } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Result\n title="等待处理"\n message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"\n type="wait"\n />\n )\n}\n\n
\n/* eslint-disable */\nimport { Result } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Result\n title="信息提示"\n message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"\n type="info"\n />\n )\n}\n\n
\n/* eslint-disable */\nimport { Result } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Result\n title="警告提示"\n message="内容详情可折行,建议不超过两行建议不超过两行建议不超过两行"\n type="warning"\n />\n )\n}\n\n
\n/* eslint-disable */\nimport { Result } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Result\n title="无法完成操作"\n message="内容详情可折行,建议不超过两行\n建议不超过两行建议不超过两行"\n type="error"\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
type | \n内置类型 success=成功 error=错误/危险 info=信息提示 wait=等待处理 | \n attr: ¦ "success" ¦ "error" ¦ "info" ¦ "warning" ¦ "wait" | \n- | \ntrue | \n
renderIcon | \n自定义图片,如果配置了 type, 则不生效 | \n React.ReactNode | \n- | \nfalse | \n
title | \n主文案 | \n attr: ¦ string ¦ React.ReactNode | \n- | \ntrue | \n
message | \n副文案 | \n attr: ¦ string ¦ React.ReactNode | \n- | \nfalse | \n
extra | \n下方额外内容 | \n string | \n- | \nfalse | \n
iconSize | \n图标大小 | \n number | \n120 | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--result-padding | \n 64px 24px; | \n
--result-success-color | \n #07c160; | \n
--result-wait-color | \n #4dd3b5; | \n
--result-info-color | \n #1677ff; | \n
--result-warning-color | \n #ff8f1f; | \n
--result-error-color | \n #fc3e39; | \n
基于 less 变量@primary-color
或 css 变量--primary-color
统一设置主色调。主色调变化的有:
升级后需要核实这些组件的色调是否须要和之前保持一致,须要的话,请根据各个组件的 less 变量或 css 变量修改
\n之前的版本存在命令式调用无效的场景,原因在于发布订阅触发的组件ID
存在冲突,新增了下面方式调用,之前写法可以保持不变
const Toast_ = Toast.createOnlyToast()\nconst Dialog_ = Toast.createOnlyDialog()\nconst Notify_ = Toast.createOnlyNotify()\n
\npower-scroll-view
组件被拆分为infinite-scroll
和pull-to-refresh
, 升级方式:
power-scroll-view
的onScrollToLower
对应infinite-scroll
的loadMore
方法power-scroll-view
的onScrollToUpper
对应pull-to-refresh
的onRefresh
方法function Demo() {\n // ...\n const loadMore = async () => {\n // ...\n }\n\n const onRefresh = async () => {\n //...\n InfiniteScrollInstance.current.reset()\n }\n return (\n <PullToRefresh onRefresh={onRefresh}>\n {/** 列表渲染.... */}\n <InfiniteScroll loadMore={loadMore} ref={InfiniteScrollInstance} />\n </PullToRefresh>\n )\n}\n
\n由于小程序是异步获取 dom 的 rect 信息,当前实现方式为区域最多渲染 N 个元素,组件内永远只渲染 2N 个元素
\nlongspan
属性,开启快速切换年月日datetimepicker
borderBottom
开启和 cell 一样的下边框升级后确认样式是否需要重新调整
\n基于 less 变量@primary-color
或 css 变量--primary-color
统一设置主色调。主色调变化的有:
升级后需要核实这些组件的色调是否须要和之前保持一致,须要的话,请根据各个组件的 less 变量或 css 变量修改
\n之前的版本存在命令式调用无效的场景,原因在于发布订阅触发的组件ID
存在冲突,新增了下面方式调用,之前写法可以保持不变
const Toast_ = Toast.createOnlyToast()\nconst Dialog_ = Toast.createOnlyDialog()\nconst Notify_ = Toast.createOnlyNotify()\n
\npower-scroll-view
组件被拆分为infinite-scroll
和pull-to-refresh
, 升级方式:
power-scroll-view
的onScrollToLower
对应infinite-scroll
的loadMore
方法power-scroll-view
的onScrollToUpper
对应pull-to-refresh
的onRefresh
方法function Demo() {\n // ...\n const loadMore = async () => {\n // ...\n }\n\n const onRefresh = async () => {\n //...\n InfiniteScrollInstance.current.reset()\n }\n return (\n <PullToRefresh onRefresh={onRefresh}>\n {/** 列表渲染.... */}\n <InfiniteScroll loadMore={loadMore} ref={InfiniteScrollInstance} />\n </PullToRefresh>\n )\n}\n
\n由于小程序是异步获取 dom 的 rect 信息,当前实现方式为区域最多渲染 N 个元素,组件内永远只渲染 2N 个元素
\nlongspan
属性,开启快速切换年月日datetimepicker
borderBottom
开启和 cell 一样的下边框升级后确认样式是否需要重新调整
\n基于商品规格和商品列表数据
\n在 Taro 文件中引入组件
\nimport { Sku } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Toast, Sku } from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nexport default function Demo() {\n const { sku, goodsList } = COMMON\n // 选中的商品,可以获取自定义属性如:商品图片、价格、数量\n const [currentGoods, setCurrent] = react.useState<any>({})\n\n const itemDisable = (goodsItem) => {\n if (!goodsItem) return true\n // 商品表可设定count为库存数,或者通过其它条件判断\n if (goodsItem.count === 0) return true\n\n return false\n }\n\n return (\n <>\n <Toast />\n <View>当前选择商品:</View>\n <View style={{ paddingBottom: 10 }}>\n HUAWEI手机【{currentGoods?.skuName || '--'}】\n </View>\n <Sku\n autoChoice={true}\n sku={sku}\n goodsList={goodsList}\n onChange={(e) => setCurrent(e)}\n clickAttrDisable={() => Toast.show(::::_QA暂无库存::::_QA)}\n itemDisable={itemDisable}\n itemRender={(it) => {\n if (it['color']) {\n return (\n <View className="sku-color-item">\n <View\n className="color-item"\n style={{ background: it['color'] }}\n ></View>\n <View>{it.name}</View>\n </View>\n )\n }\n\n return it.name\n }}\n />\n </>\n )\n}\n\n
\n/* eslint-disable */\nexport const sku = [\n {\n id: 1,\n name: '颜色',\n items: [\n {\n name: '亮黑色',\n id: 11,\n color: '#131111',\n // 自定义属性...\n },\n {\n name: '釉白色',\n id: 12,\n mark: '首发',\n color: '#ffff',\n },\n {\n name: '秘银色',\n id: 13,\n color: '#d2cccc',\n },\n {\n name: '夏日胡杨',\n id: 14,\n color: '#dd5151',\n },\n ],\n },\n {\n id: 2,\n name: '版本',\n items: [\n {\n name: '8GB+128GB',\n id: 21,\n },\n {\n name: '8GB+256GB',\n id: 22,\n },\n ],\n },\n]\nexport const goodsList = [\n {\n id: 1,\n skuIds: [11, 21], // 可以无序\n skuName: '亮黑色&8GB+128GB', // 自定义属性\n // 自定义属性...\n },\n {\n id: 2,\n skuIds: [11, 22],\n skuName: '亮黑色&8GB+256GB',\n count: 0, // 自定义属性\n },\n {\n id: 3,\n skuIds: [12, 21],\n skuName: '釉白色&8GB+128GB',\n },\n {\n id: 4,\n skuIds: [12, 22],\n skuName: '釉白色&8GB+256GB',\n },\n {\n id: 4,\n skuIds: [21, 13],\n skuName: '秘银色&8GB+128GB',\n },\n {\n id: 6,\n skuIds: [13, 22],\n skuName: '秘银色&8GB+256GB',\n disabled: true, // 无法选择的商品\n },\n {\n id: 7,\n skuIds: [14, 22],\n skuName: '夏日胡杨&8GB+256GB',\n },\n]\n\n
\nsku
数据格式如下
须要保证items[xx].id
是唯一的
const sku = [\n {\n id: 1,\n name: '颜色',\n items: [\n {\n name: '亮黑色',\n id: 11,\n color: '#131111',\n // 自定义属性...\n },\n {\n name: '釉白色',\n id: 12,\n mark: '首发',\n color: '#ffff',\n },\n {\n name: '秘银色',\n id: 13,\n color: '#d2cccc',\n },\n {\n name: '夏日胡杨',\n id: 14,\n color: '#dd5151',\n },\n ],\n },\n {\n id: 2,\n name: '版本',\n items: [\n {\n name: '8GB+128GB',\n id: 21,\n },\n {\n name: '8GB+256GB',\n id: 22,\n },\n ],\n },\n]\n
\n商品列表
数据格式如下
const goodsList = [\n {\n id: 1,\n skuIds: [11, 21], // 可以无序\n skuName: '亮黑色&8GB+128GB', // 自定义属性\n // 自定义属性...\n },\n {\n id: 2,\n skuIds: [11, 22],\n skuName: '亮黑色&8GB+256GB',\n count: 0, // 自定义属性\n },\n {\n id: 3,\n skuIds: [12, 21],\n skuName: '釉白色&8GB+128GB',\n },\n {\n id: 4,\n skuIds: [12, 22],\n skuName: '釉白色&8GB+256GB',\n },\n {\n id: 4,\n skuIds: [21, 13],\n skuName: '秘银色&8GB+128GB',\n },\n {\n id: 6,\n skuIds: [13, 22],\n skuName: '秘银色&8GB+256GB',\n disabled: true, // 无法选择的商品\n },\n {\n id: 7,\n skuIds: [14, 22],\n skuName: '夏日胡杨&8GB+256GB',\n },\n]\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
className | \n样式名称 | \n string | \n\'\' | \nfalse | \n
goodsId | \n默认选中的商品名称 | \n number | \n- | \nfalse | \n
onChange | \n规格变化触发,回掉返回选中项商品,首次渲染没有传入goodsId ,会触发 | \n ( goods?: IGoodItem ) => void | \n- | \nfalse | \n
clickAttrDisable | \n点击 skudisabled 的属性项触发 | \n ( goods?: IGoodItem ) => void | \n- | \nfalse | \n
disabledClassName | \n不可选 sku 项样式名称 | \n string | \n- | \nfalse | \n
activeClassName | \n选中 sku 项样式名称 | \n string | \n- | \nfalse | \n
goodsList | \n产品包含的所有商品列表 | \n IGoodItem[] | \n- | \ntrue | \n
sku | \n规格列表 | \n ISkuItem[] | \n- | \ntrue | \n
itemRender | \n自定义规格项的内部渲染 | \n ( attr: IAttrItem ) => ReactNode | \n- | \nfalse | \n
itemDisable | \n自定义当前规格项组合(即商品)是否可选, 回掉参数为空的时候直接返回 true | \n ( goodsItem?: IGoodItem ) => boolean | \n- | \nfalse | \n
autoChoice | \n初始化的时候是否自动选择商品 | \n boolean | \ntrue | \nfalse | \n
其它属性不限
\n参数 | \n说明 | \n类型 | \n
---|---|---|
id | \n商品 ID | \n number | \n
skuIds | \n对应每个 sku 的 ID | \n number[] | \n
disabled | \n是否不可选择 | \n boolean | \n
其它属性不限, 须要保证不同类别的 sku 的 id 都是唯一的
\n参数 | \n说明 | \n类型 | \n
---|---|---|
id | \nSku ID | \n number | \n
name | \nSku 名称 | \n string | \n
items | \nSku 属性枚举 | \n IAttrItem[] | \n
其它属性不限
\n参数 | \n说明 | \n类型 | \n
---|---|---|
id | \n属性 ID | \n number | \n
name | \n属性名称 | \n string | \n
基于商品规格和商品列表数据
\n在 Taro 文件中引入组件
\nimport { Sku } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Toast, Sku } from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nexport default function Demo() {\n const { sku, goodsList } = COMMON\n // 选中的商品,可以获取自定义属性如:商品图片、价格、数量\n const [currentGoods, setCurrent] = react.useState<any>({})\n\n const itemDisable = (goodsItem) => {\n if (!goodsItem) return true\n // 商品表可设定count为库存数,或者通过其它条件判断\n if (goodsItem.count === 0) return true\n\n return false\n }\n\n return (\n <>\n <Toast />\n <View>当前选择商品:</View>\n <View style={{ paddingBottom: 10 }}>\n HUAWEI手机【{currentGoods?.skuName || '--'}】\n </View>\n <Sku\n autoChoice={true}\n sku={sku}\n goodsList={goodsList}\n onChange={(e) => setCurrent(e)}\n clickAttrDisable={() => Toast.show(::::_QA暂无库存::::_QA)}\n itemDisable={itemDisable}\n itemRender={(it) => {\n if (it['color']) {\n return (\n <View className="sku-color-item">\n <View\n className="color-item"\n style={{ background: it['color'] }}\n ></View>\n <View>{it.name}</View>\n </View>\n )\n }\n\n return it.name\n }}\n />\n </>\n )\n}\n\n
\n/* eslint-disable */\nexport const sku = [\n {\n id: 1,\n name: '颜色',\n items: [\n {\n name: '亮黑色',\n id: 11,\n color: '#131111',\n // 自定义属性...\n },\n {\n name: '釉白色',\n id: 12,\n mark: '首发',\n color: '#ffff',\n },\n {\n name: '秘银色',\n id: 13,\n color: '#d2cccc',\n },\n {\n name: '夏日胡杨',\n id: 14,\n color: '#dd5151',\n },\n ],\n },\n {\n id: 2,\n name: '版本',\n items: [\n {\n name: '8GB+128GB',\n id: 21,\n },\n {\n name: '8GB+256GB',\n id: 22,\n },\n ],\n },\n]\nexport const goodsList = [\n {\n id: 1,\n skuIds: [11, 21], // 可以无序\n skuName: '亮黑色&8GB+128GB', // 自定义属性\n // 自定义属性...\n },\n {\n id: 2,\n skuIds: [11, 22],\n skuName: '亮黑色&8GB+256GB',\n count: 0, // 自定义属性\n },\n {\n id: 3,\n skuIds: [12, 21],\n skuName: '釉白色&8GB+128GB',\n },\n {\n id: 4,\n skuIds: [12, 22],\n skuName: '釉白色&8GB+256GB',\n },\n {\n id: 4,\n skuIds: [21, 13],\n skuName: '秘银色&8GB+128GB',\n },\n {\n id: 6,\n skuIds: [13, 22],\n skuName: '秘银色&8GB+256GB',\n disabled: true, // 无法选择的商品\n },\n {\n id: 7,\n skuIds: [14, 22],\n skuName: '夏日胡杨&8GB+256GB',\n },\n]\n\n
\nsku
数据格式如下
须要保证items[xx].id
是唯一的
const sku = [\n {\n id: 1,\n name: '颜色',\n items: [\n {\n name: '亮黑色',\n id: 11,\n color: '#131111',\n // 自定义属性...\n },\n {\n name: '釉白色',\n id: 12,\n mark: '首发',\n color: '#ffff',\n },\n {\n name: '秘银色',\n id: 13,\n color: '#d2cccc',\n },\n {\n name: '夏日胡杨',\n id: 14,\n color: '#dd5151',\n },\n ],\n },\n {\n id: 2,\n name: '版本',\n items: [\n {\n name: '8GB+128GB',\n id: 21,\n },\n {\n name: '8GB+256GB',\n id: 22,\n },\n ],\n },\n]\n
\n商品列表
数据格式如下
const goodsList = [\n {\n id: 1,\n skuIds: [11, 21], // 可以无序\n skuName: '亮黑色&8GB+128GB', // 自定义属性\n // 自定义属性...\n },\n {\n id: 2,\n skuIds: [11, 22],\n skuName: '亮黑色&8GB+256GB',\n count: 0, // 自定义属性\n },\n {\n id: 3,\n skuIds: [12, 21],\n skuName: '釉白色&8GB+128GB',\n },\n {\n id: 4,\n skuIds: [12, 22],\n skuName: '釉白色&8GB+256GB',\n },\n {\n id: 4,\n skuIds: [21, 13],\n skuName: '秘银色&8GB+128GB',\n },\n {\n id: 6,\n skuIds: [13, 22],\n skuName: '秘银色&8GB+256GB',\n disabled: true, // 无法选择的商品\n },\n {\n id: 7,\n skuIds: [14, 22],\n skuName: '夏日胡杨&8GB+256GB',\n },\n]\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
className | \n样式名称 | \n string | \n\'\' | \nfalse | \n
goodsId | \n默认选中的商品名称 | \n number | \n- | \nfalse | \n
onChange | \n规格变化触发,回掉返回选中项商品,首次渲染没有传入goodsId ,会触发 | \n ( goods?: IGoodItem ) => void | \n- | \nfalse | \n
clickAttrDisable | \n点击 skudisabled 的属性项触发 | \n ( goods?: IGoodItem ) => void | \n- | \nfalse | \n
disabledClassName | \n不可选 sku 项样式名称 | \n string | \n- | \nfalse | \n
activeClassName | \n选中 sku 项样式名称 | \n string | \n- | \nfalse | \n
goodsList | \n产品包含的所有商品列表 | \n IGoodItem[] | \n- | \ntrue | \n
sku | \n规格列表 | \n ISkuItem[] | \n- | \ntrue | \n
itemRender | \n自定义规格项的内部渲染 | \n ( attr: IAttrItem ) => ReactNode | \n- | \nfalse | \n
itemDisable | \n自定义当前规格项组合(即商品)是否可选, 回掉参数为空的时候直接返回 true | \n ( goodsItem?: IGoodItem ) => boolean | \n- | \nfalse | \n
autoChoice | \n初始化的时候是否自动选择商品 | \n boolean | \ntrue | \nfalse | \n
其它属性不限
\n参数 | \n说明 | \n类型 | \n
---|---|---|
id | \n商品 ID | \n number | \n
skuIds | \n对应每个 sku 的 ID | \n number[] | \n
disabled | \n是否不可选择 | \n boolean | \n
其它属性不限, 须要保证不同类别的 sku 的 id 都是唯一的
\n参数 | \n说明 | \n类型 | \n
---|---|---|
id | \nSku ID | \n number | \n
name | \nSku 名称 | \n string | \n
items | \nSku 属性枚举 | \n IAttrItem[] | \n
其它属性不限
\n参数 | \n说明 | \n类型 | \n
---|---|---|
id | \n属性 ID | \n number | \n
name | \n属性名称 | \n string | \n
用于展示订单金额与提交订单。
\n在 Taro 文件中引入组件
\nimport { SubmitBar } from '@antmjs/vantui'\n
\nfunction Demo() {\n return (\n <SubmitBar\n price={3050}\n buttonText="提交订单"\n onSubmit={() => console.info('提交')}\n />\n )\n}\n
\n禁用状态下不会触发submit
事件。
function Demo() {\n return (\n <SubmitBar\n disabled={true}\n price={3050}\n buttonText="提交订单"\n tip="您的收货地址不支持同城送, 我们已为您推荐快递"\n tipIcon="infoO"\n onSubmit={() => console.info('提交')}\n />\n )\n}\n
\n加载状态下不会触发submit
事件。
function Demo() {\n return (\n <SubmitBar\n loading={true}\n price={3050}\n buttonText="提交订单"\n onSubmit={() => console.info('提交')}\n />\n )\n}\n
\n通过插槽插入自定义内容。
\nfunction Demo() {\n return (\n <SubmitBar\n price={3050}\n buttonText="提交订单"\n tip={true}\n renderTip={\n <View>\n 您的收货地址不支持同城送,\n <Text>修改地址</Text>\n </View>\n }\n >\n <Tag type="primary">标签</Tag>\n </SubmitBar>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
tip | \n- | \n string | \n- | \nfalse | \n
tipIcon | \n- | \n string | \n- | \nfalse | \n
price | \n- | \n number | \n- | \nfalse | \n
label | \n- | \n ReactNode | \n- | \nfalse | \n
loading | \n- | \n boolean | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
buttonText | \n- | \n ReactNode | \n- | \nfalse | \n
currency | \n- | \n string | \n- | \nfalse | \n
buttonType | \n- | \n attr: ¦ "default" ¦ "primary" ¦ "info" ¦ "warning" ¦ "danger" | \n- | \nfalse | \n
decimalLength | \n- | \n number | \n- | \nfalse | \n
suffixLabel | \n- | \n string | \n- | \nfalse | \n
safeAreaInsetBottom | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
renderTop | \n- | \n ReactNode | \n- | \nfalse | \n
renderTip | \n- | \n ReactNode | \n- | \nfalse | \n
onSubmit | \n- | \n ( event: ITouchEvent ) => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--submit-bar-height | \n 100px; | \n
--submit-bar-background-color | \n @white; | \n
--submit-bar-button-width | \n 220px; | \n
--submit-bar-price-color | \n @red; | \n
--submit-bar-price-font-size | \n @font-size-sm; | \n
--submit-bar-currency-font-size | \n @font-size-sm; | \n
--submit-bar-text-color | \n @text-color; | \n
--submit-bar-text-font-size | \n 28px; | \n
--submit-bar-tip-padding | \n 20px; | \n
--submit-bar-tip-font-size | \n 24px; | \n
--submit-bar-tip-line-height | \n 1.5; | \n
--submit-bar-tip-color | \n #f56723; | \n
--submit-bar-tip-background-color | \n #fff7cc; | \n
--submit-bar-tip-icon-size | \n 24px; | \n
--submit-bar-button-height | \n 80px; | \n
--submit-bar-padding | \n 0 @padding-md; | \n
--submit-bar-price-integer-font-size | \n 40px; | \n
--submit-bar-price-font-family | \n @price-integer-font-family; | \n
用于展示订单金额与提交订单。
\n在 Taro 文件中引入组件
\nimport { SubmitBar } from '@antmjs/vantui'\n
\nfunction Demo() {\n return (\n <SubmitBar\n price={3050}\n buttonText="提交订单"\n onSubmit={() => console.info('提交')}\n />\n )\n}\n
\n禁用状态下不会触发submit
事件。
function Demo() {\n return (\n <SubmitBar\n disabled={true}\n price={3050}\n buttonText="提交订单"\n tip="您的收货地址不支持同城送, 我们已为您推荐快递"\n tipIcon="infoO"\n onSubmit={() => console.info('提交')}\n />\n )\n}\n
\n加载状态下不会触发submit
事件。
function Demo() {\n return (\n <SubmitBar\n loading={true}\n price={3050}\n buttonText="提交订单"\n onSubmit={() => console.info('提交')}\n />\n )\n}\n
\n通过插槽插入自定义内容。
\nfunction Demo() {\n return (\n <SubmitBar\n price={3050}\n buttonText="提交订单"\n tip={true}\n renderTip={\n <View>\n 您的收货地址不支持同城送,\n <Text>修改地址</Text>\n </View>\n }\n >\n <Tag type="primary">标签</Tag>\n </SubmitBar>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
tip | \n- | \n string | \n- | \nfalse | \n
tipIcon | \n- | \n string | \n- | \nfalse | \n
price | \n- | \n number | \n- | \nfalse | \n
label | \n- | \n ReactNode | \n- | \nfalse | \n
loading | \n- | \n boolean | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
buttonText | \n- | \n ReactNode | \n- | \nfalse | \n
currency | \n- | \n string | \n- | \nfalse | \n
buttonType | \n- | \n attr: ¦ "default" ¦ "primary" ¦ "info" ¦ "warning" ¦ "danger" | \n- | \nfalse | \n
decimalLength | \n- | \n number | \n- | \nfalse | \n
suffixLabel | \n- | \n string | \n- | \nfalse | \n
safeAreaInsetBottom | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
renderTop | \n- | \n ReactNode | \n- | \nfalse | \n
renderTip | \n- | \n ReactNode | \n- | \nfalse | \n
onSubmit | \n- | \n ( event: ITouchEvent ) => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--submit-bar-height | \n 100px; | \n
--submit-bar-background-color | \n @white; | \n
--submit-bar-button-width | \n 220px; | \n
--submit-bar-price-color | \n @red; | \n
--submit-bar-price-font-size | \n @font-size-sm; | \n
--submit-bar-currency-font-size | \n @font-size-sm; | \n
--submit-bar-text-color | \n @text-color; | \n
--submit-bar-text-font-size | \n 28px; | \n
--submit-bar-tip-padding | \n 20px; | \n
--submit-bar-tip-font-size | \n 24px; | \n
--submit-bar-tip-line-height | \n 1.5; | \n
--submit-bar-tip-color | \n #f56723; | \n
--submit-bar-tip-background-color | \n #fff7cc; | \n
--submit-bar-tip-icon-size | \n 24px; | \n
--submit-bar-button-height | \n 80px; | \n
--submit-bar-padding | \n 0 @padding-md; | \n
--submit-bar-price-integer-font-size | \n 40px; | \n
--submit-bar-price-font-family | \n @price-integer-font-family; | \n
Layout 提供了vanRow
和vanCol
两个组件来进行行列布局。
在 Taro 文件中引入组件
\nimport { Row, Col } from '@antmjs/vantui'\n
\nLayout 组件提供了24列栅格
,通过在Col
上添加span
属性设置列所占的宽度百分比。此外,添加offset
属性可以设置列的偏移宽度,计算方式与 span 相同。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Row, Col } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Row>\n <Col span="8" className="dark">\n span: 8\n </Col>\n <Col span="8" className="light">\n span: 8\n </Col>\n <Col span="8" className="dark">\n span: 8\n </Col>\n </Row>\n <Row>\n <Col span="4" className="dark">\n span: 4\n </Col>\n <Col span="10" className="light" offset="4">\n offset: 4, span: 10\n </Col>\n </Row>\n <Row>\n <Col offset="12" span="12" className="dark">\n offset: 12, span: 12\n </Col>\n </Row>\n </View>\n )\n}\n\n
\n通过gutter
属性可以设置列元素之间的间距,默认间距为 0。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Row, Col } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Row gutter="20">\n <Col span="8" className="dark">\n span: 8\n </Col>\n <Col span="8" className="dark">\n span: 8\n </Col>\n <Col span="8" className="dark">\n span: 8\n </Col>\n </Row>\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
span | \n列元素宽度 | \n number ¦ string | \n- | \ntrue | \n
offset | \n列元素偏移距离 | \n number ¦ string | \n- | \nfalse | \n
gutter | \n列元素之间的间距(单位为 px), 从 Row 上获取 | \n number ¦ string | \n- | \nfalse | \n
children | \n- | \n React.ReactNode | \n- | \ntrue | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
gutter | \n列元素之间的间距(如查输入数字:单位为 px,如果输入字符串,可使用单位 rpx) | \n attr: ¦ number ¦ string ¦ [number, number] ¦ [string, string] | \n- | \nfalse | \n
children | \n- | \n React.ReactNode | \n- | \ntrue | \n
Layout 提供了vanRow
和vanCol
两个组件来进行行列布局。
在 Taro 文件中引入组件
\nimport { Row, Col } from '@antmjs/vantui'\n
\nLayout 组件提供了24列栅格
,通过在Col
上添加span
属性设置列所占的宽度百分比。此外,添加offset
属性可以设置列的偏移宽度,计算方式与 span 相同。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Row, Col } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Row>\n <Col span="8" className="dark">\n span: 8\n </Col>\n <Col span="8" className="light">\n span: 8\n </Col>\n <Col span="8" className="dark">\n span: 8\n </Col>\n </Row>\n <Row>\n <Col span="4" className="dark">\n span: 4\n </Col>\n <Col span="10" className="light" offset="4">\n offset: 4, span: 10\n </Col>\n </Row>\n <Row>\n <Col offset="12" span="12" className="dark">\n offset: 12, span: 12\n </Col>\n </Row>\n </View>\n )\n}\n\n
\n通过gutter
属性可以设置列元素之间的间距,默认间距为 0。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Row, Col } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Row gutter="20">\n <Col span="8" className="dark">\n span: 8\n </Col>\n <Col span="8" className="dark">\n span: 8\n </Col>\n <Col span="8" className="dark">\n span: 8\n </Col>\n </Row>\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
span | \n列元素宽度 | \n number ¦ string | \n- | \ntrue | \n
offset | \n列元素偏移距离 | \n number ¦ string | \n- | \nfalse | \n
gutter | \n列元素之间的间距(单位为 px), 从 Row 上获取 | \n number ¦ string | \n- | \nfalse | \n
children | \n- | \n React.ReactNode | \n- | \ntrue | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
gutter | \n列元素之间的间距(如查输入数字:单位为 px,如果输入字符串,可使用单位 rpx) | \n attr: ¦ number ¦ string ¦ [number, number] ¦ [string, string] | \n- | \nfalse | \n
children | \n- | \n React.ReactNode | \n- | \ntrue | \n
选项卡组件,用于在不同的内容区域之间进行切换。
\n在 Taro 文件中引入组件
\nimport { Tab, Tabs } from '@antmjs/vantui'\n
\nimport { useState, useEffect } from 'react'\nimport { View } from '@tarojs/components'\nimport { Tabs, Tab } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [tab, setTab] = useState('1')\n\n useEffect(() => {\n setTimeout(() => {\n setTab('3')\n }, 1000)\n }, [])\n\n return (\n <View>\n <Tabs sticky={true} active={tab} ellipsis={false}>\n <Tab title="标签 1" name="1">\n 内容 1\n </Tab>\n <Tab title="标签 ~~ 2" name="2">\n 内容 2\n </Tab>\n <Tab title="标签 3" name="3">\n 内容 3\n </Tab>\n <Tab title="标签 4" name="4">\n 内容 4\n </Tab>\n </Tabs>\n </View>\n )\n}\n\n
\n通过active
设定当前激活标签对应的索引值,默认情况下启用第一个标签。
import { Tabs, Tab, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Tabs\n active={1}\n onChange={(e) =>\n Toast.show({\n message: e.detail.name,\n selector: '#tabs-demo1',\n })\n }\n >\n <Tab title="标签 1">内容 1</Tab>\n <Tab title="标签 2">内容 2</Tab>\n <Tab title="标签 3">内容 3</Tab>\n <Tab title="标签 4">内容 4</Tab>\n <Toast id="tabs-demo1" />\n </Tabs>\n )\n}\n\n
\n在标签指定name
属性的情况下,active
的值为当前标签的name
(此时无法通过索引值来匹配标签)。
import { Tabs, Tab, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Tabs\n active={'a'}\n onChange={(e) =>\n Toast.show({\n message: e.detail.name,\n selector: '#tabs-demo2',\n })\n }\n >\n <Tab title="标签 a" name="a">\n 内容 a\n </Tab>\n <Tab title="标签 b" name="b">\n 内容 b\n </Tab>\n <Tab title="标签 c" name="c">\n 内容 c\n </Tab>\n <Toast id="tabs-demo2" />\n </Tabs>\n )\n}\n\n
\n多于 5 个标签时,Tab 可以横向滚动。
\nimport { Tabs, Tab } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Tabs active={1}>\n <Tab title="标签 1">内容 1</Tab>\n <Tab title="标签 2">内容 2</Tab>\n <Tab title="标签 3">内容 3</Tab>\n <Tab title="标签 4">内容 4</Tab>\n <Tab title="标签 5">内容 5</Tab>\n <Tab title="标签 6">内容 6</Tab>\n </Tabs>\n )\n}\n\n
\n设置disabled
属性即可禁用标签。如果需要监听禁用标签的点击事件,可以在vanTabs
上监听disabled
事件。
import { Tabs, Tab, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Tabs\n onDisabled={(e) =>\n Toast.show({\n message: e.detail.title + '已被禁',\n selector: '#tabs-demo4',\n })\n }\n >\n <Tab title="标签 1">内容 1</Tab>\n <Tab title="标签 2" disabled={true}>\n 内容 2\n </Tab>\n <Tab title="标签 3">内容 3</Tab>\n <Toast id="tabs-demo4" />\n </Tabs>\n )\n}\n\n
\nTab
支持两种样式风格:line
和card
,默认为line
样式,可以通过type
属性修改样式风格。
import { Tabs, Tab } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Tabs type="card">\n <Tab title="标签 1">内容 1</Tab>\n <Tab title="标签 2">内容 2</Tab>\n <Tab title="标签 3">内容 3</Tab>\n </Tabs>\n )\n}\n\n
\n可以在vanTabs
上绑定click
事件,在回调参数的event.detail
中可以取得被点击标签的标题和标识符。
import { View } from '@tarojs/components'\nimport { Tabs, Tab, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n const onClick = (e) => {\n Toast.show({\n message: e.detail.title,\n selector: '#tab-demo6',\n })\n }\n\n return (\n <View>\n <Tabs onClick={onClick}>\n <Tab title="标签 1">内容 1</Tab>\n <Tab title="标签 2">内容 2</Tab>\n </Tabs>\n <Toast id="tab-demo6" />\n </View>\n )\n}\n\n
\n可以通过animated
来设置是否启用切换 tab 时的动画。
import { Tabs, Tab } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Tabs animated>\n <Tab title="标签 1">内容 1</Tab>\n <Tab title="标签 2">内容 2</Tab>\n <Tab title="标签 3">内容 3</Tab>\n <Tab title="标签 4">内容 4</Tab>\n </Tabs>\n )\n}\n\n
\n通过swipeable
属性可以开启滑动切换标签页。
import { Tabs, Tab } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Tabs swipeable>\n <Tab title="标签 1">内容 1</Tab>\n <Tab title="标签 2">内容 2</Tab>\n <Tab title="标签 3">内容 3</Tab>\n <Tab title="标签 4">内容 4</Tab>\n </Tabs>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
sticky | \n固定模式 | \n boolean | \nfalse | \nfalse | \n
container | \n固定模式的容器 | \n () => any | \n根元素 | \nfalse | \n
border | \n是否展示外边框,仅在 line 风格下生效 | \n boolean | \nfalse | \nfalse | \n
swipeable | \n是否开启手势滑动切换 | \n boolean | \nfalse | \nfalse | \n
titleActiveColor | \n标题选中态颜色 | \n string | \n- | \nfalse | \n
titleInactiveColor | \n标题默认态颜色 | \n string | \n- | \nfalse | \n
color | \n标签主题色 | \n string | \n- | \nfalse | \n
animated | \n是否有切换动画 | \n boolean | \n- | \nfalse | \n
active | \n当前选中标签的标识符 | \n number ¦ string | \n- | \nfalse | \n
type | \n展示类型 | \n "card" ¦ "line" | \n- | \nfalse | \n
ellipsis | \n内容过长,是否展示省略号 | \n boolean | \ntrue | \nfalse | \n
duration | \n滑动内容的动画交互时间,type=line 的动画时间需要通过 css/less 变量配置 | \n number | \n- | \nfalse | \n
zIndex | \n固定模式下的层级 | \n number | \n- | \nfalse | \n
swipeThreshold | \n滚动阈值,标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动 | \n number | \n- | \nfalse | \n
offsetTop | \n粘性定位布局下与顶部的最小距离,单位 px | \n number | \n- | \nfalse | \n
lazyRender | \n是否开启标签页内容延迟渲染 | \n boolean | \ntrue | \nfalse | \n
children | \n- | \n ReactNode | \n- | \ntrue | \n
renderNavLeft | \n左侧内容渲染 | \n ReactNode | \n- | \nfalse | \n
renderNavRight | \n右侧内容渲染 | \n ReactNode | \n- | \nfalse | \n
onScroll | \n- | \n (data: { detail: { scrollTop?: ¦ number ¦ null isFixed?: boolean } }) => void | \n- | \nfalse | \n
onClick | \n- | \n ( event: TabEventDetail ) => void | \n- | \nfalse | \n
onChange | \n- | \n ( event: TabEventDetail ) => void | \n- | \nfalse | \n
onDisabled | \n- | \n ( event: TabEventDetail ) => void | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n
---|---|---|
detail | \n- | \n { index: number name?: string title?: string } | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
dot | \n是否显示小红点 | \n boolean | \nfalse | \nfalse | \n
info | \n图标右上角提示信息 | \n string ¦ number | \n- | \nfalse | \n
title | \n标题 | \n ReactNode | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
titleStyle | \n- | \n string | \n- | \nfalse | \n
name | \n标签名称,作为匹配的标识符 | \n string ¦ number | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--tab-text-color | \n @gray-7; | \n
--tab-active-text-color | \n @text-color; | \n
--tab-disabled-text-color | \n @gray-5; | \n
--tab-font-size | \n @font-size-md; | \n
选项卡组件,用于在不同的内容区域之间进行切换。
\n在 Taro 文件中引入组件
\nimport { Tab, Tabs } from '@antmjs/vantui'\n
\nimport { useState, useEffect } from 'react'\nimport { View } from '@tarojs/components'\nimport { Tabs, Tab } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [tab, setTab] = useState('1')\n\n useEffect(() => {\n setTimeout(() => {\n setTab('3')\n }, 1000)\n }, [])\n\n return (\n <View>\n <Tabs sticky={true} active={tab} ellipsis={false}>\n <Tab title="标签 1" name="1">\n 内容 1\n </Tab>\n <Tab title="标签 ~~ 2" name="2">\n 内容 2\n </Tab>\n <Tab title="标签 3" name="3">\n 内容 3\n </Tab>\n <Tab title="标签 4" name="4">\n 内容 4\n </Tab>\n </Tabs>\n </View>\n )\n}\n\n
\n通过active
设定当前激活标签对应的索引值,默认情况下启用第一个标签。
import { Tabs, Tab, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Tabs\n active={1}\n onChange={(e) =>\n Toast.show({\n message: e.detail.name,\n selector: '#tabs-demo1',\n })\n }\n >\n <Tab title="标签 1">内容 1</Tab>\n <Tab title="标签 2">内容 2</Tab>\n <Tab title="标签 3">内容 3</Tab>\n <Tab title="标签 4">内容 4</Tab>\n <Toast id="tabs-demo1" />\n </Tabs>\n )\n}\n\n
\n在标签指定name
属性的情况下,active
的值为当前标签的name
(此时无法通过索引值来匹配标签)。
import { Tabs, Tab, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Tabs\n active={'a'}\n onChange={(e) =>\n Toast.show({\n message: e.detail.name,\n selector: '#tabs-demo2',\n })\n }\n >\n <Tab title="标签 a" name="a">\n 内容 a\n </Tab>\n <Tab title="标签 b" name="b">\n 内容 b\n </Tab>\n <Tab title="标签 c" name="c">\n 内容 c\n </Tab>\n <Toast id="tabs-demo2" />\n </Tabs>\n )\n}\n\n
\n多于 5 个标签时,Tab 可以横向滚动。
\nimport { Tabs, Tab } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Tabs active={1}>\n <Tab title="标签 1">内容 1</Tab>\n <Tab title="标签 2">内容 2</Tab>\n <Tab title="标签 3">内容 3</Tab>\n <Tab title="标签 4">内容 4</Tab>\n <Tab title="标签 5">内容 5</Tab>\n <Tab title="标签 6">内容 6</Tab>\n </Tabs>\n )\n}\n\n
\n设置disabled
属性即可禁用标签。如果需要监听禁用标签的点击事件,可以在vanTabs
上监听disabled
事件。
import { Tabs, Tab, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Tabs\n onDisabled={(e) =>\n Toast.show({\n message: e.detail.title + '已被禁',\n selector: '#tabs-demo4',\n })\n }\n >\n <Tab title="标签 1">内容 1</Tab>\n <Tab title="标签 2" disabled={true}>\n 内容 2\n </Tab>\n <Tab title="标签 3">内容 3</Tab>\n <Toast id="tabs-demo4" />\n </Tabs>\n )\n}\n\n
\nTab
支持两种样式风格:line
和card
,默认为line
样式,可以通过type
属性修改样式风格。
import { Tabs, Tab } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Tabs type="card">\n <Tab title="标签 1">内容 1</Tab>\n <Tab title="标签 2">内容 2</Tab>\n <Tab title="标签 3">内容 3</Tab>\n </Tabs>\n )\n}\n\n
\n可以在vanTabs
上绑定click
事件,在回调参数的event.detail
中可以取得被点击标签的标题和标识符。
import { View } from '@tarojs/components'\nimport { Tabs, Tab, Toast } from '@antmjs/vantui'\n\nexport default function Demo() {\n const onClick = (e) => {\n Toast.show({\n message: e.detail.title,\n selector: '#tab-demo6',\n })\n }\n\n return (\n <View>\n <Tabs onClick={onClick}>\n <Tab title="标签 1">内容 1</Tab>\n <Tab title="标签 2">内容 2</Tab>\n </Tabs>\n <Toast id="tab-demo6" />\n </View>\n )\n}\n\n
\n可以通过animated
来设置是否启用切换 tab 时的动画。
import { Tabs, Tab } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Tabs animated>\n <Tab title="标签 1">内容 1</Tab>\n <Tab title="标签 2">内容 2</Tab>\n <Tab title="标签 3">内容 3</Tab>\n <Tab title="标签 4">内容 4</Tab>\n </Tabs>\n )\n}\n\n
\n通过swipeable
属性可以开启滑动切换标签页。
import { Tabs, Tab } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <Tabs swipeable>\n <Tab title="标签 1">内容 1</Tab>\n <Tab title="标签 2">内容 2</Tab>\n <Tab title="标签 3">内容 3</Tab>\n <Tab title="标签 4">内容 4</Tab>\n </Tabs>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
sticky | \n固定模式 | \n boolean | \nfalse | \nfalse | \n
container | \n固定模式的容器 | \n () => any | \n根元素 | \nfalse | \n
border | \n是否展示外边框,仅在 line 风格下生效 | \n boolean | \nfalse | \nfalse | \n
swipeable | \n是否开启手势滑动切换 | \n boolean | \nfalse | \nfalse | \n
titleActiveColor | \n标题选中态颜色 | \n string | \n- | \nfalse | \n
titleInactiveColor | \n标题默认态颜色 | \n string | \n- | \nfalse | \n
color | \n标签主题色 | \n string | \n- | \nfalse | \n
animated | \n是否有切换动画 | \n boolean | \n- | \nfalse | \n
active | \n当前选中标签的标识符 | \n number ¦ string | \n- | \nfalse | \n
type | \n展示类型 | \n "card" ¦ "line" | \n- | \nfalse | \n
ellipsis | \n内容过长,是否展示省略号 | \n boolean | \ntrue | \nfalse | \n
duration | \n滑动内容的动画交互时间,type=line 的动画时间需要通过 css/less 变量配置 | \n number | \n- | \nfalse | \n
zIndex | \n固定模式下的层级 | \n number | \n- | \nfalse | \n
swipeThreshold | \n滚动阈值,标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动 | \n number | \n- | \nfalse | \n
offsetTop | \n粘性定位布局下与顶部的最小距离,单位 px | \n number | \n- | \nfalse | \n
lazyRender | \n是否开启标签页内容延迟渲染 | \n boolean | \ntrue | \nfalse | \n
children | \n- | \n ReactNode | \n- | \ntrue | \n
renderNavLeft | \n左侧内容渲染 | \n ReactNode | \n- | \nfalse | \n
renderNavRight | \n右侧内容渲染 | \n ReactNode | \n- | \nfalse | \n
onScroll | \n- | \n (data: { detail: { scrollTop?: ¦ number ¦ null isFixed?: boolean } }) => void | \n- | \nfalse | \n
onClick | \n- | \n ( event: TabEventDetail ) => void | \n- | \nfalse | \n
onChange | \n- | \n ( event: TabEventDetail ) => void | \n- | \nfalse | \n
onDisabled | \n- | \n ( event: TabEventDetail ) => void | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n
---|---|---|
detail | \n- | \n { index: number name?: string title?: string } | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
dot | \n是否显示小红点 | \n boolean | \nfalse | \nfalse | \n
info | \n图标右上角提示信息 | \n string ¦ number | \n- | \nfalse | \n
title | \n标题 | \n ReactNode | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
titleStyle | \n- | \n string | \n- | \nfalse | \n
name | \n标签名称,作为匹配的标识符 | \n string ¦ number | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--tab-text-color | \n @gray-7; | \n
--tab-active-text-color | \n @text-color; | \n
--tab-disabled-text-color | \n @gray-5; | \n
--tab-font-size | \n @font-size-md; | \n
用于标记关键词和概括主要内容。
\n在 Taro 文件中引入组件
\nimport { Tag } from '@antmjs/vantui'\n
\n通过 type
属性控制标签颜色,默认为灰色。
function Demo() {\n return (\n <View>\n <Tag type="primary">标签</Tag>\n <Tag type="success">标签</Tag>\n <Tag type="danger">标签</Tag>\n <Tag type="warning">标签</Tag>\n </View>\n )\n}\n
\n设置 plain
属性设置为空心样式。
function Demo() {\n return (\n <View>\n <Tag plain={true} type="primary">\n 标签\n </Tag>\n <Tag plain={true} type="success">\n 标签\n </Tag>\n <Tag plain={true} type="danger">\n 标签\n </Tag>\n <Tag plain={true} type="warning">\n 标签\n </Tag>\n </View>\n )\n}\n
\n通过 round
设置为圆角样式。
function Demo() {\n return (\n <View>\n <Tag round={true} type="primary">\n 标签\n </Tag>\n <Tag round={true} type="success">\n 标签\n </Tag>\n <Tag round={true} type="danger">\n 标签\n </Tag>\n <Tag round={true} type="warning">\n 标签\n </Tag>\n </View>\n )\n}\n
\n通过 mark
设置为标记样式(半圆角)。
function Demo() {\n return (\n <View>\n <Tag mark={true} type="primary">\n 标签\n </Tag>\n <Tag mark={true} type="success">\n 标签\n </Tag>\n <Tag mark={true} type="danger">\n 标签\n </Tag>\n <Tag mark={true} type="warning">\n 标签\n </Tag>\n </View>\n )\n}\n
\nfunction Demo() {\n return (\n <View>\n <Tag color="#f2826a">标签</Tag>\n <Tag color="#7232dd">标签</Tag>\n <Tag color="#7232dd" plain={true}>\n 标签\n </Tag>\n <Tag color="#ffe1e1" textColor="#ad0000">\n 标签\n </Tag>\n </View>\n )\n}\n
\nfunction Demo() {\n return (\n <View>\n <Tag type="danger">标签</Tag>\n <Tag type="danger" size="medium">\n 标签\n </Tag>\n <Tag type="danger" size="large">\n 标签\n </Tag>\n </View>\n )\n}\n
\n添加 closeable
属性表示标签是可关闭的,关闭标签时会触发 close
事件,在 close
事件中可以执行隐藏标签的逻辑。
function Demo() {\n const [show, setShow] = react.useState({\n primary: true,\n success: true,\n })\n\n return (\n <View>\n {show.primary && (\n <Tag\n className="demo-margin-right"\n type="primary"\n size="medium"\n closeable\n onClose={() => setShow({ ...show, primary: false })}\n >\n 标签\n </Tag>\n )}\n {show.success && (\n <Tag\n className="demo-margin-right"\n type="success"\n size="medium"\n closeable\n onClose={() => setShow({ ...show, success: false })}\n >\n 标签\n </Tag>\n )}\n </View>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
size | \n- | \n "large" ¦ "medium" | \n- | \nfalse | \n
mark | \n- | \n boolean | \n- | \nfalse | \n
color | \n- | \n string | \n- | \nfalse | \n
plain | \n- | \n boolean | \n- | \nfalse | \n
round | \n- | \n boolean | \n- | \nfalse | \n
textColor | \n- | \n string | \n- | \nfalse | \n
type | \n- | \n attr: ¦ "default" ¦ "primary" ¦ "success" ¦ "danger" ¦ "warning" | \n- | \nfalse | \n
closeable | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onClose | \n- | \n (e: any) => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--tag-padding | \n 0 @padding-base; | \n
--tag-text-color | \n @white; | \n
--tag-font-size | \n @font-size-sm; | \n
--tag-border-radius | \n 4px; | \n
--tag-line-height | \n 32px; | \n
--tag-medium-padding | \n 4px 12px; | \n
--tag-large-padding | \n @padding-base @padding-xs; | \n
--tag-large-border-radius | \n @border-radius-md; | \n
--tag-large-font-size | \n @font-size-md; | \n
--tag-round-border-radius | \n @border-radius-max; | \n
--tag-danger-color | \n @red; | \n
--tag-primary-color | \n @blue; | \n
--tag-success-color | \n @green; | \n
--tag-warning-color | \n @orange; | \n
--tag-default-color | \n @gray-6; | \n
--tag-plain-background-color | \n @white; | \n
用于标记关键词和概括主要内容。
\n在 Taro 文件中引入组件
\nimport { Tag } from '@antmjs/vantui'\n
\n通过 type
属性控制标签颜色,默认为灰色。
function Demo() {\n return (\n <View>\n <Tag type="primary">标签</Tag>\n <Tag type="success">标签</Tag>\n <Tag type="danger">标签</Tag>\n <Tag type="warning">标签</Tag>\n </View>\n )\n}\n
\n设置 plain
属性设置为空心样式。
function Demo() {\n return (\n <View>\n <Tag plain={true} type="primary">\n 标签\n </Tag>\n <Tag plain={true} type="success">\n 标签\n </Tag>\n <Tag plain={true} type="danger">\n 标签\n </Tag>\n <Tag plain={true} type="warning">\n 标签\n </Tag>\n </View>\n )\n}\n
\n通过 round
设置为圆角样式。
function Demo() {\n return (\n <View>\n <Tag round={true} type="primary">\n 标签\n </Tag>\n <Tag round={true} type="success">\n 标签\n </Tag>\n <Tag round={true} type="danger">\n 标签\n </Tag>\n <Tag round={true} type="warning">\n 标签\n </Tag>\n </View>\n )\n}\n
\n通过 mark
设置为标记样式(半圆角)。
function Demo() {\n return (\n <View>\n <Tag mark={true} type="primary">\n 标签\n </Tag>\n <Tag mark={true} type="success">\n 标签\n </Tag>\n <Tag mark={true} type="danger">\n 标签\n </Tag>\n <Tag mark={true} type="warning">\n 标签\n </Tag>\n </View>\n )\n}\n
\nfunction Demo() {\n return (\n <View>\n <Tag color="#f2826a">标签</Tag>\n <Tag color="#7232dd">标签</Tag>\n <Tag color="#7232dd" plain={true}>\n 标签\n </Tag>\n <Tag color="#ffe1e1" textColor="#ad0000">\n 标签\n </Tag>\n </View>\n )\n}\n
\nfunction Demo() {\n return (\n <View>\n <Tag type="danger">标签</Tag>\n <Tag type="danger" size="medium">\n 标签\n </Tag>\n <Tag type="danger" size="large">\n 标签\n </Tag>\n </View>\n )\n}\n
\n添加 closeable
属性表示标签是可关闭的,关闭标签时会触发 close
事件,在 close
事件中可以执行隐藏标签的逻辑。
function Demo() {\n const [show, setShow] = react.useState({\n primary: true,\n success: true,\n })\n\n return (\n <View>\n {show.primary && (\n <Tag\n className="demo-margin-right"\n type="primary"\n size="medium"\n closeable\n onClose={() => setShow({ ...show, primary: false })}\n >\n 标签\n </Tag>\n )}\n {show.success && (\n <Tag\n className="demo-margin-right"\n type="success"\n size="medium"\n closeable\n onClose={() => setShow({ ...show, success: false })}\n >\n 标签\n </Tag>\n )}\n </View>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
size | \n- | \n "large" ¦ "medium" | \n- | \nfalse | \n
mark | \n- | \n boolean | \n- | \nfalse | \n
color | \n- | \n string | \n- | \nfalse | \n
plain | \n- | \n boolean | \n- | \nfalse | \n
round | \n- | \n boolean | \n- | \nfalse | \n
textColor | \n- | \n string | \n- | \nfalse | \n
type | \n- | \n attr: ¦ "default" ¦ "primary" ¦ "success" ¦ "danger" ¦ "warning" | \n- | \nfalse | \n
closeable | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onClose | \n- | \n (e: any) => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--tag-padding | \n 0 @padding-base; | \n
--tag-text-color | \n @white; | \n
--tag-font-size | \n @font-size-sm; | \n
--tag-border-radius | \n 4px; | \n
--tag-line-height | \n 32px; | \n
--tag-medium-padding | \n 4px 12px; | \n
--tag-large-padding | \n @padding-base @padding-xs; | \n
--tag-large-border-radius | \n @border-radius-md; | \n
--tag-large-font-size | \n @font-size-md; | \n
--tag-round-border-radius | \n @border-radius-max; | \n
--tag-danger-color | \n @red; | \n
--tag-primary-color | \n @blue; | \n
--tag-success-color | \n @green; | \n
--tag-warning-color | \n @orange; | \n
--tag-default-color | \n @gray-6; | \n
--tag-plain-background-color | \n @white; | \n
用于配置 Vant Weapp 组件的主题样式。
\n在 Taro 文件中引入组件
\nimport { ConfigProvider } from '@antmjs/vantui'\n
\nVant Weapp 组件通过丰富的 CSS 变量 来组织样式,通过覆盖这些 CSS 变量,可以实现定制主题、动态切换主题等效果。
\n以 Button 组件为例,查看组件的样式,可以看到 .vanButton--primary
类名上存在以下变量:
.vanButton--primary {\n color: var(--buttonPrimaryColor, #fff);\n background: var(--buttonPrimaryBackgroundColor, #07c160);\n border: var(--buttonBorderWidth, 1px) solid var(\n --buttonPrimaryBorderColor,\n #07c160\n );\n}\n
\n你可以直接在代码中覆盖这些 CSS 变量,Button 组件的样式会随之发生改变:
\n/* 添加这段样式后,Primary Button 会变成红色 */\npage {\n --buttonPrimaryBackgroundColor: red;\n}\n
\nConfigProvider
组件提供了覆盖 CSS 变量的能力,你需要在根节点包裹一个 ConfigProvider
组件,并通过 themeVars
属性来配置一些主题变量。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport {\n ConfigProvider,\n CellGroup,\n Field,\n Rate,\n Slider,\n Button,\n} from '@antmjs/vantui'\n\nconst themeVars = {\n primaryColor: '#e19a9a',\n rateIconFullColor: '#e19a9a',\n sliderBarHeight: '4px',\n sliderButtonWidth: '20px',\n sliderButtonHeight: '20px',\n}\n\nexport default function Demo() {\n const [rate, setRate] = react.useState(4)\n const [slider, setSlider] = react.useState(50)\n\n return (\n <>\n <ConfigProvider themeVars={themeVars}>\n <CellGroup>\n <Field\n label="评分"\n renderInput={\n <Rate value={rate} onChange={(e) => setRate(e.detail)}></Rate>\n }\n ></Field>\n <Field\n label="滑块"\n border={false}\n renderInput={\n <View style="width: 100%">\n <Slider\n value={slider}\n onChange={(e) => setSlider(e.detail)}\n ></Slider>\n </View>\n }\n ></Field>\n </CellGroup>\n <View style="margin: 16px">\n <Button round block type="primary">\n 提交\n </Button>\n </View>\n </ConfigProvider>\n <ConfigProvider>\n <CellGroup>\n <Field\n label="评分"\n renderInput={\n <Rate value={rate} onChange={(e) => setRate(e.detail)}></Rate>\n }\n ></Field>\n <Field\n label="滑块"\n border={false}\n renderInput={\n <View style="width: 100%">\n <Slider\n value={slider}\n onChange={(e) => setSlider(e.detail)}\n ></Slider>\n </View>\n }\n ></Field>\n </CellGroup>\n <View style="margin: 16px">\n <Button round block type="primary">\n 提交\n </Button>\n </View>\n </ConfigProvider>\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
themeVars | \n自定义主题变量, 具体请查看详情 | \n IThemeVars | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \ntrue | \n
名称 | \n默认值 | \n
---|
名称 | \n默认值 | \n
---|---|
--black | \n #1a1a1a; | \n
--white | \n #fff; | \n
--gray-1 | \n #f7f8fa; | \n
--gray-2 | \n #f2f3f5; | \n
--gray-3 | \n #ebedf0; | \n
--gray-4 | \n #dcdee0; | \n
--gray-5 | \n #c8c9cc; | \n
--gray-6 | \n #969799; | \n
--gray-7 | \n #646566; | \n
--gray-8 | \n #323233; | \n
--red | \n #ee0a24; | \n
--blue | \n #1989fa; | \n
--orange | \n #ff976a; | \n
--orange-dark | \n #ed6a0c; | \n
--orange-light | \n #fffbe8; | \n
--green | \n #07c160; | \n
--page-back | \n @white; | \n
--primary-color | \n @green; | \n
\n | root, | \n
--primary-color | \n @primary-color; | \n
名称 | \n默认值 | \n
---|---|
--sticky-z-index | \n 800; | \n
--tabbar-z-index | \n 805; | \n
--navbar-z-index | \n 805; | \n
--goods-action-z-index | \n 806; | \n
--submit-bar-z-index | \n 806; | \n
--overlay-z-index | \n 1000; | \n
--dropdown-z-index | \n 1000; | \n
--popup-z-index | \n 1010; | \n
--popup-close-icon-z-index | \n 1010; | \n
--notify-z-index | \n 1500; | \n
--water-mark-z-index | \n 2000; | \n
名称 | \n默认值 | \n
---|---|
--gradient-red | \n linear-gradient(to right, #ff6034, #ee0a24); | \n
--gradient-orange | \n linear-gradient(to right, #ffd01e, #ff8917); | \n
名称 | \n默认值 | \n
---|---|
--text-color | \n @gray-8; | \n
--active-color | \n @gray-2; | \n
--active-opacity | \n 0.85; | \n
--disabled-opacity | \n 0.5; | \n
--background-color | \n @gray-1; | \n
--background-color-light | \n #fafafa; | \n
--text-link-color | \n #576b95; | \n
名称 | \n默认值 | \n
---|---|
--padding-base | \n 8px; | \n
--padding-xs | \n @padding-base * 2; | \n
--padding-sm | \n @padding-base * 3; | \n
--padding-md | \n @padding-base * 4; | \n
--padding-lg | \n @padding-base * 6; | \n
--padding-xl | \n @padding-base * 8; | \n
名称 | \n默认值 | \n
---|---|
--font-size-xs | \n 20px; | \n
--font-size-sm | \n 24px; | \n
--font-size-md | \n 28px; | \n
--font-size-lg | \n 32px; | \n
--font-weight-bold | \n 500; | \n
--line-height-xs | \n 28px; | \n
--line-height-sm | \n 36px; | \n
--line-height-md | \n 40px; | \n
--line-height-lg | \n 44px; | \n
--base-font-family | \n -apple-system, BlinkMacSystemFont, \'Helvetica Neue\', | \n
--price-integer-font-family | \n Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, | \n
名称 | \n默认值 | \n
---|---|
--animation-duration-base | \n 0.3s; | \n
--animation-duration-fast | \n 0.2s; | \n
名称 | \n默认值 | \n
---|---|
--border-color | \n @gray-3; | \n
--border-width-base | \n 2px; | \n
--border-radius-sm | \n 4px; | \n
--border-radius-md | \n 8px; | \n
--border-radius-lg | \n 16px; | \n
--border-radius-max | \n 999px; | \n
用于配置 Vant Weapp 组件的主题样式。
\n在 Taro 文件中引入组件
\nimport { ConfigProvider } from '@antmjs/vantui'\n
\nVant Weapp 组件通过丰富的 CSS 变量 来组织样式,通过覆盖这些 CSS 变量,可以实现定制主题、动态切换主题等效果。
\n以 Button 组件为例,查看组件的样式,可以看到 .vanButton--primary
类名上存在以下变量:
.vanButton--primary {\n color: var(--buttonPrimaryColor, #fff);\n background: var(--buttonPrimaryBackgroundColor, #07c160);\n border: var(--buttonBorderWidth, 1px) solid var(\n --buttonPrimaryBorderColor,\n #07c160\n );\n}\n
\n你可以直接在代码中覆盖这些 CSS 变量,Button 组件的样式会随之发生改变:
\n/* 添加这段样式后,Primary Button 会变成红色 */\npage {\n --buttonPrimaryBackgroundColor: red;\n}\n
\nConfigProvider
组件提供了覆盖 CSS 变量的能力,你需要在根节点包裹一个 ConfigProvider
组件,并通过 themeVars
属性来配置一些主题变量。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport {\n ConfigProvider,\n CellGroup,\n Field,\n Rate,\n Slider,\n Button,\n} from '@antmjs/vantui'\n\nconst themeVars = {\n primaryColor: '#e19a9a',\n rateIconFullColor: '#e19a9a',\n sliderBarHeight: '4px',\n sliderButtonWidth: '20px',\n sliderButtonHeight: '20px',\n}\n\nexport default function Demo() {\n const [rate, setRate] = react.useState(4)\n const [slider, setSlider] = react.useState(50)\n\n return (\n <>\n <ConfigProvider themeVars={themeVars}>\n <CellGroup>\n <Field\n label="评分"\n renderInput={\n <Rate value={rate} onChange={(e) => setRate(e.detail)}></Rate>\n }\n ></Field>\n <Field\n label="滑块"\n border={false}\n renderInput={\n <View style="width: 100%">\n <Slider\n value={slider}\n onChange={(e) => setSlider(e.detail)}\n ></Slider>\n </View>\n }\n ></Field>\n </CellGroup>\n <View style="margin: 16px">\n <Button round block type="primary">\n 提交\n </Button>\n </View>\n </ConfigProvider>\n <ConfigProvider>\n <CellGroup>\n <Field\n label="评分"\n renderInput={\n <Rate value={rate} onChange={(e) => setRate(e.detail)}></Rate>\n }\n ></Field>\n <Field\n label="滑块"\n border={false}\n renderInput={\n <View style="width: 100%">\n <Slider\n value={slider}\n onChange={(e) => setSlider(e.detail)}\n ></Slider>\n </View>\n }\n ></Field>\n </CellGroup>\n <View style="margin: 16px">\n <Button round block type="primary">\n 提交\n </Button>\n </View>\n </ConfigProvider>\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
themeVars | \n自定义主题变量, 具体请查看详情 | \n IThemeVars | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \ntrue | \n
名称 | \n默认值 | \n
---|
名称 | \n默认值 | \n
---|---|
--black | \n #1a1a1a; | \n
--white | \n #fff; | \n
--gray-1 | \n #f7f8fa; | \n
--gray-2 | \n #f2f3f5; | \n
--gray-3 | \n #ebedf0; | \n
--gray-4 | \n #dcdee0; | \n
--gray-5 | \n #c8c9cc; | \n
--gray-6 | \n #969799; | \n
--gray-7 | \n #646566; | \n
--gray-8 | \n #323233; | \n
--red | \n #ee0a24; | \n
--blue | \n #1989fa; | \n
--orange | \n #ff976a; | \n
--orange-dark | \n #ed6a0c; | \n
--orange-light | \n #fffbe8; | \n
--green | \n #07c160; | \n
--page-back | \n @white; | \n
--primary-color | \n @green; | \n
\n | root, | \n
--primary-color | \n @primary-color; | \n
名称 | \n默认值 | \n
---|---|
--sticky-z-index | \n 800; | \n
--tabbar-z-index | \n 805; | \n
--navbar-z-index | \n 805; | \n
--goods-action-z-index | \n 806; | \n
--submit-bar-z-index | \n 806; | \n
--overlay-z-index | \n 1000; | \n
--dropdown-z-index | \n 1000; | \n
--popup-z-index | \n 1010; | \n
--popup-close-icon-z-index | \n 1010; | \n
--notify-z-index | \n 1500; | \n
--water-mark-z-index | \n 2000; | \n
名称 | \n默认值 | \n
---|---|
--gradient-red | \n linear-gradient(to right, #ff6034, #ee0a24); | \n
--gradient-orange | \n linear-gradient(to right, #ffd01e, #ff8917); | \n
名称 | \n默认值 | \n
---|---|
--text-color | \n @gray-8; | \n
--active-color | \n @gray-2; | \n
--active-opacity | \n 0.85; | \n
--disabled-opacity | \n 0.5; | \n
--background-color | \n @gray-1; | \n
--background-color-light | \n #fafafa; | \n
--text-link-color | \n #576b95; | \n
名称 | \n默认值 | \n
---|---|
--padding-base | \n 8px; | \n
--padding-xs | \n @padding-base * 2; | \n
--padding-sm | \n @padding-base * 3; | \n
--padding-md | \n @padding-base * 4; | \n
--padding-lg | \n @padding-base * 6; | \n
--padding-xl | \n @padding-base * 8; | \n
名称 | \n默认值 | \n
---|---|
--font-size-xs | \n 20px; | \n
--font-size-sm | \n 24px; | \n
--font-size-md | \n 28px; | \n
--font-size-lg | \n 32px; | \n
--font-weight-bold | \n 500; | \n
--line-height-xs | \n 28px; | \n
--line-height-sm | \n 36px; | \n
--line-height-md | \n 40px; | \n
--line-height-lg | \n 44px; | \n
--base-font-family | \n -apple-system, BlinkMacSystemFont, \'Helvetica Neue\', | \n
--price-integer-font-family | \n Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, | \n
名称 | \n默认值 | \n
---|---|
--animation-duration-base | \n 0.3s; | \n
--animation-duration-fast | \n 0.2s; | \n
名称 | \n默认值 | \n
---|---|
--border-color | \n @gray-3; | \n
--border-width-base | \n 2px; | \n
--border-radius-sm | \n 4px; | \n
--border-radius-md | \n 8px; | \n
--border-radius-lg | \n 16px; | \n
--border-radius-max | \n 999px; | \n
yarn add @tarojs/taro @tarojs/components @antmjs/vantui\nyarn add @antmjs/babel-preset --dev\n
\n<head>\n <script>\n !(function (n) {\n function e() {\n var e = n.document.documentElement,\n t = e.getBoundingClientRect().width\n e.style.fontSize =\n t >= 640 ? '40px' : t <= 320 ? '20px' : (t / 320) * 20 + 'px'\n }\n n.addEventListener('resize', function () {\n e()\n }),\n e()\n })(window)\n </script>\n</head>\n
\nimport { init } from '@antmjs/vantui'\nimport { defineCustomElements, applyPolyfills } from '@tarojs/components/loader'\n\ninit()\napplyPolyfills().then(function () {\n defineCustomElements(window)\n})\n
\n{\n resolve: {\n mainFields: [\n 'main:h5',\n 'browser',\n 'module',\n 'jsnext:main',\n 'main',\n ],\n alias: {\n // 默认@tarojs/components要指向dist-h5/react,而loader和taro-components.css只要直接指向@tarojs/components就行\n // 理论上还有优化的空间,慢慢来,持续迭代\n '@tarojs/components/dist/taro-components/taro-components.css': path.resolve(process.cwd(), './node_modules/@tarojs/components/dist/taro-components/taro-components.css'),\n '@tarojs/components/loader': path.resolve(process.cwd(), './node_modules/@tarojs/components/loader'),\n '@tarojs/components': path.resolve(process.cwd(), './node_modules/@tarojs/components/dist-h5/react'),\n react: path.resolve(process.cwd(), './node_modules/react'),\n 'react-dom': path.resolve(process.cwd(), './node_modules/react-dom'),\n },\n },\n module: {\n rules: [\n {\n // 这里其实可以在自己的webpack内配置,核心就是匹配到test的部分不触发polyfill,仅仅更新下语法就行,否则会报错\n test: /node_modules[\\/]@tarojs(.+?).[tj]sx?$/i,\n loader: require.resolve('babel-loader'),\n options: {\n presets: [\n [\n '@antmjs/babel-preset',\n {\n presets: {\n env: {\n debug: false,\n\n /**\n * false: 不处理polyfill,自己手动引入【全量】\n * usage: 按需加载 polyfill,且不需要手动引入【按需】\n * entry: 必须手动引入,但会根据设置的目标环境全量导入【按环境全量】\n * 注:在 Babel 7.4.0 之后的版本,Babel官方明确建议了不再使用 @babel/polyfill ,建议使用 core-js/stable 和 regenerator-runtime/runtime。本包已经安装了core-js、@babel/plugin-transform-runtime和@babel/runtime,所以选择false或者entry选项的只需要在主文件顶部引入core-js即可\n */\n useBuiltIns: false,\n corejs: false,\n modules: false, // 对es6的模块文件不做转译,以便使用tree shaking、sideEffects等\n },\n react: {\n runtime: 'automatic',\n },\n typescript: {\n isTSX: true,\n jsxPragma: 'React',\n allExtensions: true,\n allowNamespaces: true,\n },\n },\n decorators: {\n legacy: false,\n decoratorsBeforeExport: false,\n },\n classProperties: {\n loose: false,\n },\n runtime: {\n absoluteRuntime: path.dirname(\n require.resolve(\n '@babel/runtime-corejs3/package.json',\n ),\n ),\n version: require('@babel/runtime-corejs3/package.json')\n .version,\n corejs: false,\n helpers: true, // 使用到@babel/runtime\n regenerator: true, // 使用到@babel/runtime\n useESModules: false,\n },\n exclude: [/@babel[/|\\\\]runtime/, /core-js/],\n },\n ],\n ],\n },\n },\n {\n // 可以参考Taro的自适应方案\n test: /.less$/\n use: [\n // 这里展示的是组件核心需要的loader,其他loader请自行添加\n {\n loader: require.resolve('postcss-loader'),\n options: {\n ident: 'postcss',\n plugins: () => [\n require('postcss-pxtransform')({\n platform: 'h5',\n designWidth: 750,\n })\n ]\n }\n }\n ]\n }\n ]\n },\n plugins: [\n // 为了使移动H5和Taro小程序保持同一套组件,原因在介绍有说明,所以这里需要把Taro内置的一些插件属性给加进来\n new webpack.DefinePlugin({\n ENABLE_INNER_HTML: true,\n ENABLE_ADJACENT_HTML: true,\n ENABLE_TEMPLATE_CONTENT: true,\n ENABLE_CLONE_NODE: true,\n ENABLE_SIZE_APIS: false,\n }),\n new webpack.EnvironmentPlugin({\n LIBRARY_ENV: 'react',\n TARO_ENV: 'h5',\n }),\n // const VantUIPlugin = require('@antmjs/plugin-vantui')\n // 如果用的就是750,则不需要添加该插件了\n new VantUIPlugin({\n designWidth: 750,\n deviceRatio: {\n 640: 2.34 / 2,\n 750: 1,\n 828: 1.81 / 2,\n },\n }),\n ],\n}\n\n
\nTARO_ENV=h5 yarn start\n
\n\n\n愉快的玩耍吧!
\n
yarn add @tarojs/taro @tarojs/components @antmjs/vantui\nyarn add @antmjs/babel-preset --dev\n
\n<head>\n <script>\n !(function (n) {\n function e() {\n var e = n.document.documentElement,\n t = e.getBoundingClientRect().width\n e.style.fontSize =\n t >= 640 ? '40px' : t <= 320 ? '20px' : (t / 320) * 20 + 'px'\n }\n n.addEventListener('resize', function () {\n e()\n }),\n e()\n })(window)\n </script>\n</head>\n
\nimport { init } from '@antmjs/vantui'\nimport { defineCustomElements, applyPolyfills } from '@tarojs/components/loader'\n\ninit()\napplyPolyfills().then(function () {\n defineCustomElements(window)\n})\n
\n{\n resolve: {\n mainFields: [\n 'main:h5',\n 'browser',\n 'module',\n 'jsnext:main',\n 'main',\n ],\n alias: {\n // 默认@tarojs/components要指向dist-h5/react,而loader和taro-components.css只要直接指向@tarojs/components就行\n // 理论上还有优化的空间,慢慢来,持续迭代\n '@tarojs/components/dist/taro-components/taro-components.css': path.resolve(process.cwd(), './node_modules/@tarojs/components/dist/taro-components/taro-components.css'),\n '@tarojs/components/loader': path.resolve(process.cwd(), './node_modules/@tarojs/components/loader'),\n '@tarojs/components': path.resolve(process.cwd(), './node_modules/@tarojs/components/dist-h5/react'),\n react: path.resolve(process.cwd(), './node_modules/react'),\n 'react-dom': path.resolve(process.cwd(), './node_modules/react-dom'),\n },\n },\n module: {\n rules: [\n {\n // 这里其实可以在自己的webpack内配置,核心就是匹配到test的部分不触发polyfill,仅仅更新下语法就行,否则会报错\n test: /node_modules[\\/]@tarojs(.+?).[tj]sx?$/i,\n loader: require.resolve('babel-loader'),\n options: {\n presets: [\n [\n '@antmjs/babel-preset',\n {\n presets: {\n env: {\n debug: false,\n\n /**\n * false: 不处理polyfill,自己手动引入【全量】\n * usage: 按需加载 polyfill,且不需要手动引入【按需】\n * entry: 必须手动引入,但会根据设置的目标环境全量导入【按环境全量】\n * 注:在 Babel 7.4.0 之后的版本,Babel官方明确建议了不再使用 @babel/polyfill ,建议使用 core-js/stable 和 regenerator-runtime/runtime。本包已经安装了core-js、@babel/plugin-transform-runtime和@babel/runtime,所以选择false或者entry选项的只需要在主文件顶部引入core-js即可\n */\n useBuiltIns: false,\n corejs: false,\n modules: false, // 对es6的模块文件不做转译,以便使用tree shaking、sideEffects等\n },\n react: {\n runtime: 'automatic',\n },\n typescript: {\n isTSX: true,\n jsxPragma: 'React',\n allExtensions: true,\n allowNamespaces: true,\n },\n },\n decorators: {\n legacy: false,\n decoratorsBeforeExport: false,\n },\n classProperties: {\n loose: false,\n },\n runtime: {\n absoluteRuntime: path.dirname(\n require.resolve(\n '@babel/runtime-corejs3/package.json',\n ),\n ),\n version: require('@babel/runtime-corejs3/package.json')\n .version,\n corejs: false,\n helpers: true, // 使用到@babel/runtime\n regenerator: true, // 使用到@babel/runtime\n useESModules: false,\n },\n exclude: [/@babel[/|\\\\]runtime/, /core-js/],\n },\n ],\n ],\n },\n },\n {\n // 可以参考Taro的自适应方案\n test: /.less$/\n use: [\n // 这里展示的是组件核心需要的loader,其他loader请自行添加\n {\n loader: require.resolve('postcss-loader'),\n options: {\n ident: 'postcss',\n plugins: () => [\n require('postcss-pxtransform')({\n platform: 'h5',\n designWidth: 750,\n })\n ]\n }\n }\n ]\n }\n ]\n },\n plugins: [\n // 为了使移动H5和Taro小程序保持同一套组件,原因在介绍有说明,所以这里需要把Taro内置的一些插件属性给加进来\n new webpack.DefinePlugin({\n ENABLE_INNER_HTML: true,\n ENABLE_ADJACENT_HTML: true,\n ENABLE_TEMPLATE_CONTENT: true,\n ENABLE_CLONE_NODE: true,\n ENABLE_SIZE_APIS: false,\n }),\n new webpack.EnvironmentPlugin({\n LIBRARY_ENV: 'react',\n TARO_ENV: 'h5',\n }),\n // const VantUIPlugin = require('@antmjs/plugin-vantui')\n // 如果用的就是750,则不需要添加该插件了\n new VantUIPlugin({\n designWidth: 750,\n deviceRatio: {\n 640: 2.34 / 2,\n 750: 1,\n 828: 1.81 / 2,\n },\n }),\n ],\n}\n\n
\nTARO_ENV=h5 yarn start\n
\n\n\n愉快的玩耍吧!
\n
可以左右滑动来展示操作按钮的单元格组件。
\n在 Taro 文件中引入组件
\nimport { SwipeCell } from '@antmjs/vantui'\n
\nimport { SwipeCell, Button, CellGroup, Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <SwipeCell\n rightWidth={75}\n leftWidth={75}\n renderLeft={<Button>选择</Button>}\n renderRight={<Button>删除</Button>}\n >\n <CellGroup>\n <Cell title="单元格" value="内容" />\n </CellGroup>\n </SwipeCell>\n )\n}\n\n
\n当开启asyncClose
时, 通过绑定close
事件,可以自定义两侧滑动内容点击时的关闭行为。
/* eslint-disable */\nimport react from 'react'\nimport {\n SwipeCell,\n Button,\n CellGroup,\n Cell,\n ISwiperCellInstance,\n} from '@antmjs/vantui'\n\nexport default function Demo() {\n const it = react.useRef<ISwiperCellInstance>()\n const closeAction = () => {\n setTimeout(() => {\n it.current?.close()\n }, 2000)\n }\n\n return (\n <SwipeCell\n ref={it}\n rightWidth={75}\n leftWidth={75}\n asyncClose\n onClose={closeAction}\n renderLeft={<Button>选择</Button>}\n renderRight={<Button>删除</Button>}\n >\n <CellGroup>\n <Cell title="单元格" value="内容" />\n </CellGroup>\n </SwipeCell>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport {\n SwipeCell,\n Button,\n CellGroup,\n Cell,\n ISwiperCellInstance,\n} from '@antmjs/vantui'\n\nexport default function Demo() {\n const it = react.useRef<ISwiperCellInstance>()\n\n react.useEffect(() => {\n it.current?.open('right')\n }, [])\n\n return (\n <SwipeCell\n ref={it}\n rightWidth={75}\n leftWidth={75}\n asyncClose\n renderLeft={<Button>选择</Button>}\n renderRight={<Button>删除</Button>}\n >\n <CellGroup>\n <Cell title="单元格" value="内容" />\n </CellGroup>\n </SwipeCell>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
disabled | \n- | \n boolean | \n- | \nfalse | \n
leftWidth | \n- | \n number | \n- | \nfalse | \n
rightWidth | \n- | \n number | \n- | \nfalse | \n
asyncClose | \n- | \n boolean | \n- | \nfalse | \n
name | \n- | \n string ¦ number | \n- | \nfalse | \n
catchMove | \n- | \n boolean | \n- | \nfalse | \n
wrapperStyle | \n- | \n React.CSSProperties | \n- | \nfalse | \n
onOpen | \n- | \n ( e: ITouchEvent & SwipeCellOpen ) => void | \n- | \nfalse | \n
onClick | \n- | \n ( e: ITouchEvent & SwipeCellClick ) => void | \n- | \nfalse | \n
onClose | \n- | \n ( e: ITouchEvent & SwipeCellClose ) => void | \n- | \nfalse | \n
renderLeft | \n- | \n React.ReactNode | \n- | \nfalse | \n
renderRight | \n- | \n React.ReactNode | \n- | \nfalse | \n
children | \n- | \n React.ReactNode | \n- | \nfalse | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
open | \n- | \n ( position: ¦ "left" ¦ "right" ) => void | \n
close | \n- | \n () => void | \n
可以左右滑动来展示操作按钮的单元格组件。
\n在 Taro 文件中引入组件
\nimport { SwipeCell } from '@antmjs/vantui'\n
\nimport { SwipeCell, Button, CellGroup, Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <SwipeCell\n rightWidth={75}\n leftWidth={75}\n renderLeft={<Button>选择</Button>}\n renderRight={<Button>删除</Button>}\n >\n <CellGroup>\n <Cell title="单元格" value="内容" />\n </CellGroup>\n </SwipeCell>\n )\n}\n\n
\n当开启asyncClose
时, 通过绑定close
事件,可以自定义两侧滑动内容点击时的关闭行为。
/* eslint-disable */\nimport react from 'react'\nimport {\n SwipeCell,\n Button,\n CellGroup,\n Cell,\n ISwiperCellInstance,\n} from '@antmjs/vantui'\n\nexport default function Demo() {\n const it = react.useRef<ISwiperCellInstance>()\n const closeAction = () => {\n setTimeout(() => {\n it.current?.close()\n }, 2000)\n }\n\n return (\n <SwipeCell\n ref={it}\n rightWidth={75}\n leftWidth={75}\n asyncClose\n onClose={closeAction}\n renderLeft={<Button>选择</Button>}\n renderRight={<Button>删除</Button>}\n >\n <CellGroup>\n <Cell title="单元格" value="内容" />\n </CellGroup>\n </SwipeCell>\n )\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport {\n SwipeCell,\n Button,\n CellGroup,\n Cell,\n ISwiperCellInstance,\n} from '@antmjs/vantui'\n\nexport default function Demo() {\n const it = react.useRef<ISwiperCellInstance>()\n\n react.useEffect(() => {\n it.current?.open('right')\n }, [])\n\n return (\n <SwipeCell\n ref={it}\n rightWidth={75}\n leftWidth={75}\n asyncClose\n renderLeft={<Button>选择</Button>}\n renderRight={<Button>删除</Button>}\n >\n <CellGroup>\n <Cell title="单元格" value="内容" />\n </CellGroup>\n </SwipeCell>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
disabled | \n- | \n boolean | \n- | \nfalse | \n
leftWidth | \n- | \n number | \n- | \nfalse | \n
rightWidth | \n- | \n number | \n- | \nfalse | \n
asyncClose | \n- | \n boolean | \n- | \nfalse | \n
name | \n- | \n string ¦ number | \n- | \nfalse | \n
catchMove | \n- | \n boolean | \n- | \nfalse | \n
wrapperStyle | \n- | \n React.CSSProperties | \n- | \nfalse | \n
onOpen | \n- | \n ( e: ITouchEvent & SwipeCellOpen ) => void | \n- | \nfalse | \n
onClick | \n- | \n ( e: ITouchEvent & SwipeCellClick ) => void | \n- | \nfalse | \n
onClose | \n- | \n ( e: ITouchEvent & SwipeCellClose ) => void | \n- | \nfalse | \n
renderLeft | \n- | \n React.ReactNode | \n- | \nfalse | \n
renderRight | \n- | \n React.ReactNode | \n- | \nfalse | \n
children | \n- | \n React.ReactNode | \n- | \nfalse | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
open | \n- | \n ( position: ¦ "left" ¦ "right" ) => void | \n
close | \n- | \n () => void | \n
用于从一组相关联的数据集合中进行选择。
\n在 Taro 文件中引入组件
\nimport { TreeSelect } from '@antmjs/vantui'\n
\n可以在任意位置上使用 vanTreeSelect 标签。传入对应的数据即可。此组件支持单选或多选,具体行为完全基于事件 clickItem 的实现逻辑如何为属性 activeId 赋值,当 activeId 为数组时即为多选状态。
\nfunction Demo() {\n const { items } = COMMON\n const [state, changeState] = react.useState({\n mainActiveIndex: 0,\n activeId: null,\n })\n\n const setState = (newState) => {\n changeState({\n ...state,\n ...newState,\n })\n }\n\n const onClickNav = ({ detail = {} }) => {\n setState({\n mainActiveIndex: detail.index || 0,\n })\n }\n\n const onClickItem = ({ detail = {} }) => {\n const activeId = state.activeId === detail.id ? null : detail.id\n setState({\n activeId,\n })\n }\n\n return (\n <TreeSelect\n items={items}\n mainActiveIndex={state.mainActiveIndex}\n activeId={state.activeId}\n onClickNav={onClickNav}\n onClickItem={onClickItem}\n />\n )\n}\n
\n传入数据结构
\nconst items = [\n {\n text: '浙江',\n children: [\n {\n text: '杭州',\n id: 1,\n },\n {\n text: '温州',\n id: 2,\n },\n {\n text: '宁波',\n id: 3,\n disabled: true,\n },\n {\n text: '义乌',\n id: 4,\n },\n ],\n },\n {\n text: '江苏',\n children: [\n {\n text: '南京',\n id: 5,\n },\n {\n text: '无锡',\n id: 6,\n },\n {\n text: '徐州',\n id: 7,\n },\n {\n text: '苏州',\n id: 8,\n },\n ],\n },\n {\n text: '福建',\n children: [\n {\n text: '泉州',\n id: 9,\n },\n {\n text: '厦门',\n id: 10,\n },\n ],\n },\n]\n
\nfunction Demo() {\n const { items } = COMMON\n const [state, changeState] = react.useState({\n mainActiveIndex: 0,\n activeIds: [],\n })\n\n const setState = (newState) => {\n changeState({\n ...state,\n ...newState,\n })\n }\n\n const onClickNav = ({ detail = {} }) => {\n setState({\n mainActiveIndex: detail.index || 0,\n })\n }\n\n const onClickItem = ({ detail = {} }) => {\n const { activeIds } = state\n if (activeIds.includes(detail.id)) {\n activeIds.splice(activeIds.indexOf(detail.id), 1)\n } else {\n activeIds.push(detail.id)\n }\n console.info(activeIds)\n setState({\n activeIds: [...activeIds],\n })\n }\n\n return (\n <TreeSelect\n items={items}\n mainActiveIndex={state.mainActiveIndex}\n activeId={state.activeIds}\n onClickNav={onClickNav}\n onClickItem={onClickItem}\n max={2}\n />\n )\n}\n
\nfunction Demo() {\n return (\n <TreeSelect\n items={[{ text: '自定义' }]}\n height="55vw"\n mainActiveIndex={0}\n renderContent={<Image src="https://img.yzcdn.cn/vant/apple-1.jpg" />}\n />\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
items | \n- | \n { text: number ¦ string badge?: ¦ number ¦ string dot?: boolean disabled?: boolean children?: { text: ¦ number ¦ string id: number ¦ string disabled?: boolean }[] }[] | \n- | \nfalse | \n
activeId | \n- | \n attr: ¦ string ¦ number ¦ number[] ¦ string[] | \n- | \nfalse | \n
mainActiveIndex | \n- | \n number | \n- | \nfalse | \n
value | \n- | \n number | \n- | \nfalse | \n
height | \n- | \n number ¦ string | \n- | \nfalse | \n
max | \n- | \n number | \n- | \nfalse | \n
selectedIcon | \n- | \n string | \n- | \nfalse | \n
onClickItem | \n- | \n ( event: TouchEvent & { detail: { text: string id: ¦ string ¦ number disabled?: boolean } } ) => void | \n- | \nfalse | \n
onClickNav | \n- | \n (event: { detail: { index: number } }) => void | \n- | \nfalse | \n
renderContent | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--tree-select-font-size | \n @font-size-md; | \n
--tree-select-nav-background-color | \n @background-color; | \n
--tree-select-content-background-color | \n @white; | \n
--tree-select-nav-item-padding | \n @padding-sm @padding-xs @padding-sm @padding-sm; | \n
--tree-select-item-height | \n 88px; | \n
--tree-select-item-active-color | \n var(--primary-color); | \n
--tree-select-item-disabled-color | \n @gray-5; | \n
用于从一组相关联的数据集合中进行选择。
\n在 Taro 文件中引入组件
\nimport { TreeSelect } from '@antmjs/vantui'\n
\n可以在任意位置上使用 vanTreeSelect 标签。传入对应的数据即可。此组件支持单选或多选,具体行为完全基于事件 clickItem 的实现逻辑如何为属性 activeId 赋值,当 activeId 为数组时即为多选状态。
\nfunction Demo() {\n const { items } = COMMON\n const [state, changeState] = react.useState({\n mainActiveIndex: 0,\n activeId: null,\n })\n\n const setState = (newState) => {\n changeState({\n ...state,\n ...newState,\n })\n }\n\n const onClickNav = ({ detail = {} }) => {\n setState({\n mainActiveIndex: detail.index || 0,\n })\n }\n\n const onClickItem = ({ detail = {} }) => {\n const activeId = state.activeId === detail.id ? null : detail.id\n setState({\n activeId,\n })\n }\n\n return (\n <TreeSelect\n items={items}\n mainActiveIndex={state.mainActiveIndex}\n activeId={state.activeId}\n onClickNav={onClickNav}\n onClickItem={onClickItem}\n />\n )\n}\n
\n传入数据结构
\nconst items = [\n {\n text: '浙江',\n children: [\n {\n text: '杭州',\n id: 1,\n },\n {\n text: '温州',\n id: 2,\n },\n {\n text: '宁波',\n id: 3,\n disabled: true,\n },\n {\n text: '义乌',\n id: 4,\n },\n ],\n },\n {\n text: '江苏',\n children: [\n {\n text: '南京',\n id: 5,\n },\n {\n text: '无锡',\n id: 6,\n },\n {\n text: '徐州',\n id: 7,\n },\n {\n text: '苏州',\n id: 8,\n },\n ],\n },\n {\n text: '福建',\n children: [\n {\n text: '泉州',\n id: 9,\n },\n {\n text: '厦门',\n id: 10,\n },\n ],\n },\n]\n
\nfunction Demo() {\n const { items } = COMMON\n const [state, changeState] = react.useState({\n mainActiveIndex: 0,\n activeIds: [],\n })\n\n const setState = (newState) => {\n changeState({\n ...state,\n ...newState,\n })\n }\n\n const onClickNav = ({ detail = {} }) => {\n setState({\n mainActiveIndex: detail.index || 0,\n })\n }\n\n const onClickItem = ({ detail = {} }) => {\n const { activeIds } = state\n if (activeIds.includes(detail.id)) {\n activeIds.splice(activeIds.indexOf(detail.id), 1)\n } else {\n activeIds.push(detail.id)\n }\n console.info(activeIds)\n setState({\n activeIds: [...activeIds],\n })\n }\n\n return (\n <TreeSelect\n items={items}\n mainActiveIndex={state.mainActiveIndex}\n activeId={state.activeIds}\n onClickNav={onClickNav}\n onClickItem={onClickItem}\n max={2}\n />\n )\n}\n
\nfunction Demo() {\n return (\n <TreeSelect\n items={[{ text: '自定义' }]}\n height="55vw"\n mainActiveIndex={0}\n renderContent={<Image src="https://img.yzcdn.cn/vant/apple-1.jpg" />}\n />\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
items | \n- | \n { text: number ¦ string badge?: ¦ number ¦ string dot?: boolean disabled?: boolean children?: { text: ¦ number ¦ string id: number ¦ string disabled?: boolean }[] }[] | \n- | \nfalse | \n
activeId | \n- | \n attr: ¦ string ¦ number ¦ number[] ¦ string[] | \n- | \nfalse | \n
mainActiveIndex | \n- | \n number | \n- | \nfalse | \n
value | \n- | \n number | \n- | \nfalse | \n
height | \n- | \n number ¦ string | \n- | \nfalse | \n
max | \n- | \n number | \n- | \nfalse | \n
selectedIcon | \n- | \n string | \n- | \nfalse | \n
onClickItem | \n- | \n ( event: TouchEvent & { detail: { text: string id: ¦ string ¦ number disabled?: boolean } } ) => void | \n- | \nfalse | \n
onClickNav | \n- | \n (event: { detail: { index: number } }) => void | \n- | \nfalse | \n
renderContent | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--tree-select-font-size | \n @font-size-md; | \n
--tree-select-nav-background-color | \n @background-color; | \n
--tree-select-content-background-color | \n @white; | \n
--tree-select-nav-item-padding | \n @padding-sm @padding-xs @padding-sm @padding-sm; | \n
--tree-select-item-height | \n 88px; | \n
--tree-select-item-active-color | \n var(--primary-color); | \n
--tree-select-item-disabled-color | \n @gray-5; | \n
得益于 Taro3 的实现,我们无需再关注小程序的样式隔离问题,所以我们可以常规使用样式覆盖
\n<Button type="primary">主要按钮</Button>\n
\n/* page.less */\n.van-button--primary {\n font-size: 20px;\n background-color: pink;\n}\n
\n@antmjs/vantui 为部分 CSS 属性开放了基于 CSS 属性的定制方案。
\n相较于 样式类覆盖,这种方案支持在页面或应用级别对多个组件的样式做批量修改以进行主题样式的定制。
\n当然,用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅定制主题
\n得益于 Taro3 的实现,我们无需再关注小程序的样式隔离问题,所以我们可以常规使用样式覆盖
\n<Button type="primary">主要按钮</Button>\n
\n/* page.less */\n.van-button--primary {\n font-size: 20px;\n background-color: pink;\n}\n
\n@antmjs/vantui 为部分 CSS 属性开放了基于 CSS 属性的定制方案。
\n相较于 样式类覆盖,这种方案支持在页面或应用级别对多个组件的样式做批量修改以进行主题样式的定制。
\n当然,用它来修改单个组件的部分样式也是绰绰有余的。具体的使用方法请查阅定制主题
\n用于在内容加载过程中展示一组占位图形。
\n在 Taro 文件中引入组件
\nimport { Skeleton } from '@antmjs/vantui'\n
\n\n\nVant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手
\n
通过title
属性显示标题占位图,通过row
属性配置占位段落行数。
function Demo() {\n return <Skeleton title={true} row="3" />\n}\n
\n通过avatar
属性显示头像占位图。
function Demo() {\n return <Skeleton title={true} avatar={true} row="3" />\n}\n
\n将loading
属性设置成false
表示内容加载完成,此时会隐藏占位图,并显示Skeleton
的子组件。
function Demo() {\n const [loading, setLoading] = react.useState(true)\n react.useEffect(() => {\n setTimeout(() => {\n setLoading(false)\n }, 2000)\n }, [])\n\n return (\n <Skeleton title avatar row="3" loading={loading}>\n <View>实际内容</View>\n </Skeleton>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
row | \n- | \n number ¦ string | \n- | \nfalse | \n
title | \n- | \n boolean | \n- | \nfalse | \n
avatar | \n- | \n boolean | \n- | \nfalse | \n
loading | \n- | \n boolean | \n- | \nfalse | \n
animate | \n- | \n boolean | \n- | \nfalse | \n
avatarSize | \n- | \n string ¦ number | \n- | \nfalse | \n
avatarShape | \n- | \n "square" ¦ "round" | \n- | \nfalse | \n
titleWidth | \n- | \n string ¦ number | \n- | \nfalse | \n
rowWidth | \n- | \n string ¦ string[] | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--skeleton-padding | \n 0 @padding-md; | \n
--skeleton-row-height | \n 32px; | \n
--skeleton-row-background-color | \n @gray-2; | \n
--skeleton-row-margin-top | \n @padding-sm; | \n
--skeleton-avatar-background-color | \n @gray-2; | \n
--skeleton-animation-duration | \n 1.2s; | \n
--{property} | \n e(replace(@imp, \'(-?)@([^() ]+)\', \'$1@{$2}\', \'ig\')); | \n
--{property} | \n e(replace(@imp, \'(-?)@([^() ]+)\', \'var(--$2, $1@{$2})\', \'ig\')); | \n
用于在内容加载过程中展示一组占位图形。
\n在 Taro 文件中引入组件
\nimport { Skeleton } from '@antmjs/vantui'\n
\n\n\nVant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手
\n
通过title
属性显示标题占位图,通过row
属性配置占位段落行数。
function Demo() {\n return <Skeleton title={true} row="3" />\n}\n
\n通过avatar
属性显示头像占位图。
function Demo() {\n return <Skeleton title={true} avatar={true} row="3" />\n}\n
\n将loading
属性设置成false
表示内容加载完成,此时会隐藏占位图,并显示Skeleton
的子组件。
function Demo() {\n const [loading, setLoading] = react.useState(true)\n react.useEffect(() => {\n setTimeout(() => {\n setLoading(false)\n }, 2000)\n }, [])\n\n return (\n <Skeleton title avatar row="3" loading={loading}>\n <View>实际内容</View>\n </Skeleton>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
row | \n- | \n number ¦ string | \n- | \nfalse | \n
title | \n- | \n boolean | \n- | \nfalse | \n
avatar | \n- | \n boolean | \n- | \nfalse | \n
loading | \n- | \n boolean | \n- | \nfalse | \n
animate | \n- | \n boolean | \n- | \nfalse | \n
avatarSize | \n- | \n string ¦ number | \n- | \nfalse | \n
avatarShape | \n- | \n "square" ¦ "round" | \n- | \nfalse | \n
titleWidth | \n- | \n string ¦ number | \n- | \nfalse | \n
rowWidth | \n- | \n string ¦ string[] | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--skeleton-padding | \n 0 @padding-md; | \n
--skeleton-row-height | \n 32px; | \n
--skeleton-row-background-color | \n @gray-2; | \n
--skeleton-row-margin-top | \n @padding-sm; | \n
--skeleton-avatar-background-color | \n @gray-2; | \n
--skeleton-animation-duration | \n 1.2s; | \n
--{property} | \n e(replace(@imp, \'(-?)@([^() ]+)\', \'$1@{$2}\', \'ig\')); | \n
--{property} | \n e(replace(@imp, \'(-?)@([^() ]+)\', \'var(--$2, $1@{$2})\', \'ig\')); | \n
Taro3 的架构摒弃了小程序自定义组件带来的复杂性,所以 @antmjs/vantui 使用与之配套的 CSS 变量 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识,避免许多不必要的困扰。
\nCSS 变量 的兼容性要求可以在 这里 查看。对于不支持 CSS 变量 的设备,定制主题将不会生效,不过不必担心,默认样式仍会生效。
\n定制使用的 CSS 变量 与 Less 变量 同名,下面是一些基本的样式变量,所有可用的颜色变量请参考 配置文件,你可以覆盖其变量达到定制主题的目的。
\n// Component Colors\n@text-color: #323233;\n@border-color: #ebedf0;\n@active-color: #f2f3f5;\n@background-color: #f7f8fa;\n@background-color-light: #fafafa;\n
\n定制主题时,需要引入组件对应的 Less 样式文件,支持按需引入和手动引入两种方式。
\n在 babel.config.js 中配置按需引入样式源文件,注意 babel 6 不支持按需引入样式,请手动引入样式。
\nmodule.exports = {\n plugins: [\n [\n 'import',\n {\n libraryName: '@antmjs/vantui',\n libraryDirectory: 'es',\n // 指定样式路径,建议这里样式按需引入不开启,直接在app.less引入全局样式\n style: (name) => ::::_QA::::_ABname}/style/less::::_QA,\n },\n '@antmjs/vantui',\n ],\n ],\n}\n
\n// 引入全部样式\nimport '@antmjs/vantui/lib/index.less'\n\n// 引入单个组件样式\nimport '@antmjs/vantui/lib/button/style/less'\n
\n使用 Less 提供的 modifyVars 即可对变量进行修改,下面是参考的 webpack 配置。
\n// webpack.config.js\nmodule.exports = {\n rules: [\n {\n test: /.less$/,\n use: [\n // ...其他 loader 配置\n {\n loader: 'less-loader',\n options: {\n // 若 less-loader 版本小于 6.0,请移除 lessOptions 这一级,直接配置选项。\n lessOptions: {\n modifyVars: {\n // 直接覆盖变量\n 'text-color': '#111',\n 'border-color': '#eee',\n // 或者可以通过 less 文件覆盖(文件路径为绝对路径)\n hack: ::::_QAtrue; @import "your-less-file-path.less";::::_QA,\n },\n },\n },\n },\n ],\n },\n ],\n}\n
\n\n\n在 less 中为组件设置 CSS 变量
\n
export default Index () {\n return <Button className="my-button">\n 默认按钮\n </Button>\n}\n
\n.my-button {\n --button-border-radius: 10px;\n --button-default-color: #f2f3f5;\n}\n
\n\n\n或通过 style 属性来设置 CSS 变量,这使你能够轻松实现主题的动态切换
\n
export default Index () {\n const [buttonStyle, setButtonStyle] = useState({buttonStyle: "--button-border-radius: 10px;--button-default-color: green;"})\n useEffect(functon () {\n setTimeout(function () {\n setButtonStyle({buttonStyle: "--button-border-radius: 2px;--button-default-color: pink;"})\n }, 2000)\n }, [])\n return <Button style={buttonStyle}>\n 默认按钮\n </Button>\n}\n
\n\n\n与单个组件的定制方式类似,只需用一个 container 节点包裹住需要定制的组件,并将 CSS 变量 设置在 container 节点上
\n
export default Index () {\n return <View classsName="container">\n <Button className="my-button">\n 默认按钮\n </Button>\n <Toast id="van-toast" />\n </View>\n}\n
\n.container {\n --button-border-radius: 10px;\n --button-default-color: #f2f3f5;\n --toast-max-width: 100px;\n --toast-background-color: pink;\n}\n
\n\n\n在 app.less 中,写入 CSS 变量,即可对全局生效
\n
page {\n --button-border-radius: 10px;\n --button-default-color: #f2f3f5;\n --toast-max-width: 100px;\n --toast-background-color: pink;\n}\n
\nTaro3 的架构摒弃了小程序自定义组件带来的复杂性,所以 @antmjs/vantui 使用与之配套的 CSS 变量 来实现定制主题。链接中的内容可以帮助你对这两个概念有基本的认识,避免许多不必要的困扰。
\nCSS 变量 的兼容性要求可以在 这里 查看。对于不支持 CSS 变量 的设备,定制主题将不会生效,不过不必担心,默认样式仍会生效。
\n定制使用的 CSS 变量 与 Less 变量 同名,下面是一些基本的样式变量,所有可用的颜色变量请参考 配置文件,你可以覆盖其变量达到定制主题的目的。
\n// Component Colors\n@text-color: #323233;\n@border-color: #ebedf0;\n@active-color: #f2f3f5;\n@background-color: #f7f8fa;\n@background-color-light: #fafafa;\n
\n定制主题时,需要引入组件对应的 Less 样式文件,支持按需引入和手动引入两种方式。
\n在 babel.config.js 中配置按需引入样式源文件,注意 babel 6 不支持按需引入样式,请手动引入样式。
\nmodule.exports = {\n plugins: [\n [\n 'import',\n {\n libraryName: '@antmjs/vantui',\n libraryDirectory: 'es',\n // 指定样式路径,建议这里样式按需引入不开启,直接在app.less引入全局样式\n style: (name) => ::::_QA::::_ABname}/style/less::::_QA,\n },\n '@antmjs/vantui',\n ],\n ],\n}\n
\n// 引入全部样式\nimport '@antmjs/vantui/lib/index.less'\n\n// 引入单个组件样式\nimport '@antmjs/vantui/lib/button/style/less'\n
\n使用 Less 提供的 modifyVars 即可对变量进行修改,下面是参考的 webpack 配置。
\n// webpack.config.js\nmodule.exports = {\n rules: [\n {\n test: /.less$/,\n use: [\n // ...其他 loader 配置\n {\n loader: 'less-loader',\n options: {\n // 若 less-loader 版本小于 6.0,请移除 lessOptions 这一级,直接配置选项。\n lessOptions: {\n modifyVars: {\n // 直接覆盖变量\n 'text-color': '#111',\n 'border-color': '#eee',\n // 或者可以通过 less 文件覆盖(文件路径为绝对路径)\n hack: ::::_QAtrue; @import "your-less-file-path.less";::::_QA,\n },\n },\n },\n },\n ],\n },\n ],\n}\n
\n\n\n在 less 中为组件设置 CSS 变量
\n
export default Index () {\n return <Button className="my-button">\n 默认按钮\n </Button>\n}\n
\n.my-button {\n --button-border-radius: 10px;\n --button-default-color: #f2f3f5;\n}\n
\n\n\n或通过 style 属性来设置 CSS 变量,这使你能够轻松实现主题的动态切换
\n
export default Index () {\n const [buttonStyle, setButtonStyle] = useState({buttonStyle: "--button-border-radius: 10px;--button-default-color: green;"})\n useEffect(functon () {\n setTimeout(function () {\n setButtonStyle({buttonStyle: "--button-border-radius: 2px;--button-default-color: pink;"})\n }, 2000)\n }, [])\n return <Button style={buttonStyle}>\n 默认按钮\n </Button>\n}\n
\n\n\n与单个组件的定制方式类似,只需用一个 container 节点包裹住需要定制的组件,并将 CSS 变量 设置在 container 节点上
\n
export default Index () {\n return <View classsName="container">\n <Button className="my-button">\n 默认按钮\n </Button>\n <Toast id="van-toast" />\n </View>\n}\n
\n.container {\n --button-border-radius: 10px;\n --button-default-color: #f2f3f5;\n --toast-max-width: 100px;\n --toast-background-color: pink;\n}\n
\n\n\n在 app.less 中,写入 CSS 变量,即可对全局生效
\n
page {\n --button-border-radius: 10px;\n --button-default-color: #f2f3f5;\n --toast-max-width: 100px;\n --toast-background-color: pink;\n}\n
\nInfiniteScroll 组件在可见区域时自动加载更多数据。
\n在 Taro 文件中引入组件
\nimport { InfiniteScroll, VirtualList } from '@antmjs/vantui'\n
\nparentClassName
设置父元素类名案例
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Image as TaroImage, Text } from '@tarojs/components'\nimport {\n PullToRefresh,\n InfiniteScroll,\n InfiniteScrollInstance,\n InfiniteScrollProps,\n IPullToRefreshProps,\n} from '@antmjs/vantui'\nimport { mockGoods } from './common'\n\nexport default function Demo() {\n const [data, setdata] = react.useState<any[]>([])\n const InfiniteScrollInstance = react.useRef<InfiniteScrollInstance>()\n\n const loadMore: InfiniteScrollProps['loadMore'] = async () => {\n return new Promise(async (resolve) => {\n const reslult = await mockGoods()\n const newData = data.concat(reslult)\n setdata(newData)\n // 以下是简单的模拟请求,正常请求请按条件执行::::_QAresolve('complete')::::_QA\n // 设定一页10条数据,小于10则没有更多数据\n resolve(reslult.length < 10 ? 'complete' : 'loading')\n })\n }\n\n const onRefresh: IPullToRefreshProps['onRefresh'] = () => {\n return new Promise(async (resolve) => {\n const reslult = await mockGoods()\n setdata(reslult)\n if (data.length > 8) InfiniteScrollInstance.current?.reset()\n resolve(undefined)\n })\n }\n\n return (\n <PullToRefresh onRefresh={onRefresh}>\n <View style={{ padding: '4px 6px' }}>\n {data.map((item, index) => (\n <View\n className={::::_QAvan-demo-goods-item-wrapper::::_QA}\n key={::::_QAvan-demo-goods-item-wrapper-infinite::::_ABindex}::::_QA}\n >\n <View className="van-demo-goods-item">\n <TaroImage src={item.image} className="img" />\n <View className="title">{item.title}</View>\n {item.isCutPrice && <Text className="cutPrice">最近大降价</Text>}\n <View className="price">{item.price}</View>\n </View>\n </View>\n ))}\n <InfiniteScroll loadMore={loadMore} ref={InfiniteScrollInstance} />\n </View>\n </PullToRefresh>\n )\n}\n\n
\n/* eslint-disable */\nexport const mockGoods = (): Promise<any[]> => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(\n new Array(Math.random() > 0.3 ? 10 : 8).fill('').map((_, index) => {\n return {\n index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n }),\n )\n }, 1400)\n })\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Image as TaroImage, Text } from '@tarojs/components'\nimport {\n PullToRefresh,\n VirtualList,\n InfiniteScroll,\n InfiniteScrollInstance,\n IVirtualListInstance,\n InfiniteScrollProps,\n IPullToRefreshProps,\n} from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nexport default function Demo() {\n const [data, setdata] = react.useState<any[]>([])\n const mockGoods = COMMON.mockGoods\n const InfiniteScrollInstance = react.useRef<InfiniteScrollInstance>()\n const VirtualListInstance = react.useRef<IVirtualListInstance>()\n\n const loadMore: InfiniteScrollProps['loadMore'] = async () => {\n return new Promise(async (resolve) => {\n const reslult = await mockGoods()\n const newData = data.concat(reslult)\n setdata(newData)\n // 以下是简单的模拟请求,正常请求请按条件执行::::_QAresolve('complete')::::_QA\n resolve(newData.length > 110 ? 'complete' : 'loading')\n })\n }\n\n const onRefresh: IPullToRefreshProps['onRefresh'] = () => {\n return new Promise(async (resolve) => {\n InfiniteScrollInstance.current?.reset()\n const reslult = await mockGoods()\n await VirtualListInstance.current?.reset()\n setdata(reslult)\n resolve(undefined)\n })\n }\n return (\n <PullToRefresh onRefresh={onRefresh}>\n <VirtualList\n style={{ padding: 10, boxSizing: 'border-box' }}\n height="calc(100vh - 135px)"\n dataSource={data}\n showCount={3}\n ref={VirtualListInstance}\n footer={\n <InfiniteScroll\n parentClassName="van-virtual-list"\n loadMore={loadMore}\n ref={InfiniteScrollInstance}\n />\n }\n ItemRender={react.memo(({ item }) => {\n return (\n <View className={::::_QAvan-demo-goods-item-wrapper::::_QA} key={item.image}>\n <View className="van-demo-goods-item">\n <TaroImage key={item.image} src={item.image} className="img" />\n <View className="title">{item.title}</View>\n {item.isCutPrice && (\n <Text className="cutPrice">最近大降价</Text>\n )}\n <View className="price">{item.price}</View>\n </View>\n </View>\n )\n })}\n />\n </PullToRefresh>\n )\n}\n\n
\n/* eslint-disable */\nexport const mockGoods = (): Promise<any[]> => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(\n new Array(Math.random() > 0.3 ? 10 : 8).fill('').map((_, index) => {\n return {\n index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n }),\n )\n }, 1400)\n })\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Image as TaroImage, Text } from '@tarojs/components'\nimport { InfiniteScroll, InfiniteScrollProps } from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nconst mockGoods = COMMON.mockGoods\n\nexport default function Demo() {\n const [data, setdata] = react.useState<any[]>([])\n\n const loadMore: InfiniteScrollProps['loadMore'] = async () => {\n return new Promise(async (resolve) => {\n const reslult = await mockGoods()\n const newData = data.concat(reslult)\n setdata(newData)\n // 以下是简单的模拟请求,正常请求请按条件执行::::_QAresolve('complete')::::_QA\n resolve(Math.random() > 0.6 ? 'loading' : 'error')\n })\n }\n\n return (\n <View style={{ padding: '4px 6px' }}>\n {data.map((item, index) => (\n <View\n className={::::_QAvan-demo-goods-item-wrapper::::_QA}\n key={::::_QAvan-demo-goods-item-wrapper-infinite::::_ABindex}::::_QA}\n >\n <View className="van-demo-goods-item">\n <TaroImage src={item.image} className="img" />\n <View className="title">{item.title}</View>\n {item.isCutPrice && <Text className="cutPrice">最近大降价</Text>}\n <View className="price">{item.price}</View>\n </View>\n </View>\n ))}\n <InfiniteScroll loadMore={loadMore} />\n </View>\n )\n}\n\n
\n/* eslint-disable */\nexport const mockGoods = (): Promise<any[]> => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(\n new Array(Math.random() > 0.3 ? 10 : 8).fill('').map((_, index) => {\n return {\n index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n }),\n )\n }, 1400)\n })\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
className | \n类名 | \n string | \n- | \nfalse | \n
loadMore | \n加载方法,初始化便触发,需要返回 promise 加上后续的状态 | \n () => Promise< ¦ "loading" ¦ "complete" ¦ "error" > | \n- | \ntrue | \n
parentClassName | \n所在父级的类名,不设置的话,相对于窗口计算 InfiniteScroll 的位置 | \n string | \n- | \nfalse | \n
completeText | \n加载完成文案 | \n React.ReactNode | \n没有更多了~ | \nfalse | \n
loadingText | \n加载文案 | \n React.ReactNode | \n加载中... | \nfalse | \n
reloadText | \n重新加载按钮 | \n React.ReactNode | \n重新加载 | \nfalse | \n
errorText | \n错误状态文案 | \n React.ReactNode | \n加载失败 | \nfalse | \n
renderComplete | \n自定义完成状态的渲染 | \n React.ReactNode | \n- | \nfalse | \n
renderLoading | \n自定义 loading 状态的渲染 | \n React.ReactNode | \n- | \nfalse | \n
renderError | \n自定义 error 状态的渲染 | \n React.ReactNode | \n- | \nfalse | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
reset | \n重置加载状态 | \n ( loadMore?: boolean ) => Promise | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--infinite-scroll-primary-color | \n var(--primary-color); | \n
--infinite-scroll-color | \n @gray-6; | \n
--infinite-scroll-font-size | \n @font-size-md; | \n
InfiniteScroll 组件在可见区域时自动加载更多数据。
\n在 Taro 文件中引入组件
\nimport { InfiniteScroll, VirtualList } from '@antmjs/vantui'\n
\nparentClassName
设置父元素类名案例
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Image as TaroImage, Text } from '@tarojs/components'\nimport {\n PullToRefresh,\n InfiniteScroll,\n InfiniteScrollInstance,\n InfiniteScrollProps,\n IPullToRefreshProps,\n} from '@antmjs/vantui'\nimport { mockGoods } from './common'\n\nexport default function Demo() {\n const [data, setdata] = react.useState<any[]>([])\n const InfiniteScrollInstance = react.useRef<InfiniteScrollInstance>()\n\n const loadMore: InfiniteScrollProps['loadMore'] = async () => {\n return new Promise(async (resolve) => {\n const reslult = await mockGoods()\n const newData = data.concat(reslult)\n setdata(newData)\n // 以下是简单的模拟请求,正常请求请按条件执行::::_QAresolve('complete')::::_QA\n // 设定一页10条数据,小于10则没有更多数据\n resolve(reslult.length < 10 ? 'complete' : 'loading')\n })\n }\n\n const onRefresh: IPullToRefreshProps['onRefresh'] = () => {\n return new Promise(async (resolve) => {\n const reslult = await mockGoods()\n setdata(reslult)\n if (data.length > 8) InfiniteScrollInstance.current?.reset()\n resolve(undefined)\n })\n }\n\n return (\n <PullToRefresh onRefresh={onRefresh}>\n <View style={{ padding: '4px 6px' }}>\n {data.map((item, index) => (\n <View\n className={::::_QAvan-demo-goods-item-wrapper::::_QA}\n key={::::_QAvan-demo-goods-item-wrapper-infinite::::_ABindex}::::_QA}\n >\n <View className="van-demo-goods-item">\n <TaroImage src={item.image} className="img" />\n <View className="title">{item.title}</View>\n {item.isCutPrice && <Text className="cutPrice">最近大降价</Text>}\n <View className="price">{item.price}</View>\n </View>\n </View>\n ))}\n <InfiniteScroll loadMore={loadMore} ref={InfiniteScrollInstance} />\n </View>\n </PullToRefresh>\n )\n}\n\n
\n/* eslint-disable */\nexport const mockGoods = (): Promise<any[]> => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(\n new Array(Math.random() > 0.3 ? 10 : 8).fill('').map((_, index) => {\n return {\n index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n }),\n )\n }, 1400)\n })\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Image as TaroImage, Text } from '@tarojs/components'\nimport {\n PullToRefresh,\n VirtualList,\n InfiniteScroll,\n InfiniteScrollInstance,\n IVirtualListInstance,\n InfiniteScrollProps,\n IPullToRefreshProps,\n} from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nexport default function Demo() {\n const [data, setdata] = react.useState<any[]>([])\n const mockGoods = COMMON.mockGoods\n const InfiniteScrollInstance = react.useRef<InfiniteScrollInstance>()\n const VirtualListInstance = react.useRef<IVirtualListInstance>()\n\n const loadMore: InfiniteScrollProps['loadMore'] = async () => {\n return new Promise(async (resolve) => {\n const reslult = await mockGoods()\n const newData = data.concat(reslult)\n setdata(newData)\n // 以下是简单的模拟请求,正常请求请按条件执行::::_QAresolve('complete')::::_QA\n resolve(newData.length > 110 ? 'complete' : 'loading')\n })\n }\n\n const onRefresh: IPullToRefreshProps['onRefresh'] = () => {\n return new Promise(async (resolve) => {\n InfiniteScrollInstance.current?.reset()\n const reslult = await mockGoods()\n await VirtualListInstance.current?.reset()\n setdata(reslult)\n resolve(undefined)\n })\n }\n return (\n <PullToRefresh onRefresh={onRefresh}>\n <VirtualList\n style={{ padding: 10, boxSizing: 'border-box' }}\n height="calc(100vh - 135px)"\n dataSource={data}\n showCount={3}\n ref={VirtualListInstance}\n footer={\n <InfiniteScroll\n parentClassName="van-virtual-list"\n loadMore={loadMore}\n ref={InfiniteScrollInstance}\n />\n }\n ItemRender={react.memo(({ item }) => {\n return (\n <View className={::::_QAvan-demo-goods-item-wrapper::::_QA} key={item.image}>\n <View className="van-demo-goods-item">\n <TaroImage key={item.image} src={item.image} className="img" />\n <View className="title">{item.title}</View>\n {item.isCutPrice && (\n <Text className="cutPrice">最近大降价</Text>\n )}\n <View className="price">{item.price}</View>\n </View>\n </View>\n )\n })}\n />\n </PullToRefresh>\n )\n}\n\n
\n/* eslint-disable */\nexport const mockGoods = (): Promise<any[]> => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(\n new Array(Math.random() > 0.3 ? 10 : 8).fill('').map((_, index) => {\n return {\n index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n }),\n )\n }, 1400)\n })\n}\n\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View, Image as TaroImage, Text } from '@tarojs/components'\nimport { InfiniteScroll, InfiniteScrollProps } from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nconst mockGoods = COMMON.mockGoods\n\nexport default function Demo() {\n const [data, setdata] = react.useState<any[]>([])\n\n const loadMore: InfiniteScrollProps['loadMore'] = async () => {\n return new Promise(async (resolve) => {\n const reslult = await mockGoods()\n const newData = data.concat(reslult)\n setdata(newData)\n // 以下是简单的模拟请求,正常请求请按条件执行::::_QAresolve('complete')::::_QA\n resolve(Math.random() > 0.6 ? 'loading' : 'error')\n })\n }\n\n return (\n <View style={{ padding: '4px 6px' }}>\n {data.map((item, index) => (\n <View\n className={::::_QAvan-demo-goods-item-wrapper::::_QA}\n key={::::_QAvan-demo-goods-item-wrapper-infinite::::_ABindex}::::_QA}\n >\n <View className="van-demo-goods-item">\n <TaroImage src={item.image} className="img" />\n <View className="title">{item.title}</View>\n {item.isCutPrice && <Text className="cutPrice">最近大降价</Text>}\n <View className="price">{item.price}</View>\n </View>\n </View>\n ))}\n <InfiniteScroll loadMore={loadMore} />\n </View>\n )\n}\n\n
\n/* eslint-disable */\nexport const mockGoods = (): Promise<any[]> => {\n const initData = [\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '中老年羽绒服男冬季爸爸装薄短款白鸭绒中年人男士保暖外套男装 夜空黑 L【建议115斤以内】',\n price: '¥165.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: 'HLA海澜之家马丁靴男士高帮男靴复古工装鞋',\n price: '¥361.00',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title:\n '洁丽雅拖鞋男夏浴室洗澡防滑家居室内EVA大码男士凉拖鞋居家用夏季防臭 灰色 41-42【标准码】',\n price: '¥22.50',\n },\n {\n image: 'https://img.yzcdn.cn/vant/cat.jpeg',\n title: '夏季新款男士T恤宽松气质高端百搭时尚短袖体恤潮牌',\n price: '¥212.00',\n },\n ]\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(\n new Array(Math.random() > 0.3 ? 10 : 8).fill('').map((_, index) => {\n return {\n index,\n ...initData[index % 4],\n isCutPrice: index % 2 === 0 ? true : false,\n }\n }),\n )\n }, 1400)\n })\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
className | \n类名 | \n string | \n- | \nfalse | \n
loadMore | \n加载方法,初始化便触发,需要返回 promise 加上后续的状态 | \n () => Promise< ¦ "loading" ¦ "complete" ¦ "error" > | \n- | \ntrue | \n
parentClassName | \n所在父级的类名,不设置的话,相对于窗口计算 InfiniteScroll 的位置 | \n string | \n- | \nfalse | \n
completeText | \n加载完成文案 | \n React.ReactNode | \n没有更多了~ | \nfalse | \n
loadingText | \n加载文案 | \n React.ReactNode | \n加载中... | \nfalse | \n
reloadText | \n重新加载按钮 | \n React.ReactNode | \n重新加载 | \nfalse | \n
errorText | \n错误状态文案 | \n React.ReactNode | \n加载失败 | \nfalse | \n
renderComplete | \n自定义完成状态的渲染 | \n React.ReactNode | \n- | \nfalse | \n
renderLoading | \n自定义 loading 状态的渲染 | \n React.ReactNode | \n- | \nfalse | \n
renderError | \n自定义 error 状态的渲染 | \n React.ReactNode | \n- | \nfalse | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
reset | \n重置加载状态 | \n ( loadMore?: boolean ) => Promise | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--infinite-scroll-primary-color | \n var(--primary-color); | \n
--infinite-scroll-color | \n @gray-6; | \n
--infinite-scroll-font-size | \n @font-size-md; | \n
向下弹出的菜单列表。
\n在 Taro 文件中引入组件
\nimport { DropdownMenu } from '@antmjs/vantui'\nimport { DropdownItem } from '@antmjs/vantui'\n
\nfunction Demo() {\n const [state, setState] = react.useState({\n option1: [\n {\n text: '全部商品',\n value: 0,\n },\n {\n text: '新款商品',\n value: 1,\n },\n {\n text: '活动商品',\n value: 2,\n },\n ],\n option2: [\n {\n text: '默认排序',\n value: 'a',\n },\n {\n text: '好评排序',\n value: 'b',\n },\n {\n text: '销量排序',\n value: 'c',\n },\n ],\n value1: 0,\n value2: 'a',\n })\n return (\n <View>\n <DropdownMenu>\n <DropdownItem value={state.value1} options={state.option1} />\n <DropdownItem value={state.value2} options={state.option2} />\n </DropdownMenu>\n </View>\n )\n}\n
\nfunction Demo() {\n const it = react.useRef(null)\n const [state, setState] = react.useState({\n option1: [\n {\n text: '全部商品',\n value: 0,\n },\n {\n text: '新款商品',\n value: 1,\n },\n ],\n value1: 0,\n switch: false,\n result: '',\n })\n\n const changeState = react.useCallback(\n function (type, value) {\n setState({\n ...state,\n [type]: value,\n })\n },\n [state],\n )\n\n const onConfirm = react.useCallback(\n function () {\n it.current.toggle()\n changeState('result', state.switch ? '打开状态' : '关闭状态')\n },\n [it, changeState],\n )\n\n return (\n <DropdownMenu>\n <DropdownItem value={state.value1} options={state.option1} />\n <DropdownItem ref={it} title={state.result}>\n <Cell\n title="选择开关"\n renderRightIcon={\n <Switch\n size="24px"\n style="height: 26px"\n checked={state.switch}\n activeColor="#ee0a24"\n onChange={() => changeState('switch', !state.switch)}\n />\n }\n ></Cell>\n <View style="padding: 5px 16px;">\n <Button type="danger" block round onClick={onConfirm}>\n 确认\n </Button>\n </View>\n </DropdownItem>\n </DropdownMenu>\n )\n}\n
\nfunction Demo() {\n const [state, setState] = react.useState({\n option1: [\n {\n text: '全部商品',\n value: 0,\n },\n {\n text: '新款商品',\n value: 1,\n },\n ],\n option2: [\n {\n text: '默认排序',\n value: 'a',\n },\n {\n text: '好评排序',\n value: 'b',\n },\n ],\n value1: 0,\n value2: 'a',\n })\n return (\n <DropdownMenu activeColor="#1989fa">\n <DropdownItem value={state.value1} options={state.option1} />\n <DropdownItem value={state.value2} options={state.option2} />\n </DropdownMenu>\n )\n}\n
\nfunction Demo() {\n const [state, setState] = react.useState({\n option1: [\n {\n text: '全部商品',\n value: 0,\n },\n {\n text: '新款商品',\n value: 1,\n },\n ],\n option2: [\n {\n text: '默认排序',\n value: 'a',\n },\n {\n text: '好评排序',\n value: 'b',\n },\n ],\n value1: 0,\n value2: 'a',\n })\n return (\n <DropdownMenu direction="up">\n <DropdownItem value={state.value1} options={state.option1} />\n <DropdownItem value={state.value2} options={state.option2} />\n </DropdownMenu>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
activeColor | \n选中选项后颜色 | \n string | \n- | \nfalse | \n
overlay | \n是否展示蒙层 | \n boolean | \n- | \nfalse | \n
zIndex | \n弹出层 zIndex | \n number | \n- | \nfalse | \n
duration | \n弹出层执行时间 | \n number | \n- | \nfalse | \n
direction | \n弹出层执行方向 | \n "down" ¦ "up" | \n- | \nfalse | \n
closeOnClickOverlay | \n点击蒙层是否关闭弹出层 | \n boolean | \n- | \nfalse | \n
closeOnClickOutside | \n是否在点击外部 menu 后关闭菜单 | \n boolean | \n- | \nfalse | \n
children | \n子元素,须为 DropdownMenuItem | \n React.ReactNode | \n- | \ntrue | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
value | \n对应菜单选项的值 | \n string ¦ number | \n- | \nfalse | \n
title | \n未选择时候的按钮标题 | \n ReactNode | \n- | \nfalse | \n
disabled | \n是否禁用 | \n boolean | \n- | \nfalse | \n
titleClass | \n标题元素的 class | \n string | \n- | \nfalse | \n
options | \n所有选项 | \n Array | \n- | \nfalse | \n
popupStyle | \n弹出层的样式 | \n React.CSSProperties | \n- | \nfalse | \n
onOpen | \n展开下拉项触发 | \n () => void | \n- | \nfalse | \n
onOpened | \n展开下拉项完成时触发 | \n () => void | \n- | \nfalse | \n
onClose | \n关闭下拉项触发 | \n () => void | \n- | \nfalse | \n
onClosed | \n展开下拉项完成触发 | \n () => void | \n- | \nfalse | \n
onChange | \n点击选项触发 | \n ( value?: ¦ number ¦ string ) => void | \n- | \nfalse | \n
children | \n传入的子元素 | \n attr: ¦ React.ReactNode ¦ React.ReactNode[] | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n
---|---|---|
text | \n展示的 label | \n ReactNode | \n
value | \n对应的数值 | \n number ¦ string | \n
icon | \n前缀图标 | \n string | \n
通过 ref 获取到的方法如下
\n方法 | \n说明 | \n类型 | \n
---|---|---|
toggle | \n控制展开/收起菜单栏,传入参数 show 是否展开,options.immediate 是否不需要动画 | \n ( show?: boolean, options?: { immediate: boolean } ) => void | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--dropdown-menu-height | \n 100px; | \n
--dropdown-menu-background-color | \n @white; | \n
--dropdown-menu-title-font-size | \n 30px; | \n
--dropdown-menu-title-text-color | \n @text-color; | \n
--dropdown-menu-title-active-text-color | \n var(--primary-color); | \n
--dropdown-menu-title-disabled-text-color | \n @gray-6; | \n
--dropdown-menu-title-padding | \n 0 @padding-xs; | \n
--dropdown-menu-title-line-height | \n 36px; | \n
--dropdown-menu-option-active-color | \n var(--primary-color); | \n
--dropdown-menu-box-shadow | \n 0 4px 24px fade(@gray-7, 12); | \n
向下弹出的菜单列表。
\n在 Taro 文件中引入组件
\nimport { DropdownMenu } from '@antmjs/vantui'\nimport { DropdownItem } from '@antmjs/vantui'\n
\nfunction Demo() {\n const [state, setState] = react.useState({\n option1: [\n {\n text: '全部商品',\n value: 0,\n },\n {\n text: '新款商品',\n value: 1,\n },\n {\n text: '活动商品',\n value: 2,\n },\n ],\n option2: [\n {\n text: '默认排序',\n value: 'a',\n },\n {\n text: '好评排序',\n value: 'b',\n },\n {\n text: '销量排序',\n value: 'c',\n },\n ],\n value1: 0,\n value2: 'a',\n })\n return (\n <View>\n <DropdownMenu>\n <DropdownItem value={state.value1} options={state.option1} />\n <DropdownItem value={state.value2} options={state.option2} />\n </DropdownMenu>\n </View>\n )\n}\n
\nfunction Demo() {\n const it = react.useRef(null)\n const [state, setState] = react.useState({\n option1: [\n {\n text: '全部商品',\n value: 0,\n },\n {\n text: '新款商品',\n value: 1,\n },\n ],\n value1: 0,\n switch: false,\n result: '',\n })\n\n const changeState = react.useCallback(\n function (type, value) {\n setState({\n ...state,\n [type]: value,\n })\n },\n [state],\n )\n\n const onConfirm = react.useCallback(\n function () {\n it.current.toggle()\n changeState('result', state.switch ? '打开状态' : '关闭状态')\n },\n [it, changeState],\n )\n\n return (\n <DropdownMenu>\n <DropdownItem value={state.value1} options={state.option1} />\n <DropdownItem ref={it} title={state.result}>\n <Cell\n title="选择开关"\n renderRightIcon={\n <Switch\n size="24px"\n style="height: 26px"\n checked={state.switch}\n activeColor="#ee0a24"\n onChange={() => changeState('switch', !state.switch)}\n />\n }\n ></Cell>\n <View style="padding: 5px 16px;">\n <Button type="danger" block round onClick={onConfirm}>\n 确认\n </Button>\n </View>\n </DropdownItem>\n </DropdownMenu>\n )\n}\n
\nfunction Demo() {\n const [state, setState] = react.useState({\n option1: [\n {\n text: '全部商品',\n value: 0,\n },\n {\n text: '新款商品',\n value: 1,\n },\n ],\n option2: [\n {\n text: '默认排序',\n value: 'a',\n },\n {\n text: '好评排序',\n value: 'b',\n },\n ],\n value1: 0,\n value2: 'a',\n })\n return (\n <DropdownMenu activeColor="#1989fa">\n <DropdownItem value={state.value1} options={state.option1} />\n <DropdownItem value={state.value2} options={state.option2} />\n </DropdownMenu>\n )\n}\n
\nfunction Demo() {\n const [state, setState] = react.useState({\n option1: [\n {\n text: '全部商品',\n value: 0,\n },\n {\n text: '新款商品',\n value: 1,\n },\n ],\n option2: [\n {\n text: '默认排序',\n value: 'a',\n },\n {\n text: '好评排序',\n value: 'b',\n },\n ],\n value1: 0,\n value2: 'a',\n })\n return (\n <DropdownMenu direction="up">\n <DropdownItem value={state.value1} options={state.option1} />\n <DropdownItem value={state.value2} options={state.option2} />\n </DropdownMenu>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
activeColor | \n选中选项后颜色 | \n string | \n- | \nfalse | \n
overlay | \n是否展示蒙层 | \n boolean | \n- | \nfalse | \n
zIndex | \n弹出层 zIndex | \n number | \n- | \nfalse | \n
duration | \n弹出层执行时间 | \n number | \n- | \nfalse | \n
direction | \n弹出层执行方向 | \n "down" ¦ "up" | \n- | \nfalse | \n
closeOnClickOverlay | \n点击蒙层是否关闭弹出层 | \n boolean | \n- | \nfalse | \n
closeOnClickOutside | \n是否在点击外部 menu 后关闭菜单 | \n boolean | \n- | \nfalse | \n
children | \n子元素,须为 DropdownMenuItem | \n React.ReactNode | \n- | \ntrue | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
value | \n对应菜单选项的值 | \n string ¦ number | \n- | \nfalse | \n
title | \n未选择时候的按钮标题 | \n ReactNode | \n- | \nfalse | \n
disabled | \n是否禁用 | \n boolean | \n- | \nfalse | \n
titleClass | \n标题元素的 class | \n string | \n- | \nfalse | \n
options | \n所有选项 | \n Array | \n- | \nfalse | \n
popupStyle | \n弹出层的样式 | \n React.CSSProperties | \n- | \nfalse | \n
onOpen | \n展开下拉项触发 | \n () => void | \n- | \nfalse | \n
onOpened | \n展开下拉项完成时触发 | \n () => void | \n- | \nfalse | \n
onClose | \n关闭下拉项触发 | \n () => void | \n- | \nfalse | \n
onClosed | \n展开下拉项完成触发 | \n () => void | \n- | \nfalse | \n
onChange | \n点击选项触发 | \n ( value?: ¦ number ¦ string ) => void | \n- | \nfalse | \n
children | \n传入的子元素 | \n attr: ¦ React.ReactNode ¦ React.ReactNode[] | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n
---|---|---|
text | \n展示的 label | \n ReactNode | \n
value | \n对应的数值 | \n number ¦ string | \n
icon | \n前缀图标 | \n string | \n
通过 ref 获取到的方法如下
\n方法 | \n说明 | \n类型 | \n
---|---|---|
toggle | \n控制展开/收起菜单栏,传入参数 show 是否展开,options.immediate 是否不需要动画 | \n ( show?: boolean, options?: { immediate: boolean } ) => void | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--dropdown-menu-height | \n 100px; | \n
--dropdown-menu-background-color | \n @white; | \n
--dropdown-menu-title-font-size | \n 30px; | \n
--dropdown-menu-title-text-color | \n @text-color; | \n
--dropdown-menu-title-active-text-color | \n var(--primary-color); | \n
--dropdown-menu-title-disabled-text-color | \n @gray-6; | \n
--dropdown-menu-title-padding | \n 0 @padding-xs; | \n
--dropdown-menu-title-line-height | \n 36px; | \n
--dropdown-menu-option-active-color | \n var(--primary-color); | \n
--dropdown-menu-box-shadow | \n 0 4px 24px fade(@gray-7, 12); | \n
简版的表格组件,支持自定义样式、自定义排序、服务端排序、固定列等功能
\n在 Taro 文件中引入组件
\nimport { Table } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Table, ITableProps } from '@antmjs/vantui'\n\nconst columns: ITableProps['columns'] = [\n {\n title: '姓名',\n dataIndex: 'name',\n fixed: 'left',\n render: (val) => <View style={{ color: '#2196F3' }}>{val}</View>,\n },\n {\n title: '年龄',\n dataIndex: 'age',\n align: 'center',\n sort: true,\n },\n {\n title: '账户',\n dataIndex: 'account',\n sort: true,\n },\n {\n title: '住址',\n dataIndex: 'address',\n },\n {\n title: '爱好',\n dataIndex: 'hobby',\n },\n]\nexport default function Demo() {\n const [state, changeState] = react.useState({\n dataSource: [],\n loading: false,\n })\n\n const setState = (stateNew) => {\n changeState({\n ...state,\n ...stateNew,\n })\n }\n\n react.useEffect(() => {\n setState({ loading: true })\n setTimeout(() => {\n setState({\n loading: false,\n dataSource: [\n {\n key: '1',\n name: '胡彦斌',\n age: 37,\n account: 20000,\n address: '西湖区湖底公园1号',\n hobby: '唱歌跳舞唱歌跳舞',\n },\n {\n key: '2',\n name: '吴亦凡',\n age: 32,\n account: 50000,\n address: '朝阳区派出所',\n hobby: '嗨嗨啊嗨嗨嗨啊嗨',\n },\n {\n key: '36',\n name: '王宝强',\n age: 31,\n account: 40000,\n address: '嘟嘟嘟嘟一号',\n width: 200,\n hobby: '休息♨️休息♨️休息♨️休息♨️休息♨️',\n },\n ],\n })\n }, 2000)\n }, [])\n\n const sortAction = (col) => {\n const { sortOrder, dataIndex } = col\n const { dataSource } = state\n if (sortOrder !== 'descend') {\n dataSource.sort(function (a, b) {\n return a[dataIndex] - b[dataIndex]\n })\n } else {\n dataSource.sort(function (a, b) {\n return b[dataIndex] - a[dataIndex]\n })\n }\n\n setState({\n dataSource,\n })\n }\n return (\n <Table\n columns={columns}\n dataSource={state.dataSource}\n sortChange={sortAction}\n loading={state.loading}\n scroll={{ x: 500 }}\n rowKey="title"\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
columns | \n表格列配置描述 | \n IColumns[] | \n- | \ntrue | \n
dataSource | \n数据源 | \n Record< string, any >[] | \n- | \ntrue | \n
rowKey | \n表格行 key 的取值 | \n string // 表格行 key 的取值 | \n- | \ntrue | \n
className | \n最外层包裹节点 css 类名 | \n string | \n- | \nfalse | \n
style | \n最外层包裹节点内联样式 | \n React.CSSProperties | \n- | \nfalse | \n
colStyle | \n单元格统一样式 | \n React.CSSProperties | \n- | \nfalse | \n
colClassName | \n单元格统一类名 | \n string | \n- | \nfalse | \n
rowStyle | \n行统一样式 | \n React.CSSProperties | \n- | \nfalse | \n
rowClassName | \n表格行 css 类名 | \n string | \n- | \nfalse | \n
titleStyle | \n统一设置表头样式 | \n React.CSSProperties | \n- | \nfalse | \n
titleClassName | \n统一设置表头单元格 css 类名 | \n string | \n- | \nfalse | \n
loading | \n是否加载中 | \n boolean | \nfalse | \nfalse | \n
sortChange | \n排序变化 | \n ( columns: IColumns ) => void | \n() => void | \nfalse | \n
placeholder | \n数据为空的时候的占位字符 | \n React.ReactNode | \n\'--\' | \nfalse | \n
scroll | \n表格是否可滚动,也可以指定滚动区域的宽、高 | \n { x?: ¦ number ¦ string ¦ boolean y?: ¦ number ¦ string ¦ boolean } | \n- | \nfalse | \n
scrollViewProps | \n传递给 ScrollView 的属性值 | \n ScrollViewProps | \n- | \nfalse | \n
sticky | \nsticky 模式 | \n attr: ¦ boolean ¦ StickyProps | \n- | \nfalse | \n
表格列配置描述
\n参数 | \n说明 | \n类型 | \n
---|---|---|
title | \n标题 | \n attr: ¦ string ¦ JSX.Element | \n
dataIndex | \n列数据在数据项中对应的路径 | \n string | \n
key | \nReact 组件 key,可忽略 | \n string | \n
align | \n设置该列文本对齐方式 | \n attr: ¦ "left" ¦ "right" ¦ "center" | \n
style | \n该列单元格内联样式 | \n React.CSSProperties | \n
titleStyle | \n该列表头内联样式 | \n React.CSSProperties | \n
className | \n该列单元格 css 类名 | \n string | \n
titleClassName | \n设置该列表头单元格 css 类名 | \n string | \n
render | \n自定义渲染函数 | \n ( text?: any, record?: Record< string, any >, index?: number ) => ¦ JSX.Element ¦ string | \n
width | \n列宽,单位 px | \n number | \n
sort | \n表头是否显示排序按钮 | \n boolean | \n
sortOrder | \n排序的受控属性 | \n attr: ¦ "ascend" ¦ "descend" ¦ undefined | \n
fixed | \n固定列 | \n "left" ¦ "right" | \n
expandable | \n该列是否启用点击展开收起功能,默认 true | \n boolean | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--table-primary-color | \n @black; | \n
简版的表格组件,支持自定义样式、自定义排序、服务端排序、固定列等功能
\n在 Taro 文件中引入组件
\nimport { Table } from '@antmjs/vantui'\n
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Table, ITableProps } from '@antmjs/vantui'\n\nconst columns: ITableProps['columns'] = [\n {\n title: '姓名',\n dataIndex: 'name',\n fixed: 'left',\n render: (val) => <View style={{ color: '#2196F3' }}>{val}</View>,\n },\n {\n title: '年龄',\n dataIndex: 'age',\n align: 'center',\n sort: true,\n },\n {\n title: '账户',\n dataIndex: 'account',\n sort: true,\n },\n {\n title: '住址',\n dataIndex: 'address',\n },\n {\n title: '爱好',\n dataIndex: 'hobby',\n },\n]\nexport default function Demo() {\n const [state, changeState] = react.useState({\n dataSource: [],\n loading: false,\n })\n\n const setState = (stateNew) => {\n changeState({\n ...state,\n ...stateNew,\n })\n }\n\n react.useEffect(() => {\n setState({ loading: true })\n setTimeout(() => {\n setState({\n loading: false,\n dataSource: [\n {\n key: '1',\n name: '胡彦斌',\n age: 37,\n account: 20000,\n address: '西湖区湖底公园1号',\n hobby: '唱歌跳舞唱歌跳舞',\n },\n {\n key: '2',\n name: '吴亦凡',\n age: 32,\n account: 50000,\n address: '朝阳区派出所',\n hobby: '嗨嗨啊嗨嗨嗨啊嗨',\n },\n {\n key: '36',\n name: '王宝强',\n age: 31,\n account: 40000,\n address: '嘟嘟嘟嘟一号',\n width: 200,\n hobby: '休息♨️休息♨️休息♨️休息♨️休息♨️',\n },\n ],\n })\n }, 2000)\n }, [])\n\n const sortAction = (col) => {\n const { sortOrder, dataIndex } = col\n const { dataSource } = state\n if (sortOrder !== 'descend') {\n dataSource.sort(function (a, b) {\n return a[dataIndex] - b[dataIndex]\n })\n } else {\n dataSource.sort(function (a, b) {\n return b[dataIndex] - a[dataIndex]\n })\n }\n\n setState({\n dataSource,\n })\n }\n return (\n <Table\n columns={columns}\n dataSource={state.dataSource}\n sortChange={sortAction}\n loading={state.loading}\n scroll={{ x: 500 }}\n rowKey="title"\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
columns | \n表格列配置描述 | \n IColumns[] | \n- | \ntrue | \n
dataSource | \n数据源 | \n Record< string, any >[] | \n- | \ntrue | \n
rowKey | \n表格行 key 的取值 | \n string // 表格行 key 的取值 | \n- | \ntrue | \n
className | \n最外层包裹节点 css 类名 | \n string | \n- | \nfalse | \n
style | \n最外层包裹节点内联样式 | \n React.CSSProperties | \n- | \nfalse | \n
colStyle | \n单元格统一样式 | \n React.CSSProperties | \n- | \nfalse | \n
colClassName | \n单元格统一类名 | \n string | \n- | \nfalse | \n
rowStyle | \n行统一样式 | \n React.CSSProperties | \n- | \nfalse | \n
rowClassName | \n表格行 css 类名 | \n string | \n- | \nfalse | \n
titleStyle | \n统一设置表头样式 | \n React.CSSProperties | \n- | \nfalse | \n
titleClassName | \n统一设置表头单元格 css 类名 | \n string | \n- | \nfalse | \n
loading | \n是否加载中 | \n boolean | \nfalse | \nfalse | \n
sortChange | \n排序变化 | \n ( columns: IColumns ) => void | \n() => void | \nfalse | \n
placeholder | \n数据为空的时候的占位字符 | \n React.ReactNode | \n\'--\' | \nfalse | \n
scroll | \n表格是否可滚动,也可以指定滚动区域的宽、高 | \n { x?: ¦ number ¦ string ¦ boolean y?: ¦ number ¦ string ¦ boolean } | \n- | \nfalse | \n
scrollViewProps | \n传递给 ScrollView 的属性值 | \n ScrollViewProps | \n- | \nfalse | \n
sticky | \nsticky 模式 | \n attr: ¦ boolean ¦ StickyProps | \n- | \nfalse | \n
表格列配置描述
\n参数 | \n说明 | \n类型 | \n
---|---|---|
title | \n标题 | \n attr: ¦ string ¦ JSX.Element | \n
dataIndex | \n列数据在数据项中对应的路径 | \n string | \n
key | \nReact 组件 key,可忽略 | \n string | \n
align | \n设置该列文本对齐方式 | \n attr: ¦ "left" ¦ "right" ¦ "center" | \n
style | \n该列单元格内联样式 | \n React.CSSProperties | \n
titleStyle | \n该列表头内联样式 | \n React.CSSProperties | \n
className | \n该列单元格 css 类名 | \n string | \n
titleClassName | \n设置该列表头单元格 css 类名 | \n string | \n
render | \n自定义渲染函数 | \n ( text?: any, record?: Record< string, any >, index?: number ) => ¦ JSX.Element ¦ string | \n
width | \n列宽,单位 px | \n number | \n
sort | \n表头是否显示排序按钮 | \n boolean | \n
sortOrder | \n排序的受控属性 | \n attr: ¦ "ascend" ¦ "descend" ¦ undefined | \n
fixed | \n固定列 | \n "left" ¦ "right" | \n
expandable | \n该列是否启用点击展开收起功能,默认 true | \n boolean | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--table-primary-color | \n @black; | \n
底部弹起的模态面板,包含与当前情境相关的多个选项。
\n在 Taro 文件中引入组件
\nimport { ActionSheet } from '@antmjs/vantui'\n
\n需要传入一个actions
的数组,数组的每一项是一个对象,对象属性见文档下方表格。
/* eslint-disable */\nimport react from 'react'\nimport { ActionSheet, Button } from '@antmjs/vantui'\nimport type { ActionSheetItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [actions] = react.useState<ActionSheetItem[]>([\n {\n name: '选项1',\n },\n {\n name: '选项',\n },\n {\n name: '选项',\n subname: '描述信息',\n openType: 'share',\n },\n ])\n\n return (\n <>\n <ActionSheet\n show={show}\n actions={actions}\n onClose={() => setShow(false)}\n onSelect={(e) => console.info(e.detail)}\n />\n <Button type="primary" onClick={() => setShow(true)}>\n 弹出菜单\n </Button>\n </>\n )\n}\n\n
\n选项可以设置为加载状态或禁用状态。
\n/* eslint-disable */\nimport react from 'react'\nimport { ActionSheet, Button } from '@antmjs/vantui'\nimport type { ActionSheetItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [actions] = react.useState<ActionSheetItem[]>([\n {\n name: '着色选项',\n color: '#ee0a24',\n },\n {\n loading: true,\n },\n {\n name: '禁用选项',\n disabled: true,\n },\n ])\n\n return (\n <>\n <ActionSheet\n show={show}\n actions={actions}\n onClose={() => setShow(false)}\n />\n <Button type="primary" onClick={() => setShow(true)}>\n 弹出菜单\n </Button>\n </>\n )\n}\n\n
\n设置cancelText
属性后,会在底部展示取消按钮,点击后关闭当前菜单。
/* eslint-disable */\nimport react from 'react'\nimport { ActionSheet, Button } from '@antmjs/vantui'\nimport type { ActionSheetItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [actions] = react.useState<ActionSheetItem[]>([\n {\n name: '选项',\n },\n {\n name: '选项',\n },\n {\n name: '选项',\n subname: '描述信息',\n openType: 'share',\n },\n ])\n\n return (\n <>\n <ActionSheet\n show={show}\n actions={actions}\n cancelText="取消"\n onClose={() => setShow(false)}\n />\n <Button type="primary" onClick={() => setShow(true)}>\n 弹出菜单\n </Button>\n </>\n )\n}\n\n
\n设置description
属性后,会在选项上方显示描述信息。
/* eslint-disable */\nimport react from 'react'\nimport { ActionSheet, Button } from '@antmjs/vantui'\nimport type { ActionSheetItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [actions] = react.useState<ActionSheetItem[]>([\n {\n name: '选项',\n },\n {\n name: '选项',\n },\n {\n name: '选项',\n subname: '描述信息',\n openType: 'share',\n },\n ])\n\n return (\n <>\n <ActionSheet\n show={show}\n actions={actions}\n description="这是一段描述信息"\n onClose={() => setShow(false)}\n />\n <Button type="primary" onClick={() => setShow(true)}>\n 弹出菜单\n </Button>\n </>\n )\n}\n\n
\n通过设置title
属性展示标题栏,同时可以使用插槽自定义菜单内容。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { ActionSheet, Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n\n return (\n <>\n <ActionSheet show={show} title="标题" onClose={() => setShow(false)}>\n <View>内容</View>\n </ActionSheet>\n <Button type="primary" onClick={() => setShow(true)}>\n 弹出菜单\n </Button>\n </>\n )\n}\n\n
\n需要传入一个actions
的数组,数组的每一项是一个对象,对象属性见文档下方表格。
/* eslint-disable */\nimport react from 'react'\nimport { ActionSheet, Button } from '@antmjs/vantui'\nimport type { ActionSheetItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [actions] = react.useState<ActionSheetItem[]>([\n {\n name: '获取用户信息',\n color: '#07c160',\n openType: 'getUserInfo',\n onGetUserInfo: (e) => console.info(e.detail),\n },\n ])\n\n return (\n <>\n <ActionSheet\n show={show}\n actions={actions}\n onClose={() => setShow(false)}\n />\n <Button type="primary" onClick={() => setShow(true)}>\n 弹出菜单\n </Button>\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n
---|---|---|
name | \n- | \n ReactNode | \n
subname | \n- | \n ReactNode | \n
color | \n- | \n string | \n
loading | \n- | \n boolean | \n
disabled | \n- | \n boolean | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
actions | \n- | \n ActionSheetItem[] | \n- | \nfalse | \n
title | \n- | \n ReactNode | \n- | \nfalse | \n
show | \n- | \n boolean | \n- | \nfalse | \n
cancelText | \n- | \n ReactNode | \n- | \nfalse | \n
description | \n- | \n ReactNode | \n- | \nfalse | \n
overlay | \n- | \n boolean | \n- | \nfalse | \n
closeOnClickOverlay | \n- | \n boolean | \n- | \nfalse | \n
closeOnClickAction | \n- | \n boolean | \n- | \nfalse | \n
safeAreaInsetBottom | \n- | \n boolean | \n- | \nfalse | \n
round | \n- | \n boolean | \n- | \nfalse | \n
zIndex | \n- | \n number | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onSelect | \n- | \n ( event: ITouchEvent & { detail: ActionSheetItem } ) => void | \n- | \nfalse | \n
onCancel | \n- | \n () => void | \n- | \nfalse | \n
onClose | \n- | \n () => void | \n- | \nfalse | \n
onClickOverlay | \n- | \n () => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--action-sheet-max-height | \n 90%; | \n
--action-sheet-header-height | \n 96px; | \n
--action-sheet-header-font-size | \n @font-size-lg; | \n
--action-sheet-description-color | \n @gray-6; | \n
--action-sheet-description-font-size | \n @font-size-md; | \n
--action-sheet-description-line-height | \n 40px; | \n
--action-sheet-item-background | \n @white; | \n
--action-sheet-item-font-size | \n @font-size-lg; | \n
--action-sheet-item-line-height | \n 44px; | \n
--action-sheet-item-text-color | \n @text-color; | \n
--action-sheet-item-disabled-text-color | \n @gray-5; | \n
--action-sheet-subname-color | \n @gray-6; | \n
--action-sheet-subname-font-size | \n @font-size-sm; | \n
--action-sheet-subname-line-height | \n 40px; | \n
--action-sheet-close-icon-size | \n 44px; | \n
--action-sheet-close-icon-color | \n @gray-5; | \n
--action-sheet-close-icon-padding | \n 0 @padding-md; | \n
--action-sheet-cancel-text-color | \n @gray-7; | \n
--action-sheet-cancel-padding-top | \n @padding-xs; | \n
--action-sheet-cancel-padding-color | \n @background-color; | \n
底部弹起的模态面板,包含与当前情境相关的多个选项。
\n在 Taro 文件中引入组件
\nimport { ActionSheet } from '@antmjs/vantui'\n
\n需要传入一个actions
的数组,数组的每一项是一个对象,对象属性见文档下方表格。
/* eslint-disable */\nimport react from 'react'\nimport { ActionSheet, Button } from '@antmjs/vantui'\nimport type { ActionSheetItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [actions] = react.useState<ActionSheetItem[]>([\n {\n name: '选项1',\n },\n {\n name: '选项',\n },\n {\n name: '选项',\n subname: '描述信息',\n openType: 'share',\n },\n ])\n\n return (\n <>\n <ActionSheet\n show={show}\n actions={actions}\n onClose={() => setShow(false)}\n onSelect={(e) => console.info(e.detail)}\n />\n <Button type="primary" onClick={() => setShow(true)}>\n 弹出菜单\n </Button>\n </>\n )\n}\n\n
\n选项可以设置为加载状态或禁用状态。
\n/* eslint-disable */\nimport react from 'react'\nimport { ActionSheet, Button } from '@antmjs/vantui'\nimport type { ActionSheetItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [actions] = react.useState<ActionSheetItem[]>([\n {\n name: '着色选项',\n color: '#ee0a24',\n },\n {\n loading: true,\n },\n {\n name: '禁用选项',\n disabled: true,\n },\n ])\n\n return (\n <>\n <ActionSheet\n show={show}\n actions={actions}\n onClose={() => setShow(false)}\n />\n <Button type="primary" onClick={() => setShow(true)}>\n 弹出菜单\n </Button>\n </>\n )\n}\n\n
\n设置cancelText
属性后,会在底部展示取消按钮,点击后关闭当前菜单。
/* eslint-disable */\nimport react from 'react'\nimport { ActionSheet, Button } from '@antmjs/vantui'\nimport type { ActionSheetItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [actions] = react.useState<ActionSheetItem[]>([\n {\n name: '选项',\n },\n {\n name: '选项',\n },\n {\n name: '选项',\n subname: '描述信息',\n openType: 'share',\n },\n ])\n\n return (\n <>\n <ActionSheet\n show={show}\n actions={actions}\n cancelText="取消"\n onClose={() => setShow(false)}\n />\n <Button type="primary" onClick={() => setShow(true)}>\n 弹出菜单\n </Button>\n </>\n )\n}\n\n
\n设置description
属性后,会在选项上方显示描述信息。
/* eslint-disable */\nimport react from 'react'\nimport { ActionSheet, Button } from '@antmjs/vantui'\nimport type { ActionSheetItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [actions] = react.useState<ActionSheetItem[]>([\n {\n name: '选项',\n },\n {\n name: '选项',\n },\n {\n name: '选项',\n subname: '描述信息',\n openType: 'share',\n },\n ])\n\n return (\n <>\n <ActionSheet\n show={show}\n actions={actions}\n description="这是一段描述信息"\n onClose={() => setShow(false)}\n />\n <Button type="primary" onClick={() => setShow(true)}>\n 弹出菜单\n </Button>\n </>\n )\n}\n\n
\n通过设置title
属性展示标题栏,同时可以使用插槽自定义菜单内容。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { ActionSheet, Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n\n return (\n <>\n <ActionSheet show={show} title="标题" onClose={() => setShow(false)}>\n <View>内容</View>\n </ActionSheet>\n <Button type="primary" onClick={() => setShow(true)}>\n 弹出菜单\n </Button>\n </>\n )\n}\n\n
\n需要传入一个actions
的数组,数组的每一项是一个对象,对象属性见文档下方表格。
/* eslint-disable */\nimport react from 'react'\nimport { ActionSheet, Button } from '@antmjs/vantui'\nimport type { ActionSheetItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [show, setShow] = react.useState(false)\n const [actions] = react.useState<ActionSheetItem[]>([\n {\n name: '获取用户信息',\n color: '#07c160',\n openType: 'getUserInfo',\n onGetUserInfo: (e) => console.info(e.detail),\n },\n ])\n\n return (\n <>\n <ActionSheet\n show={show}\n actions={actions}\n onClose={() => setShow(false)}\n />\n <Button type="primary" onClick={() => setShow(true)}>\n 弹出菜单\n </Button>\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n
---|---|---|
name | \n- | \n ReactNode | \n
subname | \n- | \n ReactNode | \n
color | \n- | \n string | \n
loading | \n- | \n boolean | \n
disabled | \n- | \n boolean | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
actions | \n- | \n ActionSheetItem[] | \n- | \nfalse | \n
title | \n- | \n ReactNode | \n- | \nfalse | \n
show | \n- | \n boolean | \n- | \nfalse | \n
cancelText | \n- | \n ReactNode | \n- | \nfalse | \n
description | \n- | \n ReactNode | \n- | \nfalse | \n
overlay | \n- | \n boolean | \n- | \nfalse | \n
closeOnClickOverlay | \n- | \n boolean | \n- | \nfalse | \n
closeOnClickAction | \n- | \n boolean | \n- | \nfalse | \n
safeAreaInsetBottom | \n- | \n boolean | \n- | \nfalse | \n
round | \n- | \n boolean | \n- | \nfalse | \n
zIndex | \n- | \n number | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onSelect | \n- | \n ( event: ITouchEvent & { detail: ActionSheetItem } ) => void | \n- | \nfalse | \n
onCancel | \n- | \n () => void | \n- | \nfalse | \n
onClose | \n- | \n () => void | \n- | \nfalse | \n
onClickOverlay | \n- | \n () => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--action-sheet-max-height | \n 90%; | \n
--action-sheet-header-height | \n 96px; | \n
--action-sheet-header-font-size | \n @font-size-lg; | \n
--action-sheet-description-color | \n @gray-6; | \n
--action-sheet-description-font-size | \n @font-size-md; | \n
--action-sheet-description-line-height | \n 40px; | \n
--action-sheet-item-background | \n @white; | \n
--action-sheet-item-font-size | \n @font-size-lg; | \n
--action-sheet-item-line-height | \n 44px; | \n
--action-sheet-item-text-color | \n @text-color; | \n
--action-sheet-item-disabled-text-color | \n @gray-5; | \n
--action-sheet-subname-color | \n @gray-6; | \n
--action-sheet-subname-font-size | \n @font-size-sm; | \n
--action-sheet-subname-line-height | \n 40px; | \n
--action-sheet-close-icon-size | \n 44px; | \n
--action-sheet-close-icon-color | \n @gray-5; | \n
--action-sheet-close-icon-padding | \n 0 @padding-md; | \n
--action-sheet-cancel-text-color | \n @gray-7; | \n
--action-sheet-cancel-padding-top | \n @padding-xs; | \n
--action-sheet-cancel-padding-color | \n @background-color; | \n
常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。
\nimport { Swiper, SwiperItem } from '@antmjs/vantui'\n
\nautoPlay
自动轮播的时长\ninitPage
初始索引值\npaginationVisible
是否显示分页指示器\npaginationColor
指示器颜色自定义\nonChange
当卡片发生变化
组件和图片项的高度也可以通过class
写入
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Swiper, SwiperItem, Image } from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nconst { images } = COMMON\n\nexport default function Demo() {\n const [initPage1] = react.useState(0)\n const [height, setHeight] = react.useState(200)\n\n react.useEffect(() => {\n setTimeout(() => {\n setHeight(220)\n }, 2000)\n })\n\n return (\n <View className="demo-box">\n <Swiper\n height={height}\n paginationColor="#426543"\n autoPlay="3000"\n initPage={initPage1}\n paginationVisible\n >\n {images.map((item, index) => (\n <SwiperItem key={::::_QAswiper#demo1::::_ABindex}::::_QA}>\n <Image src={item} fit="cover" width="100%" height={::::_QA::::_ABheight}px::::_QA} />\n </SwiperItem>\n ))}\n </Swiper>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nexport const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',\n]\n\n
\n图片数据
\nconst images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',\n]\n
\n支持动态增加/删除图片
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Swiper, SwiperItem, Image } from '@antmjs/vantui'\nimport * as COMMON from './common'\nexport default function Demo() {\n const { images } = COMMON\n const [initPage1] = react.useState(0)\n const [list, setList] = react.useState(images)\n\n react.useEffect(() => {\n setTimeout(() => {\n const arr = list.slice()\n arr.splice(1, 1)\n setList(arr)\n }, 3000)\n }, [])\n\n return (\n <View className="demo-box">\n <Swiper\n height={200}\n paginationColor="#426543"\n autoPlay="3000"\n initPage={initPage1}\n paginationVisible\n >\n {list.map((item, index) => {\n return (\n <SwiperItem key={::::_QAswiper#demo2::::_ABindex}::::_QA}>\n <Image src={item} fit="cover" width="100%" height="200px" />\n </SwiperItem>\n )\n })}\n </Swiper>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nexport const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',\n]\n\n
\nwidth
自定义轮播宽度
import { View } from '@tarojs/components'\nimport { Swiper, SwiperItem, Image } from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nexport default function Demo() {\n const { images } = COMMON\n return (\n <View className="demo-box">\n <Swiper\n paginationColor="#426543"\n autoPlay="3000"\n initPage={0}\n paginationVisible\n width={300}\n height={200}\n >\n {images.map((item, index) => (\n <SwiperItem key={::::_QAswiper#demo3::::_ABindex}::::_QA}>\n <Image src={item} fit="cover" width="100%" height="200px" />\n </SwiperItem>\n ))}\n </Swiper>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nexport const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',\n]\n\n
\npageContent
表示自定义指示器
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Swiper, SwiperItem, Image } from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nexport default function Demo() {\n const { images } = COMMON\n const [current, setCurrent] = react.useState(0)\n\n const style: React.CSSProperties = {\n position: 'absolute',\n bottom: 0,\n right: 0,\n width: 46,\n height: 22,\n background: 'rgba(0,0,0,.33)',\n borderRadius: 22,\n textAlign: 'center',\n color: '#fff',\n fontSize: 14,\n }\n\n return (\n <View className="demo-box">\n <Swiper\n height={200}\n paginationVisible\n paginationColor="#426543"\n autoPlay="3000"\n initPage={current}\n onChange={(e) => setCurrent(e + 1)}\n pageContent={<div style={style}> {current}/4 </div>}\n >\n {images.map((item, index) => (\n <SwiperItem key={::::_QAswiper#demo4::::_ABindex}::::_QA}>\n <Image src={item} fit="cover" width="100%" height="200px" />\n </SwiperItem>\n ))}\n </Swiper>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nexport const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',\n]\n\n
\ndirection
自定义轮播方向
import { View } from '@tarojs/components'\nimport { Swiper, SwiperItem, Image } from '@antmjs/vantui'\nimport * as COMMON from './common'\nexport default function Demo() {\n const { images } = COMMON\n\n return (\n <View className="demo-box">\n <Swiper\n height={200}\n paginationVisible\n autoPlay={3000}\n direction="vertical"\n initPage={0}\n paginationColor="#426543"\n >\n {images.map((item, index) => (\n <SwiperItem key={::::_QAswiper#demo5::::_ABindex}::::_QA}>\n <Image src={item} fit="cover" width="100%" height="200px" />\n </SwiperItem>\n ))}\n </Swiper>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nexport const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',\n]\n\n
\nisCenter
代表可居中,同时必须传 width
import { View } from '@tarojs/components'\nimport { Swiper, SwiperItem, Image } from '@antmjs/vantui'\nimport * as COMMON from './common'\nexport default function Demo() {\n const { images } = COMMON\n\n return (\n <View className="demo-box">\n <Swiper\n autoPlay={3000}\n height={150}\n paginationVisible\n width={280}\n isCenter\n >\n {images.map((item, index) => (\n <SwiperItem key={::::_QAswiper#demo5::::_ABindex}::::_QA}>\n <Image src={item} fit="cover" width="100%" height="200px" />\n </SwiperItem>\n ))}\n </Swiper>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nexport const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',\n]\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
width | \n轮播卡片的宽度 | \n number ¦ string | \n窗口宽度 | \nfalse | \n
height | \n轮播卡片的高度 | \n number ¦ string | \n- | \ntrue | \n
duration | \n动画时长(单位是 ms) | \n number ¦ string | \n500 | \nfalse | \n
initPage | \n初始化索引值 | \n number ¦ string | \n- | \nfalse | \n
autoPlay | \n自动轮播时长,0 表示不会自动轮播 | \n number ¦ string | \n- | \ntrue | \n
direction | \n轮播方向,可选值 horizontal,vertical | \n attr: ¦ "horizontal" ¦ "vertical" | \n- | \nfalse | \n
paginationColor | \n分页指示器选中的颜色 | \n string | \n#fff | \nfalse | \n
paginationVisible | \n分页指示器是否展示 | \n boolean | \ntrue | \nfalse | \n
loop | \n是否循环轮播 | \n boolean | \ntrue | \nfalse | \n
touchable | \n是否可以手动滑动 | \n boolean | \ntrue | \nfalse | \n
isPreventDefault | \n滑动过程中是否禁用默认事件 | \n boolean | \n- | \nfalse | \n
isStopPropagation | \n滑动过程中是否禁止冒泡 | \n boolean | \n- | \nfalse | \n
isCenter | \n是否居中展示,必须传对应的 width 和 height | \n boolean | \nfalse | \nfalse | \n
className | \n- | \n string | \n- | \nfalse | \n
style | \n- | \n React.CSSProperties | \n- | \nfalse | \n
pageContent | \n自定义指示器 | \n React.ReactNode | \n- | \nfalse | \n
onChange | \n卡片切换后的回调 | \n ( currPage: number ) => void | \n- | \nfalse | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
to | \n切换到指定页 | \n ( index: number ) => void | \n
next | \n切换到下一页 | \n () => void | \n
prev | \n切换到上一页 | \n () => void | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
direction | \n- | \n string | \n- | \nfalse | \n
size | \n- | \n 0 | \n- | \nfalse | \n
className | \n- | \n string | \n- | \nfalse | \n
children | \n- | \n React.ReactNode | \n- | \ntrue | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--swiper-pagination-item-background-color | \n #ddd; | \n
常用于一组图片或卡片轮播,当内容空间不足时,可以用走马灯的形式进行收纳,进行轮播展现。
\nimport { Swiper, SwiperItem } from '@antmjs/vantui'\n
\nautoPlay
自动轮播的时长\ninitPage
初始索引值\npaginationVisible
是否显示分页指示器\npaginationColor
指示器颜色自定义\nonChange
当卡片发生变化
组件和图片项的高度也可以通过class
写入
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Swiper, SwiperItem, Image } from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nconst { images } = COMMON\n\nexport default function Demo() {\n const [initPage1] = react.useState(0)\n const [height, setHeight] = react.useState(200)\n\n react.useEffect(() => {\n setTimeout(() => {\n setHeight(220)\n }, 2000)\n })\n\n return (\n <View className="demo-box">\n <Swiper\n height={height}\n paginationColor="#426543"\n autoPlay="3000"\n initPage={initPage1}\n paginationVisible\n >\n {images.map((item, index) => (\n <SwiperItem key={::::_QAswiper#demo1::::_ABindex}::::_QA}>\n <Image src={item} fit="cover" width="100%" height={::::_QA::::_ABheight}px::::_QA} />\n </SwiperItem>\n ))}\n </Swiper>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nexport const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',\n]\n\n
\n图片数据
\nconst images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',\n]\n
\n支持动态增加/删除图片
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Swiper, SwiperItem, Image } from '@antmjs/vantui'\nimport * as COMMON from './common'\nexport default function Demo() {\n const { images } = COMMON\n const [initPage1] = react.useState(0)\n const [list, setList] = react.useState(images)\n\n react.useEffect(() => {\n setTimeout(() => {\n const arr = list.slice()\n arr.splice(1, 1)\n setList(arr)\n }, 3000)\n }, [])\n\n return (\n <View className="demo-box">\n <Swiper\n height={200}\n paginationColor="#426543"\n autoPlay="3000"\n initPage={initPage1}\n paginationVisible\n >\n {list.map((item, index) => {\n return (\n <SwiperItem key={::::_QAswiper#demo2::::_ABindex}::::_QA}>\n <Image src={item} fit="cover" width="100%" height="200px" />\n </SwiperItem>\n )\n })}\n </Swiper>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nexport const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',\n]\n\n
\nwidth
自定义轮播宽度
import { View } from '@tarojs/components'\nimport { Swiper, SwiperItem, Image } from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nexport default function Demo() {\n const { images } = COMMON\n return (\n <View className="demo-box">\n <Swiper\n paginationColor="#426543"\n autoPlay="3000"\n initPage={0}\n paginationVisible\n width={300}\n height={200}\n >\n {images.map((item, index) => (\n <SwiperItem key={::::_QAswiper#demo3::::_ABindex}::::_QA}>\n <Image src={item} fit="cover" width="100%" height="200px" />\n </SwiperItem>\n ))}\n </Swiper>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nexport const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',\n]\n\n
\npageContent
表示自定义指示器
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Swiper, SwiperItem, Image } from '@antmjs/vantui'\nimport * as COMMON from './common'\n\nexport default function Demo() {\n const { images } = COMMON\n const [current, setCurrent] = react.useState(0)\n\n const style: React.CSSProperties = {\n position: 'absolute',\n bottom: 0,\n right: 0,\n width: 46,\n height: 22,\n background: 'rgba(0,0,0,.33)',\n borderRadius: 22,\n textAlign: 'center',\n color: '#fff',\n fontSize: 14,\n }\n\n return (\n <View className="demo-box">\n <Swiper\n height={200}\n paginationVisible\n paginationColor="#426543"\n autoPlay="3000"\n initPage={current}\n onChange={(e) => setCurrent(e + 1)}\n pageContent={<div style={style}> {current}/4 </div>}\n >\n {images.map((item, index) => (\n <SwiperItem key={::::_QAswiper#demo4::::_ABindex}::::_QA}>\n <Image src={item} fit="cover" width="100%" height="200px" />\n </SwiperItem>\n ))}\n </Swiper>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nexport const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',\n]\n\n
\ndirection
自定义轮播方向
import { View } from '@tarojs/components'\nimport { Swiper, SwiperItem, Image } from '@antmjs/vantui'\nimport * as COMMON from './common'\nexport default function Demo() {\n const { images } = COMMON\n\n return (\n <View className="demo-box">\n <Swiper\n height={200}\n paginationVisible\n autoPlay={3000}\n direction="vertical"\n initPage={0}\n paginationColor="#426543"\n >\n {images.map((item, index) => (\n <SwiperItem key={::::_QAswiper#demo5::::_ABindex}::::_QA}>\n <Image src={item} fit="cover" width="100%" height="200px" />\n </SwiperItem>\n ))}\n </Swiper>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nexport const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',\n]\n\n
\nisCenter
代表可居中,同时必须传 width
import { View } from '@tarojs/components'\nimport { Swiper, SwiperItem, Image } from '@antmjs/vantui'\nimport * as COMMON from './common'\nexport default function Demo() {\n const { images } = COMMON\n\n return (\n <View className="demo-box">\n <Swiper\n autoPlay={3000}\n height={150}\n paginationVisible\n width={280}\n isCenter\n >\n {images.map((item, index) => (\n <SwiperItem key={::::_QAswiper#demo5::::_ABindex}::::_QA}>\n <Image src={item} fit="cover" width="100%" height="200px" />\n </SwiperItem>\n ))}\n </Swiper>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nexport const images = [\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',\n 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',\n]\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
width | \n轮播卡片的宽度 | \n number ¦ string | \n窗口宽度 | \nfalse | \n
height | \n轮播卡片的高度 | \n number ¦ string | \n- | \ntrue | \n
duration | \n动画时长(单位是 ms) | \n number ¦ string | \n500 | \nfalse | \n
initPage | \n初始化索引值 | \n number ¦ string | \n- | \nfalse | \n
autoPlay | \n自动轮播时长,0 表示不会自动轮播 | \n number ¦ string | \n- | \ntrue | \n
direction | \n轮播方向,可选值 horizontal,vertical | \n attr: ¦ "horizontal" ¦ "vertical" | \n- | \nfalse | \n
paginationColor | \n分页指示器选中的颜色 | \n string | \n#fff | \nfalse | \n
paginationVisible | \n分页指示器是否展示 | \n boolean | \ntrue | \nfalse | \n
loop | \n是否循环轮播 | \n boolean | \ntrue | \nfalse | \n
touchable | \n是否可以手动滑动 | \n boolean | \ntrue | \nfalse | \n
isPreventDefault | \n滑动过程中是否禁用默认事件 | \n boolean | \n- | \nfalse | \n
isStopPropagation | \n滑动过程中是否禁止冒泡 | \n boolean | \n- | \nfalse | \n
isCenter | \n是否居中展示,必须传对应的 width 和 height | \n boolean | \nfalse | \nfalse | \n
className | \n- | \n string | \n- | \nfalse | \n
style | \n- | \n React.CSSProperties | \n- | \nfalse | \n
pageContent | \n自定义指示器 | \n React.ReactNode | \n- | \nfalse | \n
onChange | \n卡片切换后的回调 | \n ( currPage: number ) => void | \n- | \nfalse | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
to | \n切换到指定页 | \n ( index: number ) => void | \n
next | \n切换到下一页 | \n () => void | \n
prev | \n切换到上一页 | \n () => void | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
direction | \n- | \n string | \n- | \nfalse | \n
size | \n- | \n 0 | \n- | \nfalse | \n
className | \n- | \n string | \n- | \nfalse | \n
children | \n- | \n React.ReactNode | \n- | \ntrue | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--swiper-pagination-item-background-color | \n #ddd; | \n
省市区选择组件通常与 弹出层 组件配合使用。
\n在 Taro 文件中引入组件
\nimport { Area } from '@antmjs/vantui'\n
\n初始化省市区组件时,需要通过 areaList
属性传入省市区数据。
import { View } from '@tarojs/components'\nimport { Area } from '@antmjs/vantui'\n\nexport default function Demo() {\n const areaList = {\n province_list: {\n 110000: '北京市',\n 120000: '天津市',\n },\n city_list: {\n 110100: '北京市',\n 120100: '天津市',\n },\n county_list: {\n 110101: '东城区',\n 110102: '西城区',\n },\n }\n return (\n <View>\n <Area areaList={areaList} />\n </View>\n )\n}\n\n
\nareaList 为对象结构,包含 province_list
、city_list
、county_list
三个 key。
每项以地区码作为 key,省市区名字作为 value。地区码为 6 位数字,前两位代表省份,中间两位代表城市,后两位代表区县,以 0 补足 6 位。比如北京的地区码为 11
,以 0 补足 6 位,为 110000
。
示例数据如下:
\nconst areaList = {\n province_list: {\n 110000: '北京市',\n 120000: '天津市',\n },\n city_list: {\n 110100: '北京市',\n 120100: '天津市',\n },\n county_list: {\n 110101: '东城区',\n 110102: '西城区',\n // ....\n },\n}\n
\nVant 官方提供了一份默认的省市区数据,可以通过 @vant/area-data 引入。
\nyarn add @vant/area-data\n
\n如果想选中某个省市区,需要传入一个value
属性,绑定对应的省市区code
。
/* eslint-disable */\nimport react from 'react'\nimport { Area } from '@antmjs/vantui'\n\nimport { areaList } from '@vant/area-data'\nexport default function Demo() {\n const [value, setValue] = react.useState('')\n react.useEffect(() => {\n setTimeout(() => {\n setValue('210793')\n }, 2000)\n }, [])\n\n return <Area areaList={areaList} value={value} />\n}\n\n
\n可以通过columnsNum
属性配置省市区显示的列数,默认情况下会显示省市区,当你设置为2
,则只会显示省市选择。
/* eslint-disable */\nimport { Area } from '@antmjs/vantui'\n\nimport { areaList } from '@vant/area-data'\nexport default function Demo() {\n return <Area areaList={areaList} columnsNum={2} title="标题" />\n}\n\n
\n可以通过columnsPlaceholder
属性配置每一列的占位提示文字。
/* eslint-disable */\nimport { Area } from '@antmjs/vantui'\n\nimport { areaList } from '@vant/area-data'\n\nexport default function Demo() {\n return (\n <Area\n areaList={areaList}\n columnsPlaceholder={['请选择', '请选择', '请选择']}\n title="标题"\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
showToolbar | \n- | \n boolean | \n- | \nfalse | \n
value | \n- | \n string | \n- | \nfalse | \n
areaList | \n- | \n { province_list: { [ x: number ¦ string ]: string } city_list: { [ x: number ¦ string ]: string } county_list: { [ x: number ¦ string ]: string } } | \n- | \nfalse | \n
columnsNum | \n- | \n string ¦ number | \n- | \nfalse | \n
columnsPlaceholder | \n- | \n string[] | \n- | \nfalse | \n
onChange | \n- | \n (event: { detail: { values: ¦ number[] ¦ string[] picker: IPickerInstance index: number } }) => void | \n- | \nfalse | \n
省市区选择组件通常与 弹出层 组件配合使用。
\n在 Taro 文件中引入组件
\nimport { Area } from '@antmjs/vantui'\n
\n初始化省市区组件时,需要通过 areaList
属性传入省市区数据。
import { View } from '@tarojs/components'\nimport { Area } from '@antmjs/vantui'\n\nexport default function Demo() {\n const areaList = {\n province_list: {\n 110000: '北京市',\n 120000: '天津市',\n },\n city_list: {\n 110100: '北京市',\n 120100: '天津市',\n },\n county_list: {\n 110101: '东城区',\n 110102: '西城区',\n },\n }\n return (\n <View>\n <Area areaList={areaList} />\n </View>\n )\n}\n\n
\nareaList 为对象结构,包含 province_list
、city_list
、county_list
三个 key。
每项以地区码作为 key,省市区名字作为 value。地区码为 6 位数字,前两位代表省份,中间两位代表城市,后两位代表区县,以 0 补足 6 位。比如北京的地区码为 11
,以 0 补足 6 位,为 110000
。
示例数据如下:
\nconst areaList = {\n province_list: {\n 110000: '北京市',\n 120000: '天津市',\n },\n city_list: {\n 110100: '北京市',\n 120100: '天津市',\n },\n county_list: {\n 110101: '东城区',\n 110102: '西城区',\n // ....\n },\n}\n
\nVant 官方提供了一份默认的省市区数据,可以通过 @vant/area-data 引入。
\nyarn add @vant/area-data\n
\n如果想选中某个省市区,需要传入一个value
属性,绑定对应的省市区code
。
/* eslint-disable */\nimport react from 'react'\nimport { Area } from '@antmjs/vantui'\n\nimport { areaList } from '@vant/area-data'\nexport default function Demo() {\n const [value, setValue] = react.useState('')\n react.useEffect(() => {\n setTimeout(() => {\n setValue('210793')\n }, 2000)\n }, [])\n\n return <Area areaList={areaList} value={value} />\n}\n\n
\n可以通过columnsNum
属性配置省市区显示的列数,默认情况下会显示省市区,当你设置为2
,则只会显示省市选择。
/* eslint-disable */\nimport { Area } from '@antmjs/vantui'\n\nimport { areaList } from '@vant/area-data'\nexport default function Demo() {\n return <Area areaList={areaList} columnsNum={2} title="标题" />\n}\n\n
\n可以通过columnsPlaceholder
属性配置每一列的占位提示文字。
/* eslint-disable */\nimport { Area } from '@antmjs/vantui'\n\nimport { areaList } from '@vant/area-data'\n\nexport default function Demo() {\n return (\n <Area\n areaList={areaList}\n columnsPlaceholder={['请选择', '请选择', '请选择']}\n title="标题"\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
showToolbar | \n- | \n boolean | \n- | \nfalse | \n
value | \n- | \n string | \n- | \nfalse | \n
areaList | \n- | \n { province_list: { [ x: number ¦ string ]: string } city_list: { [ x: number ¦ string ]: string } county_list: { [ x: number ¦ string ]: string } } | \n- | \nfalse | \n
columnsNum | \n- | \n string ¦ number | \n- | \nfalse | \n
columnsPlaceholder | \n- | \n string[] | \n- | \nfalse | \n
onChange | \n- | \n (event: { detail: { values: ¦ number[] ¦ string[] picker: IPickerInstance index: number } }) => void | \n- | \nfalse | \n
为页面提供导航功能,常用于页面顶部。
\n在 Taro 文件中引入组件
\nimport { NavBar, MiniNavBar } from '@antmjs/vantui'\n
\nfunction Demo() {\n return (\n <View>\n <NavBar\n title="标题"\n leftText="返回"\n rightText="按钮"\n leftArrow\n onClickLeft={() => Toast.show({ message: '点击按钮 返回' })}\n onClickRight={() => Toast.show({ message: '点击按钮 right' })}\n />\n <Toast />\n </View>\n )\n}\n
\nfunction Demo() {\n return (\n <View>\n <NavBar\n title="标题"\n leftText="返回"\n leftArrow\n safeAreaInsetTop={false}\n renderRight={<Icon name="search" className="icon" size="36"></Icon>}\n />\n </View>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
title | \n- | \n ReactNode | \n- | \nfalse | \n
fixed | \n- | \n boolean | \n- | \nfalse | \n
placeholder | \n- | \n boolean | \n- | \nfalse | \n
leftText | \n- | \n ReactNode | \n- | \nfalse | \n
rightText | \n- | \n ReactNode | \n- | \nfalse | \n
style | \n- | \n string | \n- | \nfalse | \n
leftArrow | \n- | \n boolean | \n- | \nfalse | \n
border | \n- | \n boolean | \n- | \nfalse | \n
zIndex | \n- | \n number | \n- | \nfalse | \n
safeAreaInsetTop | \n- | \n boolean | \n- | \nfalse | \n
renderTitle | \n- | \n ReactNode | \n- | \nfalse | \n
renderLeft | \n- | \n ReactNode | \n- | \nfalse | \n
renderRight | \n- | \n ReactNode | \n- | \nfalse | \n
onClickLeft | \n- | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onClickRight | \n- | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--nav-bar-height | \n 92px; // 对MiniNavbar无效 | \n
--nav-bar-background-color | \n @white; | \n
--nav-bar-arrow-size | \n 32px; // 对MiniNavbar无效 | \n
--nav-bar-icon-color | \n var(--primary-color); | \n
--nav-bar-text-color | \n var(--primary-color); | \n
--nav-bar-title-font-size | \n @font-size-lg; | \n
--nav-bar-title-text-color | \n @text-color; | \n
为页面提供导航功能,常用于页面顶部。
\n在 Taro 文件中引入组件
\nimport { NavBar, MiniNavBar } from '@antmjs/vantui'\n
\nfunction Demo() {\n return (\n <View>\n <NavBar\n title="标题"\n leftText="返回"\n rightText="按钮"\n leftArrow\n onClickLeft={() => Toast.show({ message: '点击按钮 返回' })}\n onClickRight={() => Toast.show({ message: '点击按钮 right' })}\n />\n <Toast />\n </View>\n )\n}\n
\nfunction Demo() {\n return (\n <View>\n <NavBar\n title="标题"\n leftText="返回"\n leftArrow\n safeAreaInsetTop={false}\n renderRight={<Icon name="search" className="icon" size="36"></Icon>}\n />\n </View>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
title | \n- | \n ReactNode | \n- | \nfalse | \n
fixed | \n- | \n boolean | \n- | \nfalse | \n
placeholder | \n- | \n boolean | \n- | \nfalse | \n
leftText | \n- | \n ReactNode | \n- | \nfalse | \n
rightText | \n- | \n ReactNode | \n- | \nfalse | \n
style | \n- | \n string | \n- | \nfalse | \n
leftArrow | \n- | \n boolean | \n- | \nfalse | \n
border | \n- | \n boolean | \n- | \nfalse | \n
zIndex | \n- | \n number | \n- | \nfalse | \n
safeAreaInsetTop | \n- | \n boolean | \n- | \nfalse | \n
renderTitle | \n- | \n ReactNode | \n- | \nfalse | \n
renderLeft | \n- | \n ReactNode | \n- | \nfalse | \n
renderRight | \n- | \n ReactNode | \n- | \nfalse | \n
onClickLeft | \n- | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
onClickRight | \n- | \n ( e: ITouchEvent ) => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--nav-bar-height | \n 92px; // 对MiniNavbar无效 | \n
--nav-bar-background-color | \n @white; | \n
--nav-bar-arrow-size | \n 32px; // 对MiniNavbar无效 | \n
--nav-bar-icon-color | \n var(--primary-color); | \n
--nav-bar-text-color | \n var(--primary-color); | \n
--nav-bar-title-font-size | \n @font-size-lg; | \n
--nav-bar-title-text-color | \n @text-color; | \n
用于为数据入录、校验,支持输入框、开关、文件上传等组件类型,支持自定义组件
\n在 Taro 文件中引入组件
\nimport { Form, FormItem } from '@antmjs/vantui'\n
\n可以通过 buton 点击事件onClick
中在 form 实例 submit 获取数据并处理,或者通过 button 的formType
触发 onFinish\nFormItem 需要代理下级表单组件的值和触发事件
onChange
, 通过FormItem.trigger
重新设置value
, 通过FormItem.valueKey
重新设置event.detail
, 通过FormItem.valueFormat
重新设置案例
\n/* eslint-disable */\nimport react from 'react'\nimport { Input } from '@tarojs/components'\nimport {\n Form,\n FormItem,\n Icon,\n Switch,\n RadioGroup,\n Radio,\n CheckboxGroup,\n Checkbox,\n Slider,\n Rate,\n Stepper,\n Button,\n Dialog,\n} from '@antmjs/vantui'\n\nexport default function Demo() {\n const formIt = Form.useForm()\n const [, forceUpdate] = react.useState({})\n // 注册不能回调函数设置必填的提示文案\n react.useEffect(() => {\n formIt.registerRequiredMessageCallback((label) => {\n return ::::_QA::::_ABlabel}真的不能为空啊::::_QA\n })\n\n // setTimeout(() => {\n formIt.setErrorMessage('userName', '这是自定义错误xxxxx')\n // }, 1000)\n }, [])\n\n const handleClick = () => {\n formIt.validateFields((errorMessage, fieldValues) => {\n if (errorMessage && errorMessage.length) {\n Dialog.alert({\n message: ::::_QAerrorMessage: ::::_ABJSON.stringify(errorMessage)}::::_QA,\n selector: '#form-demo11',\n })\n return console.info('errorMessage', errorMessage)\n }\n\n Dialog.alert({\n message: ::::_QAresult: ::::_ABJSON.stringify(fieldValues)}::::_QA,\n selector: '#form-demo11',\n })\n })\n }\n // @ts-ignore\n const dynamicRule = react.useMemo(() => {\n if (formIt.getFieldValue('singleSelect') === '1') {\n return {\n rule: /^[1-9]d{5}(18|19|([23]d))d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)d{3}[0-9Xx]$/,\n message: '输入正确的身份证',\n }\n }\n\n if (formIt.getFieldValue('singleSelect') === '2') {\n return {\n rule: /^[0-9]{6}$/,\n message: '请输入6位数的驾驶证',\n }\n }\n }, [formIt.getFieldValue('singleSelect')])\n\n const dynamicPlaceHolder = react.useMemo(() => {\n if (formIt.getFieldValue('singleSelect') === '1') {\n return '请输入身份证'\n }\n\n if (formIt.getFieldValue('singleSelect') === '2') {\n return '请输入驾驶证'\n }\n return ''\n }, [formIt.getFieldValue('singleSelect')])\n\n return (\n <>\n <Form\n initialValues={{\n userName: '我是初始值',\n singleSelect: '1',\n rate: 2,\n slider: '50',\n }}\n form={formIt}\n onFinish={(errs, res) => console.info(errs, res)}\n >\n <FormItem\n label="用户名"\n name="userName"\n required\n rules={{\n rule: /[u4e00-u9fa5]/,\n message: '用户名仅支持中文',\n }}\n trigger="onInput"\n validateTrigger="onBlur"\n // taro的input的onInput事件返回对应表单的最终值为e.detail.value\n valueFormat={(e) => e.detail.value}\n renderRight={<Icon name="user-o" />}\n >\n <Input placeholder="请输入用户名(中文)" />\n </FormItem>\n\n <FormItem label="是否打开" name="opened" valueKey="checked">\n <Switch activeColor="#07c160" inactiveColor="#07c160" />\n </FormItem>\n\n <FormItem label="证件类型" name="singleSelect">\n {/** 后续版本, 开发 FormItem.dependencies, 实现不需要 forceUpdate 来更新 getFieldValue('xx') */}\n <RadioGroup\n direction="horizontal"\n onChange={(e) => {\n formIt.setFieldsValue('cardId', '')\n forceUpdate(e)\n }}\n >\n <Radio name="1" checkedColor="#07c160">\n 身份证\n </Radio>\n <Radio name="2" checkedColor="#07c160">\n 驾驶证\n </Radio>\n </RadioGroup>\n </FormItem>\n\n <FormItem\n label="证件号"\n name="cardId"\n required\n valueFormat={(e) => e.detail.value}\n rules={dynamicRule}\n trigger="onInput"\n >\n <Input placeholder={dynamicPlaceHolder} />\n </FormItem>\n\n <FormItem label="复选框" name="muiltSelect">\n <CheckboxGroup direction="horizontal">\n <Checkbox name="1" shape="square" checkedColor="#07c160">\n 复选框 1\n </Checkbox>\n <Checkbox name="2" shape="square" checkedColor="#07c160">\n 复选框 2\n </Checkbox>\n </CheckboxGroup>\n </FormItem>\n\n <FormItem label="滑块选择" name="slider">\n <Slider\n activeColor="#07c160"\n style={{ width: '200px', marginTop: '10px' }}\n />\n </FormItem>\n\n <FormItem label="评分" name="rate">\n <Rate />\n </FormItem>\n\n <FormItem label="步进器" name="stepper">\n <Stepper />\n </FormItem>\n <Button\n type="primary"\n className="van-button-submit"\n onClick={handleClick}\n // formType="submit"\n >\n 提交\n </Button>\n </Form>\n <Dialog id="form-demo11" />\n </>\n )\n}\n\n
\n案例如下:
\n/* eslint-disable */\nimport react from 'react'\nimport { Input } from '@tarojs/components'\nimport {\n FormItem,\n Form,\n Button,\n Dialog,\n IFormInstanceAPI,\n} from '@antmjs/vantui'\n\n// 可以异步请求初始化,放在state里面\nconst initialValues = {\n mutiData: { a: [1, 2, 3, 4] },\n useInfo: [\n {\n name: 'bbbb',\n age: 12,\n },\n {\n name: 'aaaa',\n age: 13,\n },\n ],\n}\nexport default function Demo() {\n const formIt = react.useRef<IFormInstanceAPI>(null)\n\n const multFormItems = function () {\n let jsx: JSX.Element[] = []\n for (let i = 0; i < 2; i++) {\n jsx.push(\n <>\n <FormItem\n label={::::_QA名称(::::_ABi + 1})::::_QA}\n name={['useInfo', i, 'name']}\n trigger="onInput"\n valueFormat={(e) => e.detail.value}\n >\n <Input placeholder="请输入用户名" />\n </FormItem>\n <FormItem\n label={::::_QA年龄(::::_ABi + 1})::::_QA}\n name={['useInfo', i, 'age']}\n trigger="onInput"\n valueFormat={(e) => e.detail.value}\n >\n <Input placeholder="请输入年龄" />\n </FormItem>\n </>,\n )\n }\n return jsx\n }\n\n return (\n <Form ref={formIt} initialValues={initialValues}>\n {multFormItems()}\n <FormItem name="mutiData" mutiLevel label="复杂数据">\n <_MutiData />\n </FormItem>\n <Button\n className="van-button-submit"\n formType="submit"\n onClick={() => {\n Dialog.alert({\n message: ::::_QAresult: ::::_ABJSON.stringify(\n formIt.current?.getFieldsValue(),\n )}::::_QA,\n selector: 'form-demo3',\n })\n }}\n >\n 提交\n </Button>\n <Dialog id="form-demo3" />\n </Form>\n )\n}\n\nfunction _MutiData(value) {\n return <>{JSON.stringify(value)}</>\n}\n\n
\n案例如下:
\n/* eslint-disable */\nimport react from 'react'\nimport {\n Toast,\n Form,\n FormItem,\n Uploader,\n IFormInstanceAPI,\n} from '@antmjs/vantui'\n\nexport default function Demo() {\n const formIt = react.useRef<IFormInstanceAPI>(null)\n\n const valueFormatUpload = (event, formName, instance) => {\n Toast.loading('上传中...')\n const { file } = event.detail\n let fileList = instance.getFieldValue(formName) || []\n fileList = fileList.concat(file)\n // 异步更新\n return new Promise((resolve) => {\n setTimeout(() => {\n Toast.clear()\n resolve(fileList)\n }, 3000)\n })\n }\n\n const deleteFile = (event) => {\n const { index, fileList } = event.detail\n fileList.splice(index, 1)\n\n formIt.current?.setFieldsValue('file', fileList)\n }\n return (\n <>\n <Toast id="form-demo2-loading" />\n <Form ref={formIt}>\n <FormItem\n name="file"\n mutiLevel\n required\n layout="vertical"\n label="上传图片(图片大小不得大于 0.1M)"\n valueKey="fileList"\n valueFormat={valueFormatUpload}\n trigger="onAfterRead"\n validateTrigger="onAfterRead"\n rules={{\n rule: (values, call) => {\n values.forEach((item, index) => {\n if (item.size > 0.1 * 1024 * 1024) {\n return call(::::_QA图片(::::_ABindex + 1})大小不得大于 0.1M::::_QA)\n }\n call('')\n })\n },\n }}\n >\n <Uploader name="file1" onDelete={deleteFile}></Uploader>\n </FormItem>\n </Form>\n </>\n )\n}\n\n
\n封装 DatetimePickerBox 组件, 应用到 FormItem
\n/* eslint-disable */\nimport react, { useEffect, useState } from 'react'\nimport { View } from '@tarojs/components'\nimport {\n Form,\n FormItem,\n Icon,\n Popup,\n DatetimePicker,\n IFormInstanceAPI,\n IDatetimePickerInstance,\n} from '@antmjs/vantui'\n\nexport default function Demo() {\n const formIt = react.useRef<IFormInstanceAPI>(null)\n const DatePickerIt = react.useRef<IDatetimePickerInstance>(null)\n const [, forceUpdate] = useState({})\n\n useEffect(() => {\n setTimeout(() => {\n formIt.current?.setFieldsValue(\n 'dateTime',\n new Date(2022, 11, 1).getTime(),\n )\n forceUpdate({})\n // 弹窗后动态改变DatePicker的展示\n DatePickerIt?.current?.updateCurrentValue(new Date(2022, 11, 1).getTime())\n }, 6000)\n }, [])\n\n return (\n <Form ref={formIt}>\n <FormItem\n label="日期选择"\n name="dateTime"\n valueFormat={(e) => e.detail.value}\n valueKey="value"\n trigger="onConfirm"\n renderRight={<Icon name="arrow" />}\n >\n <DatetimePickerBox_ refD={DatePickerIt} />\n </FormItem>\n </Form>\n )\n}\n\nfunction DatetimePickerBox_(props) {\n const { refD } = props\n const [state, changeState] = react.useState({\n show: false,\n innerValue: null,\n })\n\n const setState = react.useCallback(\n (key, value) => {\n changeState({\n ...state,\n [key]: value,\n })\n },\n [state],\n )\n\n const toggleShow = react.useCallback((show) => {\n setState('show', show)\n }, [])\n\n const onConfirm = react.useCallback((e) => {\n if (props.onConfirm) props.onConfirm(e)\n toggleShow(false)\n }, [])\n\n const onCancel = react.useCallback(() => {\n if (props.onCancel) props.onCancel()\n toggleShow(false)\n }, [])\n\n const preFixZero = react.useCallback((n) => {\n return n > 9 ? ::::_QA::::_ABn}::::_QA : ::::_QA0::::_ABn}::::_QA\n }, [])\n\n const formatDate = react.useCallback((date) => {\n const d = new Date(date)\n return ::::_QA::::_ABd.getFullYear()}-::::_ABpreFixZero(\n Number(d.getMonth() + 1),\n )}-::::_ABd.getDate()} ::::_ABd.getHours()}:::::_ABd.getMinutes()}::::_QA\n }, [])\n\n const { value } = props\n\n return (\n <>\n <View onClick={() => toggleShow(true)} style={{ minWidth: '200px' }}>\n {value ? formatDate(value) : '请选择日期'}\n </View>\n <Popup\n position="bottom"\n show={state.show}\n onClose={() => toggleShow(false)}\n >\n <DatetimePicker\n ref={refD}\n type="datetime"\n value={state.innerValue || value}\n onConfirm={onConfirm}\n onCancel={onCancel}\n />\n </Popup>\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
form | \n传入 form 实例(const formStore1 = useRef()) | \n IFormInstanceAPI | \n- | \nfalse | \n
initialValues | \n初始化表单仓库值 | \n Record< string, any > | \n- | \nfalse | \n
children | \n第一级必须是 FormItem 组件 | \n ReactNode | \n- | \ntrue | \n
className | \n类名 | \n string | \n- | \nfalse | \n
onFinish | \n表单提交触发,配合 button.formType = submit | \n ( errs: string[] ¦ null, values: Record< string, any > ) => void | \n- | \nfalse | \n
onFinishFailed | \n表单提交失败触发,会拦截 onFinish | \n ( errs: string[] ¦ null ) => void | \n- | \nfalse | \n
onChange | \n字段值更新时触发的回调事件 | \n ( changedValues: Record< string, any >, allValues: Record< string, any > ) => void | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
mutiLevel | \n组件值默认数据类型为基本类型(string、number...), 对象数组形式的数据需要设置为 true | \n boolean | \n- | \nfalse | \n
name | \n对应表单字段名 | \n attr: ¦ string ¦ Array< string ¦ number > | \n- | \ntrue | \n
children | \n第一级操作表单组件 | \n ReactNode | \n- | \ntrue | \n
label | \n表单 label | \n ReactNode | \n- | \ntrue | \n
labelName | \n表单 label 字符串, 当 label 不为字符串的时候,传入 labelName | \n string | \n- | \nfalse | \n
layout | \n垂直 | 水平 | \n attr: ¦ "vertical" ¦ "horizontal" | \nhorizontal | \nfalse | \n
required | \n是否必填 | \n boolean | \nfalse | \nfalse | \n
validateTrigger | \n验证表单触发方法名 | \n string | \nonChange | \nfalse | \n
borderBottom | \n下边框 | \n boolean | \nfalse | \nfalse | \n
labelClassName | \nlabel 的外层 className | \n string | \n- | \nfalse | \n
messageClassName | \n提示信息的 className,某些错误情况可以自定义样式 | \n string | \n- | \nfalse | \n
requiredClassName | \nrequired 的外层 className | \n string | \n- | \nfalse | \n
controllClassName | \n表单组件的外层 className | \n string | \n- | \nfalse | \n
className | \nformItem 最外层 className | \n string | \n- | \nfalse | \n
requiredIcon | \n自定义必填标识 | \n ReactNode | \n- | \nfalse | \n
feedback | \n验证后反馈的信息,可设置为校验成功、失败、都展示或隐藏 | \n attr: ¦ "success" ¦ "failed" ¦ "all" ¦ "hidden" | \nfailed | \nfalse | \n
renderRight | \n自定义渲染右边内容 | \n ReactNode | \n- | \nfalse | \n
trigger | \n表单交互触发方法 | \n string | \nonChange | \nfalse | \n
valueKey | \n表单控制展示的具体值的字段名 | \n string | \nvalue | \nfalse | \n
valueFormat | \n根据表单交互回掉函数(时间)参数的重新定义 | \n ( value: any, name: ¦ string ¦ Array< string ¦ number >, IFormInstance: IFormInstanceAPI ) => any | \nvalue | \nfalse | \n
rules | \n正则校验值,或者自定义校验后 call 回掉函数返回错误信息,支持数组或单项设置 | \n attr: ¦ { rule: ¦ (( value: any, call: ( errMess: string ) => void ) => void) ¦ RegExp message?: string }[] ¦ { rule: ¦ (( value: any, call: ( errMess: string ) => void ) => void) ¦ RegExp message?: string } | \n- | \nfalse | \n
通过 ref 获取到的 form 的实例
\n方法 | \n说明 | \n类型 | \n
---|---|---|
registerValidateFields | \n注册校验规则 | \n ( name: ¦ string ¦ Array< string ¦ number >, control: Record< string, any >, model: Record< string, any > ) => void | \n
registerRequiredMessageCallback | \n注册必填项为空时的回调函数 | \n ( callback: ( label: string ) => string ) => void | \n
unRegisterValidate | \n注册校验规则 | \n ( name: ¦ string ¦ Array< string ¦ number > ) => void | \n
resetFields | \n重置表单 | \n () => void | \n
setFields | \n设置多个表单值 | \n ( object: Record< string, any > ) => void | \n
setFieldsValue | \n设置单个表单值 | \n ( name: ¦ string ¦ Array< string ¦ number >, modelValue: any ) => any | \n
getFieldsValue | \n获取所有表单值 | \n () => Record< string, any > | \n
setErrorMessage | \n设置表单错误信息 | \n ( name: ¦ string ¦ Array< string ¦ number >, message: string ) => void | \n
getFieldValue | \n获取单个表单值 | \n ( name: ¦ string ¦ Array< string ¦ number > ) => any | \n
validateFieldValue | \n单个表单验证 | \n ( name: string ) => ¦ "resolve" ¦ "reject" | \n
validateFields | \n校验表单,并获取错误信息和所有表单值 | \n ( callback: ( errorMess: Array values: Record< string, any > ) => void ) => void | \n
submit | \n校验表单,并获取错误信息和所有表单值,触发 form.onFinish 和 onFinishFailed | \n ( callback?: ( errs: Array values: Record< string, string > ) => void ) => void | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--form-background-color | \n @white; | \n
--form-space-horizontal | \n @padding-sm; | \n
--form-space-vertical | \n @padding-md; | \n
--form-border-bottom | \n 2px solid @gray-3; | \n
--form-line-height | \n 48px; | \n
--form-label-color | \n @text-color; | \n
--form-label-width | \n 146px; | \n
--form-label-font-size | \n @font-size-md; | \n
--form-controll-margin-left | \n 40px; | \n
--form-controll-color | \n @text-color; | \n
--form-controll-font-size | \n @font-size-md; | \n
--form-message-font-size | \n @font-size-sm; | \n
--form-message-color | \n red; | \n
--form-message-margin-top | \n 8px; | \n
--form-vertical-controll-margin-top | \n 20px; | \n
用于为数据入录、校验,支持输入框、开关、文件上传等组件类型,支持自定义组件
\n在 Taro 文件中引入组件
\nimport { Form, FormItem } from '@antmjs/vantui'\n
\n可以通过 buton 点击事件onClick
中在 form 实例 submit 获取数据并处理,或者通过 button 的formType
触发 onFinish\nFormItem 需要代理下级表单组件的值和触发事件
onChange
, 通过FormItem.trigger
重新设置value
, 通过FormItem.valueKey
重新设置event.detail
, 通过FormItem.valueFormat
重新设置案例
\n/* eslint-disable */\nimport react from 'react'\nimport { Input } from '@tarojs/components'\nimport {\n Form,\n FormItem,\n Icon,\n Switch,\n RadioGroup,\n Radio,\n CheckboxGroup,\n Checkbox,\n Slider,\n Rate,\n Stepper,\n Button,\n Dialog,\n} from '@antmjs/vantui'\n\nexport default function Demo() {\n const formIt = Form.useForm()\n const [, forceUpdate] = react.useState({})\n // 注册不能回调函数设置必填的提示文案\n react.useEffect(() => {\n formIt.registerRequiredMessageCallback((label) => {\n return ::::_QA::::_ABlabel}真的不能为空啊::::_QA\n })\n\n // setTimeout(() => {\n formIt.setErrorMessage('userName', '这是自定义错误xxxxx')\n // }, 1000)\n }, [])\n\n const handleClick = () => {\n formIt.validateFields((errorMessage, fieldValues) => {\n if (errorMessage && errorMessage.length) {\n Dialog.alert({\n message: ::::_QAerrorMessage: ::::_ABJSON.stringify(errorMessage)}::::_QA,\n selector: '#form-demo11',\n })\n return console.info('errorMessage', errorMessage)\n }\n\n Dialog.alert({\n message: ::::_QAresult: ::::_ABJSON.stringify(fieldValues)}::::_QA,\n selector: '#form-demo11',\n })\n })\n }\n // @ts-ignore\n const dynamicRule = react.useMemo(() => {\n if (formIt.getFieldValue('singleSelect') === '1') {\n return {\n rule: /^[1-9]d{5}(18|19|([23]d))d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)d{3}[0-9Xx]$/,\n message: '输入正确的身份证',\n }\n }\n\n if (formIt.getFieldValue('singleSelect') === '2') {\n return {\n rule: /^[0-9]{6}$/,\n message: '请输入6位数的驾驶证',\n }\n }\n }, [formIt.getFieldValue('singleSelect')])\n\n const dynamicPlaceHolder = react.useMemo(() => {\n if (formIt.getFieldValue('singleSelect') === '1') {\n return '请输入身份证'\n }\n\n if (formIt.getFieldValue('singleSelect') === '2') {\n return '请输入驾驶证'\n }\n return ''\n }, [formIt.getFieldValue('singleSelect')])\n\n return (\n <>\n <Form\n initialValues={{\n userName: '我是初始值',\n singleSelect: '1',\n rate: 2,\n slider: '50',\n }}\n form={formIt}\n onFinish={(errs, res) => console.info(errs, res)}\n >\n <FormItem\n label="用户名"\n name="userName"\n required\n rules={{\n rule: /[u4e00-u9fa5]/,\n message: '用户名仅支持中文',\n }}\n trigger="onInput"\n validateTrigger="onBlur"\n // taro的input的onInput事件返回对应表单的最终值为e.detail.value\n valueFormat={(e) => e.detail.value}\n renderRight={<Icon name="user-o" />}\n >\n <Input placeholder="请输入用户名(中文)" />\n </FormItem>\n\n <FormItem label="是否打开" name="opened" valueKey="checked">\n <Switch activeColor="#07c160" inactiveColor="#07c160" />\n </FormItem>\n\n <FormItem label="证件类型" name="singleSelect">\n {/** 后续版本, 开发 FormItem.dependencies, 实现不需要 forceUpdate 来更新 getFieldValue('xx') */}\n <RadioGroup\n direction="horizontal"\n onChange={(e) => {\n formIt.setFieldsValue('cardId', '')\n forceUpdate(e)\n }}\n >\n <Radio name="1" checkedColor="#07c160">\n 身份证\n </Radio>\n <Radio name="2" checkedColor="#07c160">\n 驾驶证\n </Radio>\n </RadioGroup>\n </FormItem>\n\n <FormItem\n label="证件号"\n name="cardId"\n required\n valueFormat={(e) => e.detail.value}\n rules={dynamicRule}\n trigger="onInput"\n >\n <Input placeholder={dynamicPlaceHolder} />\n </FormItem>\n\n <FormItem label="复选框" name="muiltSelect">\n <CheckboxGroup direction="horizontal">\n <Checkbox name="1" shape="square" checkedColor="#07c160">\n 复选框 1\n </Checkbox>\n <Checkbox name="2" shape="square" checkedColor="#07c160">\n 复选框 2\n </Checkbox>\n </CheckboxGroup>\n </FormItem>\n\n <FormItem label="滑块选择" name="slider">\n <Slider\n activeColor="#07c160"\n style={{ width: '200px', marginTop: '10px' }}\n />\n </FormItem>\n\n <FormItem label="评分" name="rate">\n <Rate />\n </FormItem>\n\n <FormItem label="步进器" name="stepper">\n <Stepper />\n </FormItem>\n <Button\n type="primary"\n className="van-button-submit"\n onClick={handleClick}\n // formType="submit"\n >\n 提交\n </Button>\n </Form>\n <Dialog id="form-demo11" />\n </>\n )\n}\n\n
\n案例如下:
\n/* eslint-disable */\nimport react from 'react'\nimport { Input } from '@tarojs/components'\nimport {\n FormItem,\n Form,\n Button,\n Dialog,\n IFormInstanceAPI,\n} from '@antmjs/vantui'\n\n// 可以异步请求初始化,放在state里面\nconst initialValues = {\n mutiData: { a: [1, 2, 3, 4] },\n useInfo: [\n {\n name: 'bbbb',\n age: 12,\n },\n {\n name: 'aaaa',\n age: 13,\n },\n ],\n}\nexport default function Demo() {\n const formIt = react.useRef<IFormInstanceAPI>(null)\n\n const multFormItems = function () {\n let jsx: JSX.Element[] = []\n for (let i = 0; i < 2; i++) {\n jsx.push(\n <>\n <FormItem\n label={::::_QA名称(::::_ABi + 1})::::_QA}\n name={['useInfo', i, 'name']}\n trigger="onInput"\n valueFormat={(e) => e.detail.value}\n >\n <Input placeholder="请输入用户名" />\n </FormItem>\n <FormItem\n label={::::_QA年龄(::::_ABi + 1})::::_QA}\n name={['useInfo', i, 'age']}\n trigger="onInput"\n valueFormat={(e) => e.detail.value}\n >\n <Input placeholder="请输入年龄" />\n </FormItem>\n </>,\n )\n }\n return jsx\n }\n\n return (\n <Form ref={formIt} initialValues={initialValues}>\n {multFormItems()}\n <FormItem name="mutiData" mutiLevel label="复杂数据">\n <_MutiData />\n </FormItem>\n <Button\n className="van-button-submit"\n formType="submit"\n onClick={() => {\n Dialog.alert({\n message: ::::_QAresult: ::::_ABJSON.stringify(\n formIt.current?.getFieldsValue(),\n )}::::_QA,\n selector: 'form-demo3',\n })\n }}\n >\n 提交\n </Button>\n <Dialog id="form-demo3" />\n </Form>\n )\n}\n\nfunction _MutiData(value) {\n return <>{JSON.stringify(value)}</>\n}\n\n
\n案例如下:
\n/* eslint-disable */\nimport react from 'react'\nimport {\n Toast,\n Form,\n FormItem,\n Uploader,\n IFormInstanceAPI,\n} from '@antmjs/vantui'\n\nexport default function Demo() {\n const formIt = react.useRef<IFormInstanceAPI>(null)\n\n const valueFormatUpload = (event, formName, instance) => {\n Toast.loading('上传中...')\n const { file } = event.detail\n let fileList = instance.getFieldValue(formName) || []\n fileList = fileList.concat(file)\n // 异步更新\n return new Promise((resolve) => {\n setTimeout(() => {\n Toast.clear()\n resolve(fileList)\n }, 3000)\n })\n }\n\n const deleteFile = (event) => {\n const { index, fileList } = event.detail\n fileList.splice(index, 1)\n\n formIt.current?.setFieldsValue('file', fileList)\n }\n return (\n <>\n <Toast id="form-demo2-loading" />\n <Form ref={formIt}>\n <FormItem\n name="file"\n mutiLevel\n required\n layout="vertical"\n label="上传图片(图片大小不得大于 0.1M)"\n valueKey="fileList"\n valueFormat={valueFormatUpload}\n trigger="onAfterRead"\n validateTrigger="onAfterRead"\n rules={{\n rule: (values, call) => {\n values.forEach((item, index) => {\n if (item.size > 0.1 * 1024 * 1024) {\n return call(::::_QA图片(::::_ABindex + 1})大小不得大于 0.1M::::_QA)\n }\n call('')\n })\n },\n }}\n >\n <Uploader name="file1" onDelete={deleteFile}></Uploader>\n </FormItem>\n </Form>\n </>\n )\n}\n\n
\n封装 DatetimePickerBox 组件, 应用到 FormItem
\n/* eslint-disable */\nimport react, { useEffect, useState } from 'react'\nimport { View } from '@tarojs/components'\nimport {\n Form,\n FormItem,\n Icon,\n Popup,\n DatetimePicker,\n IFormInstanceAPI,\n IDatetimePickerInstance,\n} from '@antmjs/vantui'\n\nexport default function Demo() {\n const formIt = react.useRef<IFormInstanceAPI>(null)\n const DatePickerIt = react.useRef<IDatetimePickerInstance>(null)\n const [, forceUpdate] = useState({})\n\n useEffect(() => {\n setTimeout(() => {\n formIt.current?.setFieldsValue(\n 'dateTime',\n new Date(2022, 11, 1).getTime(),\n )\n forceUpdate({})\n // 弹窗后动态改变DatePicker的展示\n DatePickerIt?.current?.updateCurrentValue(new Date(2022, 11, 1).getTime())\n }, 6000)\n }, [])\n\n return (\n <Form ref={formIt}>\n <FormItem\n label="日期选择"\n name="dateTime"\n valueFormat={(e) => e.detail.value}\n valueKey="value"\n trigger="onConfirm"\n renderRight={<Icon name="arrow" />}\n >\n <DatetimePickerBox_ refD={DatePickerIt} />\n </FormItem>\n </Form>\n )\n}\n\nfunction DatetimePickerBox_(props) {\n const { refD } = props\n const [state, changeState] = react.useState({\n show: false,\n innerValue: null,\n })\n\n const setState = react.useCallback(\n (key, value) => {\n changeState({\n ...state,\n [key]: value,\n })\n },\n [state],\n )\n\n const toggleShow = react.useCallback((show) => {\n setState('show', show)\n }, [])\n\n const onConfirm = react.useCallback((e) => {\n if (props.onConfirm) props.onConfirm(e)\n toggleShow(false)\n }, [])\n\n const onCancel = react.useCallback(() => {\n if (props.onCancel) props.onCancel()\n toggleShow(false)\n }, [])\n\n const preFixZero = react.useCallback((n) => {\n return n > 9 ? ::::_QA::::_ABn}::::_QA : ::::_QA0::::_ABn}::::_QA\n }, [])\n\n const formatDate = react.useCallback((date) => {\n const d = new Date(date)\n return ::::_QA::::_ABd.getFullYear()}-::::_ABpreFixZero(\n Number(d.getMonth() + 1),\n )}-::::_ABd.getDate()} ::::_ABd.getHours()}:::::_ABd.getMinutes()}::::_QA\n }, [])\n\n const { value } = props\n\n return (\n <>\n <View onClick={() => toggleShow(true)} style={{ minWidth: '200px' }}>\n {value ? formatDate(value) : '请选择日期'}\n </View>\n <Popup\n position="bottom"\n show={state.show}\n onClose={() => toggleShow(false)}\n >\n <DatetimePicker\n ref={refD}\n type="datetime"\n value={state.innerValue || value}\n onConfirm={onConfirm}\n onCancel={onCancel}\n />\n </Popup>\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
form | \n传入 form 实例(const formStore1 = useRef()) | \n IFormInstanceAPI | \n- | \nfalse | \n
initialValues | \n初始化表单仓库值 | \n Record< string, any > | \n- | \nfalse | \n
children | \n第一级必须是 FormItem 组件 | \n ReactNode | \n- | \ntrue | \n
className | \n类名 | \n string | \n- | \nfalse | \n
onFinish | \n表单提交触发,配合 button.formType = submit | \n ( errs: string[] ¦ null, values: Record< string, any > ) => void | \n- | \nfalse | \n
onFinishFailed | \n表单提交失败触发,会拦截 onFinish | \n ( errs: string[] ¦ null ) => void | \n- | \nfalse | \n
onChange | \n字段值更新时触发的回调事件 | \n ( changedValues: Record< string, any >, allValues: Record< string, any > ) => void | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
mutiLevel | \n组件值默认数据类型为基本类型(string、number...), 对象数组形式的数据需要设置为 true | \n boolean | \n- | \nfalse | \n
name | \n对应表单字段名 | \n attr: ¦ string ¦ Array< string ¦ number > | \n- | \ntrue | \n
children | \n第一级操作表单组件 | \n ReactNode | \n- | \ntrue | \n
label | \n表单 label | \n ReactNode | \n- | \ntrue | \n
labelName | \n表单 label 字符串, 当 label 不为字符串的时候,传入 labelName | \n string | \n- | \nfalse | \n
layout | \n垂直 | 水平 | \n attr: ¦ "vertical" ¦ "horizontal" | \nhorizontal | \nfalse | \n
required | \n是否必填 | \n boolean | \nfalse | \nfalse | \n
validateTrigger | \n验证表单触发方法名 | \n string | \nonChange | \nfalse | \n
borderBottom | \n下边框 | \n boolean | \nfalse | \nfalse | \n
labelClassName | \nlabel 的外层 className | \n string | \n- | \nfalse | \n
messageClassName | \n提示信息的 className,某些错误情况可以自定义样式 | \n string | \n- | \nfalse | \n
requiredClassName | \nrequired 的外层 className | \n string | \n- | \nfalse | \n
controllClassName | \n表单组件的外层 className | \n string | \n- | \nfalse | \n
className | \nformItem 最外层 className | \n string | \n- | \nfalse | \n
requiredIcon | \n自定义必填标识 | \n ReactNode | \n- | \nfalse | \n
feedback | \n验证后反馈的信息,可设置为校验成功、失败、都展示或隐藏 | \n attr: ¦ "success" ¦ "failed" ¦ "all" ¦ "hidden" | \nfailed | \nfalse | \n
renderRight | \n自定义渲染右边内容 | \n ReactNode | \n- | \nfalse | \n
trigger | \n表单交互触发方法 | \n string | \nonChange | \nfalse | \n
valueKey | \n表单控制展示的具体值的字段名 | \n string | \nvalue | \nfalse | \n
valueFormat | \n根据表单交互回掉函数(时间)参数的重新定义 | \n ( value: any, name: ¦ string ¦ Array< string ¦ number >, IFormInstance: IFormInstanceAPI ) => any | \nvalue | \nfalse | \n
rules | \n正则校验值,或者自定义校验后 call 回掉函数返回错误信息,支持数组或单项设置 | \n attr: ¦ { rule: ¦ (( value: any, call: ( errMess: string ) => void ) => void) ¦ RegExp message?: string }[] ¦ { rule: ¦ (( value: any, call: ( errMess: string ) => void ) => void) ¦ RegExp message?: string } | \n- | \nfalse | \n
通过 ref 获取到的 form 的实例
\n方法 | \n说明 | \n类型 | \n
---|---|---|
registerValidateFields | \n注册校验规则 | \n ( name: ¦ string ¦ Array< string ¦ number >, control: Record< string, any >, model: Record< string, any > ) => void | \n
registerRequiredMessageCallback | \n注册必填项为空时的回调函数 | \n ( callback: ( label: string ) => string ) => void | \n
unRegisterValidate | \n注册校验规则 | \n ( name: ¦ string ¦ Array< string ¦ number > ) => void | \n
resetFields | \n重置表单 | \n () => void | \n
setFields | \n设置多个表单值 | \n ( object: Record< string, any > ) => void | \n
setFieldsValue | \n设置单个表单值 | \n ( name: ¦ string ¦ Array< string ¦ number >, modelValue: any ) => any | \n
getFieldsValue | \n获取所有表单值 | \n () => Record< string, any > | \n
setErrorMessage | \n设置表单错误信息 | \n ( name: ¦ string ¦ Array< string ¦ number >, message: string ) => void | \n
getFieldValue | \n获取单个表单值 | \n ( name: ¦ string ¦ Array< string ¦ number > ) => any | \n
validateFieldValue | \n单个表单验证 | \n ( name: string ) => ¦ "resolve" ¦ "reject" | \n
validateFields | \n校验表单,并获取错误信息和所有表单值 | \n ( callback: ( errorMess: Array values: Record< string, any > ) => void ) => void | \n
submit | \n校验表单,并获取错误信息和所有表单值,触发 form.onFinish 和 onFinishFailed | \n ( callback?: ( errs: Array values: Record< string, string > ) => void ) => void | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--form-background-color | \n @white; | \n
--form-space-horizontal | \n @padding-sm; | \n
--form-space-vertical | \n @padding-md; | \n
--form-border-bottom | \n 2px solid @gray-3; | \n
--form-line-height | \n 48px; | \n
--form-label-color | \n @text-color; | \n
--form-label-width | \n 146px; | \n
--form-label-font-size | \n @font-size-md; | \n
--form-controll-margin-left | \n 40px; | \n
--form-controll-color | \n @text-color; | \n
--form-controll-font-size | \n @font-size-md; | \n
--form-message-font-size | \n @font-size-sm; | \n
--form-message-color | \n red; | \n
--form-message-margin-top | \n 8px; | \n
--form-vertical-controll-margin-top | \n 20px; | \n
按钮用于触发一个操作,如提交表单。
\n在 Taro 文件中引入组件
\nimport {\n Button,\n MiniLoginButton,\n MiniPhoneButton,\n MiniUserButton,\n} from '@antmjs/vantui'\n
\n支持default
、primary
、info
、warning
、danger
五种类型,默认为default
。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nButton.config({\n asyncLoading: true, // click异步事件触发loading状态手动开启\n})\n\nexport default function Demo() {\n // 点击事件返回Promise,即可让按钮自带loading状态\n const handle = async () => {\n await timeout()\n }\n\n return (\n <View>\n <Button type="default">默认按钮</Button>\n <Button type="primary">主要按钮</Button>\n <Button type="info">信息按钮</Button>\n <Button type="warning">警告按钮</Button>\n <Button type="danger">危险按钮</Button>\n <View></View>\n <Button type="info" onClick={handle} loadingText="提交中...">\n 确认提交\n </Button>\n <Button\n type="primary"\n onClick={handle}\n loadingMode="toast"\n loadingText="提交中..."\n loadingType="spinner"\n >\n 确认提交\n </Button>\n </View>\n )\n}\n\nfunction timeout() {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(1)\n }, 3000)\n })\n}\n\n
\n通过plain
属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button plain type="primary">\n 朴素按钮\n </Button>\n <Button plain type="info">\n 朴素按钮\n </Button>\n </View>\n )\n}\n\n
\n设置hairline
属性可以开启 0.5px 边框,基于伪类实现。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button plain hairline type="primary">\n 细边框按钮\n </Button>\n <Button plain hairline type="info">\n 细边框按钮\n </Button>\n </View>\n )\n}\n\n
\n通过disabled
属性来禁用按钮,此时按钮的onClick
事件不会触发。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button disabled type="primary">\n 禁用状态\n </Button>\n <Button disabled type="info">\n 禁用状态\n </Button>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button loading type="primary" />\n <Button loading type="primary" loadingType="spinner" />\n <Button loading type="info" loadingText="加载中..." />\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button square type="primary">\n 方形按钮\n </Button>\n <Button round type="info">\n 圆形按钮\n </Button>\n </View>\n )\n}\n\n
\n通过icon
属性设置按钮图标,支持 Icon 组件里的所有图标,也可以传入图标 URL。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button icon="wechat-pay" type="primary" />\n <Button icon="weibo" type="primary">\n 按钮\n </Button>\n <Button\n icon="https://antm-js.gitee.io/resource/antmjs-vantui.jpg"\n type="info"\n >\n 按钮\n </Button>\n </View>\n )\n}\n\n
\n支持large
、normal
、small
、mini
四种尺寸,默认为normal
。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button type="primary" size="large">\n 大号按钮\n </Button>\n <Button type="primary" size="normal">\n 普通按钮\n </Button>\n <Button type="primary" size="small">\n 小型按钮\n </Button>\n <Button type="primary" size="mini">\n 迷你按钮\n </Button>\n </View>\n )\n}\n\n
\n通过block
属性可以将按钮的元素类型设置为块级元素。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button type="primary" block>\n 块级元素\n </Button>\n </View>\n )\n}\n\n
\n通过color
属性可以自定义按钮的颜色。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button color="#7232dd">单色按钮</Button>\n <Button color="#7232dd" plain>\n 单色按钮\n </Button>\n <Button color="linear-gradient(to right, #4bb0ff, #6149f6)">\n 渐变色按钮\n </Button>\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
icon | \n传入 Icon 的 name 值 | \n string | \n- | \nfalse | \n
classPrefix | \n- | \n string | \n- | \nfalse | \n
type | \n- | \n attr: ¦ "default" ¦ "primary" ¦ "info" ¦ "warning" ¦ "danger" | \n- | \nfalse | \n
size | \n- | \n attr: ¦ "small" ¦ "normal" ¦ "large" ¦ "mini" | \n- | \nfalse | \n
block | \n- | \n boolean | \n- | \nfalse | \n
round | \n- | \n boolean | \n- | \nfalse | \n
square | \n- | \n boolean | \n- | \nfalse | \n
loading | \n- | \n boolean | \n- | \nfalse | \n
hairline | \n- | \n boolean | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
loadingText | \nloading 的文案 | \n ReactNode | \n加载中 | \nfalse | \n
loadingSize | \n- | \n string | \n- | \nfalse | \n
loadingType | \n- | \n attr: ¦ "spinner" ¦ "circular" | \n- | \nfalse | \n
loadingMode | \nloading 的模式,按钮内 loading 或 Toast.loading | \n "normal" ¦ "toast" | \nnormal | \nfalse | \n
loadingMask | \nloading 的蒙层,默认开启 | \n boolean | \ntrue | \nfalse | \n
color | \n- | \n string | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onClick | \n- | \n ( event: ITouchEvent ) => void ¦ Promise | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--button-line-height | \n 40px; | \n
--button-normal-height | \n 80px; | \n
--button-normal-font-size | \n @font-size-md; | \n
--button-normal-border-radius | \n @border-radius-lg; | \n
--button-mini-height | \n 44px; | \n
--button-mini-font-size | \n @font-size-xs; | \n
--button-mini-border-radius | \n @border-radius-sm; | \n
--button-mini-min-width | \n 100px; | \n
--button-small-height | \n 60px; | \n
--button-small-font-size | \n @font-size-sm; | \n
--button-small-border-radius | \n @border-radius-md; | \n
--button-small-min-width | \n 120px; | \n
--button-large-height | \n 100px; | \n
--button-large-font-size | \n @font-size-lg; | \n
--button-large-border-radius | \n @border-radius-lg; | \n
--button-default-color | \n @text-color; | \n
--button-default-background-color | \n @white; | \n
--button-primary-color | \n @white; | \n
--button-primary-background-color | \n var(--primary-color); | \n
--button-info-color | \n @white; | \n
--button-info-background-color | \n @blue; | \n
--button-danger-color | \n @white; | \n
--button-danger-background-color | \n @red; | \n
--button-warning-color | \n @white; | \n
--button-warning-background-color | \n @orange; | \n
--button-border-width | \n 2px; | \n
--button-round-border-radius | \n @border-radius-max; | \n
--button-plain-background-color | \n @white; | \n
--button-active-opacity | \n @active-opacity; | \n
--button-disabled-opacity | \n @disabled-opacity; | \n
按钮用于触发一个操作,如提交表单。
\n在 Taro 文件中引入组件
\nimport {\n Button,\n MiniLoginButton,\n MiniPhoneButton,\n MiniUserButton,\n} from '@antmjs/vantui'\n
\n支持default
、primary
、info
、warning
、danger
五种类型,默认为default
。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nButton.config({\n asyncLoading: true, // click异步事件触发loading状态手动开启\n})\n\nexport default function Demo() {\n // 点击事件返回Promise,即可让按钮自带loading状态\n const handle = async () => {\n await timeout()\n }\n\n return (\n <View>\n <Button type="default">默认按钮</Button>\n <Button type="primary">主要按钮</Button>\n <Button type="info">信息按钮</Button>\n <Button type="warning">警告按钮</Button>\n <Button type="danger">危险按钮</Button>\n <View></View>\n <Button type="info" onClick={handle} loadingText="提交中...">\n 确认提交\n </Button>\n <Button\n type="primary"\n onClick={handle}\n loadingMode="toast"\n loadingText="提交中..."\n loadingType="spinner"\n >\n 确认提交\n </Button>\n </View>\n )\n}\n\nfunction timeout() {\n return new Promise((resolve) => {\n setTimeout(() => {\n resolve(1)\n }, 3000)\n })\n}\n\n
\n通过plain
属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button plain type="primary">\n 朴素按钮\n </Button>\n <Button plain type="info">\n 朴素按钮\n </Button>\n </View>\n )\n}\n\n
\n设置hairline
属性可以开启 0.5px 边框,基于伪类实现。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button plain hairline type="primary">\n 细边框按钮\n </Button>\n <Button plain hairline type="info">\n 细边框按钮\n </Button>\n </View>\n )\n}\n\n
\n通过disabled
属性来禁用按钮,此时按钮的onClick
事件不会触发。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button disabled type="primary">\n 禁用状态\n </Button>\n <Button disabled type="info">\n 禁用状态\n </Button>\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button loading type="primary" />\n <Button loading type="primary" loadingType="spinner" />\n <Button loading type="info" loadingText="加载中..." />\n </View>\n )\n}\n\n
\n/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button square type="primary">\n 方形按钮\n </Button>\n <Button round type="info">\n 圆形按钮\n </Button>\n </View>\n )\n}\n\n
\n通过icon
属性设置按钮图标,支持 Icon 组件里的所有图标,也可以传入图标 URL。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button icon="wechat-pay" type="primary" />\n <Button icon="weibo" type="primary">\n 按钮\n </Button>\n <Button\n icon="https://antm-js.gitee.io/resource/antmjs-vantui.jpg"\n type="info"\n >\n 按钮\n </Button>\n </View>\n )\n}\n\n
\n支持large
、normal
、small
、mini
四种尺寸,默认为normal
。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button type="primary" size="large">\n 大号按钮\n </Button>\n <Button type="primary" size="normal">\n 普通按钮\n </Button>\n <Button type="primary" size="small">\n 小型按钮\n </Button>\n <Button type="primary" size="mini">\n 迷你按钮\n </Button>\n </View>\n )\n}\n\n
\n通过block
属性可以将按钮的元素类型设置为块级元素。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button type="primary" block>\n 块级元素\n </Button>\n </View>\n )\n}\n\n
\n通过color
属性可以自定义按钮的颜色。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Button color="#7232dd">单色按钮</Button>\n <Button color="#7232dd" plain>\n 单色按钮\n </Button>\n <Button color="linear-gradient(to right, #4bb0ff, #6149f6)">\n 渐变色按钮\n </Button>\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
icon | \n传入 Icon 的 name 值 | \n string | \n- | \nfalse | \n
classPrefix | \n- | \n string | \n- | \nfalse | \n
type | \n- | \n attr: ¦ "default" ¦ "primary" ¦ "info" ¦ "warning" ¦ "danger" | \n- | \nfalse | \n
size | \n- | \n attr: ¦ "small" ¦ "normal" ¦ "large" ¦ "mini" | \n- | \nfalse | \n
block | \n- | \n boolean | \n- | \nfalse | \n
round | \n- | \n boolean | \n- | \nfalse | \n
square | \n- | \n boolean | \n- | \nfalse | \n
loading | \n- | \n boolean | \n- | \nfalse | \n
hairline | \n- | \n boolean | \n- | \nfalse | \n
disabled | \n- | \n boolean | \n- | \nfalse | \n
loadingText | \nloading 的文案 | \n ReactNode | \n加载中 | \nfalse | \n
loadingSize | \n- | \n string | \n- | \nfalse | \n
loadingType | \n- | \n attr: ¦ "spinner" ¦ "circular" | \n- | \nfalse | \n
loadingMode | \nloading 的模式,按钮内 loading 或 Toast.loading | \n "normal" ¦ "toast" | \nnormal | \nfalse | \n
loadingMask | \nloading 的蒙层,默认开启 | \n boolean | \ntrue | \nfalse | \n
color | \n- | \n string | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onClick | \n- | \n ( event: ITouchEvent ) => void ¦ Promise | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--button-line-height | \n 40px; | \n
--button-normal-height | \n 80px; | \n
--button-normal-font-size | \n @font-size-md; | \n
--button-normal-border-radius | \n @border-radius-lg; | \n
--button-mini-height | \n 44px; | \n
--button-mini-font-size | \n @font-size-xs; | \n
--button-mini-border-radius | \n @border-radius-sm; | \n
--button-mini-min-width | \n 100px; | \n
--button-small-height | \n 60px; | \n
--button-small-font-size | \n @font-size-sm; | \n
--button-small-border-radius | \n @border-radius-md; | \n
--button-small-min-width | \n 120px; | \n
--button-large-height | \n 100px; | \n
--button-large-font-size | \n @font-size-lg; | \n
--button-large-border-radius | \n @border-radius-lg; | \n
--button-default-color | \n @text-color; | \n
--button-default-background-color | \n @white; | \n
--button-primary-color | \n @white; | \n
--button-primary-background-color | \n var(--primary-color); | \n
--button-info-color | \n @white; | \n
--button-info-background-color | \n @blue; | \n
--button-danger-color | \n @white; | \n
--button-danger-background-color | \n @red; | \n
--button-warning-color | \n @white; | \n
--button-warning-background-color | \n @orange; | \n
--button-border-width | \n 2px; | \n
--button-round-border-radius | \n @border-radius-max; | \n
--button-plain-background-color | \n @white; | \n
--button-active-opacity | \n @active-opacity; | \n
--button-disabled-opacity | \n @disabled-opacity; | \n
单元格为列表中的单个展示项。
\n在 Taro 文件中引入组件
\nimport { Cell, CellGroup } from '@antmjs/vantui'\n
\nCell
可以单独使用,也可以与CellGroup
搭配使用。CellGroup
可以为Cell
提供上下外边框。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { CellGroup, Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <CellGroup>\n <Cell title="单元格" value="内容" />\n <Cell title="单元格" value="内容" label="描述信息" border={false} />\n </CellGroup>\n </View>\n )\n}\n\n
\n通过 CellGroup 的 inset
属性,可以将单元格转换为圆角卡片风格。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { CellGroup, Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <CellGroup inset>\n <Cell title="单元格" value="内容" />\n <Cell title="单元格" value="内容" label="描述信息" />\n </CellGroup>\n </View>\n )\n}\n\n
\n通过size
属性可以控制单元格的大小。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Cell title="单元格" value="内容" size="large" />\n <Cell title="单元格" value="内容" size="large" label="描述信息" />\n </View>\n )\n}\n\n
\n通过icon
属性在标题左侧展示图标。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Cell title="单元格" icon="locationO" />\n </View>\n )\n}\n\n
\n设置isLink
属性后会在单元格右侧显示箭头,并且可以通过arrowDirection
属性控制箭头方向。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Cell title="单元格" isLink />\n <Cell title="单元格" isLink value="内容" />\n <Cell title="单元格" isLink value="内容" arrowDirection="down" />\n </View>\n )\n}\n\n
\n可以通过url
属性进行页面跳转,通过linkType
属性控制跳转类型。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Cell\n isLink\n title="单元格"\n linkType="navigateTo"\n url="/pages/dashboard/index"\n />\n </View>\n )\n}\n\n
\n通过CellGroup
的title
属性可以指定分组标题。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { CellGroup, Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <CellGroup title="分组1">\n <Cell title="单元格" value="内容" />\n </CellGroup>\n <CellGroup title="分组2">\n <Cell title="单元格" value="内容" />\n </CellGroup>\n </View>\n )\n}\n\n
\n如以上用法不能满足你的需求,可以使用renderTitle
和renderRightIcon
来渲染内容
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Cell, Tag, Icon } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Cell\n value="内容"\n icon="shop-o"\n isLink\n renderTitle={\n <View>\n <View className="title">单元格</View>\n <Tag type="danger">标签</Tag>\n </View>\n }\n />\n <Cell\n title="单元格"\n border={false}\n renderRightIcon={<Icon name="search"></Icon>}\n />\n </View>\n )\n}\n\n
\n通过center
属性可以让Cell
的左右内容都垂直居中。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Cell center={true} title="单元格" value="内容" label="描述信息" />\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
url | \n点击后跳转的链接地址 | \n string | \n- | \nfalse | \n
linkType | \n点击后跳转的链接地址 | \n attr: ¦ "navigateTo" ¦ "reLaunch" ¦ "redirectTo" | \nnavigateTo | \nfalse | \n
title | \n左侧标题 | \n string ¦ number | \n- | \nfalse | \n
value | \n右侧内容 | \n string ¦ number | \n- | \nfalse | \n
icon | \n标题下方的描述信息 | \n string | \n- | \nfalse | \n
size | \n单元格大小,可选值为 large | \n "large" | \n- | \nfalse | \n
label | \n标题下方的描述信息 | \n ReactNode | \n- | \nfalse | \n
center | \n是否使内容垂直居中 | \n boolean | \n- | \nfalse | \n
isLink | \n是否展示右侧箭头并开启点击反馈 | \n boolean | \n- | \nfalse | \n
required | \n是否显示表单必填星号 | \n boolean | \nfalse | \nfalse | \n
clickable | \n是否开启点击反馈 | \n boolean | \nfalse | \nfalse | \n
titleWidth | \n标题宽度,须包含单位 | \n string | \n- | \nfalse | \n
style | \n- | \n string | \n- | \nfalse | \n
arrowDirection | \n箭头方向 | \n attr: ¦ "left" ¦ "up" ¦ "down" | \n- | \nfalse | \n
border | \n是否显示下边框 | \n boolean | \n- | \nfalse | \n
titleStyle | \n标题样式 | \n CSSProperties | \n- | \nfalse | \n
renderTitle | \n自定义渲染标题 | \n ReactNode | \n- | \nfalse | \n
renderIcon | \n自定义渲染左侧 icon | \n ReactNode | \n- | \nfalse | \n
renderLabel | \n自定义 label 显示内容 | \n ReactNode | \n- | \nfalse | \n
renderRightIcon | \n自定义 icon 显示内容 | \n ReactNode | \n- | \nfalse | \n
renderExtra | \n自定义右边内容后跟随的内容 | \n ReactNode | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
title | \n标题 | \n ReactNode | \n- | \nfalse | \n
border | \n是否显示外边框 | \n boolean | \ntrue | \nfalse | \n
inset | \n是否展示为圆角卡片风格 | \n boolean | \nfalse | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--cell-font-size | \n @font-size-md; | \n
--cell-line-height | \n 48px; | \n
--cell-vertical-padding | \n @padding-sm; | \n
--cell-horizontal-padding | \n @padding-md; | \n
--cell-text-color | \n @text-color; | \n
--cell-background-color | \n @white; | \n
--cell-border-color | \n @border-color; | \n
--cell-required-color | \n @red; | \n
--cell-label-color | \n @gray-6; | \n
--cell-label-font-size | \n @font-size-sm; | \n
--cell-label-margin-top | \n 6px; | \n
--cell-value-color | \n @gray-6; | \n
--cell-icon-size | \n @font-size-lg; | \n
--cell-right-icon-color | \n @gray-6; | \n
--cell-large-vertical-padding | \n @padding-sm; | \n
--cell-large-title-font-size | \n @font-size-lg; | \n
--cell-large-value-font-size | \n @font-size-lg; | \n
--cell-large-label-font-size | \n @font-size-md; | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--cell-group-background-color | \n @white; | \n
--cell-group-title-color | \n @gray-6; | \n
--cell-group-title-padding | \n @padding-md @padding-md @padding-xs; | \n
--cell-group-title-font-size | \n @font-size-md; | \n
--cell-group-title-line-height | \n 32px; | \n
--cell-group-inset-padding | \n 0 @padding-md; | \n
--cell-group-inset-border-radius | \n @border-radius-lg; | \n
--cell-group-inset-title-padding | \n @padding-md @padding-md @padding-xs @padding-xl; | \n
单元格为列表中的单个展示项。
\n在 Taro 文件中引入组件
\nimport { Cell, CellGroup } from '@antmjs/vantui'\n
\nCell
可以单独使用,也可以与CellGroup
搭配使用。CellGroup
可以为Cell
提供上下外边框。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { CellGroup, Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <CellGroup>\n <Cell title="单元格" value="内容" />\n <Cell title="单元格" value="内容" label="描述信息" border={false} />\n </CellGroup>\n </View>\n )\n}\n\n
\n通过 CellGroup 的 inset
属性,可以将单元格转换为圆角卡片风格。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { CellGroup, Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <CellGroup inset>\n <Cell title="单元格" value="内容" />\n <Cell title="单元格" value="内容" label="描述信息" />\n </CellGroup>\n </View>\n )\n}\n\n
\n通过size
属性可以控制单元格的大小。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Cell title="单元格" value="内容" size="large" />\n <Cell title="单元格" value="内容" size="large" label="描述信息" />\n </View>\n )\n}\n\n
\n通过icon
属性在标题左侧展示图标。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Cell title="单元格" icon="locationO" />\n </View>\n )\n}\n\n
\n设置isLink
属性后会在单元格右侧显示箭头,并且可以通过arrowDirection
属性控制箭头方向。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Cell title="单元格" isLink />\n <Cell title="单元格" isLink value="内容" />\n <Cell title="单元格" isLink value="内容" arrowDirection="down" />\n </View>\n )\n}\n\n
\n可以通过url
属性进行页面跳转,通过linkType
属性控制跳转类型。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Cell\n isLink\n title="单元格"\n linkType="navigateTo"\n url="/pages/dashboard/index"\n />\n </View>\n )\n}\n\n
\n通过CellGroup
的title
属性可以指定分组标题。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { CellGroup, Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <CellGroup title="分组1">\n <Cell title="单元格" value="内容" />\n </CellGroup>\n <CellGroup title="分组2">\n <Cell title="单元格" value="内容" />\n </CellGroup>\n </View>\n )\n}\n\n
\n如以上用法不能满足你的需求,可以使用renderTitle
和renderRightIcon
来渲染内容
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Cell, Tag, Icon } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Cell\n value="内容"\n icon="shop-o"\n isLink\n renderTitle={\n <View>\n <View className="title">单元格</View>\n <Tag type="danger">标签</Tag>\n </View>\n }\n />\n <Cell\n title="单元格"\n border={false}\n renderRightIcon={<Icon name="search"></Icon>}\n />\n </View>\n )\n}\n\n
\n通过center
属性可以让Cell
的左右内容都垂直居中。
/* eslint-disable */\nimport { View } from '@tarojs/components'\nimport { Cell } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n <Cell center={true} title="单元格" value="内容" label="描述信息" />\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
url | \n点击后跳转的链接地址 | \n string | \n- | \nfalse | \n
linkType | \n点击后跳转的链接地址 | \n attr: ¦ "navigateTo" ¦ "reLaunch" ¦ "redirectTo" | \nnavigateTo | \nfalse | \n
title | \n左侧标题 | \n string ¦ number | \n- | \nfalse | \n
value | \n右侧内容 | \n string ¦ number | \n- | \nfalse | \n
icon | \n标题下方的描述信息 | \n string | \n- | \nfalse | \n
size | \n单元格大小,可选值为 large | \n "large" | \n- | \nfalse | \n
label | \n标题下方的描述信息 | \n ReactNode | \n- | \nfalse | \n
center | \n是否使内容垂直居中 | \n boolean | \n- | \nfalse | \n
isLink | \n是否展示右侧箭头并开启点击反馈 | \n boolean | \n- | \nfalse | \n
required | \n是否显示表单必填星号 | \n boolean | \nfalse | \nfalse | \n
clickable | \n是否开启点击反馈 | \n boolean | \nfalse | \nfalse | \n
titleWidth | \n标题宽度,须包含单位 | \n string | \n- | \nfalse | \n
style | \n- | \n string | \n- | \nfalse | \n
arrowDirection | \n箭头方向 | \n attr: ¦ "left" ¦ "up" ¦ "down" | \n- | \nfalse | \n
border | \n是否显示下边框 | \n boolean | \n- | \nfalse | \n
titleStyle | \n标题样式 | \n CSSProperties | \n- | \nfalse | \n
renderTitle | \n自定义渲染标题 | \n ReactNode | \n- | \nfalse | \n
renderIcon | \n自定义渲染左侧 icon | \n ReactNode | \n- | \nfalse | \n
renderLabel | \n自定义 label 显示内容 | \n ReactNode | \n- | \nfalse | \n
renderRightIcon | \n自定义 icon 显示内容 | \n ReactNode | \n- | \nfalse | \n
renderExtra | \n自定义右边内容后跟随的内容 | \n ReactNode | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
title | \n标题 | \n ReactNode | \n- | \nfalse | \n
border | \n是否显示外边框 | \n boolean | \ntrue | \nfalse | \n
inset | \n是否展示为圆角卡片风格 | \n boolean | \nfalse | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--cell-font-size | \n @font-size-md; | \n
--cell-line-height | \n 48px; | \n
--cell-vertical-padding | \n @padding-sm; | \n
--cell-horizontal-padding | \n @padding-md; | \n
--cell-text-color | \n @text-color; | \n
--cell-background-color | \n @white; | \n
--cell-border-color | \n @border-color; | \n
--cell-required-color | \n @red; | \n
--cell-label-color | \n @gray-6; | \n
--cell-label-font-size | \n @font-size-sm; | \n
--cell-label-margin-top | \n 6px; | \n
--cell-value-color | \n @gray-6; | \n
--cell-icon-size | \n @font-size-lg; | \n
--cell-right-icon-color | \n @gray-6; | \n
--cell-large-vertical-padding | \n @padding-sm; | \n
--cell-large-title-font-size | \n @font-size-lg; | \n
--cell-large-value-font-size | \n @font-size-lg; | \n
--cell-large-label-font-size | \n @font-size-md; | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--cell-group-background-color | \n @white; | \n
--cell-group-title-color | \n @gray-6; | \n
--cell-group-title-padding | \n @padding-md @padding-md @padding-xs; | \n
--cell-group-title-font-size | \n @font-size-md; | \n
--cell-group-title-line-height | \n 32px; | \n
--cell-group-inset-padding | \n 0 @padding-md; | \n
--cell-group-inset-border-radius | \n @border-radius-lg; | \n
--cell-group-inset-title-padding | \n @padding-md @padding-md @padding-xs @padding-xl; | \n
宫格可以在水平方向上把页面分隔成等宽度的区块,用于展示内容或进行页面导航。
\n在 Taro 文件中引入组件
\nimport { Grid, GridItem } from '@antmjs/vantui'\n
\n\n\nVant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手
\n
通过icon
属性设置格子内的图标,text
属性设置文字内容。
function Demo() {\n return (\n <Grid>\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n </Grid>\n )\n}\n
\n默认一行展示四个格子,可以通过columnNum
自定义列数。
function Demo() {\n return (\n <Grid columnNum="3">\n <GridItem icon="photo-o" text="文字" />\n </Grid>\n )\n}\n
\n通过插槽可以自定义格子展示的内容。
\nfunction Demo() {\n return (\n <Grid columnNum="3" border={false}>\n {[1, 2, 3].map((item, index) => (\n <GridItem key={index} forItem="index">\n <Image\n style="width: 100%; height: 90px;"\n src={::::_QAhttps://img.yzcdn.cn/vant/apple-::::_ABindex + 1}.jpg::::_QA}\n />\n </GridItem>\n ))}\n </Grid>\n )\n}\n
\n设置square
属性后,格子的高度会和宽度保持一致。
function Demo() {\n return (\n <Grid square iconSize="48">\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n </Grid>\n )\n}\n
\n通过gutter
属性设置格子之间的距离。
function Demo() {\n return (\n <Grid gutter={10}>\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n </Grid>\n )\n}\n
\n将direction
属性设置为horizontal
,可以让宫格的内容呈横向排列。
function Demo() {\n return (\n <Grid direction="horizontal" columnNum="2">\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n </Grid>\n )\n}\n
\n可以通过url
属性进行页面跳转,通过linkType
属性控制跳转类型。
function Demo() {\n return (\n <Grid clickable columnNum="2">\n <GridItem\n icon="homeO"\n linkType="navigateTo"\n url="/pages/dashboard/index"\n text="Navigate 跳转"\n />\n <GridItem\n icon="search"\n linkType="reLaunch"\n url="/pages/dashboard/index"\n text="ReLaunch 跳转"\n />\n </Grid>\n )\n}\n
\n设置dot
属性后,会在图标右上角展示一个小红点。设置badge
属性后,会在图标右上角展示相应的徽标。
function Demo() {\n return (\n <Grid columnNum="2">\n <GridItem icon="home-o" text="文字" dot />\n <GridItem icon="search" text="文字" badge="99+" />\n </Grid>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
square | \n是否为正方形格子 | \n boolean | \n- | \nfalse | \n
gutter | \n格子间隔 | \n number ¦ string | \n- | \nfalse | \n
clickable | \n是否开启点击反馈 | \n boolean | \n- | \nfalse | \n
columnNum | \n列数 | \n number ¦ string | \n- | \nfalse | \n
center | \n是否居中排列 | \n boolean | \n- | \nfalse | \n
border | \n是否显示边框 | \n boolean | \n- | \nfalse | \n
direction | \n内容对齐方式 | \n "horizontal" | \n- | \nfalse | \n
iconSize | \n图标大小 | \n string ¦ number | \n- | \nfalse | \n
reverse | \n内容顺序反转 | \n boolean | \n- | \nfalse | \n
children | \n自定义内容 | \n React.ReactNode | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
icon | \n图标名称或图片链接 | \n string | \n\'\' | \nfalse | \n
iconColor | \n图标颜色 | \n string | \n\'\' | \nfalse | \n
iconPrefix | \n图标类名前缀,同 Icon 组件的 classPrefix 属性 | \n string | \n\'\' | \nfalse | \n
dot | \n是否显示图标右上角小红点 | \n boolean | \n\'\' | \nfalse | \n
info | \n图标右上角提示信息 | \n attr: ¦ string ¦ number ¦ undefined | \n\'\' | \nfalse | \n
badge | \n图标右上角徽标的内容 | \n attr: ¦ string ¦ number ¦ undefined | \n\'\' | \nfalse | \n
text | \n文字描述 | \n ReactNode | \n\'\' | \nfalse | \n
url | \n点击后跳转的链接地址 | \n string | \n\'\' | \nfalse | \n
linkType | \n跳转类型 | \n attr: ¦ "navigateTo" ¦ "reLaunch" ¦ "redirectTo" | \n\'\' | \nfalse | \n
children | \n自定义内容 | \n React.ReactNode | \n\'\' | \nfalse | \n
renderIcon | \n自定义图标内容 | \n React.ReactNode | \n\'\' | \nfalse | \n
宫格可以在水平方向上把页面分隔成等宽度的区块,用于展示内容或进行页面导航。
\n在 Taro 文件中引入组件
\nimport { Grid, GridItem } from '@antmjs/vantui'\n
\n\n\nVant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手
\n
通过icon
属性设置格子内的图标,text
属性设置文字内容。
function Demo() {\n return (\n <Grid>\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n </Grid>\n )\n}\n
\n默认一行展示四个格子,可以通过columnNum
自定义列数。
function Demo() {\n return (\n <Grid columnNum="3">\n <GridItem icon="photo-o" text="文字" />\n </Grid>\n )\n}\n
\n通过插槽可以自定义格子展示的内容。
\nfunction Demo() {\n return (\n <Grid columnNum="3" border={false}>\n {[1, 2, 3].map((item, index) => (\n <GridItem key={index} forItem="index">\n <Image\n style="width: 100%; height: 90px;"\n src={::::_QAhttps://img.yzcdn.cn/vant/apple-::::_ABindex + 1}.jpg::::_QA}\n />\n </GridItem>\n ))}\n </Grid>\n )\n}\n
\n设置square
属性后,格子的高度会和宽度保持一致。
function Demo() {\n return (\n <Grid square iconSize="48">\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n </Grid>\n )\n}\n
\n通过gutter
属性设置格子之间的距离。
function Demo() {\n return (\n <Grid gutter={10}>\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n </Grid>\n )\n}\n
\n将direction
属性设置为horizontal
,可以让宫格的内容呈横向排列。
function Demo() {\n return (\n <Grid direction="horizontal" columnNum="2">\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n <GridItem icon="photo-o" text="文字" />\n </Grid>\n )\n}\n
\n可以通过url
属性进行页面跳转,通过linkType
属性控制跳转类型。
function Demo() {\n return (\n <Grid clickable columnNum="2">\n <GridItem\n icon="homeO"\n linkType="navigateTo"\n url="/pages/dashboard/index"\n text="Navigate 跳转"\n />\n <GridItem\n icon="search"\n linkType="reLaunch"\n url="/pages/dashboard/index"\n text="ReLaunch 跳转"\n />\n </Grid>\n )\n}\n
\n设置dot
属性后,会在图标右上角展示一个小红点。设置badge
属性后,会在图标右上角展示相应的徽标。
function Demo() {\n return (\n <Grid columnNum="2">\n <GridItem icon="home-o" text="文字" dot />\n <GridItem icon="search" text="文字" badge="99+" />\n </Grid>\n )\n}\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
square | \n是否为正方形格子 | \n boolean | \n- | \nfalse | \n
gutter | \n格子间隔 | \n number ¦ string | \n- | \nfalse | \n
clickable | \n是否开启点击反馈 | \n boolean | \n- | \nfalse | \n
columnNum | \n列数 | \n number ¦ string | \n- | \nfalse | \n
center | \n是否居中排列 | \n boolean | \n- | \nfalse | \n
border | \n是否显示边框 | \n boolean | \n- | \nfalse | \n
direction | \n内容对齐方式 | \n "horizontal" | \n- | \nfalse | \n
iconSize | \n图标大小 | \n string ¦ number | \n- | \nfalse | \n
reverse | \n内容顺序反转 | \n boolean | \n- | \nfalse | \n
children | \n自定义内容 | \n React.ReactNode | \n- | \nfalse | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
icon | \n图标名称或图片链接 | \n string | \n\'\' | \nfalse | \n
iconColor | \n图标颜色 | \n string | \n\'\' | \nfalse | \n
iconPrefix | \n图标类名前缀,同 Icon 组件的 classPrefix 属性 | \n string | \n\'\' | \nfalse | \n
dot | \n是否显示图标右上角小红点 | \n boolean | \n\'\' | \nfalse | \n
info | \n图标右上角提示信息 | \n attr: ¦ string ¦ number ¦ undefined | \n\'\' | \nfalse | \n
badge | \n图标右上角徽标的内容 | \n attr: ¦ string ¦ number ¦ undefined | \n\'\' | \nfalse | \n
text | \n文字描述 | \n ReactNode | \n\'\' | \nfalse | \n
url | \n点击后跳转的链接地址 | \n string | \n\'\' | \nfalse | \n
linkType | \n跳转类型 | \n attr: ¦ "navigateTo" ¦ "reLaunch" ¦ "redirectTo" | \n\'\' | \nfalse | \n
children | \n自定义内容 | \n React.ReactNode | \n\'\' | \nfalse | \n
renderIcon | \n自定义图标内容 | \n React.ReactNode | \n\'\' | \nfalse | \n
用于实时展示倒计时数值,支持毫秒精度。
\n在 Taro 文件中引入组件
\nimport { CountDown } from '@antmjs/vantui'\n
\n\n\nVant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手。
\n
time
属性表示倒计时总时长,单位为毫秒。
/* eslint-disable */\nimport react from 'react'\nimport { CountDown } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value] = react.useState(30 * 60 * 60 * 1000)\n\n return <CountDown time={value} />\n}\n\n
\n通过format
属性设置倒计时文本的内容。
/* eslint-disable */\nimport react from 'react'\nimport { CountDown } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value] = react.useState(30 * 60 * 60 * 1000)\n\n return <CountDown time={value} format="DD 天 HH 时 mm 分 ss 秒" />\n}\n\n
\n倒计时默认每秒渲染一次,设置millisecond
属性可以开启毫秒级渲染。
/* eslint-disable */\nimport react from 'react'\nimport { CountDown } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value] = react.useState(30 * 60 * 60 * 1000)\n\n return <CountDown millisecond time={value} format="HH:mm:ss:SSS" />\n}\n\n
\n通过onChange
事件获取timeData
对象并自行渲染,格式见下方表格。
/* eslint-disable */\nimport react from 'react'\nimport { Text } from '@tarojs/components'\nimport { CountDown, ITimeData } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value] = react.useState(30 * 60 * 60 * 1000)\n const [timeData, setTimeData] = react.useState<ITimeData | null>()\n\n return (\n <CountDown time={value} onChange={(e) => setTimeData({ ...e.detail })}>\n <Text style={{ color: 'blue' }}>{timeData?.hours}</Text>时\n <Text style={{ color: 'green' }}>{timeData?.minutes}</Text>分\n <Text style={{ color: 'red' }}>{timeData?.seconds}</Text>秒\n </CountDown>\n )\n}\n\n
\n通过 ref
选择器获取到组件实例后,可以调用start
、pause
、reset
方法。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Toast, CountDown, ICountDownRef, Grid, GridItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const it = react.useRef<ICountDownRef>()\n\n return (\n <View>\n <Toast id="controlCountDown-mess" />\n <CountDown\n onChange={(e) => console.info(e)}\n ref={it}\n className="controlCountDown"\n millisecond\n time={4000}\n autoStart={false}\n format="ss:SSS"\n onFinish={() => Toast.show('end')}\n />\n <Grid clickable columnNum={3}>\n <GridItem\n text="开始"\n icon="play-circle-o"\n onClick={() => it.current?.start()}\n />\n <GridItem\n text="暂停"\n icon="pause-circle-o"\n onClick={() => it.current?.pause()}\n />\n <GridItem\n text="重置"\n icon="replay"\n onClick={() => {\n console.info(it)\n it.current?.reset()\n }}\n />\n </Grid>\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n
---|---|---|
start | \n- | \n () => void | \n
pause | \n- | \n () => void | \n
reset | \n- | \n () => void | \n
参数 | \n说明 | \n类型 | \n
---|---|---|
days | \n- | \n number | \n
hours | \n- | \n number | \n
minutes | \n- | \n number | \n
seconds | \n- | \n number | \n
milliseconds | \n- | \n number | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
millisecond | \n- | \n boolean | \n- | \nfalse | \n
time | \n- | \n number | \n- | \nfalse | \n
format | \n- | \n string | \n- | \nfalse | \n
autoStart | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onChange | \n- | \n (timeData: { detail: ITimeData }) => void | \n- | \nfalse | \n
onFinish | \n- | \n () => void | \n- | \nfalse | \n
ref | \n- | \n React.MutableRefObject< ¦ ICountDownRef ¦ undefined > | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--count-down-text-color | \n @text-color; | \n
--count-down-font-size | \n @font-size-md; | \n
--count-down-line-height | \n 40px; | \n
用于实时展示倒计时数值,支持毫秒精度。
\n在 Taro 文件中引入组件
\nimport { CountDown } from '@antmjs/vantui'\n
\n\n\nVant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手。
\n
time
属性表示倒计时总时长,单位为毫秒。
/* eslint-disable */\nimport react from 'react'\nimport { CountDown } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value] = react.useState(30 * 60 * 60 * 1000)\n\n return <CountDown time={value} />\n}\n\n
\n通过format
属性设置倒计时文本的内容。
/* eslint-disable */\nimport react from 'react'\nimport { CountDown } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value] = react.useState(30 * 60 * 60 * 1000)\n\n return <CountDown time={value} format="DD 天 HH 时 mm 分 ss 秒" />\n}\n\n
\n倒计时默认每秒渲染一次,设置millisecond
属性可以开启毫秒级渲染。
/* eslint-disable */\nimport react from 'react'\nimport { CountDown } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value] = react.useState(30 * 60 * 60 * 1000)\n\n return <CountDown millisecond time={value} format="HH:mm:ss:SSS" />\n}\n\n
\n通过onChange
事件获取timeData
对象并自行渲染,格式见下方表格。
/* eslint-disable */\nimport react from 'react'\nimport { Text } from '@tarojs/components'\nimport { CountDown, ITimeData } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value] = react.useState(30 * 60 * 60 * 1000)\n const [timeData, setTimeData] = react.useState<ITimeData | null>()\n\n return (\n <CountDown time={value} onChange={(e) => setTimeData({ ...e.detail })}>\n <Text style={{ color: 'blue' }}>{timeData?.hours}</Text>时\n <Text style={{ color: 'green' }}>{timeData?.minutes}</Text>分\n <Text style={{ color: 'red' }}>{timeData?.seconds}</Text>秒\n </CountDown>\n )\n}\n\n
\n通过 ref
选择器获取到组件实例后,可以调用start
、pause
、reset
方法。
/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Toast, CountDown, ICountDownRef, Grid, GridItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n const it = react.useRef<ICountDownRef>()\n\n return (\n <View>\n <Toast id="controlCountDown-mess" />\n <CountDown\n onChange={(e) => console.info(e)}\n ref={it}\n className="controlCountDown"\n millisecond\n time={4000}\n autoStart={false}\n format="ss:SSS"\n onFinish={() => Toast.show('end')}\n />\n <Grid clickable columnNum={3}>\n <GridItem\n text="开始"\n icon="play-circle-o"\n onClick={() => it.current?.start()}\n />\n <GridItem\n text="暂停"\n icon="pause-circle-o"\n onClick={() => it.current?.pause()}\n />\n <GridItem\n text="重置"\n icon="replay"\n onClick={() => {\n console.info(it)\n it.current?.reset()\n }}\n />\n </Grid>\n </View>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n
---|---|---|
start | \n- | \n () => void | \n
pause | \n- | \n () => void | \n
reset | \n- | \n () => void | \n
参数 | \n说明 | \n类型 | \n
---|---|---|
days | \n- | \n number | \n
hours | \n- | \n number | \n
minutes | \n- | \n number | \n
seconds | \n- | \n number | \n
milliseconds | \n- | \n number | \n
参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
millisecond | \n- | \n boolean | \n- | \nfalse | \n
time | \n- | \n number | \n- | \nfalse | \n
format | \n- | \n string | \n- | \nfalse | \n
autoStart | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
onChange | \n- | \n (timeData: { detail: ITimeData }) => void | \n- | \nfalse | \n
onFinish | \n- | \n () => void | \n- | \nfalse | \n
ref | \n- | \n React.MutableRefObject< ¦ ICountDownRef ¦ undefined > | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--count-down-text-color | \n @text-color; | \n
--count-down-font-size | \n @font-size-md; | \n
--count-down-line-height | \n 40px; | \n
高级版 React In Taro 模版工程:目前支持微信、支付宝、抖音、快手、百度小程序;支持 H5
\n笔者是 React 的重度使用者,也开发过非常多的 React 应用,也从一线开发一步一步走到管理岗。回想一下,React 很大一部分“问题”是什么?是处理数据依赖不够优雅,不管是从 componentWillReceiveProps 到现在的 useEffect,或者各种全局数据状态管理工具,在时间紧且业务逻辑稍微复杂一点的场景,写出来的结果是可想而知的《PS:业务都来不及写,还管你优不优雅》。为什么很多国内中小型公司用 VUE,我想有一点点原因吧,写起来至少比 React 舒坦;
\n另外一方面,写了无数个页面的我,发现每个页面基本都逃不出进来的时候 loading、然后渲染正常页面,或者渲染异常页面;下拉刷新;有分页的加个上划加载更多;点击的时候要控制抖动;错误的时候要 Toast;没登录的时候要弹出登录;八九不离十,都是差不多的,那有没有可能把这些重复的工作封装起来呢,嗯,我们这么做了;
\n那对于我们来说,其实目的很单一,提高团队协作开发效率,提升代码质量,提高代码可维护性,我想这个模版能解决一些问题吧。当然额外增加了一个实例相比较研发速度及质量,我认为可以忽略;这个模版设计的初衷也是满足中小型企业用的,大公司有足够的资源、时间、规范等解决这些问题。最后,哪里有问题可以进群沟通交流。
\n// 代码不多,可以自己看源码\nimport { Unite } from '@antmjs/unite'\n// 和UI无关的全局数据定义在这里面,具体可以看项目模版\nimport {} from '@/cache'\n// 和UI相关的全局数据定义在这里面,具体可以看项目模版\nimport {} from '@/store'\n\n// 一切都是类型安全,一切都是自动提示 !哈哈哈哈\n// Unite外的错误逻辑Unite无法捕获,Unite回调函数内的方法的异常Unite无法捕获\nexport default Unite(\n {\n // 和UI相关的当前页面变量定义在state里,和UI无关的当前页面变量定义在和state同层,比如tempData1,tempData2\n state: {},\n tempData1: 'xxx',\n tempData2: 'xxx',\n // onLoad onReady onShow 如果有发起异步请求的,记得加上async await 否则下拉刷新会打开后立即关闭\n async onLoad() {\n // 通过this.state可以取到state的结果\n // 通过this.props可以取到props的结果\n // 通过this.location可以取到路由的结果\n // 通过this.loading可以取到当前正在异步加载中的方法\n // 通过this.hooks可以取到下面传递过来的hooks数据\n // 通过this.error可以取到错误数据,一般不需要用到,Container会通过全局Context去获取及处理\n },\n async onReady() {},\n async onShow() {},\n async onHide() {},\n },\n // 这里返回的state loading error 和上方this一致,events除了上方定义的方法外,还有部分内置的方法比如;setHooks setError\n function ({ state, events, loading, error }, props) {\n // 伪代码\n const [menuButton, setMenuButton]: any = useRecoilState(menuButtonStore)\n // 这里通过setHooks方法可以将全局数据及全局数据的设置方法传递过去,方法里面可以通过this.hooks['xxx']获取到\n events.setHooks({\n xxx: menuButton,\n yyy: setMenuButton,\n })\n // 这里可以写hooks\n useEffect(() => {}, [])\n return (\n // 这里可以引入Container组件包裹起来,内置导航栏、下拉刷新逻辑、自动处理异常、登录等,具体可以看Container组件\n <View>Unite</View>\n )\n },\n // cancelInterception 默认对事件都添加了“防抖”策略,即触发async方法只有等结束之后再点才有效\n { page: true, cancelInterception: [] },\n)\n
\n注: 目前成功或者错误的处理都遵循{success: true, data: xxx} {success: false, code: \'xxx\', message: \'xxx\'} 的规范,服务端返回的格式返回后建议前端做一个层处理,模版内 Request 部分有说明
\n高级版 React In Taro 模版工程:目前支持微信、支付宝、抖音、快手、百度小程序;支持 H5
\n笔者是 React 的重度使用者,也开发过非常多的 React 应用,也从一线开发一步一步走到管理岗。回想一下,React 很大一部分“问题”是什么?是处理数据依赖不够优雅,不管是从 componentWillReceiveProps 到现在的 useEffect,或者各种全局数据状态管理工具,在时间紧且业务逻辑稍微复杂一点的场景,写出来的结果是可想而知的《PS:业务都来不及写,还管你优不优雅》。为什么很多国内中小型公司用 VUE,我想有一点点原因吧,写起来至少比 React 舒坦;
\n另外一方面,写了无数个页面的我,发现每个页面基本都逃不出进来的时候 loading、然后渲染正常页面,或者渲染异常页面;下拉刷新;有分页的加个上划加载更多;点击的时候要控制抖动;错误的时候要 Toast;没登录的时候要弹出登录;八九不离十,都是差不多的,那有没有可能把这些重复的工作封装起来呢,嗯,我们这么做了;
\n那对于我们来说,其实目的很单一,提高团队协作开发效率,提升代码质量,提高代码可维护性,我想这个模版能解决一些问题吧。当然额外增加了一个实例相比较研发速度及质量,我认为可以忽略;这个模版设计的初衷也是满足中小型企业用的,大公司有足够的资源、时间、规范等解决这些问题。最后,哪里有问题可以进群沟通交流。
\n// 代码不多,可以自己看源码\nimport { Unite } from '@antmjs/unite'\n// 和UI无关的全局数据定义在这里面,具体可以看项目模版\nimport {} from '@/cache'\n// 和UI相关的全局数据定义在这里面,具体可以看项目模版\nimport {} from '@/store'\n\n// 一切都是类型安全,一切都是自动提示 !哈哈哈哈\n// Unite外的错误逻辑Unite无法捕获,Unite回调函数内的方法的异常Unite无法捕获\nexport default Unite(\n {\n // 和UI相关的当前页面变量定义在state里,和UI无关的当前页面变量定义在和state同层,比如tempData1,tempData2\n state: {},\n tempData1: 'xxx',\n tempData2: 'xxx',\n // onLoad onReady onShow 如果有发起异步请求的,记得加上async await 否则下拉刷新会打开后立即关闭\n async onLoad() {\n // 通过this.state可以取到state的结果\n // 通过this.props可以取到props的结果\n // 通过this.location可以取到路由的结果\n // 通过this.loading可以取到当前正在异步加载中的方法\n // 通过this.hooks可以取到下面传递过来的hooks数据\n // 通过this.error可以取到错误数据,一般不需要用到,Container会通过全局Context去获取及处理\n },\n async onReady() {},\n async onShow() {},\n async onHide() {},\n },\n // 这里返回的state loading error 和上方this一致,events除了上方定义的方法外,还有部分内置的方法比如;setHooks setError\n function ({ state, events, loading, error }, props) {\n // 伪代码\n const [menuButton, setMenuButton]: any = useRecoilState(menuButtonStore)\n // 这里通过setHooks方法可以将全局数据及全局数据的设置方法传递过去,方法里面可以通过this.hooks['xxx']获取到\n events.setHooks({\n xxx: menuButton,\n yyy: setMenuButton,\n })\n // 这里可以写hooks\n useEffect(() => {}, [])\n return (\n // 这里可以引入Container组件包裹起来,内置导航栏、下拉刷新逻辑、自动处理异常、登录等,具体可以看Container组件\n <View>Unite</View>\n )\n },\n // cancelInterception 默认对事件都添加了“防抖”策略,即触发async方法只有等结束之后再点才有效\n { page: true, cancelInterception: [] },\n)\n
\n注: 目前成功或者错误的处理都遵循{success: true, data: xxx} {success: false, code: \'xxx\', message: \'xxx\'} 的规范,服务端返回的格式返回后建议前端做一个层处理,模版内 Request 部分有说明
\n用于循环播放展示一组消息通知。
\n在 Taro 文件中引入组件
\nimport { NoticeBar } from '@antmjs/vantui'\n
\nimport { NoticeBar } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <NoticeBar\n leftIcon="volume-o"\n text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n />\n )\n}\n\n
\n通知栏的内容长度溢出时会自动开启滚动播放,通过 scrollable
属性可以控制该行为。
import { View } from '@tarojs/components'\nimport { NoticeBar } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n {/* 文字较短时,通过设置 scrollable 属性开启滚动播放 */}\n <NoticeBar scrollable text="技术是开发它的人的共同灵魂。" />\n {/* 文字较长时,通过禁用 scrollable 属性关闭滚动播放 */}\n <NoticeBar\n scrollable={false}\n text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n />\n </View>\n )\n}\n\n
\n文字较长时,可以通过设置 wrapable
属性来开启多行展示。
import { NoticeBar } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <NoticeBar\n wrapable={true}\n scrollable={false}\n text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n />\n )\n}\n\n
\n通知栏支持 closeable
和 link
两种模式。
import { View } from '@tarojs/components'\nimport { NoticeBar } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n {/* closeable 模式,在右侧显示关闭按钮 */}\n <NoticeBar mode="closeable" text="技术是开发它的人的共同灵魂。" />\n {/* link 模式,在右侧显示链接箭头 */}\n <NoticeBar mode="link" text="技术是开发它的人的共同灵魂。" />\n </View>\n )\n}\n\n
\nimport { View } from '@tarojs/components'\nimport { NoticeBar, Swiper, SwiperItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <NoticeBar leftIcon="volume-o" scrollable={false}>\n <Swiper\n direction="vertical"\n autoPlay={3000}\n touchable={false}\n height={30}\n >\n <SwiperItem>\n <View style={{ height: 30 }}>明月直入,无心可猜1。</View>\n </SwiperItem>\n <SwiperItem>\n <View style={{ height: 30 }}>明月直入,无心可猜2。</View>\n </SwiperItem>\n <SwiperItem>\n <View style={{ height: 30 }}>明月直入,无心可猜3。</View>\n </SwiperItem>\n </Swiper>\n </NoticeBar>\n )\n}\n\n
\n通过 color
属性设置文本颜色,通过 background
属性设置背景色。
import { NoticeBar } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <NoticeBar\n color="#1989fa"\n background="#ecf9ff"\n leftIcon="info-o"\n text="技术是开发它的人的共同灵魂。"\n />\n )\n}\n\n
\n使用speed
属性控制滚动速率。
import { NoticeBar } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <NoticeBar\n text={'技术是开发它的人的共同灵魂。技术是开发它的人的共同灵魂。'}\n speed={20}\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
text | \n- | \n ReactNode | \n- | \nfalse | \n
mode | \n- | \n attr: ¦ "closeable" ¦ "link" | \n- | \nfalse | \n
url | \n- | \n string | \n- | \nfalse | \n
openType | \n- | \n any | \n- | \nfalse | \n
delay | \n- | \n number | \n- | \nfalse | \n
speed | \n- | \n number | \n- | \nfalse | \n
scrollable | \n- | \n boolean | \n- | \nfalse | \n
leftIcon | \n- | \n string | \n- | \nfalse | \n
color | \n- | \n string | \n- | \nfalse | \n
backgroundColor | \n- | \n string | \n- | \nfalse | \n
background | \n- | \n string | \n- | \nfalse | \n
wrapable | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
renderLeftIcon | \n- | \n ReactNode | \n- | \nfalse | \n
renderRightIcon | \n- | \n ReactNode | \n- | \nfalse | \n
onClick | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
onClose | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--notice-bar-height | \n 80px; | \n
--notice-bar-padding | \n 0 @padding-md; | \n
--notice-bar-wrapable-padding | \n @padding-xs @padding-md; | \n
--notice-bar-font-size | \n @font-size-md; | \n
--notice-bar-text-color | \n @orange-dark; | \n
--notice-bar-line-height | \n 48px; | \n
--notice-bar-background-color | \n @orange-light; | \n
--notice-bar-icon-size | \n 32px; | \n
--notice-bar-icon-min-width | \n 44px; | \n
用于循环播放展示一组消息通知。
\n在 Taro 文件中引入组件
\nimport { NoticeBar } from '@antmjs/vantui'\n
\nimport { NoticeBar } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <NoticeBar\n leftIcon="volume-o"\n text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n />\n )\n}\n\n
\n通知栏的内容长度溢出时会自动开启滚动播放,通过 scrollable
属性可以控制该行为。
import { View } from '@tarojs/components'\nimport { NoticeBar } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n {/* 文字较短时,通过设置 scrollable 属性开启滚动播放 */}\n <NoticeBar scrollable text="技术是开发它的人的共同灵魂。" />\n {/* 文字较长时,通过禁用 scrollable 属性关闭滚动播放 */}\n <NoticeBar\n scrollable={false}\n text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n />\n </View>\n )\n}\n\n
\n文字较长时,可以通过设置 wrapable
属性来开启多行展示。
import { NoticeBar } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <NoticeBar\n wrapable={true}\n scrollable={false}\n text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"\n />\n )\n}\n\n
\n通知栏支持 closeable
和 link
两种模式。
import { View } from '@tarojs/components'\nimport { NoticeBar } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <View>\n {/* closeable 模式,在右侧显示关闭按钮 */}\n <NoticeBar mode="closeable" text="技术是开发它的人的共同灵魂。" />\n {/* link 模式,在右侧显示链接箭头 */}\n <NoticeBar mode="link" text="技术是开发它的人的共同灵魂。" />\n </View>\n )\n}\n\n
\nimport { View } from '@tarojs/components'\nimport { NoticeBar, Swiper, SwiperItem } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <NoticeBar leftIcon="volume-o" scrollable={false}>\n <Swiper\n direction="vertical"\n autoPlay={3000}\n touchable={false}\n height={30}\n >\n <SwiperItem>\n <View style={{ height: 30 }}>明月直入,无心可猜1。</View>\n </SwiperItem>\n <SwiperItem>\n <View style={{ height: 30 }}>明月直入,无心可猜2。</View>\n </SwiperItem>\n <SwiperItem>\n <View style={{ height: 30 }}>明月直入,无心可猜3。</View>\n </SwiperItem>\n </Swiper>\n </NoticeBar>\n )\n}\n\n
\n通过 color
属性设置文本颜色,通过 background
属性设置背景色。
import { NoticeBar } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <NoticeBar\n color="#1989fa"\n background="#ecf9ff"\n leftIcon="info-o"\n text="技术是开发它的人的共同灵魂。"\n />\n )\n}\n\n
\n使用speed
属性控制滚动速率。
import { NoticeBar } from '@antmjs/vantui'\n\nexport default function Demo() {\n return (\n <NoticeBar\n text={'技术是开发它的人的共同灵魂。技术是开发它的人的共同灵魂。'}\n speed={20}\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
text | \n- | \n ReactNode | \n- | \nfalse | \n
mode | \n- | \n attr: ¦ "closeable" ¦ "link" | \n- | \nfalse | \n
url | \n- | \n string | \n- | \nfalse | \n
openType | \n- | \n any | \n- | \nfalse | \n
delay | \n- | \n number | \n- | \nfalse | \n
speed | \n- | \n number | \n- | \nfalse | \n
scrollable | \n- | \n boolean | \n- | \nfalse | \n
leftIcon | \n- | \n string | \n- | \nfalse | \n
color | \n- | \n string | \n- | \nfalse | \n
backgroundColor | \n- | \n string | \n- | \nfalse | \n
background | \n- | \n string | \n- | \nfalse | \n
wrapable | \n- | \n boolean | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
renderLeftIcon | \n- | \n ReactNode | \n- | \nfalse | \n
renderRightIcon | \n- | \n ReactNode | \n- | \nfalse | \n
onClick | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
onClose | \n- | \n ( event: ITouchEvent ) => any | \n- | \nfalse | \n
rectWrapper | \n微信端使用时, 所在元素层级太深,需要设置元素层级不是很深的父元素的 className(‘.xx’)或 id(#xx), 支持当前组件获取 rect 信息 | \n string | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--notice-bar-height | \n 80px; | \n
--notice-bar-padding | \n 0 @padding-md; | \n
--notice-bar-wrapable-padding | \n @padding-xs @padding-md; | \n
--notice-bar-font-size | \n @font-size-md; | \n
--notice-bar-text-color | \n @orange-dark; | \n
--notice-bar-line-height | \n 48px; | \n
--notice-bar-background-color | \n @orange-light; | \n
--notice-bar-icon-size | \n 32px; | \n
--notice-bar-icon-min-width | \n 44px; | \n
圆环形的进度条组件,支持进度渐变动画。
\n在 Taro 文件中引入组件
\nimport { Circle } from '@antmjs/vantui'\n
\nvalue
属性表示进度条的目标进度。
/* eslint-disable */\nimport { Circle } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Circle value={30} text="text" />\n}\n\n
\nstrokeWidth
属性来控制进度条宽度。color
属性来控制进度条颜色,layerColor
属性来控制轨道颜色。color
属性支持传入对象格式来定义渐变色。size
属性设置圆环直径。案例
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Circle, Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(50)\n return (\n <View>\n <Circle value={value} strokeWidth={6} text="宽度定制" />\n <Circle\n value={value}\n layerColor="#eeeeee"\n color="#ee0a24"\n text="颜色定制"\n />\n <Circle\n value={value}\n color={{\n '0%': '#ffd01e',\n '100%': '#ee0a24',\n }}\n text="渐变色"\n />\n <Circle value={value} size={120} text="大小定制" />\n\n <Button onClick={() => setValue(value + 10)}>增加</Button>\n </View>\n )\n}\n\n
\n将clockwise
设置为false
,进度会从逆时针方向开始。
/* eslint-disable */\nimport react from 'react'\nimport { Circle, Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(50)\n\n return (\n <>\n <Circle value={value} color="#07c160" clockwise={false} text="逆时针" />\n <Button onClick={() => setValue(value + 10)}>增加</Button>\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
text | \n- | \n ReactNode | \n- | \nfalse | \n
lineCap | \n- | \n string | \n- | \nfalse | \n
value | \n- | \n number | \n- | \nfalse | \n
speed | \n- | \n number | \n- | \nfalse | \n
size | \n- | \n number | \n- | \nfalse | \n
fill | \n- | \n string | \n- | \nfalse | \n
layerColor | \n- | \n string | \n- | \nfalse | \n
color | \n- | \n attr: ¦ string ¦ Record< string, string > | \n- | \nfalse | \n
strokeWidth | \n- | \n number | \n- | \nfalse | \n
clockwise | \n- | \n boolean | \n- | \nfalse | \n
beginAngle | \n- | \n number | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--circle-text-color | \n @text-color; | \n
--circle-font-color | \n 28px; | \n
圆环形的进度条组件,支持进度渐变动画。
\n在 Taro 文件中引入组件
\nimport { Circle } from '@antmjs/vantui'\n
\nvalue
属性表示进度条的目标进度。
/* eslint-disable */\nimport { Circle } from '@antmjs/vantui'\n\nexport default function Demo() {\n return <Circle value={30} text="text" />\n}\n\n
\nstrokeWidth
属性来控制进度条宽度。color
属性来控制进度条颜色,layerColor
属性来控制轨道颜色。color
属性支持传入对象格式来定义渐变色。size
属性设置圆环直径。案例
\n/* eslint-disable */\nimport react from 'react'\nimport { View } from '@tarojs/components'\nimport { Circle, Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(50)\n return (\n <View>\n <Circle value={value} strokeWidth={6} text="宽度定制" />\n <Circle\n value={value}\n layerColor="#eeeeee"\n color="#ee0a24"\n text="颜色定制"\n />\n <Circle\n value={value}\n color={{\n '0%': '#ffd01e',\n '100%': '#ee0a24',\n }}\n text="渐变色"\n />\n <Circle value={value} size={120} text="大小定制" />\n\n <Button onClick={() => setValue(value + 10)}>增加</Button>\n </View>\n )\n}\n\n
\n将clockwise
设置为false
,进度会从逆时针方向开始。
/* eslint-disable */\nimport react from 'react'\nimport { Circle, Button } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [value, setValue] = react.useState(50)\n\n return (\n <>\n <Circle value={value} color="#07c160" clockwise={false} text="逆时针" />\n <Button onClick={() => setValue(value + 10)}>增加</Button>\n </>\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
text | \n- | \n ReactNode | \n- | \nfalse | \n
lineCap | \n- | \n string | \n- | \nfalse | \n
value | \n- | \n number | \n- | \nfalse | \n
speed | \n- | \n number | \n- | \nfalse | \n
size | \n- | \n number | \n- | \nfalse | \n
fill | \n- | \n string | \n- | \nfalse | \n
layerColor | \n- | \n string | \n- | \nfalse | \n
color | \n- | \n attr: ¦ string ¦ Record< string, string > | \n- | \nfalse | \n
strokeWidth | \n- | \n number | \n- | \nfalse | \n
clockwise | \n- | \n boolean | \n- | \nfalse | \n
beginAngle | \n- | \n number | \n- | \nfalse | \n
children | \n- | \n ReactNode | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--circle-text-color | \n @text-color; | \n
--circle-font-color | \n 28px; | \n
用于选择时间,支持日期、时分等时间维度,通常与 弹出层 组件配合使用。
\n在 Taro 文件中引入组件
\nimport { DatetimePicker } from '@antmjs/vantui'\n
\nvalue
为 Date 对象。
/* eslint-disable */\nimport react from 'react'\nimport { DatetimePicker } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [state, setState] = react.useState({\n minDate: new Date(2018, 0, 1).getTime(),\n currentDate: undefined,\n })\n\n const onInput = react.useCallback(\n function (event) {\n setState({\n ...state,\n currentDate: event.detail,\n })\n },\n [state],\n )\n\n return (\n <DatetimePicker\n type="datetime"\n value={state.currentDate}\n minDate={state.minDate}\n onInput={onInput}\n />\n )\n}\n\n
\nvalue
为 Date 对象,通过传入 formatter
函数对选项文字进行处理。
/* eslint-disable */\nimport react from 'react'\nimport { DatetimePicker } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [state, setState] = react.useState({\n minDate: new Date(2018, 0, 1).getTime(),\n currentDate: undefined,\n })\n\n const onInput = react.useCallback(\n function (event) {\n setState({\n ...state,\n currentDate: event.detail,\n })\n },\n [state],\n )\n\n const formatter = react.useCallback(function (type, value) {\n if (type === 'year') {\n return ::::_QA::::_ABvalue}年::::_QA\n }\n\n if (type === 'month') {\n return ::::_QA::::_ABvalue}月::::_QA\n }\n\n return value\n }, [])\n\n return (\n <DatetimePicker\n type="date"\n value={state.currentDate}\n minDate={state.minDate}\n onInput={onInput}\n formatter={formatter}\n />\n )\n}\n\n
\nvalue
为 Date 对象。
/* eslint-disable */\nimport react from 'react'\nimport { DatetimePicker } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [state, setState] = react.useState({\n currentDate: new Date(2018, 0, 1),\n minDate: new Date(2018, 0, 1).getTime(),\n })\n\n const onInput = react.useCallback(\n function (event) {\n setState({\n ...state,\n currentDate: event.detail,\n })\n },\n [state],\n )\n\n return (\n <DatetimePicker\n type="year-month"\n value={state.currentDate}\n minDate={state.minDate}\n onInput={onInput}\n />\n )\n}\n\n
\nvalue
为字符串。
/* eslint-disable */\nimport react from 'react'\nimport { DatetimePicker } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [state, setState] = react.useState({\n currentDate: '12:00',\n minHour: 10,\n maxHour: 20,\n })\n\n const onInput = react.useCallback(\n function (event) {\n setState({\n ...state,\n currentDate: event.detail,\n })\n },\n [state],\n )\n\n return (\n <DatetimePicker\n type="time"\n value={state.currentDate}\n minHour={state.minHour}\n maxHour={state.maxHour}\n onInput={onInput}\n />\n )\n}\n\n
\n通过传入 filter
函数,可以对选项数组进行过滤,实现自定义时间间隔。
/* eslint-disable */\nimport react from 'react'\nimport { DatetimePicker } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [state, setState] = react.useState({\n currentDate: '12:00',\n minHour: 10,\n maxHour: 20,\n })\n\n const onInput = react.useCallback(\n function (event) {\n setState({\n ...state,\n currentDate: event.detail,\n })\n },\n [state],\n )\n\n return (\n <DatetimePicker\n type="time"\n value={state.currentDate}\n minHour={state.minHour}\n maxHour={state.maxHour}\n onInput={onInput}\n filter={(type, options) => {\n if (type === 'minute') {\n return options.filter((option) => Number(option) % 5 === 0)\n }\n\n return options\n }}\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
value | \n选项的值,注意:DatetimePicker 为非受控组件,动态改变请使用组件实例方法updateCurrentValue | \n attr: ¦ string ¦ number ¦ Date | \nnull | \nfalse | \n
filter | \n对选项数组进行过滤,实现自定义时间间隔 | \n ( type: string, values: ( ¦ string ¦ number )[] ) => (number ¦ string)[] | \n- | \nfalse | \n
type | \n时间类型,不建议动态修改 | \n attr: ¦ "datetime" ¦ "date" ¦ "year-month" ¦ "time" | \ndatetime | \nfalse | \n
showToolbar | \n是否显示顶部栏 | \n boolean | \ntrue | \nfalse | \n
formatter | \n选项格式化函数 | \n ( type: string, value: string ¦ number ) => number ¦ string | \n- | \nfalse | \n
minDate | \n可选的最小时间,精确到分钟 | \n number ¦ string | \n十年前 | \nfalse | \n
maxDate | \n可选的最大时间,精确到分钟 | \n number ¦ string | \n十年后 | \nfalse | \n
minHour | \n可选的最小小时,针对 type=time | \n number ¦ string | \n0 | \nfalse | \n
maxHour | \n可选的最大小时,针对 type=time | \n number ¦ string | \n23 | \nfalse | \n
minMinute | \n可选的最小分钟,针对 type=time | \n number ¦ string | \n0 | \nfalse | \n
maxMinute | \n可选的最大分钟,针对 type=time | \n number ¦ string | \n59 | \nfalse | \n
onInput | \n当值变化时触发的事件 | \n ( e: DatetimePickerEventsByValue ) => void | \n- | \nfalse | \n
onChange | \n当值变化时触发的事件 | \n ( e: DatetimePickerEventsByInstance ) => void | \n- | \nfalse | \n
onConfirm | \n点击完成按钮时触发的事件 | \n ( e: DatetimePickerEventsByValue ) => void | \n- | \nfalse | \n
onCancel | \n点击取消按钮时触发的事件 | \n () => void | \n- | \nfalse | \n
继承了@taro/components 的 ITouchEvent
\n参数 | \n说明 | \n类型 | \n
---|---|---|
detail | \n选项的值 | \n { value?: ¦ string ¦ number } | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
detail | \n包含每项的值 columns、当前时间 innerValue、手动设置列数据 setColumns、更新某列值 updateColumnValue | \n { datetimePicker: { columns: ( ¦ string ¦ number )[] setColumns: ( columns: ( ¦ string ¦ number )[] ) => void innerValue: Date updateColumnValue: ( value: string ) => Promise } } | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
columns | \n- | \n ( ¦ string ¦ number )[] | \n
setColumns | \n- | \n ( columns: ( ¦ string ¦ number )[] ) => void | \n
innerValue | \n- | \n Date | \n
updateColumnValue | \n- | \n ( value: string ) => Promise | \n
pickerInstance | \n- | \n IPickerInstance | \n
updateCurrentValue | \n- | \n ( currentValue: ¦ string ¦ number ¦ Date ) => void | \n
用于选择时间,支持日期、时分等时间维度,通常与 弹出层 组件配合使用。
\n在 Taro 文件中引入组件
\nimport { DatetimePicker } from '@antmjs/vantui'\n
\nvalue
为 Date 对象。
/* eslint-disable */\nimport react from 'react'\nimport { DatetimePicker } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [state, setState] = react.useState({\n minDate: new Date(2018, 0, 1).getTime(),\n currentDate: undefined,\n })\n\n const onInput = react.useCallback(\n function (event) {\n setState({\n ...state,\n currentDate: event.detail,\n })\n },\n [state],\n )\n\n return (\n <DatetimePicker\n type="datetime"\n value={state.currentDate}\n minDate={state.minDate}\n onInput={onInput}\n />\n )\n}\n\n
\nvalue
为 Date 对象,通过传入 formatter
函数对选项文字进行处理。
/* eslint-disable */\nimport react from 'react'\nimport { DatetimePicker } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [state, setState] = react.useState({\n minDate: new Date(2018, 0, 1).getTime(),\n currentDate: undefined,\n })\n\n const onInput = react.useCallback(\n function (event) {\n setState({\n ...state,\n currentDate: event.detail,\n })\n },\n [state],\n )\n\n const formatter = react.useCallback(function (type, value) {\n if (type === 'year') {\n return ::::_QA::::_ABvalue}年::::_QA\n }\n\n if (type === 'month') {\n return ::::_QA::::_ABvalue}月::::_QA\n }\n\n return value\n }, [])\n\n return (\n <DatetimePicker\n type="date"\n value={state.currentDate}\n minDate={state.minDate}\n onInput={onInput}\n formatter={formatter}\n />\n )\n}\n\n
\nvalue
为 Date 对象。
/* eslint-disable */\nimport react from 'react'\nimport { DatetimePicker } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [state, setState] = react.useState({\n currentDate: new Date(2018, 0, 1),\n minDate: new Date(2018, 0, 1).getTime(),\n })\n\n const onInput = react.useCallback(\n function (event) {\n setState({\n ...state,\n currentDate: event.detail,\n })\n },\n [state],\n )\n\n return (\n <DatetimePicker\n type="year-month"\n value={state.currentDate}\n minDate={state.minDate}\n onInput={onInput}\n />\n )\n}\n\n
\nvalue
为字符串。
/* eslint-disable */\nimport react from 'react'\nimport { DatetimePicker } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [state, setState] = react.useState({\n currentDate: '12:00',\n minHour: 10,\n maxHour: 20,\n })\n\n const onInput = react.useCallback(\n function (event) {\n setState({\n ...state,\n currentDate: event.detail,\n })\n },\n [state],\n )\n\n return (\n <DatetimePicker\n type="time"\n value={state.currentDate}\n minHour={state.minHour}\n maxHour={state.maxHour}\n onInput={onInput}\n />\n )\n}\n\n
\n通过传入 filter
函数,可以对选项数组进行过滤,实现自定义时间间隔。
/* eslint-disable */\nimport react from 'react'\nimport { DatetimePicker } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [state, setState] = react.useState({\n currentDate: '12:00',\n minHour: 10,\n maxHour: 20,\n })\n\n const onInput = react.useCallback(\n function (event) {\n setState({\n ...state,\n currentDate: event.detail,\n })\n },\n [state],\n )\n\n return (\n <DatetimePicker\n type="time"\n value={state.currentDate}\n minHour={state.minHour}\n maxHour={state.maxHour}\n onInput={onInput}\n filter={(type, options) => {\n if (type === 'minute') {\n return options.filter((option) => Number(option) % 5 === 0)\n }\n\n return options\n }}\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
value | \n选项的值,注意:DatetimePicker 为非受控组件,动态改变请使用组件实例方法updateCurrentValue | \n attr: ¦ string ¦ number ¦ Date | \nnull | \nfalse | \n
filter | \n对选项数组进行过滤,实现自定义时间间隔 | \n ( type: string, values: ( ¦ string ¦ number )[] ) => (number ¦ string)[] | \n- | \nfalse | \n
type | \n时间类型,不建议动态修改 | \n attr: ¦ "datetime" ¦ "date" ¦ "year-month" ¦ "time" | \ndatetime | \nfalse | \n
showToolbar | \n是否显示顶部栏 | \n boolean | \ntrue | \nfalse | \n
formatter | \n选项格式化函数 | \n ( type: string, value: string ¦ number ) => number ¦ string | \n- | \nfalse | \n
minDate | \n可选的最小时间,精确到分钟 | \n number ¦ string | \n十年前 | \nfalse | \n
maxDate | \n可选的最大时间,精确到分钟 | \n number ¦ string | \n十年后 | \nfalse | \n
minHour | \n可选的最小小时,针对 type=time | \n number ¦ string | \n0 | \nfalse | \n
maxHour | \n可选的最大小时,针对 type=time | \n number ¦ string | \n23 | \nfalse | \n
minMinute | \n可选的最小分钟,针对 type=time | \n number ¦ string | \n0 | \nfalse | \n
maxMinute | \n可选的最大分钟,针对 type=time | \n number ¦ string | \n59 | \nfalse | \n
onInput | \n当值变化时触发的事件 | \n ( e: DatetimePickerEventsByValue ) => void | \n- | \nfalse | \n
onChange | \n当值变化时触发的事件 | \n ( e: DatetimePickerEventsByInstance ) => void | \n- | \nfalse | \n
onConfirm | \n点击完成按钮时触发的事件 | \n ( e: DatetimePickerEventsByValue ) => void | \n- | \nfalse | \n
onCancel | \n点击取消按钮时触发的事件 | \n () => void | \n- | \nfalse | \n
继承了@taro/components 的 ITouchEvent
\n参数 | \n说明 | \n类型 | \n
---|---|---|
detail | \n选项的值 | \n { value?: ¦ string ¦ number } | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
detail | \n包含每项的值 columns、当前时间 innerValue、手动设置列数据 setColumns、更新某列值 updateColumnValue | \n { datetimePicker: { columns: ( ¦ string ¦ number )[] setColumns: ( columns: ( ¦ string ¦ number )[] ) => void innerValue: Date updateColumnValue: ( value: string ) => Promise } } | \n
方法 | \n说明 | \n类型 | \n
---|---|---|
columns | \n- | \n ( ¦ string ¦ number )[] | \n
setColumns | \n- | \n ( columns: ( ¦ string ¦ number )[] ) => void | \n
innerValue | \n- | \n Date | \n
updateColumnValue | \n- | \n ( value: string ) => Promise | \n
pickerInstance | \n- | \n IPickerInstance | \n
updateCurrentValue | \n- | \n ( currentValue: ¦ string ¦ number ¦ Date ) => void | \n
当数据量较多时,采用分页的形式分隔长列表。
\nimport { Pagination } from '@antmjs/vantui'\n
\n通过 modelValue 来绑定当前页码时,组件为受控状态,分页显示取决于传入的 modelValue,一般搭配 onChange 使用。\n不需要受控时,可通过 defaultCurrentPage 指定当前页码
\n/* eslint-disable */\nimport react from 'react'\nimport { Pagination } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [currentPage1, setCurrentPage1] = react.useState(1)\n const pageChange1 = (v) => {\n const c = v\n setCurrentPage1(c)\n }\n return (\n <Pagination\n modelValue={currentPage1}\n totalItems="25"\n itemsPerPage="5"\n onChange={pageChange1}\n />\n )\n}\n\n
\n将 mode 设置为 "simple" 来切换到简单模式,此时分页器不会展示具体的页码按钮。
\n/* eslint-disable */\nimport react from 'react'\nimport { Pagination } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [currentPage2, setCurrentPage2] = react.useState(1)\n const pageChange2 = (v) => {\n const c = v\n setCurrentPage2(c)\n }\n\n return (\n <Pagination\n modelValue={currentPage2}\n pageCount={12}\n mode="simple"\n onChange={pageChange2}\n />\n )\n}\n\n
\n设置 force-ellipses 后会展示省略号按钮,点击后可以快速跳转。
\n/* eslint-disable */\nimport react from 'react'\nimport { Pagination } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [currentPage3, setCurrentPage3] = react.useState(1)\n const pageChange3 = (v) => {\n const c = v\n setCurrentPage3(c)\n }\n\n return (\n <Pagination\n modelValue={currentPage3}\n totalItems="125"\n showPageSize="3"\n forceEllipses\n onChange={pageChange3}\n />\n )\n}\n\n
\n通过 pageNodeRender 传入自定义方法
\n/* eslint-disable */\nimport react from 'react'\nimport { Pagination, Icon } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [currentPage4, setCurrentPage4] = react.useState(1)\n const pageChange4 = (v) => {\n const c = v\n setCurrentPage4(c)\n }\n\n const pageNodeRender = (page) => {\n return <>{page.number == 3 ? 'hot' : page.text}</>\n }\n\n return (\n <Pagination\n modelValue={currentPage4}\n totalItems="500"\n showPageSize="5"\n onChange={pageChange4}\n pageNodeRender={pageNodeRender}\n prevText={<Icon name="arrow-left" />}\n nextText={<Icon name="arrow" />}\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
defaultValue | \n默认页码 | \n number | \n1 | \nfalse | \n
modelValue | \n当前页码 | \n number | \n1 | \ntrue | \n
mode | \n- | \n "multi" ¦ "simple" | \nmulti | \nfalse | \n
prevText | \n自定义上一页按钮内容 | \n ReactNode | \n上一页 | \nfalse | \n
nextText | \n自定义下一页按钮内容 | \n ReactNode | \n下一页 | \nfalse | \n
pageCount | \n总页数 | \n string ¦ number | \n传入或者根据数据量计算 | \nfalse | \n
totalItems | \n总记录数 | \n string ¦ number | \n0 | \nfalse | \n
itemsPerPage | \n每页数量 | \n string ¦ number | \n10 | \nfalse | \n
showPageSize | \n显示页码个数 | \n string ¦ number | \n5 | \nfalse | \n
forceEllipses | \n是否展示省略号 | \n boolean | \nfalse | \nfalse | \n
pageNodeRender | \n自定义渲染页码结构, 入参数为 number 页数、text 文本、 active 选中状态 | \n (page: { number: number text: string active: boolean }) => React.ReactNode | \n- | \nfalse | \n
onChange | \n页码改变的时候触发 | \n ( currPage: number ) => void | \n- | \ntrue | \n
updatecurrent | \n- | \n ( currPage: number ) => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--pagination-color | \n @black; | \n
--pagination-font-size | \n @font-size-md; | \n
--pagination-item-border-color | \n #e4e7eb; | \n
--pagination-active-background-color | \n var(--primary-color); | \n
--pagination-disable-color | \n rgba(116, 116, 116, 0.31); | \n
--pagination-disable-background-color | \n #f7f8fa; | \n
--pagination-item-border-width | \n 1px; | \n
--pagination-item-border-radius | \n 2px; | \n
--pagination-prev-next-padding | \n 0 11px; | \n
当数据量较多时,采用分页的形式分隔长列表。
\nimport { Pagination } from '@antmjs/vantui'\n
\n通过 modelValue 来绑定当前页码时,组件为受控状态,分页显示取决于传入的 modelValue,一般搭配 onChange 使用。\n不需要受控时,可通过 defaultCurrentPage 指定当前页码
\n/* eslint-disable */\nimport react from 'react'\nimport { Pagination } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [currentPage1, setCurrentPage1] = react.useState(1)\n const pageChange1 = (v) => {\n const c = v\n setCurrentPage1(c)\n }\n return (\n <Pagination\n modelValue={currentPage1}\n totalItems="25"\n itemsPerPage="5"\n onChange={pageChange1}\n />\n )\n}\n\n
\n将 mode 设置为 "simple" 来切换到简单模式,此时分页器不会展示具体的页码按钮。
\n/* eslint-disable */\nimport react from 'react'\nimport { Pagination } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [currentPage2, setCurrentPage2] = react.useState(1)\n const pageChange2 = (v) => {\n const c = v\n setCurrentPage2(c)\n }\n\n return (\n <Pagination\n modelValue={currentPage2}\n pageCount={12}\n mode="simple"\n onChange={pageChange2}\n />\n )\n}\n\n
\n设置 force-ellipses 后会展示省略号按钮,点击后可以快速跳转。
\n/* eslint-disable */\nimport react from 'react'\nimport { Pagination } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [currentPage3, setCurrentPage3] = react.useState(1)\n const pageChange3 = (v) => {\n const c = v\n setCurrentPage3(c)\n }\n\n return (\n <Pagination\n modelValue={currentPage3}\n totalItems="125"\n showPageSize="3"\n forceEllipses\n onChange={pageChange3}\n />\n )\n}\n\n
\n通过 pageNodeRender 传入自定义方法
\n/* eslint-disable */\nimport react from 'react'\nimport { Pagination, Icon } from '@antmjs/vantui'\n\nexport default function Demo() {\n const [currentPage4, setCurrentPage4] = react.useState(1)\n const pageChange4 = (v) => {\n const c = v\n setCurrentPage4(c)\n }\n\n const pageNodeRender = (page) => {\n return <>{page.number == 3 ? 'hot' : page.text}</>\n }\n\n return (\n <Pagination\n modelValue={currentPage4}\n totalItems="500"\n showPageSize="5"\n onChange={pageChange4}\n pageNodeRender={pageNodeRender}\n prevText={<Icon name="arrow-left" />}\n nextText={<Icon name="arrow" />}\n />\n )\n}\n\n
\n参数 | \n说明 | \n类型 | \n默认值 | \n必填 | \n
---|---|---|---|---|
defaultValue | \n默认页码 | \n number | \n1 | \nfalse | \n
modelValue | \n当前页码 | \n number | \n1 | \ntrue | \n
mode | \n- | \n "multi" ¦ "simple" | \nmulti | \nfalse | \n
prevText | \n自定义上一页按钮内容 | \n ReactNode | \n上一页 | \nfalse | \n
nextText | \n自定义下一页按钮内容 | \n ReactNode | \n下一页 | \nfalse | \n
pageCount | \n总页数 | \n string ¦ number | \n传入或者根据数据量计算 | \nfalse | \n
totalItems | \n总记录数 | \n string ¦ number | \n0 | \nfalse | \n
itemsPerPage | \n每页数量 | \n string ¦ number | \n10 | \nfalse | \n
showPageSize | \n显示页码个数 | \n string ¦ number | \n5 | \nfalse | \n
forceEllipses | \n是否展示省略号 | \n boolean | \nfalse | \nfalse | \n
pageNodeRender | \n自定义渲染页码结构, 入参数为 number 页数、text 文本、 active 选中状态 | \n (page: { number: number text: string active: boolean }) => React.ReactNode | \n- | \nfalse | \n
onChange | \n页码改变的时候触发 | \n ( currPage: number ) => void | \n- | \ntrue | \n
updatecurrent | \n- | \n ( currPage: number ) => void | \n- | \nfalse | \n
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考ConfigProvider 组件
\n名称 | \n默认值 | \n
---|---|
--pagination-color | \n @black; | \n
--pagination-font-size | \n @font-size-md; | \n
--pagination-item-border-color | \n #e4e7eb; | \n
--pagination-active-background-color | \n var(--primary-color); | \n
--pagination-disable-color | \n rgba(116, 116, 116, 0.31); | \n
--pagination-disable-background-color | \n #f7f8fa; | \n
--pagination-item-border-width | \n 1px; | \n
--pagination-item-border-radius | \n 2px; | \n
--pagination-prev-next-padding | \n 0 11px; | \n
将 vantui/types
中 d.ts
的类型描述转换为文档vantui-docs
中的 API props 描述
yarn docs-ts\n
\n@title
和 @description
@forbidToMd
@default
和 @description
/**\n * @title 组件实例\n * @description 通过ref获取到的方法如下\n */\nexport type xxProps = {\n /**\n * @description 获取每一列的值\n * @default XX\n */\n xxvalue?: string\n}\n/**\n * @forbidToMd true // 不希望该类型同步到文档\n */\nexport type xxx = {\n a: string\n // ...\n}\n
\n将 vantui/types
中 d.ts
的类型描述转换为文档vantui-docs
中的 API props 描述
yarn docs-ts\n
\n@title
和 @description
@forbidToMd
@default
和 @description
/**\n * @title 组件实例\n * @description 通过ref获取到的方法如下\n */\nexport type xxProps = {\n /**\n * @description 获取每一列的值\n * @default XX\n */\n xxvalue?: string\n}\n/**\n * @forbidToMd true // 不希望该类型同步到文档\n */\nexport type xxx = {\n a: string\n // ...\n}\n
\n"+i(e[t].content)+"
\n"},o.fence=function(e,t,n,r,o){var s,l,c,d,u,_=e[t],p=_.info?a(_.info).trim():"",m="",g="";return p&&(m=(c=p.split(/(\s+)/g))[0],g=c.slice(2).join("")),0===(s=n.highlight&&n.highlight(_.content,m,g)||i(_.content)).indexOf(""+s+"
\n"):""+s+"
\n"},o.image=function(e,t,n,r,a){var i=e[t];return i.attrs[i.attrIndex("alt")][1]=a.renderInlineAsText(i.children,n,r),a.renderToken(e,t,n)},o.hardbreak=function(e,t,n){return n.xhtmlOut?"=0;t--)"inline"===e.tokens[t].type&&o.test(e.tokens[t].content)&&c(e.tokens[t].children,e)}},7811:function(e,t,n){"use strict";var r=n(9147);function a(e,t,n){this.src=e,this.env=n,this.tokens=[],this.inlineMode=!1,this.md=t}a.prototype.Token=r,e.exports=a},6499:function(e){"use strict";e.exports=function(e){var t,n,r,a,i,o,s=e.tokens;for(t=0,n=s.length;t c(r/m)&&u("overflow"),t*=m}const p=t.length+1;s=E(i-l,p,0==l),c(i/p)>r-o&&u("overflow"),o+=c(i/p),i%=p,t.splice(i++,0,o)}var d;return String.fromCodePoint(...t)},S=function(e){const t=[],n=(e=p(e)).length;let i=128,o=0,s=72;for(const n of e)n<128&&t.push(d(n));const l=t.length;let _=l;for(l&&t.push("-");_