packages/docs/src/examples/v-btn/usage.vue - master - githubmirror/vuetify

packages/docs/src/examples/v-btn/usage.vue

78 строк2 KB

J-Sek

docs(VBtn): hide slot content for icon (#21746)

17 июл 2025, 15:25

17 июл 2025, 15:256fb4bb5

<template>
  <ExamplesUsageExample
    v-model="model"
    :code="code"
    :name="name"
    :options="options"
  >
    <div class="text-center">
      <v-btn v-bind="props">
        <template v-if="!icon" v-slot:default>Button</template>
      </v-btn>
    </div>

    <template v-slot:configuration>
      <v-checkbox v-model="icon" label="Icon"></v-checkbox>
      <v-checkbox v-model="prepend" label="Prepend icon"></v-checkbox>
      <v-checkbox v-model="append" label="Append icon"></v-checkbox>
      <v-checkbox v-model="stacked" label="Stacked"></v-checkbox>
    </template>
  </ExamplesUsageExample>
</template>

<script setup>
  const variants = ['outlined', 'tonal', 'text', 'plain']
  const name = 'v-btn'
  const model = ref('default')
  const icon = ref(false)
  const options = [...variants]
  const block = ref(false)
  const stacked = ref(false)
  const prepend = ref(false)
  const append = ref(false)
  const props = computed(() => {
    return {
      block: block.value || undefined,
      'prepend-icon': prepend.value ? '$vuetify' : undefined,
      'append-icon': append.value ? '$vuetify' : undefined,
      icon: icon.value ? '$vuetify' : undefined,
      stacked: stacked.value || undefined,
      variant: variants.includes(model.value) ? model.value : undefined,
    }
  })

  watch(stacked, val => {
    if (val) {
      prepend.value = true
      append.value = false
      icon.value = false
    }
  })

  watch(prepend, val => {
    if (val) {
      icon.value = false

      if (stacked.value) (append.value = false)
    }
  })

  watch(append, val => {
    if (val) {
      icon.value = false

      if (stacked.value) (prepend.value = false)
    }
  })
  watch(icon, val => val && (prepend.value = false, append.value = false, stacked.value = false))

  const slots = computed(() => {
    return icon.value ? '' : `
  Button
`
  })

  const code = computed(() => {
    return `<${name}${propsToString(props.value)}>${slots.value}</${name}>`
  })
</script>