https://blog.csdn.net/weixin_45583710/article/details/121433335
官网
https://primefaces.org/primevue/
文档
https://primefaces.org/primevue/setup
PrimeVue是一个在Github上开源的,功能强大、易于使用、多功能、高性能的 Vue UI 组件库,可帮助Web开发者构建高性能的UI页面,在当前Vue3生态的生态下(PrimeVue全面支持Vue2和Vue3),是对Vue3生态的一个极大的补充和促进!我们来简单地看一看PrimeVue有何过人之处!
安装使用
这里我们以Vue3 的项目为例,使用你习惯的管理工具进行安装
npminstall primevue@^3.5.1 --save
npm install primeicons --save
//或者
yarn add primevue@^3.5.1
yarn add primeicons
模块化加载
比较适合使用vite或者webpack(配置了vue-loader)
import {createApp} from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue);
组件注册
import {createApp} from 'vue';
import App from './App.vue';
import PrimeVue from 'primevue/config';
import Dialog from 'primevue/dialog';
const app = createApp(App);
app.use(PrimeVue);
app.component('Dialog', Dialog);
使用
<Dialog></Dialog>
或者单独引用组件
import Dialog from 'primevue/dialog/sfc';
主题样式文件:
primevue/resources/themes/saga-blue/theme.css //theme
primevue/resources/primevue.min.css //core css
primeicons/primeicons.css //icons
全局配置
同时你还可以配置一些全局配置,比如:
Ripple 可选动画。默认情况下它是禁用的,需要在 PrimeVue 设置期间在应用程序的入口文件(例如 main.js)中启用。
import {createApp} from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue, {ripple: true});
全局文本框样式配置
import {createApp} from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue, {inputStyle: 'filled'});
全局Z-index层配置
import {createApp} from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue, {
zIndex: {
modal: 1100, //dialog, sidebar
overlay: 1000, //dropdown, overlaypanel
menu: 1000, //overlay menus
tooltip: 1100 //tooltip
}
});
同时PrimeVue还支持国际化以及完整的Typescript类型支持,兼容主流的Chrome内核浏览器
文档更新时间: 2022-04-10 13:46 作者:admin