u

code/g3soft-libs/docs/examples/date/range-basic.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+// RangePicker：两次点击确定起止；先点的那次是起点，再点一次是终点（顺序反了会自动交换）
+import { ref } from 'vue'
+import { G3RangePicker } from '@g3soft/ui'
+
+const range = ref<string[]>(['', ''])
+const lastChange = ref('暂无')
+</script>
+
+<template>
+  <div style="width: 320px">
+    <G3RangePicker
+      v-model="range"
+      @change="(value: string[]) => (lastChange = value.join(' ~ '))"
+    />
+    <p style="margin: 8px 0 0; font-size: 13px; color: #6b7280">
+      绑定值：{{ range[0] || '（空）' }} ~ {{ range[1] || '（空）' }}
+    </p>
+    <p style="margin: 4px 0 0; font-size: 12px; color: #6b7280">change：{{ lastChange }}</p>
+  </div>
+</template>