u

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>