<template>
  <p>默认</p>
  {{ modelArray }}
  <s-any-range v-model="modelArray" type="input"/>
  <p>修改keys</p>
  {{ modelObject }}
  <s-any-range v-model="modelObject" type="input" :keys="['min','max']" />
  <p>时间</p>
  {{ modelTime }}
  <s-any-range v-model="modelTime" type="date-picker" :keys="['start','end']" />
  <p>下拉选择</p>
  {{ modelSelect }}
  <s-any-range v-model="modelSelect"
               type="select"
               :keys="['start','end']"
               :options="options"
  />
  <p>滑块选择</p>
  {{ modelSlide}}
  <s-any-range v-model="modelSelect"
               type="slider"
               :keys="['min','max']"
               separator="到"
  />
</template>

<script lang='ts' setup>
import { ref } from 'vue'

const modelArray = ref([])
const modelObject = ref({})
const modelTime = ref({})
const modelSelect = ref({})
const modelSlide = ref({})
const options = ref([
  {
    label: '张三',
    value: '张三'
  },
  {
    label: '李四',
    value: '李四'
  },
  {
    label: '王五',
    value: '王五'
  }
])
</script>
<style scoped lang='scss'>
.sel-any-select {
  margin-bottom: 20px;
}
</style>
