picker

Props

IMMPopPickerProps

属性	类型	默认值	必传	说明
visible	boolean		否	设置显示隐藏
onOk	IMMPickerProps['onChange']		否	点击确定

IMMPickerProps

属性	类型	默认值	必传	说明
value	PickerValueType[]		是	选中的值
data	IMMPickerData[]		是	选择数据
fieldKey	{ label?: string; value?: string; children?: string;}	{ label: 'label', value: 'value', children: 'children' }	否	自定义
className	any		否	样式
style	CSSProperties		否	样式

代码示例

import Taro from "@tarojs/taro";
import { FC, memo, useState } from "react";
import styles from "./index.module.less";
import MMNavigation from "@wmeimob/taro-design/src/components/navigation";
import { View, Text } from "@tarojs/components";
import MMPicker from "../../components/picker";
import MMButton from "@wmeimob/taro-design/src/components/button";
import MinMaxPicker from "./minMaxPicker";
import PageDemoBlock from "@wmeimob/taro-design/src/components/pageComponents/pageDemoBlock";
import CityPicker from "./cityPickers";

const Component: FC<{}> = () => {
  return (
    <View className={styles.homeStyle}>
      <MMNavigation title="基础用法" />

      <PageDemoBlock title="介绍">
        <Text>TaroPicker 选择器, 用于选择日期、时间、年月日、省市区等</Text>
      </PageDemoBlock>

      <CommonPicker />

      <MultiPicker />

      <MinMaxPicker />

      <CityPicker />
    </View>
  );
};

const Home = memo(Component);
export default Home;

function CommonPicker() {
  const [visible, setVisible] = useState(false);
  const [value, setValue] = useState<string[]>(["周四"]);

  const data = ["周一", "周二", "周三", "周四", "周五"].map((label) => ({
    label,
    value: label,
  }));

  return (
    <PageDemoBlock title="普通单选">
      <MMButton block onClick={() => setVisible(true)} text={value.join(",")} />
      <MMPicker
        visible={visible}
        value={value}
        data={data}
        onVisibleChange={setVisible}
        onChange={(va, result) => {
          console.log(va);
          setValue(va);
        }}
      />
    </PageDemoBlock>
  );
}

function MultiPicker() {
  const [visible, setVisible] = useState(false);
  const [value, setValue] = useState(["福建", "厦门"]);

  const data = [
    {
      text: "浙江",
      children: [
        {
          text: "杭州",
          children: [{ text: "西湖区" }, { text: "余杭区" }],
        },
        {
          text: "温州",
          children: [{ text: "鹿城区" }, { text: "瓯海区" }],
        },
      ],
    },
    {
      text: "福建",
      children: [
        {
          text: "福州",
          children: [{ text: "鼓楼区" }, { text: "台江区" }],
        },
        {
          text: "厦门",
          children: [{ text: "思明区" }, { text: "海沧区" }],
        },
      ],
    },
  ];

  return (
    <PageDemoBlock title="级联选择">
      <View>
        <Text>城市级联选择</Text>
      </View>
      <MMButton block onClick={() => setVisible(true)} text={value.join(",")} />
      <MMPicker
        visible={visible}
        value={value}
        data={data}
        fieldKey={{ label: "text", value: "text" }}
        onVisibleChange={setVisible}
        onChange={(va) => {
          setValue(va);
          console.log(va);
        }}
      />
    </PageDemoBlock>
  );
}