介绍

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

用法

查看代码

<template>
    <ShadcnMap v-model="value" :dark="darkMode" />
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import {ref} from "vue"

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

尺寸 (size)

查看代码

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

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import {ref} from "vue"

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

类型 (type)

查看代码

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

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import {ref} from "vue"

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

禁用 (disabled)

查看代码

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

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import {ref} from "vue"

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

最大值 (max)

查看代码

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

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import {ref} from "vue"

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

表单 (form)

查看代码

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

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

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

键值对 (Map) 属性

键值对 (Map) 事件