liubo-vue-components

@qian/vue-components

A Vue 3 UI component library with Button, Collapse, and Icon components.

Installation

npm install @qian/vue-components

Usage

Global Registration

import { createApp } from 'vue'
import VueComponents from '@qian/vue-components'
import '@qian/vue-components/dist/style.css'

const app = createApp(App)
app.use(VueComponents)
app.mount('#app')

Individual Components

<template>
  <vk-button size="large" loading>Loading</vk-button>
  <vk-button size="large" icon="arrow-up">Icon</vk-button>
  
  <vk-collapse v-model="activeNames">
    <vk-collapse-item title="Title 1" name="1">
      Content 1
    </vk-collapse-item>
    <vk-collapse-item title="Title 2" name="2">
      Content 2
    </vk-collapse-item>
  </vk-collapse>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Button, Collapse, CollapseItem } from '@qian/vue-components'

const activeNames = ref(['1'])
</script>

Components

Button

Props:

• size: 'large' | 'small'
• type: 'primary' | 'success' | 'warning' | 'danger' | 'info'
• plain: boolean
• round: boolean
• circle: boolean
• disabled: boolean
• loading: boolean
• icon: string (Font Awesome icon name)

Collapse

Props:

• v-model: string[] | string (active panel names)

CollapseItem

Props:

• title: string
• name: string

Icon

Props:

• icon: [string, string] (Font Awesome icon array)
• type: string
• size: string
• color: string

License

MIT