23 lines
926 B
Vue
23 lines
926 B
Vue
<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>
|