bw-cowave-ui
v1.0.3
Published
一体化ui组件,二次封装element-plus
Downloads
6
Readme
基于 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>