bs-component-web

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>

• 参数说明

• props配置

• 事件

• 默认选中的使用方式

若想树菜单默认选择某条信息需要先设置唯一标识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"
/>

• 参数说明

• 事件

BsTreeSelect

分页菜单组件

• 用法

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

• 参数说明

• 事件

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>

• 参数说明

• 插槽slot

BsDialog

确认弹框

• 用法

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

• 参数说明

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>

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 机构部门过滤选择树组件