@cainiaofe/cn-ui-m
Version:
51 lines (50 loc) • 3.39 kB
JavaScript
import React, { useState } from 'react';
import { CnCascaderSelect, CnDemoBlock, CnDemoDescription, CnBox, CnRadioGroup, CnDemoPage, } from "../../..";
import { request } from 'cn-request';
export var 使用远程请求 = function () {
var _a = useState('A'), condition = _a[0], setCondition = _a[1];
return (React.createElement(CnDemoPage, { title: "\u4F7F\u7528 requestConfig" },
React.createElement(CnDemoBlock, { title: "\u5E38\u89C4", padding: 0 },
React.createElement(CnCascaderSelect, { requestConfig: {
url: 'https://oneapi.alibaba-inc.com/mock/kuw2pbp6/api/customaddress',
} })),
React.createElement(CnDemoBlock, { title: "\u8FDC\u7A0B\u8BF7\u6C42 \u7ED3\u679C\u683C\u5F0F\u5316", padding: 0 },
React.createElement(CnCascaderSelect, { requestConfig: {
// 用于格式化不符合需要的值
service: function (key) {
return request({
url: 'https://oneapi.alibaba-inc.com/mock/kuw2pbp6/api/customaddress',
method: 'GET',
params: { key: key },
});
},
formatResult: function (res) {
return res.data.data;
},
} })),
React.createElement(CnDemoBlock, { title: "\u8FDC\u7A0B\u8BF7\u6C42 \u81EA\u5B9A\u4E49\u8BF7\u6C42\u65B9\u6CD5", padding: 0 },
React.createElement(CnCascaderSelect, { requestConfig: {
url: 'https://oneapi.alibaba-inc.com/mock/kuw2pbp6/api/customaddress',
method: 'POST',
formatParam: function (_a) {
var key = _a.key;
return ({ key: key });
},
} })),
React.createElement(CnDemoBlock, { title: "\u6839\u636E\u4F9D\u8D56\u81EA\u52A8\u5237\u65B0", padding: 0 },
React.createElement(CnBox, { margin: [0, 12] },
React.createElement(CnRadioGroup, { value: condition, onChange: function (value) { return setCondition(value); }, dataSource: ['A', 'B', 'C'], direction: "hoz" })),
React.createElement(CnCascaderSelect, { requestConfig: {
url: 'https://rap2api.alibaba-inc.com/app/mock-scene/7053/api/select/cn-data-source?_tag=mock',
refreshDeps: [condition],
} })),
React.createElement(CnDemoBlock, { title: "\u8FDC\u7A0B\u8BF7\u6C42 \u6570\u636E\u61D2\u52A0\u8F7D", padding: 0 },
React.createElement("div", { style: { padding: '0 12px' } },
React.createElement(CnDemoDescription, null, "\u4EC5\u5728\u914D\u7F6ErequestConfig\u540E\u751F\u6548, \u4F18\u5148\u7EA7\u9AD8\u4E8EloadData\u3002\u9ED8\u8BA4\u7684\u8BF7\u6C42\u53C2\u6570\u4E3Avalue,\u53EF\u901A\u8FC7requestConfig.remoteLazyLoadKey\u4FEE\u6539")),
React.createElement(CnCascaderSelect, { requestConfig: {
url: 'https://oneapi.alibaba-inc.com/mock/kuw2pbp6/api/customaddress',
}, enableRemoteLazyLoad: true }))));
};
使用远程请求.desc =
'CnCascaderSelect的数据源支持使用远程请求配置远程请求，基于ahooks的useRequest实现。';
export default { title: 'demo/CnCascaderSelect' };