\u81EA\u5B9A\u4E49\u539F\u4EF6
\u5982\u679C\u5185\u7F6E\u7684\u539F\u4EF6\u65E0\u6CD5\u6EE1\u8DB3\u4F60\u7684\u9700\u6C42\uFF0C\u6211\u4EEC\u4E5F\u652F\u6301\u81EA\u5B9A\u4E49\u539F\u4EF6\u3002
\u539F\u4EF6\u534F\u8BAE
ts
export interface Atomic<T = any, P extends AtomicCommonProps<T> = AtomicCommonProps<T>> {
+ /**
+ * \u540D\u79F0\uFF0C\u547D\u540D\u89C4\u8303\u9075\u5FAA kebab-case, \u9700\u8981\u907F\u514D\u548C\u5176\u4ED6\u7EC4\u4EF6\u51B2\u7A81
+ */
+ name: string;
+
+ /**
+ * \u63CF\u8FF0
+ */
+ description?: string;
+
+ /**
+ * \u539F\u4EF6\u4F5C\u8005
+ */
+ author?: string;
+
+ /**
+ * \u662F\u5426\u4E3A \u53EA\u9884\u89C8\u6A21\u5F0F\u3002\u53EF\u4EE5\u63D0\u793A\u7EC4\u4EF6\u5B9E\u73B0\u8005\uFF0C\u5728\u7F16\u8F91\u6A21\u5F0F\u4E0B\u9690\u85CF\u8BE5\u539F\u4EF6
+ */
+ previewOnly?: boolean;
+
+ /**
+ * \u662F\u5426\u4E3A \u53EA\u7F16\u8F91\u6A21\u5F0F\u3002\u53EF\u4EE5\u63D0\u793A\u7EC4\u4EF6\u5B9E\u73B0\u8005\uFF0C\u5728\u9884\u89C8\u6A21\u5F0F\u4E0B\u9690\u85CF\u8BE5\u539F\u4EF6
+ */
+ editOnly?: boolean;
+
+ /**
+ * \u7EC4\u4EF6\u5B9E\u73B0, \u5C31\u662F\u4E00\u4E2A\u6E32\u67D3\u51FD\u6570
+ */
+ component: (props: P) => any;
+
+ /**
+ * \u503C\u9A8C\u8BC1
+ * @param {T} value \u5F53\u524D\u503C
+ * @param {any} context \u4E0A\u4E0B\u6587\uFF0C\u53EF\u4EE5\u83B7\u53D6\u5230\u5176\u4ED6\u5B57\u6BB5\u7684\u503C
+ * \u9A8C\u8BC1\u5931\u8D25\u629B\u51FA\u5F02\u5E38
+ */
+ validate?: (value: any, props: P, context: any) => Promise<void>;
+
+ /**
+ * \u9A8C\u8BC1\u89E6\u53D1\u7684\u65F6\u673A
+ */
+ validateTrigger?: 'change' | 'blur';
+}
+\u547D\u540D\u89C4\u8303
- \u4F7F\u7528 kebab-case, \u4F8B\u5982 date-range
- \u4F7F\u7528\u540D\u8BCD/\u52A8\u540D\u8BCD\u3002\u4F8B\u5982 file \u53D6\u4EE3 upload, files \u53D6\u4EE3 upload-multiple
\u7EC4\u4EF6\u5B9E\u73B0
component \u662F\u539F\u4EF6\u7684\u5B9E\u73B0\uFF0C\u8FD9\u662F\u8FD9\u662F\u4E00\u4E2A\u6E32\u67D3\u51FD\u6570\uFF0C\u63A5\u6536 props \u5E76\u8FD4\u56DE VNodeChild\u3002 \u4EE5\u4E0B props \u662F\u56FA\u5B9A\u7684:
tsx
export interface AtomicCommonProps<T> {
+ /**
+ * \u6E32\u67D3\u6A21\u5F0F
+ */
+ mode?: 'editable' | 'preview';
+
+ /**
+ * \u573A\u666F\u503C
+ * \u573A\u666F\u503C\u7ED9\u539F\u4EF6\u63D0\u4F9B\u4E86\u989D\u5916\u7684\u4FE1\u606F\uFF0C\u4ECE\u800C\u53EF\u4EE5\u63D0\u4F9B\u66F4\u5408\u7406\u7684\u9ED8\u8BA4\u884C\u4E3A
+ */
+ scene?: 'table' | 'form';
+
+ /**
+ * \u662F\u5426\u5DF2\u7981\u7528
+ */
+ disabled?: boolean;
+
+ /**
+ * \u5B57\u6BB5\u503C
+ */
+ value?: T;
+
+ /**
+ * \u5B57\u6BB5\u53D8\u5316
+ */
+ onChange?: (value?: T) => void;
+
+ /**
+ * \u7C7B\u540D
+ */
+ class?: ClassValue;
+
+ /**
+ * \u6837\u5F0F
+ */
+ style?: StyleValue;
+
+ /**
+ * \u4E0A\u4E0B\u6587\u4FE1\u606F\uFF0C\u7531\u5177\u4F53\u7684\u5E94\u7528\u7EC4\u4EF6\u6307\u5B9A
+ *
+ * note: \u901A\u7528\u539F\u4EF6\u901A\u5E38\u4E0D\u4F1A\u76F4\u63A5\u8026\u5408\u5177\u4F53\u7684\u4E0A\u4E0B\u6587\u4FE1\u606F
+ */
+ context?: any;
+}
+\u7531\u4E0A\u53EF\u89C1\uFF0C\u539F\u4EF6\u6700\u6838\u5FC3\u7684\u662F mode \u4EE5\u53CA value/onChange \u534F\u8BAE\u3002
mode\u51B3\u5B9A\u662F\u4EE5\u9884\u89C8\u6A21\u5F0F\u5448\u73B0\u8FD8\u662F\u7F16\u8F91\u6A21\u5F0Fvalue/onChange\u662F\u5178\u578B\u7684\u8868\u5355\u534F\u8BAE\u3002 \u7C7B\u4F3C\u4E8E Vue \u7684v-model
\u539F\u4EF6\u5B9E\u73B0\u793A\u4F8B
\u4EE5\u6700\u7B80\u5355\u7684 switch \u539F\u4EF6\u4E3A\u4F8B:
tsx
import { ElSwitchProps, ElSwitch } from 'element-plus';
+
+import { defineAtomic, defineAtomicComponent, DefineAtomicProps, globalRegistry } from '@wakeadmin/components';
+
+/**
+ * \u5B9A\u4E49\u539F\u4EF6 props
+ */
+export type ASwitchProps = DefineAtomicProps<
+ // \u{1F534} \u539F\u4EF6\u7684\u503C\u7C7B\u578B\uFF0Cswitch \u5728\u539F\u4EF6\u652F\u6301 value \u4E3A string | number | boolean \u7C7B\u578B
+ string | number | boolean,
+ // \u{1F534} \u7EE7\u627F\u7684\u5C5E\u6027
+ ElSwitchProps,
+ // \u{1F534} \u62D3\u5C55\u7684\u7684\u5C5E\u6027
+ {
+ renderPreview?: (active: boolean) => any;
+ /**
+ * \u9ED8\u8BA4\u540C activeText
+ */
+ previewActiveText?: string;
+ /**
+ * \u9884\u89C8\u65F6 inactiveText
+ */
+ previewInactiveText?: string;
+ }
+>;
+
+// \u{1F534} \u6CE8\u518C\u5230\u5168\u5C40\u7684 AtomicProps \u4E2D
+// \u8FD9\u4E2A\u8BA9 FatTable\u3001FatForm \u5728\u4F7F\u7528\u65F6\u53EF\u4EE5\u4ECE valueType \u63A8\u65AD\u51FA valueProps \u7684\u7C7B\u578B
+declare global {
+ interface AtomicProps {
+ switch: ASwitchProps;
+ }
+}
+
+// \u{1F534} \u7EC4\u4EF6\u5B9E\u73B0, \u7C7B\u4F3C\u4E8E defineComponent
+export const ASwitchComponent = defineAtomicComponent(
+ (props: ASwitchProps) => {
+ // \u8FD9\u91CC\u53EF\u4EE5\u653E\u7F6E Composition API
+
+ // \u8FD4\u56DE JSX.Element
+ return () => {
+ const { value, mode, onChange, context, scene, renderPreview, ...other } = props;
+
+ const activeValue = other.activeValue ?? true;
+ const active = value === activeValue;
+ const activeText = other.previewActiveText ?? other.activeText ?? '\u5F00\u542F';
+ const inactiveText = other.previewInactiveText ?? other.inactiveText ?? '\u5173\u95ED';
+
+ // \u9884\u89C8\u6A21\u5F0F
+ if (mode === 'preview') {
+ return renderPreview ? renderPreview(active) : <span>{active ? activeText : inactiveText}</span>;
+ }
+
+ // \u7F16\u8F91\u6A21\u5F0F
+ return <ElSwitch {...other} modelValue={value} onUpdate:modelValue={onChange} />;
+ };
+ },
+ { name: 'ASwitch' }
+);
+
+// \u{1F534} \u6CE8\u518C
+globalRegistry.register('switch', {
+ name: 'switch',
+ component: ASwitchComponent,
+ description: '\u5F00\u5173',
+ author: 'ivan-lee',
+});
+\u5982\u679C\u60F3\u6DF1\u5165\u4E86\u89E3\u81EA\u5B9A\u4E49\u539F\u4EF6\u7684\u5F00\u53D1\u7EC6\u8282\uFF0C\u53EF\u4EE5\u53C2\u8003\u5185\u7F6E\u539F\u4EF6\u7684\u5B9E\u73B0\u3002
\u4F7F\u7528\u81EA\u5B9A\u4E49\u539F\u4EF6
\u4F7F\u7528\u81EA\u5B9A\u4E49\u539F\u4EF6\u4E24\u79CD\u65B9\u5F0F:
\u5982\u679C\u4F7F\u7528
globalRegistry.register\u6CE8\u518C\u7684\u539F\u4EF6\u3002\u53EF\u4EE5\u901A\u8FC7\u5B57\u7B26\u4E32\u540D\u79F0\u4F7F\u7528, \u4F8B\u5982\uFF1Avue<FatFormItem value-type="switch" /> +\u76F4\u63A5\u5C06 atomic \u5B9A\u4E49\u4F20\u5165\uFF0C \u4F8B\u5982
tsxconst switch = defineAtomic({ + name: 'switch', + component: ASwitchComponent, + description: '\u5F00\u5173', + author: 'ivan-lee', +}) + +// \u4F7F\u7528 +<FatFormItem valueType={switch} /> +
FAQ
1. select \u539F\u4EF6\u600E\u4E48\u652F\u6301\u5F02\u6B65\u52A0\u8F7D options
TIP
\u5176\u4ED6\u539F\u4EF6\u7C7B\u4F3C\uFF1Atree-select, multi-select, cascader, cascader-lazy
\u65B9\u5F0F 1\uFF1A \u76F4\u63A5\u4F20\u5165\u4E00\u4E2A\u5F02\u6B65\u51FD\u6570
',6),Ts={class:"wk-demo"},ws=L(`\u67E5\u770B\u4EE3\u7801
tsx
import { defineFatForm } from '@wakeadmin/components';
+import { ref } from 'vue';
+
+export default defineFatForm(({ item, group }) => {
+ const callTime = ref(0);
+
+ const getList = () => {
+ callTime.value++;
+
+ return Promise.resolve([
+ {
+ label: '\u9009\u98791',
+ value: 1,
+ },
+ {
+ label: '\u9009\u98792',
+ value: 2,
+ },
+ ]);
+ };
+
+ return () => ({
+ children: [
+ item({
+ prop: 'option1',
+ label: '\u9009\u98791',
+ valueType: 'select',
+ initialValue: 1,
+ valueProps: {
+ options: getList,
+ },
+ }),
+ item({
+ prop: 'option2',
+ label: '\u9009\u98791',
+ valueType: 'select',
+ initialValue: 2,
+ valueProps: {
+ options: getList,
+ },
+ }),
+ group({
+ label: '\u8C03\u7528\u6B21\u6570',
+ children: [<span>{callTime.value}</span>],
+ }),
+ ],
+ });
+});
+\u8981\u70B9\uFF1A
- \u5F02\u6B65\u51FD\u6570\u53EA\u4F1A\u5728\u539F\u4EF6\u6302\u8F7D(setup)\u65F6\u6267\u884C\u4E00\u6B21\u3002\u540E\u7EED\u539F\u4EF6\u91CD\u65B0\u6E32\u67D3\u4E0D\u4F1A\u88AB\u6267\u884C
- \u91CD\u590D\u7684\u5F02\u6B65\u51FD\u6570\u4F1A\u88AB\u81EA\u52A8\u5408\u5E76\u3002\u6240\u4EE5\u53EF\u4EE5\u653E\u5FC3\u5730\u5728\u8868\u683C(FatTable)\u7B49\u573A\u666F\u4F7F\u7528\u5B83\u3002
\u65B9\u5F0F 2\uFF1A \u624B\u52A8\u7EF4\u62A4
\u53EF\u4EE5\u81EA\u5DF1\u624B\u52A8\u8BF7\u6C42\u6570\u636E\uFF0C\u5E76\u901A\u8FC7 ref \u4FDD\u5B58\u8D77\u6765\u3002\u8FD9\u79CD\u65B9\u5F0F\u9002\u7528\u4E8E\u9700\u8981\u624B\u52A8\u63A7\u5236\u8BF7\u6C42\u65F6\u673A\u3001\u5237\u65B0\u65F6\u673A\u7684\u573A\u666F\u3002
\u793A\u4F8B\uFF1A\u914D\u5408 swrv \u4F7F\u7528\uFF1A
`,8),Vs={class:"wk-demo"},Rs=L(`\u67E5\u770B\u4EE3\u7801
tsx
import { defineFatForm } from '@wakeadmin/components';
+import { ref } from 'vue';
+import useSwrv from 'swrv';
+import { ElButton } from 'element-plus';
+
+export default defineFatForm(({ item, group }) => {
+ const callTime = ref(0);
+ let uuid = 0;
+ const { data, mutate: reload } = useSwrv('/your/api', () => {
+ callTime.value++;
+ return Promise.resolve([
+ {
+ label: \`\u9009\u98791 \${uuid++}\`,
+ value: 1,
+ },
+ {
+ label: \`\u9009\u98792 \${uuid++}\`,
+ value: 2,
+ },
+ ]);
+ });
+
+ return () => ({
+ children: [
+ item({
+ prop: 'option1',
+ label: '\u9009\u98791',
+ valueType: 'select',
+ initialValue: 1,
+ valueProps: {
+ options: data.value,
+ },
+ }),
+ item({
+ prop: 'option2',
+ label: '\u9009\u98791',
+ valueType: 'select',
+ initialValue: 2,
+ valueProps: {
+ options: data.value,
+ },
+ }),
+ group({
+ label: '\u5237\u65B0',
+ children: [<ElButton onClick={() => reload()}>reload: {callTime.value}</ElButton>],
+ }),
+ ],
+ });
+});
+`,5),Is=JSON.parse('{"title":"FAQ","description":"","frontmatter":{},"headers":[{"level":2,"title":"1. select \u539F\u4EF6\u600E\u4E48\u652F\u6301\u5F02\u6B65\u52A0\u8F7D options","slug":"_1-select-\u539F\u4EF6\u600E\u4E48\u652F\u6301\u5F02\u6B65\u52A0\u8F7D-options","link":"#_1-select-\u539F\u4EF6\u600E\u4E48\u652F\u6301\u5F02\u6B65\u52A0\u8F7D-options","children":[]}],"relativePath":"atomics/faq.md","lastUpdated":1719310312000}'),Ss={name:"atomics/faq.md"},Os=Object.assign(Ss,{setup(a){return(l,n)=>{const o=cs("ClientOnly");return Fs(),ys("div",null,[Es,w(o,null,{default:$(()=>[H("div",Ts,[w(K(Ds))])]),_:1}),ws,w(o,null,{default:$(()=>[H("div",Vs,[w(K(_s))])]),_:1}),Rs])}}});export{Is as __pageData,Os as default}; diff --git a/assets/atomics_faq.md.15a3344b.lean.js b/assets/atomics_faq.md.15a3344b.lean.js new file mode 100644 index 0000000..31234f6 --- /dev/null +++ b/assets/atomics_faq.md.15a3344b.lean.js @@ -0,0 +1 @@ +import{n as G,r as k,q as Z,s as ss,t as ns,v as as,x as ls,y as os,z as es,A as ps,B as ts,C as rs,a as cs,o as Fs,c as ys,f as w,w as $,m as L,b as H,g as K}from"./app.56f20909.js";const Ds=G(({item:a,group:l})=>{const n=k(0),o=()=>(n.value++,Promise.resolve([{label:"\u9009\u98791",value:1},{label:"\u9009\u98792",value:2}]));return()=>({children:[a({prop:"option1",label:"\u9009\u98791",valueType:"select",initialValue:1,valueProps:{options:o}}),a({prop:"option2",label:"\u9009\u98791",valueType:"select",initialValue:2,valueProps:{options:o}}),l({label:"\u8C03\u7528\u6B21\u6570",children:[Z("span",{children:n.value})]})]})});var O=new WeakMap,Q=0;function is(a){if(!a.length)return"";for(var l="arg",n=0;n
\u539F\u4EF6
\u6839\u636E\u8FC7\u5F80\u7684\u9879\u76EE\u7ECF\u9A8C\uFF0C\u6211\u4EEC\u7684\u7EC4\u4EF6\u5E93\u5185\u7F6E\u4E86\u8F83\u591A\u6700\u4E3A\u5E38\u7528\u7684\u7EC4\u4EF6, \u5982\u4E0B\u56FE\u6240\u793A\u3002 \u5982\u679C\u4F60\u6709\u9700\u6C42\uFF0C\u4E5F\u53EF\u4EE5\u63D0\u4EA4\u7ED9\u6211\u4EEC, \u6211\u4EEC\u4F1A\u6839\u636E\u901A\u7528\u6027\u8BC4\u4F30\uFF0C\u51B3\u5B9A\u662F\u5426\u8981\u5185\u7F6E\u5230\u7EC4\u4EF6\u5E93\u4E2D\u3002