介绍

本文档主要用于描述 ShadcnMap 组件的一些特性和用法。

用法

查看代码

<template>
    <ShadcnMap v-model="value"/>
</template>

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

const value = ref([])
</script>

尺寸 (size)

查看代码

<template>
    <ShadcnMap v-model="value" size="small"/>
    <ShadcnMap v-model="value" size="default"/>
    <ShadcnMap v-model="value" size="large"/>
</template>

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

const value = ref([])
</script>

类型 (type)

查看代码

<template>
    <ShadcnMap v-model="value" type="primary"/>
    <ShadcnMap v-model="value" type="success"/>
    <ShadcnMap v-model="value" type="warning"/>
    <ShadcnMap v-model="value" type="error"/>
</template>

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

const value = ref([])
</script>

禁用 (disabled)

查看代码

<template>
    <ShadcnMap v-model="value" disabled/>
</template>

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

const value = ref([])
</script>

最大值 (max)

查看代码

<template>
    <ShadcnMap v-model="value" max="2"/>
</template>

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

const value = ref([])
</script>

表单 (form)

查看代码

<template>
    <ShadcnForm ref="formRef" v-model="formState" @on-submit="console.log($event)">
      <ShadcnFormItem name="map"
                      label="Map"
                      :rules="[ { required: true, message: 'Please add map!' } ]">
        <ShadcnMap v-model="formState.value" :max="3" name="map"/>
      </ShadcnFormItem>
      <ShadcnButton submit>Submit</ShadcnButton>
    </ShadcnForm>
</template>

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

const formState = ref({
  value: []
})
</script>

键值对 (Map) 属性

键值对 (Map) 事件