Bs-component-web NPM

bs-component-web

Bsoft Web Component

快速使用

安装
引入
使用

安装

npm install --save bs-component-web
yarn bs-component-web
pnpm i bs-component-web

引入

引入所有组件功能:

import Vue from 'vue'
import BsComponentWeb from 'bs-component-web'

Vue.use(BsComponentWeb)

按需引入:

import Vue from 'vue'
import { BsRichTextEditor } from 'bs-component-web'

Vue.component('BsRichTextEditor', BsRichTextEditor)

使用

BsRichTextEditor

 <BsRichTextEditor
    v-model="richText:string"
    :height="height:number"
    :disabled="disabled:boolean"
    @filePicker="file_picker_callback"
    @imagesUpload="images_upload_handler"
  ></BsRichTextEditor>

BsWechatMenuMng

 <BsWechatMenuMng
    :buttons="menuArr:[]"
    @submit="submit_callback:menuArr=>{}"
  ></BsWechatMenuMng>

BsFilterTree

树形菜单组件

用法

<BsFilterTree
    :data="treeDate"
    :props="defaultProps"
    :placeholder="placeholder"
    :filter-node-method="filterNode"
    :default-expand-all="true"
    :show-slot="false"
></BsFilterTree>

参数说明

参数	说明	类型	可选值	默认值
data	展示数据	array	-	-
props	配置选项，具体看下表	object	-	{children:"children",label: "label"}
placeholder	筛选输入框的提示文本	String	-	请输入筛选条件
filter-node-method	对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏	Function(value, data, node)	-	-
default-expand-all	是否默认展开所有节点	boolean	true,false	false
show-slot	是否开启插槽模式,插槽模式下可使用插槽自定义树节点内容	boolean	true,false	false
node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的	String	-	-

props配置

参数	说明	类型	可选值	默认值
label	指定节点标签为节点对象的某个属性值	string, function(data, node)	-	-
children	指定子树为节点对象的某个属性值	string	-	-

事件

事件名称	说明	回调参数
node-click	节点被点击时的回调	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
node-contextmenu	当某一节点被鼠标右键点击时会触发该事件	共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
current-change	当前选中节点变化时触发的事件	共两个参数，依次为：当前节点的数据，当前节点的 Node 对象

默认选中的使用方式

若想树菜单默认选择某条信息需要先设置唯一标识node-key,然后使用setCurrentKey方法改变当前选中的数据示例:

    this.$refs.tree.setCurrentKey(key)

BsPagination

分页菜单组件

用法

<BsPagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40, 50]"
    :page-size="20"
    :total="1400"
    :pagerCount="9"
/>

参数说明

参数	说明	类型	可选值	默认值
current-page	当前页数	number	-	1
page-sizes	每页显示个数选择器的选项设置	number[]	-	10, 20, 30, 40, 50, 100
pager-count	页码按钮的数量，当总页数超过该值时会折叠	number	大于等于 5 且小于等于 21 的奇数	7
page-size	每页显示条目个数	number	-	10
total	总条目数	number	-	-
disabled	是否禁用	boolean	-	false

事件

事件名称	说明	回调参数
size-change	pageSize 改变时会触发	每页条数
current-change	currentPage 改变时会触发	当前页

BsTreeSelect

分页菜单组件

用法

    <BsTreeSelect
      :treeData="departmentList"
      :treeProps="props"
      @treeSelect="deptSelect"
    >
    </BsTreeSelect>

参数说明

参数	说明	类型	可选值	默认值
treeData	树结构data	Array	-	[]
treeProps	树结构配置项	Object	-	{ children: "children", label: "label", value: "value", }

事件

事件名称	说明	回调参数
treeSelect	选中节点事件	节点id

BsSoltBox

布局盒子

用法

 <BsSlotBox :title="'标题'">
    <template #handle>
      <div style="display: flex; align-items: center">
         <i  style="font-size: 14px; margin-right: 4px" class="el-icon-circle-plus-outline"></i>
            新增
          </div>
        </template>
        <div slot="content"></div>
</BsSlotBox>

参数说明

参数	说明	类型	可选值	默认值
title	标题	String	-	-

插槽slot

name	说明
handle	标题栏右侧操作区域
content	主要内容

BsDialog

确认弹框

用法

   this.$dialog(title,message,type,confirmButtonText,cancelButtonText)
   .then(()=>{
     console.log('点击确认')
   }).catch(()=>{
     console.log('点击取消')
   })

参数说明

参数	说明	类型	可选值	默认值
title	标题	string,HTML片段	-	-
message	内容信息	string,HTML片段	-	-
type	弹框图标类型	string	success / info / warning / error	warning
confirmButtonText	确认按钮文本	string	-	确认
cancelButtonText	取消按钮文本	string	-	取消

BsDeptTree

带过滤的机构科室选择器

用法

 <BsDeptTree
    ref="tree"
    v-model="selectedOrganizationId"
    @change="getTree"
    :organizationList="orgList"
    :changeOrg="true"
    :checkList="[
        { label: '门诊', value: 'outpatientUse' },
        { label: '住院', value: 'inpatientUse' },
        { label: '病区', value: 'inpatientPlaceUse' },
        { label: '医技', value: 'technologyUse' },
    ]"
    :props="defaultProps"
    @node-click="onClickNode"
    :deptList="treeData"
>
</BsDeptTree>

参数	说明	类型	可选值	默认值
v-model	选中的机构id	string	-	-
organizationList	待选机构list	array	-	-
orgProps	机构配置,配置选项的label和value	object	-	{value: "organizationId",label: "organizationName",}
changeOrg	机构是否可选	boolean	-	true
showFilter	是否显示过滤	boolean	-	true
checkList	过滤开关列表(Array<{label:展示文本,value:过滤字段}>))	array	-	[]
deptList	科室数据树	array	-	[]
props	科室树配置	object	-	{ children: "departmentList", label: "departmentName", defaultKey:"departmentId" } defaultKey用于设置默认选中的值

License

MIT

更新日志

2022/6.21 v0.5.32 1.打包移除element与vue依赖,改为peerDependencies缩小了打包后的文件体积 2.filterTree树状菜单滚动逻辑修改,改为搜索框不移动下方滚动
2022/6.21 v0.5.36 1.树形控件参数传递方式修改,修复了控件参数传递与文档不一致问题
2022/8.03 v0.5.47 1.将组件库内popperManager初始zIndex值设定为2000(打包结果)
2022/8.08 v0.5.48 1.增加BsDeptTree 机构部门过滤选择树组件