# flypork-plus

**Repository Path**: lwfxzz/flypork-plus

## Basic Information

- **Project Name**: flypork-plus
- **Description**: 这是一个使用Vue3、Scss编写的组件库
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-27
- **Last Updated**: 2024-11-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# flypork-plus

A Vue 3 component library

## 组件库安装

```bash
npm i flypork-plus
```

## 使用

### 全局引入

```js
import { createApp } from 'vue'
import App from './App.vue'

import FlyporkPlus from 'flypork-plus'
import 'flypork-plus/style.css'

const app = createApp(App)
app.use(FlyporkPlus)
app.mount('#app')
```

## flypork-plus UI 组件库使用方法

### 组件用法

#### Icon图标

> 更多图标名称请看: [Font Awesome](https://fontawesome.com/v6/search?o=r&m=free&s=solid)

```html
<Flypork-Icon icon="user-secret" />
<Flypork-Icon icon="bars" />
<Flypork-Icon icon="shield-halved" />
```

_支持的属性：_

| 属性名       | 作用             | 类型             | 是否必须 | 默认值 |
| ------------ | ---------------- | ---------------- | -------- | ------ |
| icon         | 设置图标         | String           | 是       | 无     |
| size         | 图标大小         | String           | 否       | 无     |
| rotation     | 旋转             | [String, Number] | 否       | 无     |
| flip         | 翻转             | Boolean          | 否       | 无     |
| beat         | beat动画         | Boolean          | 否       | 无     |
| beat-fade    | beat-fade动画    | Boolean          | 否       | 无     |
| bounce       | bounce动画       | Boolean          | 否       | 无     |
| fade         | fade动画         | Boolean          | 否       | 无     |
| shake        | shake动画        | Boolean          | 否       | 无     |
| spin         | spin动画         | Boolean          | 否       | 无     |
| spin-reverse | spin-reverse动画 | Boolean          | 否       | 无     |
| spin-pulse   | spin-pulse动画   | Boolean          | 否       | 无     |
| type         | 主题类型         | String           | 否       | 无     |
| color        | 自定义颜色       | String           | 否       | 无     |

#### Button按钮

```html
<Flypork-Button>默认按钮</Flypork-Button>
<Flypork-Button type="primary">主要按钮</Flypork-Button>
<Flypork-Button type="primary" plain>主要按钮</Flypork-Button>
<Flypork-Button type="primary" round>主要按钮</Flypork-Button>
<Flypork-Button type="primary" disabled>主要按钮</Flypork-Button>
<Flypork-Button type="primary" loading>主要按钮</Flypork-Button>
<Flypork-Button type="primary" icon="gear">主要按钮</Flypork-Button>
<Flypork-Button type="warning" icon="code" plain size="large">警告按钮</Flypork-Button>
<Flypork-Button type="primary" icon="gear" circle></Flypork-Button>
```

_支持的属性：_

| 属性名   | 作用       | 类型    | 是否必须 | 默认值  |
| -------- | ---------- | ------- | -------- | ------- |
| type     | 主题颜色   | String  | 否       | default |
| size     | 大小       | String  | 否       | 无      |
| plain    | 是否朴素   | Boolean | 否       | false   |
| round    | 是否圆角   | Boolean | 否       | false   |
| circle   | 是否圆形   | Boolean | 否       | false   |
| disabled | 是否禁用   | Boolean | 否       | false   |
| loading  | 是否加载中 | Boolean | 否       | false   |
| icon     | 图标       | String  | 否       | 无      |

_支持的事件：_

| 事件名 | 作用     |
| ------ | -------- |
| click  | 点击事件 |

#### Card 卡片

```html
<!-- 卡片1 -->
<Flypork-Card img-src="https://picsum.photos/400/600" summary="summary item summary item" />
<!-- 卡片2 -->
<Flypork-Card img-src="https://picsum.photos/400/200" :img-height="200" :width="400" />
<!-- 卡片3 -->
<Flypork-Card img-src="https://picsum.photos/400/200" summary="summary item summary item">
  <template #footer> Footer Content </template>
</Flypork-Card>
<!-- 卡片4 -->
<Flypork-Card img-src="https://picsum.photos/400/200">
  <ul>
    <li>summary item</li>
    <li>summary item</li>
    <li>summary item</li>
    <li>summary item</li>
  </ul>
  <template #footer> Footer Content </template>
</Flypork-Card>
```

_支持的属性：_

| 属性名    | 作用     | 类型   | 是否必须 | 默认值 |
| --------- | -------- | ------ | -------- | ------ |
| width     | 卡片宽度 | Number | 否       | 无     |
| imgSrc    | 卡片链接 | String | 是       | 无     |
| imgHeight | 图片高度 | Number | 否       | 无     |
| summary   | 卡片摘要 | String | 否       | 无     |

_支持的插槽：_

| 插槽名 | 作用     |
| ------ | -------- |
| footer | 卡片底部 |

#### Dialog 对话框

```html
<!-- 对话框1 -->
<Flypork-Dialog v-model:visible="visible1" title="对话框1"> 对话框内容 </Flypork-Dialog>

<!-- 对话框2 -->
<Flypork-Dialog v-model:visible="visible2" width="500px" center>
  <template #title>对话框2</template>
  对话框内容
  <template #footer>
    <div class="dialog-footer">
      <Flypork-Button @click="visible1 = false">取消</Flypork-Button>
      <Flypork-Button type="primary" @click="visible2 = false">确定</Flypork-Button>
    </div>
  </template>
</Flypork-Dialog>
```

_支持的属性：_

| 属性名  | 作用           | 类型    | 是否必填 | 默认值  |
| ------- | -------------- | ------- | -------- | ------- |
| title   | 标题           | String  | 否       | ''提示" |
| width   | 宽度           | String  | 否       | 50%     |
| top     | 距离上方的距离 | String  | 否       | 15vh    |
| visible | 是否可见       | Boolean | 否       | false   |
| center  | 是否居中       | Boolean | 否       | false   |

_支持的事件：_

| 事件名 | 作用       |
| ------ | ---------- |
| close  | 关闭对话框 |

_支持的插槽：_

| 插槽名 | 作用     |
| ------ | -------- |
| title  | 标题     |
| footer | 底部内容 |

#### Pager 分页器

```html
<template>
  <div class="row">
    <h2>总页数 total 大于页码最大显示数 pager-count，此时无法全部显示</h2>
    <Flypork-Pager :total="20" />
  </div>

  <div class="row">
    <h2>总页码数 total 小于等于页码最大显示数 pager-count，可以全部显示</h2>
    <Flypork-Pager :total="10" />
  </div>

  <div class="row">
    <h2>页码最大显示数 pager-count 是可以调整的</h2>
    <Flypork-Pager :total="12" :pager-count="12" />
  </div>

  <div class="row">
    <h2>调整主题颜色</h2>
    <Flypork-Pager :total="20" type="warning" />
    <Flypork-Pager :total="20" type="danger" />
  </div>

  <div class="row">
    <h2>调整大小</h2>
    <Flypork-Pager :total="20" size="small" />
    <Flypork-Pager :total="20" />
    <Flypork-Pager
      :total="20"
      size="large"
      :currentPage="currentPage"
      @current-change="currentChange"
    />
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  const currentPage = ref(3)
  /**
   * 页码变化时触发
   * @param val 当前页码
   */
  function currentChange(val) {
    console.log('currentChange', val)
  }
</script>
```

_支持的属性：_

| 属性名      | 作用       | 类型   | 是否必须 | 默认值 |
| ----------- | ---------- | ------ | -------- | ------ |
| total       | 总页码数   | Number | 否       | 0      |
| currentPage | 当前页码数 | Number | 否       | 1      |
| pagerCount  | 页码最大数 | Number | 否       | 10     |
| type        | 主题类型   | String | 否       | 无     |
| size        | 大小       | String | 否       | 无     |

_支持的事件：_

| 事件名        | 作用           |
| ------------- | -------------- |
| currentChange | 页码变化时触发 |

#### 折叠面板

```html
<Flypork-Collapse v-model="activeNames" accordion>
  <Flypork-CollapseItem name="home" title="标题1"> 内容1 </Flypork-CollapseItem>
  <Flypork-CollapseItem name="about" title="标题2"> 内容2 </Flypork-CollapseItem>
  <Flypork-CollapseItem name="contact" title="标题3" disabled> 内容3 </Flypork-CollapseItem>
</Flypork-Collapse>
```

```js
const activeNames = ref(['home'])
```

_支持的属性：_

**Collapse** 对应的属性

| 属性名     | 作用                      | 类型    | 是否必填 | 默认值 |
| ---------- | ------------------------- | ------- | -------- | ------ |
| modelValue | 获取父组件v-model绑定的值 | Array   | 否       | [ ]    |
| accordion  | 是否开启手风琴模式        | Boolean | 否       | false  |

**CollapseItem** 对应的属性

| 属性名   | 作用     | 类型    | 是否必填 | 默认值 |
| -------- | -------- | ------- | -------- | ------ |
| name     | 标题     | String  | 是       | 无     |
| title    | 标题     | String  | 否       | 无     |
| disabled | 是否禁用 | Boolean | 否       | false  |

_支持的事件：_

| 事件名 | 作用                   |
| ------ | ---------------------- |
| change | 折叠面板发生改变时触发 |

_支持的插槽：_

| 插槽名 | 作用 |
| ------ | ---- |
| title  | 标题 |

#### 提示框

```html
<Flypork-Tooltip content="this is a tooltip content" placement="top">
  <Flypork-Button type="primary">top</Flypork-Button>
</Flypork-Tooltip>

<Flypork-Tooltip content="this is a tooltip content" placement="top" trigger="click">
  <Flypork-Button type="primary">top</Flypork-Button>
</Flypork-Tooltip>

<Flypork-Tooltip content="this is a tooltip content" placement="top" manual ref="tooltipRef">
  <Flypork-Button type="primary">top</Flypork-Button>
</Flypork-Tooltip>
```

_支持的属性：_

| 属性名     | 作用                              | 类型    | 是否必须 | 默认值 |
| ---------- | --------------------------------- | ------- | -------- | ------ |
| content    | 提示内容                          | String  | 否       | 无     |
| trigger    | 触发方式 hover、click             | String  | 否       | hover  |
| placement  | 出现位置 top、bottom、left、right | String  | 否       | left   |
| manual     | 自定义触发                        | Boolean | 否       | false  |
| openDelay  | 延时打开                          | Number  | 否       | 100    |
| closeDelay | 延时关闭                          | Number  | 否       | 100    |

_支持的事件：_

| 事件名         | 作用         |
| -------------- | ------------ |
| visible-change | 提示是否显示 |

_支持的插槽：_

| 插槽名  | 作用 |
| ------- | ---- |
| content | 内容 |

#### 下拉列表

```html
<Flypork-Dropdown
  trigger="click"
  :menu-options="options"
  @visible-change="visibleChange"
  @select="select"
>
  <Flypork-Button type="primary">点击打开下拉列表</Flypork-Button>
</Flypork-Dropdown>
```

```js
const options = [
  {
    label: '选项1',
    value: '1',
    divided: true,
  },
  {
    label: '选项2',
    value: '2',
    disabled: true,
  },
  {
    label: '选项3',
    value: '3',
  },
  {
    label: '选项4',
    value: '4',
  },
]
const visibleChange = (visible) => {
  console.log('visibleChange', visible)
}

const select = (value) => {
  console.log('select', value)
}
```

_支持的属性：_

| 属性名          | 作用                | 类型    | 是否必须 | 默认值 |
| --------------- | ------------------- | ------- | -------- | ------ |
| tooltip所有属性 | 继承tooltip所有属性 | /       | /        | /      |
| menuOptions     | 下拉内容条目数组    | Array   | 是       | 无     |
| hideAfterClick  | 点击条目后隐藏      | Boolean | 否       | false  |

_支持的事件：_

| 事件名           | 作用                   |
| ---------------- | ---------------------- |
| _visible-change_ | 显示状态改变后触发     |
| _select_         | 选择了具体的某一个项目 |