flypork-plus v1.0.0

flypork-plus

A Vue 3 component library

flypork-plus UI 组件库使用方法

组件用法

Icon图标

更多图标名称请看: Font Awesome

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

支持的属性：

Button按钮

<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>

支持的属性：

支持的事件：

Card 卡片

<!-- 卡片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>

支持的属性：

支持的插槽：

Dialog 对话框

<!-- 对话框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>

支持的属性：

支持的事件：

支持的插槽：

Pager 分页器

<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>

支持的属性：

支持的事件：

折叠面板

<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>

const activeNames = ref(['home'])

支持的属性：

Collapse 对应的属性

CollapseItem 对应的属性

支持的事件：

支持的插槽：

提示框

<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>

支持的属性：

支持的事件：

支持的插槽：

下拉列表

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

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)
}

支持的属性：

支持的事件：