fix(docs): add input-number

koory1st · Dec 2, 2023 · d4465bb · d4465bb
1 parent ef85513
commit d4465bb
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/docs/src/lib/i18n/zh/input_number.js b/docs/src/lib/i18n/zh/input_number.js
@@ -1,3 +1,10 @@
 export default {
   cinputNum01010: 'Input Number 数字输入框',
+  cinputNum01020: '仅允许输入标准的数字值，可定义范围',
+  cinputNum02010: '基础用法',
+  cinputNum02020:
+    '要使用它，只需要在 <SvelInputNumber> 元素中绑定变量即可，变量的初始值即为默认值。',
+  cinputNum03010: '禁用状态',
+  cinputNum03020:
+    'disabled属性接受一个 Boolean，设置为true即可禁用整个组件。 ，如果你只需要控制数值在某一范围内，可以设置 min 属性和 max 属性， 默认最小值为 0。',
 };
diff --git a/docs/src/routes/component/input_number/+page.svelte b/docs/src/routes/component/input_number/+page.svelte
@@ -6,8 +6,38 @@
 
   let langFn = getContext('langFn');
 
-  let input1 = '';
-  let inputF = '';
+  let num = 1;
+  let num2 = 1;
+
+  function handleChange(e) {
+    console.log('%c ---> e: ', 'color:#F0F;', e);
+  }
 </script>
 
 <h1>{$langFn('cinputNum01010')}</h1>
+<p>{$langFn('cinputNum01020')}</p>
+
+<h2>{$langFn('cinputNum02010')}</h2>
+<p>{$langFn('cinputNum02020')}</p>
+<Example
+  code={`
+<script>
+let num = 1;
+@@@/script>
+<SvelInputNumber bind:value={num} max="10" min="1" on:change={handleChange} />
+`}
+>
+  <SvelInputNumber bind:value={num} max="10" min="1" on:change={handleChange} />
+</Example>
+
+<h2>{$langFn('cinputNum03010')}</h2>
+<p>{$langFn('cinputNum03020')}</p>
+<Example
+  code={`
+<SvelInputNumber bind:value={num} disabled />
+<SvelInputNumber bind:value={num} max="5" min="2" />
+`}
+>
+  <SvelInputNumber bind:value={num2} disabled />
+  <SvelInputNumber bind:value={num2} max="5" min="2" />
+</Example>