@bdsoft/element - npm explorer

组件库参考

使用

1. 安装并添加引用

``



pnpm install @bdsoft/element





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

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';

 

      默认提示点

      警告提示点

      错误提示点

      动态提示点

      动态提示点





搜索框组件



import logoImg from '/logo.png'



// 重新搜索

const handleSearch = (title, isfirst) => {

  let _title = title.value



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

}





全局方法的调用

方法1

import { getCurrentInstance } from "vue";

const { appContext: { config: { globalProperties } } } = getCurrentInstance()

globalProperties.showsuccess()

方法2

import { showwarning } from '@bdsoft/element'





Bar 组件使用



import { BdBar } from '@bdsoft/element'





splitpanes 组件使用



 

 

    {{ paneSize }}%

  

  

    {{ 100 - paneSize }}%





重大变更

* 1.1.21（20260114）之后写法变了，将element-plus的引用放到项目中去进行注入



前置处理：先拉取最新代码然后

1. pnpm uninstall @bdsoft/element 

2. pnpm install @bdsoft/element@1.1.23

3. pnpm install element-plus@2.13.1

4. main.js 处理

import { useElement } from '@bdsoft/element'

// 1. 导入 Element Plus 核心和样式

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css' // 全局引入样式，组件包无需再导入

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'



app.use(useElement,{ElementPlus: ElementPlus ,zhCn:zhCn})

组件库参考

使用

1. 安装并添加引用

``



pnpm install @bdsoft/element





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

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';

 

      默认提示点

      警告提示点

      错误提示点

      动态提示点

      动态提示点





搜索框组件



import logoImg from '/logo.png'



// 重新搜索

const handleSearch = (title, isfirst) => {

  let _title = title.value



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

}





全局方法的调用

方法1

import { getCurrentInstance } from "vue";

const { appContext: { config: { globalProperties } } } = getCurrentInstance()

globalProperties.showsuccess()

方法2

import { showwarning } from '@bdsoft/element'





Bar 组件使用



import { BdBar } from '@bdsoft/element'





splitpanes 组件使用



 

 

    {{ paneSize }}%

  

  

    {{ 100 - paneSize }}%





重大变更

* 1.1.21（20260114）之后写法变了，将element-plus的引用放到项目中去进行注入



前置处理：先拉取最新代码然后

1. pnpm uninstall @bdsoft/element 

2. pnpm install @bdsoft/element@1.1.23

3. pnpm install element-plus@2.13.1

4. main.js 处理

import { useElement } from '@bdsoft/element'

// 1. 导入 Element Plus 核心和样式

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css' // 全局引入样式，组件包无需再导入

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'



app.use(useElement,{ElementPlus: ElementPlus ,zhCn:zhCn})