# 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 ``` _支持的属性:_ | 属性名 | 作用 | 类型 | 是否必须 | 默认值 | | ------------ | ---------------- | ---------------- | -------- | ------ | | 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 默认按钮 主要按钮 主要按钮 主要按钮 主要按钮 主要按钮 主要按钮 警告按钮 ``` _支持的属性:_ | 属性名 | 作用 | 类型 | 是否必须 | 默认值 | | -------- | ---------- | ------- | -------- | ------- | | 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
  • summary item
  • summary item
  • summary item
  • summary item
``` _支持的属性:_ | 属性名 | 作用 | 类型 | 是否必须 | 默认值 | | --------- | -------- | ------ | -------- | ------ | | width | 卡片宽度 | Number | 否 | 无 | | imgSrc | 卡片链接 | String | 是 | 无 | | imgHeight | 图片高度 | Number | 否 | 无 | | summary | 卡片摘要 | String | 否 | 无 | _支持的插槽:_ | 插槽名 | 作用 | | ------ | -------- | | footer | 卡片底部 | #### Dialog 对话框 ```html 对话框内容 对话框内容 ``` _支持的属性:_ | 属性名 | 作用 | 类型 | 是否必填 | 默认值 | | ------- | -------------- | ------- | -------- | ------- | | title | 标题 | String | 否 | ''提示" | | width | 宽度 | String | 否 | 50% | | top | 距离上方的距离 | String | 否 | 15vh | | visible | 是否可见 | Boolean | 否 | false | | center | 是否居中 | Boolean | 否 | false | _支持的事件:_ | 事件名 | 作用 | | ------ | ---------- | | close | 关闭对话框 | _支持的插槽:_ | 插槽名 | 作用 | | ------ | -------- | | title | 标题 | | footer | 底部内容 | #### Pager 分页器 ```html ``` _支持的属性:_ | 属性名 | 作用 | 类型 | 是否必须 | 默认值 | | ----------- | ---------- | ------ | -------- | ------ | | total | 总页码数 | Number | 否 | 0 | | currentPage | 当前页码数 | Number | 否 | 1 | | pagerCount | 页码最大数 | Number | 否 | 10 | | type | 主题类型 | String | 否 | 无 | | size | 大小 | String | 否 | 无 | _支持的事件:_ | 事件名 | 作用 | | ------------- | -------------- | | currentChange | 页码变化时触发 | #### 折叠面板 ```html 内容1 内容2 内容3 ``` ```js const activeNames = ref(['home']) ``` _支持的属性:_ **Collapse** 对应的属性 | 属性名 | 作用 | 类型 | 是否必填 | 默认值 | | ---------- | ------------------------- | ------- | -------- | ------ | | modelValue | 获取父组件v-model绑定的值 | Array | 否 | [ ] | | accordion | 是否开启手风琴模式 | Boolean | 否 | false | **CollapseItem** 对应的属性 | 属性名 | 作用 | 类型 | 是否必填 | 默认值 | | -------- | -------- | ------- | -------- | ------ | | name | 标题 | String | 是 | 无 | | title | 标题 | String | 否 | 无 | | disabled | 是否禁用 | Boolean | 否 | false | _支持的事件:_ | 事件名 | 作用 | | ------ | ---------------------- | | change | 折叠面板发生改变时触发 | _支持的插槽:_ | 插槽名 | 作用 | | ------ | ---- | | title | 标题 | #### 提示框 ```html top top top ``` _支持的属性:_ | 属性名 | 作用 | 类型 | 是否必须 | 默认值 | | ---------- | --------------------------------- | ------- | -------- | ------ | | 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 点击打开下拉列表 ``` ```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_ | 选择了具体的某一个项目 |