PP-UI

特性

• 使用Vue3进行封装

支持环境

• Vue 3 (3.2.45)

| Google Chrome | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 109.0.5414.120 (正式版本)(64 位) |

安装

使用 npm 安装

$ npm install ppui2023 --save

在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import ppui from "ppui2023"
import 'ppui2023/dist/ppui2023.css'
const app  = createApp(App)
app.use(ppui)
app.mount('#app')

如果你的网络环境不佳，推荐使用 cnpm。

链接

• Vue 官方文档

组件总览

1. button 按钮

基本使用

<template>
    <pp-button type="primary" @click="clickHandle">
        click me
    <pp-button/>
<template/>

function clickHandle () {
    console.log('clicked')
}

配合字体图标库进行使用

关于图标的使用可以参考下方图标模块

<template>
    <pp-button type="success" icon="pp-icon-check">
        click me
    </pp-button>
<template/>

API

通过设置 Button 的属性来产生不同的按钮样式，
按钮的属性说明如下：

| 属性 | 说明 | 类型 | 默认值 | | :------: | :----------------: | :--------------------------------------------------------------------------: | :-----: | | type | 设置按钮类型 | primary ghost dashed link text default | default | | icon | 设置按钮的图标类型 | Class | - | | plain | 朴素模式 | Boolean | false | | round | 设置圆形按钮 | Boolean | false | | disabled | 禁用 | Boolean | false | | loading | 加载中（暂未完成） | Boolean | false |

2.字体图标

一共收录了525个图标基本满足各方面需求
字体图标库解决方案是使用了iconfont的 antdesign整套字体标库 

基本使用

例如使用这个对勾图标：

<template>
    <i class="pp-icon-check"></i>
<template/>

具体所有的图标类名以及展示请访问： 传送门

power by

3. dialog 对话框

利用vue3新特性v-model进行双向数据绑定

基本使用

<template>
    <pp-button type="success" @click="showDialog">
        show dialog
    </pp-button>
    <!-- 请注意：v-model之后需要写上visible用以通知组件内部 -->
    <pp-dialog v-model:visible="show" title="标题">
        hi,我是一段内容
  </pp-dialog>
<template/>

<script setup>
import { ref } from "vue";

let show = ref(true);

function showDialog() {
  show.value = !show.value;
}

</script>

如果对v-model有疑问请点击:传送门

API

| 属性 | 说明 | 类型 | 默认值 | | :-----: | :----------------: | :-------------------------------------: | :----: | | title | 设置对话框的标题 | String | - | | visible | 显示&隐藏 | Boolean | false | | width | 设置对话框宽度 | String | "50%" | | top | 设置距离顶部的高度 | String | “15vh” |

4. input 输入框

最终解释权归作者所有