@deppon/deppon-button
Advanced tools
一个基于 Vue 的 Button 组件库，使用 Rollup 打包，支持 Vue 2 和 Vue 3。
本项目提供了三种模块格式，以满足不同使用场景的需求：
构建工具会根据使用环境自动选择合适的版本：
lib/index.jses/index.jsdist/index.umd.jsnpm install @deppon/deppon-button
# 或
yarn add @deppon/deppon-button
# 或
pnpm add @deppon/deppon-button
<template>
<div>
<deppon-button type="primary" @click="handleClick">主要按钮</deppon-button>
<deppon-button type="danger" size="large">危险按钮</deppon-button>
<deppon-button :loading="isLoading">加载中</deppon-button>
<deppon-button :disabled="true">禁用按钮</deppon-button>
</div>
</template>
<script>
import DepponButton from '@deppon/deppon-button';
// 或
import { DepponButton } from '@deppon/deppon-button';
export default {
components: {
DepponButton
},
data() {
return {
isLoading: false
};
},
methods: {
handleClick() {
console.log('按钮被点击');
}
}
};
</script>
<template>
<deppon-button type="primary" @click="handleClick">点击我</deppon-button>
</template>
<script setup>
import { ref } from 'vue';
import DepponButton from '@deppon/deppon-button';
// 或
import { DepponButton } from '@deppon/deppon-button';
const handleClick = () => {
console.log('按钮被点击');
};
</script>
import Vue from 'vue';
import DepponButton from '@deppon/deppon-button';
Vue.component('DepponButton', DepponButton);
// 或使用 kebab-case
Vue.component('deppon-button', DepponButton);
import { createApp } from 'vue';
import DepponButton from '@deppon/deppon-button';
const app = createApp({});
app.component('DepponButton', DepponButton);
// 或使用 kebab-case
app.component('deppon-button', DepponButton);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@deppon/deppon-button@latest/dist/index.umd.css">
</head>
<body>
<div id="app">
<deppon-button type="primary" @click="handleClick">点击我</deppon-button>
</div>
<script src="https://unpkg.com/@deppon/deppon-button@latest/dist/index.umd.js"></script>
<script>
// 使用 UMD 版本 - Vue 2
const DepponButtonComponent = window.DepponButton.default || window.DepponButton.DepponButton || window.DepponButton;
if (!DepponButtonComponent) {
console.error('无法找到 DepponButton 组件', window.DepponButton);
}
new Vue({
el: '#app',
components: {
'deppon-button': DepponButtonComponent
},
methods: {
handleClick() {
alert('按钮被点击');
}
}
});
</script>
</body>
</html>
如果使用 ES Module 或 CommonJS 格式，需要单独引入样式：
import DepponButton from '@deppon/deppon-button';
import '@deppon/deppon-button/es/index.css'; // 或 lib/index.css
如果使用 UMD 格式，样式会自动通过 <link> 标签引入。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 按钮类型 | 'primary' | 'default' | 'danger' | 'warning' | 'default' |
| size | 按钮尺寸 | 'small' | 'medium' | 'large' | 'medium' |
| disabled | 是否禁用 | boolean | false |
| loading | 是否加载中 | boolean | false |
| className | 自定义类名 | string | '' |
@click - 点击事件，当按钮被点击时触发# 安装依赖
npm install
# 开发模式（监听文件变化）
npm run dev
# 构建生产版本
npm run build
查看 example/ 目录下的示例文件：
index.html - UMD 版本浏览器使用示例npm login
npm version patch # 补丁版本 1.0.0 -> 1.0.1
npm version minor # 次要版本 1.0.0 -> 1.1.0
npm version major # 主要版本 1.0.0 -> 2.0.0
npm publish --access public
MIT
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub Actions checkout now blocks risky pull_request_target checkouts by default to help prevent pwn request supply chain attacks.
Product
Socket now supports Custom Roles and Repository Access Permissions so organizations can control who can access specific repositories and actions.
Product
Socket MCP now lets AI assistants review org alerts, investigate threats using the Socket threat feed, and inspect package files in addition to dependency scoring.