📦 安装

$ npm install @element-plus-ui/pro-button

$ yarn add @element-plus-ui/pro-button

$ pnpm add @element-plus-ui/pro-button

🔨 使用

🚀 全局引用

import { createApp } from "vue";
import App from "./src/App.vue";
import ProButton from "@element-plus-ui/pro-button";

const app = createApp(App);

app.mount("#app").use(ProButton);

🚀 按需引用

<template>
  <pro-button>Default</pro-button>
  <pro-button type="primary">Primary</pro-button>
  <pro-button type="success">Success</pro-button>
  <pro-button type="info">Info</pro-button>
  <pro-button type="warning">Warning</pro-button>
  <pro-button type="danger">Danger</pro-button>
  <pro-button type="danger" tip="确定要删除吗？">删除</pro-button>
</template>

<script setup lang="ts">
import ProButton from "@element-plus-ui/pro-button";
</script>

API

除了继承 ElButton 的 API 以外还支持以下属性.

| 属性 | 描述 | 类型 | 默认值 | | ---- | ------------- | ------------------------------------ | ------ | | tip | 二次确认提示. | string / TipConfig | - |

TipConfig

除了支持以下属性外，同时也继承了 ElementPlus 的 ElPopconfirm 和 ElMessageBox 组件 API，相关属性指定可查阅 ElementPlus 文档.

| 属性 | 描述 | 类型 | 默认值 | | ---- | ----------------- | ---------------------------- | ----------- | | mode | 提示弹框展示模式. | popconfirm / message-box | message-box | | before | 操作确认前的行为, 返回值为false停止确认行为. | () => boolean | - |

🔨 案例

🚀 message-box

<template>
  <pro-button 
    tip="确定要删除吗?" 
    @click="onDelete"
  > 
    default 
  </pro-button>
  <pro-button 
    type="danger" 
    :tip={mode: "message-box", title: '温馨提示', message: '确定要删除吗?'} 
    @click="onDelete"
  >
    删除
  </pro-button>
</template>
<script setup lang="ts">
import ProButton from "@element-plus-ui/pro-button";

const onDelete = () => {
  console.log("确定删除");
};
</script>

🚀 popconfirm

<template>
  <pro-button 
    type="danger" 
    :tip={mode: "popconfirm", title: '确定要删除吗?'}
    @click="onDelete"
  >
    删除
  </pro-button>
</template>

<script setup lang="ts">
import ProButton from "@element-plus-ui/pro-button";

const onDelete = () => {
  console.log("确定删除");
};
</script>