组件库参考

使用

1. 安装并添加引用

pnpm install @bdsoft/element

2. 注册 在main.js中添加引用

import { useElement } from '@bdsoft/element'

app.use(useElement)

老项目更新问题

由于element-plus剥离独立版本，以后项目中不再需要安装element-plus、及图标库@element-plus/icons-vue

1. 删除项目main.js中的引入element-plus及@element-plus/icons-vue(包含样式)
2. 在main.js中添加引入@bdsoft/element 参考上面2步骤

圆点组件

import { BdBadge } from '@bdsoft/element';
 <ul>
      <li><BdBadge></BdBadge>默认提示点</li>
      <li><BdBadge type="warning"></BdBadge>警告提示点</li>
      <li><BdBadge type="error"></BdBadge>错误提示点</li>
      <li><BdBadge type="processing"></BdBadge>动态提示点</li>
      <li><BdBadge type="processing"></BdBadge>动态提示点</li>
    </ul>

搜索框组件

import logoImg from '/logo.png'

// 重新搜索
const handleSearch = (title, isfirst) => {
  let _title = title.value

  console.info('重新搜索', title, isfirst)
}

 <HeadSearch :logoUrl="logoImg" @getSearchList="handleSearch"></HeadSearch>

全局方法的调用

import { getCurrentInstance } from "vue";
const { appContext: { config: { globalProperties } } } = getCurrentInstance()
globalProperties.showsuccess()

import { showwarning } from '@bdsoft/element'

Bar 组件使用

import { BdBar } from '@bdsoft/element'

<BdBar :innerHeight="'50px'" :paddingTop="'10px'">
     
</BdBar>

splitpanes 组件使用

 <splitpanes class="default-theme" style="height: 100%">
 <pane :size="paneSize">
    <span>{{ paneSize }}%</span>
  </pane>
  <pane :size="100 - paneSize">
    <span>{{ 100 - paneSize }}%</span>
  </pane>
 </splitpanes>