README

Vue js bootstrap 5 组件

验证

Vue 3 和 Bootstrap 5 验证组件和插件

使用方法

1. 将 *.js 文件复制到您的项目（例如，到 /js/vuebootstrap/ 文件夹）
2. 主 Vue 应用程序文件

const { createApp } = Vue
import App from '/js/app.js'
import Validation from '/js/vuebootstrap/validation.js'
import Validate from '/js/vuebootstrap/validate.js'

const app = createApp(App)

app.use(Validation, {});
app.component("Validate", Validate);

app.mount("#app");

1. 在您的 App 中对任何表单元素添加验证

<Validate v-slot="{ errorClass }" :rule="$validationRules.string" :value="user.name" :func="$globalValidation">
    <input type="text" class="form-control" :class="errorClass" id="name" v-model="user.name">
</Validate>

您可以在哪里更改

• $validationRules.string - 验证规则（参见 validation.js 中的所有规则）
• <input... - 任何表单元素
• <input :class="errorClass" - 验证过的输入类

1. 在您的 App 中检查表单的有效性

if (this.$checkValidation()) {
    // Form is valid
} else {
    // Form is invalid
}

标签页

Vue 3 和 Bootstrap 5 标签组件

使用方法

1. 将 *.js 文件复制到您的项目（例如，到 /js/vuebootstrap/ 文件夹）
2. 主 Vue 应用程序文件

const { createApp } = Vue
import App from '/js/vendor/authorize/profile.js'
import Tabs from '/js/vuebootstrap/tabs.js'

const app = createApp(App)

app.component("Tabs", Tabs);

app.mount("#app");

1. 在您的 App 中添加标签元素

<Tabs tabsjson='[{"name": "Test_Tab1", "id": "test_tab_1"},
 {"name": "Test_Tab2", "id": "test_tab_2"}]' startactivetab="test_tab_1">
    <template v-slot:test_tab_1>
        test tab 1 body
    </template>
    <template v-slot:test_tab_2>
        test tab 2 body
    </template>
</Tabs>

在哪里

• tabsjson - 包含标签名称和 ID 的 JSON 数组
• startactivetab - 页面加载后将要激活的标签的 ID
• <template v-slot:test_tab_1> - ID 为 "test_tab_1" 的标签内容

活动表格

Vue 3 和 Bootstrap 5 表格组件，具有排序、分页和过滤器功能

链接

按钮

AInput

ASelect

警告

辅助