bw-cowave-ui

基于 element-plus 二次封装的组件库

使用指南

下载

npm i bw-cowave-ui

main.ts 内添加如下代码

import BlueWhaleUI from 'bw-cowave-ui';

const app = createApp(App);
app.use(BlueWhaleUI);

即已全局挂载包内所有组件，而后在页面中直接使用即可

支持组件

待更新

所有组件均支持 element-plus 原生组件属性、方法控制，另提供额外属性/方法时会注明；组件名称均支持 PascalCase 格式或 kebab-case 格式（switch 组件暂不支持）。

目前支持：设计图 Form 目录下 Switch 组件，Navigation 目录下 BreadCrumb，Steps，Tabs

Form

Switch

对应 el-switch，switch 组件提供双向绑定 value

使用示例

<Switch v-model:value="darkmode.isDark" />

//不可使用，与HTML组件input冲突
<switch v-model:value="darkmode.isDark" />

Upload

对应 el-upload

使用示例

      <Upload />
      
      //或
      
      <upload />

Navigation

BreadCrumb

对应 el-breadcrumb，BreadCrumb 组件提供 fullpath 的'/'分割导航

使用示例

<breadcrumb :fullpath="'components-test/bread/test'" />

//或

<Breadcrumb :fullpath="'components-test/bread/test'" />

Steps

对应 el-steps，Steps 组件提供分步展示，可自定义插槽内容

使用示例

<Steps :active="1" style="width: 600px">
        <el-step title="step0" description="hello"></el-step>
        <el-step title="step1" description="hello"></el-step>
        <el-step title="step2" description="hello"></el-step>
        <el-step title="step3" description="hello"></el-step>
      </Steps>

//或

<steps :active="1" style="width: 600px">
        <el-step title="step0" description="hello"></el-step>
        <el-step title="step1" description="hello"></el-step>
        <el-step title="step2" description="hello"></el-step>
        <el-step title="step3" description="hello"></el-step>
      </steps>

Tabs

对应 el-tabs，Tabs 组件提供标签页导航，可自定义插槽内容

使用示例

<Tabs editable>
          <el-tab-pane label="User" name="first">User</el-tab-pane>
          <el-tab-pane label="Config" name="second">Config</el-tab-pane>
          <el-tab-pane label="Role" name="third">Role</el-tab-pane>
          <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
        </Tabs>

//或

<tabs editable>
          <el-tab-pane label="User" name="first">User</el-tab-pane>
          <el-tab-pane label="Config" name="second">Config</el-tab-pane>
          <el-tab-pane label="Role" name="third">Role</el-tab-pane>
          <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
        </tabs>