plain-design 0.0.97 → 1.0.0-beta.10

package/src/pages/index/components/normal/DemoSelect.tsx

@@ -0,0 +1,819 @@
+import {designPage, onMounted, reactive} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {Button, ButtonGroup, Checkbox, DropdownGroup, GridRow, Select, SelectOption} from "../../../../packages";
+import {iSelectOptionProps} from "../../../../packages/components/Select/select.utils";
+import {DemoLine} from "../../Demo/DemoLine";
+
+export const DemoSelect = designPage(() => {
+
+  const state = reactive({
+    val: null,
+  });
+
+  return () => (
+    <DemoRow title="基本用法">
+      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式">
+        <SelectOption label="支付宝" val="alipay"/>
+        <SelectOption label="微信支付" val="wechat_pay"/>
+        <>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+        </>
+        <SelectOption label="云闪付" val="cloud_pay"/>
+        <SelectOption label="网银支付" val="net_pay"/>
+        <SelectOption label="快捷支付" val="convince_pay"/>
+        <SelectOption label="paypal" val="paypal"/>
+      </Select>
+      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式">
+        <SelectOption label="支付宝" val="alipay"/>
+        <SelectOption label="微信支付" val="wechat_pay"/>
+        <GridRow>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+        </GridRow>
+        <SelectOption label="云闪付" val="cloud_pay"/>
+        <SelectOption label="网银支付" val="net_pay"/>
+        <SelectOption label="快捷支付" val="convince_pay"/>
+        <SelectOption label="paypal" val="paypal"/>
+      </Select>
+      &nbsp;{state.val}
+    </DemoRow>
+  );
+});
+
+export const multipleDemo = designPage(() => {
+
+  const state = reactive({
+    val: null as any,
+  });
+
+  return () => (
+    <DemoRow title="多选">
+      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式" multiple>
+        <SelectOption label="支付宝" val="alipay"/>
+        <SelectOption label="微信支付" val="wechat_pay"/>
+        <>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+        </>
+        <SelectOption label="云闪付" val="cloud_pay"/>
+        <SelectOption label="网银支付" val="net_pay"/>
+        <SelectOption label="快捷支付" val="convince_pay"/>
+        <SelectOption label="paypal" val="paypal"/>
+      </Select>
+      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式" multiple>
+        <SelectOption label="支付宝" val="alipay"/>
+        <SelectOption label="微信支付" val="wechat_pay"/>
+        <>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+        </>
+        <SelectOption label="云闪付" val="cloud_pay"/>
+        <SelectOption label="网银支付" val="net_pay"/>
+        <SelectOption label="快捷支付" val="convince_pay"/>
+        <SelectOption label="paypal" val="paypal"/>
+      </Select>
+      <span>{state.val?.join(',')}</span>
+    </DemoRow>
+  );
+});
+
+
+export const multipleWrapDemo = designPage(() => {
+
+  const state = reactive({
+    val: null as any,
+  });
+
+  return () => (
+    <DemoRow title="多选：换行显示">
+      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式" multiple inputAttrs={{ tagsWrap: true }}>
+        <SelectOption label="支付宝" val="alipay"/>
+        <SelectOption label="微信支付" val="wechat_pay"/>
+        <>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+        </>
+        <SelectOption label="云闪付" val="cloud_pay"/>
+        <SelectOption label="网银支付" val="net_pay"/>
+        <SelectOption label="快捷支付" val="convince_pay"/>
+        <SelectOption label="paypal" val="paypal"/>
+      </Select>
+      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式" multiple inputAttrs={{ tagsWrap: true }}>
+        <SelectOption label="支付宝" val="alipay"/>
+        <SelectOption label="微信支付" val="wechat_pay"/>
+        <>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+        </>
+        <SelectOption label="云闪付" val="cloud_pay"/>
+        <SelectOption label="网银支付" val="net_pay"/>
+        <SelectOption label="快捷支付" val="convince_pay"/>
+        <SelectOption label="paypal" val="paypal"/>
+      </Select>
+      <span>{state.val?.join(',')}</span>
+    </DemoRow>
+  );
+});
+
+
+export const multipleObjectDemo = designPage(() => {
+
+  const options = [
+    { name: '支付宝', code: 'alipay', version: '1' },
+    { name: '微信支付', code: 'wechat_pay', version: '1' },
+    { name: '财付通', code: 'qq_pay', version: '1' },
+    { name: '快支付', code: 'fast_pay', version: '1' },
+    { name: '云闪付', code: 'cloud_pay', version: '1' },
+    { name: '网银支付', code: 'net_pay', version: '1' },
+    { name: '快捷支付', code: 'convince_pay', version: '1' },
+    { name: 'paypal', code: 'paypal', version: '1' },
+  ] as any[];
+
+  const state = reactive({
+    val: [
+      { name: '支付宝', code: 'alipay', version: '2' },
+      { name: '微信支付', code: 'wechat_pay', version: '2' },
+    ] as any[],
+  });
+
+  const isMatch = ({ value, option }: any) => !!value && !!option && (value.code == option.code);
+
+  return () => (
+    <DemoRow title="多选，绑定值为对象">
+      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式" multiple isMatch={isMatch}>
+        {options.map((option) => (
+          <SelectOption label={option.name} val={option} key={option.code}/>
+        ))}
+      </Select>
+      <span>{state.val?.map(i => i.name).join(',')}</span>
+    </DemoRow>
+  );
+});
+
+
+export const multipleArraystring = designPage(() => {
+
+  const options = [
+    { name: '支付宝', code: 'alipay', version: '1' },
+    { name: '微信支付', code: 'wechat_pay', version: '1' },
+    { name: '财付通', code: 'qq_pay', version: '1' },
+    { name: '快支付', code: 'fast_pay', version: '1' },
+    { name: '云闪付', code: 'cloud_pay', version: '1' },
+    { name: '网银支付', code: 'net_pay', version: '1' },
+    { name: '快捷支付', code: 'convince_pay', version: '1' },
+    { name: 'paypal', code: 'paypal', version: '1' },
+  ] as any[];
+
+  const state = reactive({
+    val: 'alipay,fast_pay',
+  });
+
+  return () => (
+    <DemoRow title="多选，绑定值为arraystring">
+      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式" multiple valueType="arraystring">
+        {options.map((option) => (
+          <SelectOption label={option.name} val={option.code} key={option.code}/>
+        ))}
+      </Select>
+      <span>{state.val}</span>
+    </DemoRow>
+  );
+});
+
+export const DemoDynamicSelect = designPage(() => {
+
+  const state = reactive({
+    val: null,
+    isShow: true,
+  });
+
+  onMounted(() => {
+    setInterval(() => {
+      state.isShow = !state.isShow;
+    }, 1000);
+  });
+
+  return () => (
+    <DemoRow title="动态选项">
+      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式">
+        {!!state.isShow && <SelectOption label="支付宝" val="alipay"/>}
+        <SelectOption label="微信支付" val="wechat_pay"/>
+        <>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+        </>
+        <SelectOption label="云闪付" val="cloud_pay"/>
+        <SelectOption label="网银支付" val="net_pay"/>
+        <SelectOption label="快捷支付" val="convince_pay"/>
+        <SelectOption label="paypal" val="paypal"/>
+      </Select>
+      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式">
+        {!!state.isShow && <SelectOption label="支付宝" val="alipay"/>}
+        <SelectOption label="微信支付" val="wechat_pay"/>
+        <GridRow>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+        </GridRow>
+        <SelectOption label="云闪付" val="cloud_pay"/>
+        <SelectOption label="网银支付" val="net_pay"/>
+        <SelectOption label="快捷支付" val="convince_pay"/>
+        <SelectOption label="paypal" val="paypal"/>
+      </Select>
+      &nbsp;{state.val}
+    </DemoRow>
+  );
+});
+
+export const VirtualDemo = designPage(() => {
+
+  const state = reactive({
+    val: null as any,
+    vals: null as any,
+  });
+
+  const options: iSelectOptionProps[] = (new Array(100)).fill(null).map((_, index) => ({ index, label: `选项_${index}`, val: `opt_${index}` }));
+
+  return () => (
+    <DemoRow title="虚拟列表">
+      <DemoLine title="单选">
+        <Select style={{ width: '200px' }} placeholder="虚拟选项" v-model={state.val} virtualData={options}/>
+        &nbsp; {state.val}
+      </DemoLine>
+      <DemoLine title="多选">
+        <Select style={{ width: '200px' }} placeholder="虚拟选项(多选)" v-model={state.vals} virtualData={options} multiple/>
+        &nbsp; {state.vals?.join(',')}
+      </DemoLine>
+    </DemoRow>
+  );
+});
+
+export const DisableDemo = designPage(() => {
+
+  const state = reactive({
+    val: 'fast_pay' as any,
+    vals: ['fast_pay'] as any,
+  });
+
+  return () => (
+    <DemoRow title="禁用选项">
+      <DemoLine title="单选">
+        <Select v-model={state.val} style={{ width: '200px' }}>
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay" disabled/>
+          <SelectOption label="云闪付" val="cloud_pay" disabled/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>&nbsp;{state.val}
+      </DemoLine>
+      <DemoLine title="多选">
+        <Select v-model={state.vals} multiple style={{ width: '200px' }}>
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay" disabled/>
+          <SelectOption label="云闪付" val="cloud_pay" disabled/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>&nbsp;{state.vals?.join(',')}
+      </DemoLine>
+    </DemoRow>
+  );
+});
+
+export const GroupDemo = designPage(() => {
+
+  const state = reactive({
+    val: 'fast_pay' as any,
+    vals: ['fast_pay'] as any,
+  });
+
+  return () => (
+    <DemoRow title="分组">
+      <DemoLine title="单选">
+        <Select v-model={state.val} style={{ width: '200px' }}>
+          <DropdownGroup title="分组一"/>
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <DropdownGroup title="分组二"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <DropdownGroup title="分组三"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>&nbsp;{state.val}
+      </DemoLine>
+      <DemoLine title="多选">
+        <Select v-model={state.vals} multiple style={{ width: '200px' }}>
+          <DropdownGroup title="分组一"/>
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <DropdownGroup title="分组二"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <DropdownGroup title="分组三"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>&nbsp;{state.vals?.join(',')}
+      </DemoLine>
+    </DemoRow>
+  );
+});
+
+export const IconDemo = designPage(() => {
+
+  const state = reactive({
+    val: 'fast_pay' as any,
+    vals: ['fast_pay'] as any,
+  });
+
+  return () => (
+    <DemoRow title="图标">
+      <DemoLine title="单选">
+        <Select v-model={state.val} style={{ width: '200px' }}>
+          <DropdownGroup title="分组一"/>
+          <SelectOption label="支付宝" val="alipay" icon="pi-alipay-circle"/>
+          <SelectOption label="微信支付" val="wechat_pay" icon="pi-wechatpay"/>
+          <SelectOption label="财付通" val="qq_pay" icon="pi-qq"/>
+          <DropdownGroup title="分组二"/>
+          <SelectOption label="快支付" val="fast_pay" icon="pi-alipay-circle"/>
+          <SelectOption label="云闪付" val="cloud_pay" icon="pi-wechatpay"/>
+          <DropdownGroup title="分组三"/>
+          <SelectOption label="网银支付" val="net_pay" icon="pi-qq"/>
+          <SelectOption label="快捷支付" val="convince_pay" icon="pi-alipay-circle"/>
+          <SelectOption label="paypal" val="paypal" icon="pi-wechatpay"/>
+        </Select>&nbsp;{state.val}
+      </DemoLine>
+      <DemoLine title="多选">
+        <Select v-model={state.vals} multiple style={{ width: '200px' }}>
+          <SelectOption label="支付宝" val="alipay" icon="pi-alipay-circle"/>
+          <SelectOption label="微信支付" val="wechat_pay" icon="pi-wechatpay"/>
+          <SelectOption label="财付通" val="qq_pay" icon="pi-qq"/>
+          <SelectOption label="快支付" val="fast_pay" icon="pi-alipay-circle"/>
+          <SelectOption label="云闪付" val="cloud_pay" icon="pi-wechatpay"/>
+          <SelectOption label="网银支付" val="net_pay" icon="pi-qq"/>
+          <SelectOption label="快捷支付" val="convince_pay" icon="pi-alipay-circle"/>
+          <SelectOption label="paypal" val="paypal" icon="pi-wechatpay"/>
+        </Select>&nbsp;{state.vals?.join(',')}
+      </DemoLine>
+    </DemoRow>
+  );
+});
+
+export const CustomDemo = designPage(() => {
+
+  const state = reactive({
+    val: 'fast_pay' as any,
+    vals: ['fast_pay'] as any,
+  });
+
+  return () => (
+    <DemoRow title="自定义选项内容">
+      <DemoLine title="单选">
+        <Select v-model={state.val} style={{ width: '200px' }}>
+          <DropdownGroup>
+            1 分组一
+          </DropdownGroup>
+          <SelectOption label="支付宝" val="alipay">
+            1.1 支付宝
+          </SelectOption>
+          <SelectOption label="微信支付" val="wechat_pay">
+            1.2 微信支付
+          </SelectOption>
+          <SelectOption label="财付通" val="qq_pay">
+            1.3 财付通
+          </SelectOption>
+          <DropdownGroup title="分组二">
+            2 分组二
+          </DropdownGroup>
+          <SelectOption label="快支付" val="fast_pay">
+            2.1 快支付
+          </SelectOption>
+          <SelectOption label="云闪付" val="cloud_pay">
+            2.2 云闪付
+          </SelectOption>
+          <DropdownGroup title="分组三">
+            3 分组三
+          </DropdownGroup>
+          <SelectOption label="网银支付" val="net_pay">
+            3.1 网银支付
+          </SelectOption>
+          <SelectOption label="快捷支付" val="convince_pay">
+            3.2 快捷支付
+          </SelectOption>
+          <SelectOption label="paypal" val="paypal">
+            3.3 paypal
+          </SelectOption>
+        </Select>&nbsp;{state.val}
+      </DemoLine>
+      <DemoLine title="多选">
+        <Select v-model={state.vals} multiple style={{ width: '200px' }}>
+          <DropdownGroup>
+            1 分组一
+          </DropdownGroup>
+          <SelectOption label="支付宝" val="alipay">
+            1.1 支付宝
+          </SelectOption>
+          <SelectOption label="微信支付" val="wechat_pay">
+            1.2 微信支付
+          </SelectOption>
+          <SelectOption label="财付通" val="qq_pay">
+            1.3 财付通
+          </SelectOption>
+          <DropdownGroup title="分组二">
+            2 分组二
+          </DropdownGroup>
+          <SelectOption label="快支付" val="fast_pay">
+            2.1 快支付
+          </SelectOption>
+          <SelectOption label="云闪付" val="cloud_pay">
+            2.2 云闪付
+          </SelectOption>
+          <DropdownGroup title="分组三">
+            3 分组三
+          </DropdownGroup>
+          <SelectOption label="网银支付" val="net_pay">
+            3.1 网银支付
+          </SelectOption>
+          <SelectOption label="快捷支付" val="convince_pay">
+            3.2 快捷支付
+          </SelectOption>
+          <SelectOption label="paypal" val="paypal">
+            3.3 paypal
+          </SelectOption>
+        </Select>&nbsp;{state.vals?.join(',')}
+      </DemoLine>
+    </DemoRow>
+  );
+});
+
+export const LoadingDemo = designPage(() => {
+
+  const state = reactive({
+    val: 'fast_pay' as any,
+    vals: ['fast_pay', 'cloud_pay'] as any,
+    loading: true,
+  });
+
+  return () => (
+    <DemoRow title="加载状态">
+      <DemoLine title="loading">
+        <Checkbox v-model={state.loading} label="loading"/>
+      </DemoLine>
+      <DemoLine title="单选">
+        <Select v-model={state.val} style={{ width: '200px' }} loading={state.loading}>
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>&nbsp;{state.val}
+      </DemoLine>
+      <DemoLine title="多选">
+        <Select v-model={state.vals} multiple style={{ width: '200px' }} loading={state.loading}>
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>&nbsp;{state.vals?.join(',')}
+      </DemoLine>
+    </DemoRow>
+  );
+});
+
+export const DisableFilterDemo = designPage(() => {
+
+  const state = reactive({
+    val: 'fast_pay' as any,
+    vals: ['fast_pay'] as any,
+  });
+
+  return () => (
+    <DemoRow title="禁用可输入筛选">
+      <DemoLine title="单选">
+        <Select v-model={state.val} style={{ width: '200px' }} disableFilter>
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>&nbsp;{state.val}
+      </DemoLine>
+      <DemoLine title="多选">
+        <Select v-model={state.vals} multiple style={{ width: '200px' }} disableFilter>
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>&nbsp;{state.vals?.join(',')}
+      </DemoLine>
+    </DemoRow>
+  );
+});
+
+export const ControlDemo = designPage(() => {
+
+  const state = reactive({
+    val: 'wechat_pay' as any,
+    vals: ['fast_pay', 'cloud_pay'] as any,
+    flag: true,
+  });
+
+  return () => (
+    <DemoRow title="禁用与只读">
+      <DemoLine title="禁用/只读">
+        <Checkbox v-model={state.flag} label="禁用/只读"/>
+      </DemoLine>
+      <DemoLine title="单选">
+        <Select v-model={state.val} style={{ width: '200px' }} disabled={state.flag} placeholder="禁用">
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>&nbsp;{state.val}
+      </DemoLine>
+      <DemoLine title="多选">
+        <Select v-model={state.vals} multiple style={{ width: '200px' }} readonly={state.flag} placeholder="只读">
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>&nbsp;{state.vals?.join(',')}
+      </DemoLine>
+    </DemoRow>
+  );
+});
+
+export const PopperDemo = designPage(() => {
+
+  const state = reactive({
+    val: 'fast_pay' as any,
+    vals: ['fast_pay'] as any,
+  });
+
+  return () => (
+    <DemoRow title="给Popper传递属性">
+      <DemoLine title="单选">
+        <Select v-model={state.val} style={{ width: '200px' }} popperAttrs={{ width: '300px', sizeEqual: false, }}>
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>&nbsp;{state.val}
+      </DemoLine>
+      <DemoLine title="多选">
+        <Select v-model={state.vals} multiple style={{ width: '200px' }} popperAttrs={{ width: '300px', sizeEqual: false }}>
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>&nbsp;{state.vals?.join(',')}
+      </DemoLine>
+    </DemoRow>
+  );
+});
+
+export const ScrollDemo = designPage(() => {
+
+  const state = reactive({
+    val: 'fast_pay' as any,
+    vals: ['fast_pay'] as any,
+  });
+
+  return () => (
+    <DemoRow title="设置滚动">
+      <p>最多4个元素就开始使用滚动条，滚动高度为100px</p>
+      <DemoLine title="单选">
+        <Select v-model={state.val} style={{ width: '200px' }} scrollNum={4} scrollHeight={100}>
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>&nbsp;{state.val}
+      </DemoLine>
+      <DemoLine title="多选">
+        <Select v-model={state.vals} multiple style={{ width: '200px' }} scrollNum={4} scrollHeight={100}>
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>&nbsp;{state.vals?.join(',')}
+      </DemoLine>
+    </DemoRow>
+  );
+});
+
+export const SizeDemo = designPage(() => {
+
+  const state = reactive({
+    val: 'fast_pay' as any,
+    vals: ['fast_pay'] as any,
+  });
+
+  return () => (
+    <DemoRow title="大小尺寸">
+      <p>最多4个元素就开始使用滚动条，滚动高度为100px</p>
+      <DemoLine title="多选">
+        <Select v-model={state.vals} multiple style={{ width: '200px' }} size="large">
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>
+        <Select v-model={state.vals} multiple style={{ width: '200px' }} size="normal">
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>
+        <Select v-model={state.vals} multiple style={{ width: '200px' }} size="small">
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>
+        <Select v-model={state.vals} multiple style={{ width: '200px' }} size="mini">
+          <SelectOption label="支付宝" val="alipay"/>
+          <SelectOption label="微信支付" val="wechat_pay"/>
+          <SelectOption label="财付通" val="qq_pay"/>
+          <SelectOption label="快支付" val="fast_pay"/>
+          <SelectOption label="云闪付" val="cloud_pay"/>
+          <SelectOption label="网银支付" val="net_pay"/>
+          <SelectOption label="快捷支付" val="convince_pay"/>
+          <SelectOption label="paypal" val="paypal"/>
+        </Select>
+        &nbsp;{state.vals?.join(',')}
+      </DemoLine>
+    </DemoRow>
+  );
+});
+
+export const FilterDemo = designPage(() => {
+
+  const state = reactive({
+    val: 'fast_pay' as any,
+    vals: ['fast_pay'] as any,
+  });
+
+  const options = [
+    { label: '支付宝', pinyin: 'zhifubao', val: 'alipay', },
+    { label: '微信支付', pinyin: 'weixinzhifu', val: 'wechat_pay', },
+    { label: '财付通', pinyin: 'caifutong', val: 'qq_pay', },
+    { label: '快支付', pinyin: 'kuaizhifu', val: 'fast_pay', },
+    { label: '云闪付', pinyin: 'yunshanfu', val: 'cloud_pay', },
+    { label: '网银支付', pinyin: 'wangyinzhifu', val: 'net_pay', },
+    { label: '快捷支付', pinyin: 'kuaijiezhifu', val: 'convince_pay', },
+    { label: 'paypal', pinyin: 'paypal', val: 'paypal', },
+  ];
+
+  const isMatchSearch = (searchText: string, option: iSelectOptionProps) => {
+    return (!!option.label && option.label.indexOf(searchText) > -1) || (!!option.data && option.data.pinyin.indexOf(searchText) > -1);
+  };
+
+  return () => (
+    <DemoRow title="自定义过滤函数，支持拼音搜索">
+      <DemoLine title="单选">
+        <Select v-model={state.val} style={{ width: '200px' }} isMatchSearch={isMatchSearch}>
+          {options.map(opt => (
+            <SelectOption label={opt.label} val={opt.val} key={opt.val} data={opt}/>
+          ))}
+        </Select>&nbsp;{state.val}
+      </DemoLine>
+      <DemoLine title="多选">
+        <Select v-model={state.vals} multiple style={{ width: '200px' }} isMatchSearch={isMatchSearch}>
+          {options.map(opt => (
+            <SelectOption label={opt.label} val={opt.val} key={opt.val} data={opt}/>
+          ))}
+        </Select>&nbsp;{state.vals?.join(',')}
+      </DemoLine>
+    </DemoRow>
+  );
+});
+
+export const SlotDemo = designPage(() => {
+
+  const state = reactive({
+    val: null as any,
+    vals: null as any,
+  });
+
+  return () => (
+    <DemoRow title="插槽自定义内容">
+      <DemoLine title="单选">
+        <Select v-model={state.val} popperAttrs={{ width: '300px', sizeEqual: false, }}>
+          {{
+            default: () => <>
+              <SelectOption label="支付宝" val="alipay"/>
+              <SelectOption label="微信支付" val="wechat_pay"/>
+              <SelectOption label="财付通" val="qq_pay"/>
+              <SelectOption label="快支付" val="fast_pay"/>
+              <SelectOption label="云闪付" val="cloud_pay"/>
+              <SelectOption label="网银支付" val="net_pay"/>
+              <SelectOption label="快捷支付" val="convince_pay"/>
+              <SelectOption label="paypal" val="paypal"/>
+            </>,
+            reference: ({ checked }: { checked: iSelectOptionProps | iSelectOptionProps[] | null | undefined }) => <Button>{(checked as iSelectOptionProps)?.label || '请选择'}</Button>
+          }}
+        </Select>
+      </DemoLine>
+      <DemoLine title="多选">
+        <Select v-model={state.vals} multiple popperAttrs={{ width: '300px', sizeEqual: false }}>
+          {{
+            default: () => <>
+              <SelectOption label="支付宝" val="alipay"/>
+              <SelectOption label="微信支付" val="wechat_pay"/>
+              <SelectOption label="财付通" val="qq_pay"/>
+              <SelectOption label="快支付" val="fast_pay"/>
+              <SelectOption label="云闪付" val="cloud_pay"/>
+              <SelectOption label="网银支付" val="net_pay"/>
+              <SelectOption label="快捷支付" val="convince_pay"/>
+              <SelectOption label="paypal" val="paypal"/>
+            </>,
+            reference: ({ checked }: { checked: iSelectOptionProps | iSelectOptionProps[] | null | undefined }) => (
+              <ButtonGroup>
+                {!!checked && Array.isArray(checked) && checked.length > 0 ?
+                  <>
+                    {checked.map((i, index) => (<Button key={(i.val as any) || index}>{i.label}</Button>))}
+                  </> :
+                  <Button>请选择</Button>
+                }
+              </ButtonGroup>
+            )
+          }}
+        </Select>&nbsp;{state.vals?.join(',')}
+      </DemoLine>
+    </DemoRow>
+  );
+});
+
+export const DemoNoData = designPage(() => {
+
+  const state = reactive({
+    val: null,
+  });
+
+  return () => (
+    <DemoRow title="无选项">
+      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式"/>
+      &nbsp;{state.val}
+    </DemoRow>
+  );
+});