什么是Vue3 UI

Vue3 UI 是一个基于 Vue 3.0+ 的组件库，包含了常见的 UI 组件和业务组件。它可以帮助我们快速地搭建美观、实用的网站和应用，减少重复的开发工作。

Vue3 UI 包含了许多优点：

• 高质量：使用 Vue 3.0+ 构建，有良好的生态圈和文档支持。
• 灵活性：提供了可配置的组件，允许你自定义样式和行为。
• 扩展性：允许你从组件所选项集合中添加或删除具体的选项。
• 反应灵敏：使用了最新版本的 Vue.js，响应更快。

如何使用Vue3 UI

Vue3 UI 可以通过 npm 安装并引入到项目中。以下是如何在 Vue.js 项目中使用 Vue3 UI 的步骤：

1. 安装 Vue3 UI

   npm install vue3-ui
   1

2. 在 main.js 中引入并注册组件

   import { createApp } from 'vue';
   import App from './App.vue';
   
    // 引入多个全局组件
   import {
     Button,
     Input,
     switcher,
     Checkbox,
     RadioGroup,
     DatePicker,
     TimePicker,
   }
   from 'vue3-ui';
   
   const app = createApp(App);
   
   // 注册全局组件
   app.component('Button', Button);
   app.component('Input', Input);
   app.component('Switcher', Switcher);
   app.component('Checkbox', checkbox);
   app.component('RadioGroup', RadioGroup);
   app.component('DatePicker', DatePicker);
   app.component('TimePicker', TimePicker);
   
   app.mount('#app');
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27

3. 在 Vue 组件中使用

<template>
  <Button>点击</Button>
</template>
1
2
3

Vue3 UI 的主要组件

Vue3 UI 包括了许多常见的 UI 组件，例如按钮、输入框、选择器、日期时间等。以下是 Vue3 UI 常用组件及其用法：

1. 按钮（Button）

按钮是我经常在页面中使用的基本组件之一，在 Vue3 UI 中的使用方法如下：

<template>
 <div>
   <Button type="primary" @click="handleClick">Primary</Button>
   <Button type="default" @click="handleClick">Default</Button>
   <Button type="warning" @click="handleClick">Warning</Button>
   <Button type="danger" @click="handleClick">Danger</Button>
 </div>
</template>

<script>
 import { Button } from 'vue3-ui';
 export default {
   components: { Button },
   methods: {
     handleClick() {
       console.log('button clicked');
     }
   }
 }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这个例子中，我们展示了4个不同样式的按钮，并将 handleClick 方法绑定到事件上。

2. 输入框（Input）

在 Vue3 UI 中，输入框组件提供了包括文本输入、数字输入等多种输入类型。

<template>
  <div>
    <Input v-model="text"></Input>
    <Input type="number" v-model.number="num"></Input>
    <Input type="textarea" v-model="textarea"></Input>
    <Input password v-model="password"></Input>
  </div>
</template>

<script>
 import { Button, Input } from 'vue3-ui';
 export default {
   components: { Button, Input },
   data() {
     return {
       text: '',
       num: 0,
       textarea: '',
       password: ''
     }
   }
 }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在这个例子中，我通过v-model指令绑定了数据和输入框的值，可以通过属性来控制不同类型的输入框。其中 v-model.number 可以将字符串转换为数字，而 password 可以隐藏输入的内容。

3. 选择器（Select）

Vue3 UI 的选择器组件包括单选框、多选框和下拉列表。

<template>
  <div>
    <RadioGroup :data="radioData" v-model="radioValue"></RadioGroup>
    <Checkbox :data="checkboxData" v-model="checkedList"></Checkbox>
    <Select :options="selectOptions" v-model="selectedOption"></Select>
  </div>
</template>

<script>
 import { RadioGroup, Checkbox, Select } from 'vue3-ui';
 export default {
   components: { RadioGroup, Checkbox, Select },
   data() {
     return {
       radioData: [
         { label: 'Option A', value: 'a' },
         { label: 'Option B', value: 'b' },
         { label: 'Option C', value: 'c' }
       ],
       radioValue: 'a',
       checkboxData: [
         { label: 'Apple', value: 'apple' },
         { label: 'Banana', value: 'banana' },
         { label: 'Orange', value: 'orange' }
       ],
       checkedList: ['apple'],
       selectOptions: [
         { value: 'gd', label: '广东省' },
         { value: 'sh', label: '上海市' },
         { value: 'bj', label: '北京市' },
         { value: 'hk', label: '香港特别行政区' }
       ],
       selectedOption: 'bj'
     };
   }
 }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在这个例子中，我展示了单选框、多选框和下拉列表三种不同的选择器，并将它们的值绑定到了数据里。

4. 日期时间（DatePicker / TimePicker）

Vue3 UI 的日期时间组件包括日期选择器和时间选择器两种类型，可以方便地选择日期和时间。

<template>
  <div>
    <DatePicker v-model="date"></DatePicker>
    <TimePicker v-model="time"></TimePicker>
  </div>
</template>
 <script>
 import { DatePicker, TimePicker } from 'vue3-ui';
 export default {
   components: { DatePicker, TimePicker },
   data() {
     return {
       date: '',
       time: ''
     }
   }
 }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在这个例子中，我展示了日期选择器和时间选择器，并将选中的日期和时间绑定到了数据里。

总结

在 Vue3 UI 中，常见的 UI 组件如按钮、输入框、选择器、日期时间等都有完整的实现，而且这些组件的使用也非常灵活，可根据需求自定义样式和行为。同时，Vue3 UI 还提供了可扩展的组件选项，可以轻松地添加或删除具体的选项。

总之，如果你正在寻找一个简单易用、高质量的 Vue 组件库，Vue3 UI 会是一个非常不错的选择。