docs(switch): before change

koory1st · Mar 6, 2024 · c0d8606 · c0d8606
1 parent 5abe573
commit c0d8606
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
diff --git a/docs/src/lib/i18n/zh/switch.js b/docs/src/lib/i18n/zh/switch.js
@@ -19,4 +19,6 @@ export default {
   cswitch07020: '设置disabled属性，接受一个Boolean，设置true即可禁用。',
   cswitch08010: '加载状态',
   cswitch08020: '设置loading属性，接受一个Boolean，设置true即加载中状态。',
+  cswitch09010: '阻止切换',
+  cswitch09020: '设置beforeChange属性，若返回 false 或者返回 Promise 且被 reject，则停止切换。',
 };
diff --git a/docs/src/routes/component/switch/+page.svelte b/docs/src/routes/component/switch/+page.svelte
@@ -12,6 +12,30 @@
   let value3 = '100';
   let value4 = true;
   let value5 = true;
+
+  let value6 = false;
+  let loading1;
+  const beforeChange1 = () => {
+    loading1 = true;
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        loading1 = false;
+        return resolve(true);
+      }, 1000);
+    });
+  };
+
+  let value7 = false;
+  let loading2;
+  const beforeChange2 = () => {
+    loading2 = true;
+    return new Promise((_, reject) => {
+      setTimeout(() => {
+        loading2 = false;
+        return reject(new Error('Error'));
+      }, 1000);
+    });
+  };
 </script>
 
 <h1>{$langFn('cswitch01010')}</h1>
@@ -172,5 +196,18 @@
   <SvelSwitch class="ml-2" loading />
 </Example>
 
+<h2>{$langFn('cswitch09010')}</h2>
+<p>{$langFn('cswitch09020')}</p>
+
+<Example
+  code={`
+  <SvelSwitch bind:value={value5} loading />
+  <SvelSwitch class="ml-2" loading />
+`}
+>
+  <SvelSwitch beforeChange={beforeChange1} bind:value={value6} loading={loading1} />
+  <SvelSwitch beforeChange={beforeChange2} bind:value={value7} loading={loading2} />
+</Example>
+
 <style>
 </style>