vue-componet-tools

一个简单实用的 Vue3 组件库，包含常用组件：按钮、进度条、加载效果、下拉框、表格、警告、通知、对话框、提示框等。

安装

npm install vue-componet-tools

快速开始

全局引入

import { createApp } from 'vue'
import App from './App.vue'
import VueComponetTools from 'vue-componet-tools'

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

按需引入

import { createApp } from 'vue'
import App from './App.vue'
import { Button, Progress, Loading } from 'vue-componet-tools'

const app = createApp(App)
app.component('VButton', Button)
app.component('VProgress', Progress)
app.component('VLoading', Loading)
app.mount('#app')

组件使用文档

Button 按钮

基础按钮组件，支持多种类型和尺寸。

基础用法

<template>
  <v-button>默认按钮</v-button>
  <v-button type="primary">主要按钮</v-button>
  <v-button type="success">成功按钮</v-button>
  <v-button type="warning">警告按钮</v-button>
  <v-button type="danger">危险按钮</v-button>
  <v-button type="info">信息按钮</v-button>
</template>

禁用状态

<template>
  <v-button disabled>禁用按钮</v-button>
  <v-button type="primary" disabled>禁用按钮</v-button>
</template>

加载状态

<template>
  <v-button type="primary" :loading="loading" @click="handleClick">
    加载中
  </v-button>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    handleClick() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 2000)
    }
  }
}
</script>

不同尺寸

<template>
  <v-button size="large">大型按钮</v-button>
  <v-button size="medium">中等按钮</v-button>
  <v-button size="small">小型按钮</v-button>
  <v-button size="mini">迷你按钮</v-button>
</template>

圆角和圆形按钮

<template>
  <v-button round>圆角按钮</v-button>
  <v-button circle>圆</v-button>
</template>

朴素按钮

<template>
  <v-button plain>朴素按钮</v-button>
  <v-button type="primary" plain>主要按钮</v-button>
</template>

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | type | 按钮类型 | String | default/primary/success/warning/danger/info | default | | size | 按钮尺寸 | String | large/medium/small/mini | medium | | plain | 是否朴素按钮 | Boolean | - | false | | round | 是否圆角按钮 | Boolean | - | false | | circle | 是否圆形按钮 | Boolean | - | false | | disabled | 是否禁用 | Boolean | - | false | | loading | 是否加载中 | Boolean | - | false |

Events

| 事件名 | 说明 | 参数 | |--------|------|------| | click | 点击事件 | event |

Progress 进度条

用于展示操作进度，告知用户当前状态和预期。

基础用法

<template>
  <v-progress :percentage="50"></v-progress>
</template>

不同类型

<template>
  <v-progress :percentage="100" status="success"></v-progress>
  <v-progress :percentage="50" status="exception"></v-progress>
  <v-progress :percentage="80" status="warning"></v-progress>
</template>

自定义颜色

<template>
  <v-progress :percentage="60" color="#409eff"></v-progress>
  <v-progress :percentage="80" color="#67c23a"></v-progress>
</template>

条纹进度条

<template>
  <v-progress :percentage="50" striped></v-progress>
  <v-progress :percentage="70" striped animated></v-progress>
</template>

文字内显

<template>
  <v-progress :percentage="70" text-inside :stroke-width="26"></v-progress>
</template>

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | percentage | 百分比 | Number | 0-100 | 0 | | status | 进度条状态 | String | success/exception/warning | - | | strokeWidth | 进度条的高度 | Number | - | 6 | | textInside | 进度条显示文字内置 | Boolean | - | false | | showText | 是否显示文字 | Boolean | - | true | | color | 进度条背景色 | String | - | - | | backgroundColor | 进度条背景颜色 | String | - | #f5f7fa | | textColor | 进度条文字颜色 | String | - | #606266 | | striped | 是否显示条纹 | Boolean | - | false | | animated | 条纹是否动画 | Boolean | - | false |

Loading 加载

显示加载状态。

基础用法

<template>
  <div style="position: relative; height: 200px;">
    <v-loading :visible="loading"></v-loading>
  </div>
  <v-button @click="loading = !loading">切换加载</v-button>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    }
  }
}
</script>

全屏加载

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

不同加载动画

<template>
  <v-loading :visible="true" spinner="circle"></v-loading>
  <v-loading :visible="true" spinner="dots"></v-loading>
  <v-loading :visible="true" spinner="bars"></v-loading>
</template>

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | visible | 是否显示 | Boolean | - | false | | text | 加载文字 | String | - | - | | spinner | 加载动画类型 | String | circle/dots/bars | circle | | fullscreen | 是否全屏 | Boolean | - | false |

Select 下拉框

当选项过多时，使用下拉菜单展示并选择内容。

基础用法

<template>
  <v-select
    v-model="value"
    :options="options"
    placeholder="请选择"
  ></v-select>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    }
  }
}
</script>

禁用状态

<template>
  <v-select
    v-model="value"
    :options="options"
    disabled
  ></v-select>
</template>

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | modelValue | 绑定值 | String/Number | - | null | | options | 选项数据 | Array | - | [] | | placeholder | 输入框占位文本 | String | - | 请选择 | | disabled | 是否禁用 | Boolean | - | false |

Events

| 事件名 | 说明 | 参数 | |--------|------|------| | change | 选中值发生变化时触发 | value | | update:modelValue | 绑定值更新时触发 | value |

Table 表格

用于展示多条结构类似的数据。

基础用法

