u

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>