@101media/vue3-ui 中文文档教程

Question

Vue3-UI

Vue3-UI 是一个为 Bootstrap 5 实现了一些默认 UI 元素的包。

Installation

使用 npm：

$ npm install @101media/vue3-ui

使用 bower：

$ bower install @101media/vue3-ui

使用 yarn：

$ yarn add @101media/vue3-ui

Usage

import {createApp} from 'vue';
import Ui from "@101media/vue3-ui";


const app = createApp({
    //
});

app.use(Ui)
...

Configuration

可以在初始化插件时设置默认配置。

```js 从'vue'导入{createApp}； 从“@101media/vue3-ui”导入用户界面；

常量 UiConfig = { 对话：{ cancelClass: 'btn-危险', confirmClass: 'btn-成功', 中心：真实， } }

const app = createApp({ // });

app.use(Ui, UiConfig)

## Components

All components support default HTML attributes.

### Button

Show a button.

`String type`
The button type

`String class`
The button class

`Boolean block`
Whether the button should be displayed as block.

`String text`
The button text

### Checkbox

Show a checkbox.

`String type`
Define the input type.

`Boolean switches`
Whether the checkbox should be a switch

`Array|Boolean checked`
whether the checkbox is checked

`Any value`
The checkbox value

`String formClass`
The class of the form group

### Input

Show an input.

`String id`
The component ID

`String error`
The error message

`Boolean group`
Whether the input should be grouped

`String groupClass`
The class for the form group

`String type`
The input type

js

html

### Dialog

Dialog spawns a modal to confirm an action.

Ask user to confirm an action. Promise will only be resolved when user confirms action.

So `action.execute()` will only be executed once the user confrims the dialog.

#### confirm

js 这个.$ui.dialog.confirm({ message: '继续这个任务吗？', }).then(() => action.execute())

#### Alert

js 这个.$ui.dialog.alert({ message: '继续这个任务吗？', }).then(() => action.execute()) ```

Properties

字符串消息 对话框中显示的消息

String title 对话框模式中显示的标题

String confirmClass 确认按钮类

String confirmText 确认按钮的文本

String cancelClass 取消按钮类

String cancelText 取消按钮的文字

String canCancel 是否显示取消按钮 默认处于警报状态是 false

String headerClass 标头类

String headerTitleClass 标题标题类

Credits

Vue3-UI 的灵感来自 Buefy。

License

在麻省理工学院许可下发布的代码。