bs-component-web

v0.6.1-beta1

Published

a year ago

Bsoft Web Component

Downloads

0High
0Medium
0Low

natsumesu

pangxl

vue vuejs plugin

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

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

bs-component-web

快速使用

安装

引入

使用

BsRichTextEditor

BsWechatMenuMng

BsFilterTree

BsPagination

BsTreeSelect

BsSoltBox

BsDialog

BsDeptTree

License

更新日志