Feedback Vue Tools

一个基于Vue2.x的反馈组件库，提供了一系列常用的反馈组件。Vue 反馈组件库，包括 🎯Modal（对话框）、🎯Drawer（抽屉）、🎯Message（消息提示）、🎯Notification（通知）、🎯Alert（警告）、🎯Progress（进度条）、🎯Loading（加载）、🎯Tooltip（文字提示） 组件.

English | 简体中文

特性

• 🚀 轻量级反馈组件库，支持 Vue2.x。
• 📦 模块化，支持按需引入。
• 🔥 丰富的反馈组件，包括 Modal、Drawer、Message、Notification、Alert、Progress、Loading、Tooltip 等。
• 🛠️ 丰富的反馈组件，支持自定义样式。

安装

npm install feedback-vue-tools

功能列表

| 组件名 | 描述 | | ------------ | ------------------------ | | Modal | 对话框 | | Drawer | 抽屉 | | Message | 消息提示 | | Notification | 通知 | | Alert | 警告 | | Progress | 进度条 | | Loading | 加载 | | Tooltip | 文字提示 |

预览

🛠️CDN

<!-- 生产环境（压缩版） -->
<!-- <script src="https://unpkg.com/[email protected]/dist/index.min.js"></script> -->
     <script src="https://unpkg.com/[email protected]/dist/feedback-vue-tools.umd.js"></script>

<!-- 开发环境（未压缩） -->
<!-- <script src="https://unpkg.com/[email protected]/dist/index.js"></script> -->
     <script src="https://unpkg.com/[email protected]/dist/feedback-vue-tools.umd.js"></script>

全局注册

import Vue from 'vue'
import FeedbackVueTools from 'feedback-vue-tools'

Vue.use(FeedbackVueTools)

按需引入

import Vue from 'vue'
import { Modal, Drawer, Message, Notification, Alert, Progress, Loading, Tooltip } from 'feedback-vue-tools'

Vue.component('FeedbackModal', Modal)
Vue.component('FeedbackDrawer', Drawer)
Vue.component('FeedbackMessage', Message)
Vue.component('FeedbackNotification', Notification)
Vue.component('FeedbackAlert', Alert)
Vue.component('FeedbackProgress', Progress)
Vue.component('FeedbackLoading', Loading)
Vue.component('FeedbackTooltip', Tooltip)

组件

Modal 对话框

<template>
  <feedback-modal
    :visible.sync="visible"
    title="标题"
    @close="handleClose"
  >
    <div>内容</div>
    <template #footer>
      <button @click="handleClose">取消</button>
      <button @click="handleConfirm">确定</button>
    </template>
  </feedback-modal>
</template>

Drawer 抽屉

<template>
  <feedback-drawer
    :visible.sync="visible"
    title="标题"
    placement="right"
    @close="handleClose"
  >
    <div>内容</div>
    <template #footer>
      <button @click="handleClose">取消</button>
      <button @click="handleConfirm">确定</button>
    </template>
  </feedback-drawer>
</template>

Message 消息提示

<template>
  <feedback-message
    message="这是一条消息"
    type="success"
    :duration="3000"
  />
</template>

Notification 通知

<template>
  <feedback-notification
    title="标题"
    message="这是一条通知"
    type="success"
    :duration="4500"
  />
</template>

Alert 警告

<template>
  <feedback-alert
    title="标题"
    type="warning"
    :closable="true"
  >
    这是一条警告信息
  </feedback-alert>
</template>

Progress 进度条

<template>
  <feedback-progress
    :percentage="50"
    :text-inside="true"
    status="success"
  />
</template>

Loading 加载

<template>
  <feedback-loading
    :visible="true"
    text="加载中..."
    :fullscreen="true"
  />
</template>

Tooltip 文字提示

<template>
  <feedback-tooltip
    content="提示文字"
    placement="top"
    :delay="0"
  >
    <button>hover me</button>
  </feedback-tooltip>
</template>

Props

每个组件的具体属性请参考组件源码中的props定义。

事件

每个组件支持的事件请参考组件源码中的emit定义。

License

🤝贡献指南

欢迎对这个项目进行贡献！请遵循以下步骤：

1. Fork 本仓库。
2. 创建新分支 (git checkout -b feature/your-feature)。
3. 提交更改 (git commit -m 'Add some feature')。
4. 推送分支 (git push origin feature/your-feature)。
5. 提交 Pull Request。

• 🎯 欢迎访问我的技术博客：- © https://gitee.com/mahmudtjcu
• 🎯 欢迎访问我的Gitee：- © https://www.cnblogs.com/mahmud

📜许可证

本项目使用 MIT 许可证。