<template>
  <s-dom class="row-dom" type="button" :props="{type:'primary'}">我是按钮</s-dom>
  <s-dom class="row-dom" type="button" :props="{type:'danger'}">我是按钮</s-dom>
  <s-dom class="row-dom" type="button" :props="{size:'large'}">我是按钮</s-dom>
  {{ input }}
  <s-dom class="row-dom" v-model="input" type="input" :props="{placeholder:'输入框'}"></s-dom>
  {{ select }}
  <s-dom class="row-dom" v-model="select" type="select" :props="{placeholder:'下拉选择'}" :options="options"></s-dom>
  {{ checkbox }}
  <s-dom class="row-dom" v-model="checkbox" type="checkbox-group" :options="options"></s-dom>
  {{ rate }}
  <s-dom class="row-dom" v-model="rate" type="rate" :props="{colors:['#99A9BF', '#F7BA2A', 'red']}"></s-dom>
</template>

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

const options = [
  {
    label: '张三',
    value: '张三'
  },
  {
    label: '李四',
    value: '李四'
  },
  {
    label: '王五',
    value: '王五'
  }
]
const input = ref()
const select = ref()
const checkbox = ref()
const rate = ref()
</script>

<style lang="scss" scoped>
.row-dom {
  margin-bottom: 20px;
}
</style>
