Button #

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

export default defineComponent({
  setup() {
    // ...
  },
})
</script>

<template>
  <qt-button text="默认" />
</template>

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

export default defineComponent({
  setup() {
    // ...
  },
})
</script>

<template>
  <qt-button size="mini" class="text-button-class" text="超小" />
  <qt-button size="small" class="text-button-class" text="小" />
  <qt-button size="medium" class="text-button-class" text="中" />
  <qt-button size="large" class="text-button-class" text="大" />
</template>

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

export default defineComponent({
  setup() {
    // ...
  },
})
</script>

<template>
  <qt-button
    class="text-button-class"
    text="自定义按钮样式"
    :style="{ backgroundColor: '#FF0022', height: '100px' }"
  />
</template>

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

export default defineComponent({
  setup() {
    // ...
  },
})
</script>

<template>
  <qt-button disabled text="不可用" />
</template>

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

export default defineComponent({
  setup() {
    // ...
  },
})
</script>

<template>
  <qt-button round text="圆角" class="text-button-class" />
</template>

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

export default defineComponent({
  setup() {
    // ...
  },
})
</script>

<template>
  <qt-button square text="正方形" class="text-button-class" />
</template>

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

export default defineComponent({
  setup() {
    // ...
  },
})
</script>

<template>
  <qt-button
    size="medium"
    class="text-button-class"
    round
    text="渐变背景"
    :gradientFocusBackground="{
      colors: ['#10F5F5', '#AA79F0'],
      cornerRadius: 100,
      orientation: 3,
    }"
    :gradientBackground="{
      colors: ['#FF2648', '#FF6F44'],
      cornerRadius: 100,
      orientation: 3,
    }"
  />
</template>

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

export default defineComponent({
  setup() {
    // ...
  },
})
</script>

<template>
  <qt-button
    size="medium"
    disabled
    text="自定义文字样式"
    :textStyle="{
      width: '100px',
      backgroundColor: '#FF8022',
      fontSize: '20px',
    }"
    class="text-button-class"
  />
</template>

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

export default defineComponent({
  setup() {
    // ...
  },
})
</script>

<template>
  <qt-button style="width: 400px; background-color: green; margin: 20px">
    <qt-row>
      <span style="font-size: 20px; color: red">自定义内容1</span>
      <span style="font-size: 30px; color: #7415b1">自定义内容1</span>
    </qt-row>
  </qt-button>
</template>

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

export default defineComponent({
  setup() {
    // ...
  },
})
</script>

<template>
  <qt-button
    size="medium"
    text="图标"
    :icon="require('../../../src/assets/add-circle.png')"
    :focusIcon="require('../../../src/assets/ashbin.png')"
    class="text-button-class"
  />
</template>

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

export default defineComponent({
  setup() {
    // ...
  },
})
</script>

<template>
  <qt-button
    size="medium"
    text="网络图标"
    round
    icon="https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image/2023/03/30/78dbb25b-772e-4355-8e34-97d72c1d6954.png"
    focusIcon="https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image/2023/03/28/cc7ab76f-c813-4cf0-a671-b0c111e7a52f.png"
    class="text-button-class"
  />
</template>

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

export default defineComponent({
  setup() {
    // ...
  },
})
</script>

<template>
  <qt-button
    :focusBorder="true"
    size="medium"
    text="边框"
    class="text-button-class"
  />
</template>

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

export default defineComponent({
  setup() {
    // ...
  },
})
</script>

<template>
  <qt-button
    size="large"
    text="自定义图标样式"
    :iconStyle="{ width: '50px', height: '50px' }"
    :focusIconStyle="{
      backgroundColor: '#FF9933',
      width: '20px',
      height: '20px',
    }"
    :icon="require('../../../src/assets/add-circle.png')"
    :focusIcon="require('../../../src/assets/ashbin.png')"
    class="text-button-class"
  />
</template>