<template>
  <div>
    <h4>基本使用</h4>
    <KsSelect
        v-model="selectValue1"
        :data="data"
        label="云环境1"
        clearable
        width="200px"
        :nodefalut="true"
    />
    选择的值：{{selectValue1}}
    <h4>自定义placeholder</h4>
    <KsSelect
        v-model="selectValue2"
        :data="data"
        label="云环境2"
        :nodefalut="true"
        placeholder="请选择所需要的数据"
    />
    选择的值：{{selectValue2}}

    <h4>不需要默认值</h4>
    <KsSelect
        v-model="selectValue3"
        :data="data"
        label="云环境3"
        :nodefalut="true"
    />
    选择的值：{{selectValue3}}

    <h4>不带label</h4>
    <KsSelect
        v-model="selectValue4"
        :data="data"
        :nodefalut="true"
    />
    选择的值：{{selectValue4}}
  </div>
</template>
<script setup>
import { ref } from "vue";
// import { KsSelect } from '@ksconsole/components'

const selectValue1 = ref('')
const selectValue2 = ref('')
const selectValue3 = ref('')
const selectValue4 = ref('')
const data = [
  { label: '数据1', value: '1' },
  { label: '数据2', value: '2' },
]
</script>
<style scoped lang='less'>
h4 {
  margin: 20px 0;
}
</style>