<template>
  <v-table :data="tableData" :columns="columns"></v-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, address: '北京市' },
        { name: '李四', age: 30, address: '上海市' },
        { name: '王五', age: 28, address: '广州市' }
      ],
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        { prop: 'address', label: '地址' }
      ]
    }
  }
}
</script>

自定义列内容

<template>
  <v-table :data="tableData" :columns="columns">
    <template #name="{ row }">
      <strong>{{ row.name }}</strong>
    </template>
  </v-table>
</template>

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | data | 显示的数据 | Array | [] | | columns | 列配置 | Array | [] |

Column 配置

| 参数 | 说明 | 类型 | |------|------|------| | prop | 对应列内容的字段名 | String | | label | 显示的标题 | String | | width | 对应列的宽度 | String/Number |

Slots

| 名称 | 说明 | 参数 | |------|------|------| | [prop] | 自定义列的内容 | { row, column, index } |

Alert 警告

用于页面中展示重要的提示信息。

基础用法

<template>
  <v-alert title="成功提示的文案" type="success" show-icon></v-alert>
  <v-alert title="消息提示的文案" type="info" show-icon></v-alert>
  <v-alert title="警告提示的文案" type="warning" show-icon></v-alert>
  <v-alert title="错误提示的文案" type="error" show-icon></v-alert>
</template>

可关闭的警告

<template>
  <v-alert
    title="可关闭的警告"
    type="warning"
    closable
    @close="handleClose"
  ></v-alert>
</template>

带描述的警告

<template>
  <v-alert
    title="带标题"
    type="success"
    description="这是一段描述，这是一段描述，这是一段描述。"
    show-icon
  ></v-alert>
</template>

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | title | 标题 | String | - | - | | type | 主题 | String | success/warning/info/error | info | | description | 辅助性文字 | String | - | - | | closable | 是否可关闭 | Boolean | - | false | | showIcon | 是否显示图标 | Boolean | - | false | | center | 文字是否居中 | Boolean | - | false |

Events

| 事件名 | 说明 | |--------|------| | close | 关闭alert时触发 |

Notification 通知

悬浮出现在页面角落，显示全局的通知提醒消息。

基础用法

<template>
  <v-button @click="showNotification">显示通知</v-button>
  <v-notification
    v-model="visible"
    title="通知标题"
    message="这是一条通知消息"
    type="success"
  ></v-notification>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    showNotification() {
      this.visible = true
    }
  }
}
</script>

不同类型

<template>
  <v-notification
    v-model="visible"
    title="成功"
    message="这是一条成功的通知消息"
    type="success"
  ></v-notification>
</template>

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | title | 标题 | String | - | - | | message | 说明文字 | String | - | - | | type | 主题类型 | String | success/warning/info/error | info | | duration | 显示时长，毫秒 | Number | - | 4500 | | showIcon | 是否显示图标 | Boolean | - | true | | closable | 是否可关闭 | Boolean | - | true |

Events

| 事件名 | 说明 | |--------|------| | close | 关闭时触发 |

Dialog 对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

基础用法

<template>
  <v-button @click="dialogVisible = true">打开对话框</v-button>
  
  <v-dialog
    v-model="dialogVisible"
    title="提示"
    width="50%"
  >
    <p>这是一段信息</p>
    <template #footer>
      <v-button @click="dialogVisible = false">取 消</v-button>
      <v-button type="primary" @click="dialogVisible = false">确 定</v-button>
    </template>
  </v-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>

自定义内容

<template>
  <v-dialog
    v-model="dialogVisible"
    title="编辑"
    width="500px"
  >
    <div>自定义内容区域</div>
    <template #footer>
      <v-button @click="dialogVisible = false">取消</v-button>
      <v-button type="primary" @click="dialogVisible = false">确定</v-button>
    </template>
  </v-dialog>
</template>

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | modelValue | 是否显示 Dialog | Boolean | false | | title | Dialog 的标题 | String | 提示 | | width | Dialog 的宽度 | String | 50% | | showClose | 是否显示关闭按钮 | Boolean | true | | closeOnClickModal | 是否可以通过点击 modal 关闭 Dialog | Boolean | true |

Events

| 事件名 | 说明 | |--------|------| | close | Dialog 关闭的回调 |

Slots

| 名称 | 说明 | |------|------| | default | Dialog 的内容 | | footer | Dialog 底部的内容 |

Tooltip 文字提示

常用于展示鼠标 hover 时的提示信息。

基础用法

<template>
  <v-tooltip content="这是提示文字">
    <v-button>鼠标悬浮</v-button>
  </v-tooltip>
</template>

不同位置

<template>
  <v-tooltip content="上方提示" placement="top">
    <v-button>上</v-button>
  </v-tooltip>
  <v-tooltip content="下方提示" placement="bottom">
    <v-button>下</v-button>
  </v-tooltip>
  <v-tooltip content="左侧提示" placement="left">
    <v-button>左</v-button>
  </v-tooltip>
  <v-tooltip content="右侧提示" placement="right">
    <v-button>右</v-button>
  </v-tooltip>
</template>

不同主题

<template>
  <v-tooltip content="Dark 主题" effect="dark">
    <v-button>Dark</v-button>
  </v-tooltip>
  <v-tooltip content="Light 主题" effect="light">
    <v-button>Light</v-button>
  </v-tooltip>
</template>

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | content | 显示的内容 | String | - | - | | placement | Tooltip 的出现位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | top | | effect | 默认提供的主题 | String | dark/light | dark | | disabled | Tooltip 是否可用 | Boolean | - | false |

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

发布到 NPM

1. 确保已登录 NPM：

npm login

2. 构建项目：

npm run build

3. 发布：

npm publish

License

MIT