ppui2023

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 输入框

---

最终解释权归作者所有