u

code/g3soft-libs/docs/examples/input/basic.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+// 最基础用法：v-model 双向绑定，值类型为 string
+import { ref } from 'vue'
+import { G3Input } from '@g3soft/ui'
+
+const value = ref('')
+</script>
+
+<template>
+  <div style="width: 260px">
+    <G3Input v-model="value" placeholder="请输入名称" />
+    <p style="margin: 8px 0 0; font-size: 13px; color: #6b7280">值：{{ value || '（空）' }}</p>
+  </div>
+</template>

code/g3soft-libs/docs/examples/input/clearable.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// allowClear：有值时 hover / 聚焦出现清除按钮；clear 事件通知清空动作
+import { ref } from 'vue'
+import { G3Input, G3Message } from '@g3soft/ui'
+
+const keyword = ref('g3soft')
+</script>
+
+<template>
+  <div style="width: 260px">
+    <G3Input
+      v-model="keyword"
+      allow-clear
+      placeholder="输入后 hover 可见清除按钮"
+      @clear="G3Message.info('已清空')"
+    />
+  </div>
+</template>

code/g3soft-libs/docs/examples/input/methods.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+// 组件实例方法：focus（可全选）/ select / blur，用于「点击编辑」类交互
+import { ref } from 'vue'
+import { G3Button, G3Input, G3Space, type InputFocusOptions } from '@g3soft/ui'
+
+const value = ref('待编辑内容')
+const inputRef = ref<InstanceType<typeof G3Input> | null>(null)
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex; width: 320px">
+    <G3Input ref="inputRef" v-model="value" />
+    <G3Space :size="8">
+      <!-- cursor: 'all' 聚焦后全选内容 -->
+      <G3Button size="small" type="outline" @click="inputRef?.focus({ cursor: 'all' } as InputFocusOptions)">
+        聚焦并全选
+      </G3Button>
+      <G3Button size="small" type="outline" @click="inputRef?.select()">仅选中</G3Button>
+      <G3Button size="small" type="outline" @click="inputRef?.blur()">失焦</G3Button>
+    </G3Space>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/input/number.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+// type="number"：只允许数字与小数点，失焦时把字符串提交为 Number
+import { ref } from 'vue'
+import { G3Input } from '@g3soft/ui'
+
+const amount = ref<string | number>(12.5)
+</script>
+
+<template>
+  <div style="width: 260px">
+    <G3Input v-model="amount" type="number" placeholder="请输入金额" />
+    <p style="margin: 8px 0 0; font-size: 13px; color: #6b7280">
+      提交值：{{ amount }}，类型：{{ typeof amount }}
+    </p>
+  </div>
+</template>

code/g3soft-libs/docs/examples/input/password.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+// type="password"：自带显示/隐藏切换按钮
+import { ref } from 'vue'
+import { G3Input } from '@g3soft/ui'
+
+const value = ref('g3soft-2026')
+</script>
+
+<template>
+  <div style="width: 260px">
+    <G3Input v-model="value" type="password" placeholder="请输入密码" autocomplete="current-password" />
+  </div>
+</template>

code/g3soft-libs/docs/examples/input/slots.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// #prefix / #suffix 插槽：放图标、单位、后缀文字
+import { ref } from 'vue'
+import { G3Input, G3Space } from '@g3soft/ui'
+import { Search, User } from '@lucide/vue'
+
+const keyword = ref('')
+const weight = ref('72')
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex; width: 280px">
+    <G3Input v-model="keyword" placeholder="搜索">
+      <template #prefix><Search /></template>
+    </G3Input>
+
+    <G3Input v-model="keyword" placeholder="带后缀图标">
+      <template #suffix><User /></template>
+    </G3Input>
+
+    <G3Input v-model="weight" type="number">
+      <template #suffix><span style="font-size: 12px">kg</span></template>
+    </G3Input>
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/input/status.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+// status：把校验结果交给输入框表达（error 红边 / warning 黄边）
+import { ref } from 'vue'
+import { G3Input, G3Space } from '@g3soft/ui'
+
+const email = ref('not-an-email')
+const host = ref('localhost')
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex; width: 280px">
+    <G3Input v-model="email" status="error" placeholder="邮箱格式不正确" />
+    <G3Input v-model="host" status="warning" placeholder="可能存在风险" />
+    <G3Input model-value="正常状态" />
+  </G3Space>
+</template>

code/g3soft-libs/docs/examples/input/textarea.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+// type="textarea"：多行输入；showCount 显示字数，右下角可拖拽调整高度
+import { ref } from 'vue'
+import { G3Input, G3Space } from '@g3soft/ui'
+
+const description = ref('')
+const remark = ref('固定 4 行，不可拖拽时用 rows 控制初始高度')
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="16" style="display: flex; width: 320px">
+    <G3Input
+      v-model="description"
+      type="textarea"
+      :rows="3"
+      :maxlength="100"
+      show-count
+      placeholder="请输入描述，可拖拽右下角调整高度"
+    />
+    <G3Input v-model="remark" type="textarea" :rows="4" readonly />
+  </G3Space>
+</template>