zksy-lib v1.2.5

中科视语内部组件库（element-ui 二次分装）

组件库没有下载 element-ui，请在本地项目安装 element-ui 来支持 node 包运行,

声明（注意更新当前版本）

zksy-lib v1.2.5 测试库 objecteye-lib-ui v1.0.3 正式库 提交版本请注意名称和版本号

1. 此插件库仅供公司内部项目中使用
2. 此插件库功能正在逐步优化及完善，如需使用，请关注 npm 更新版本，建议以最新版本为准
3. npm 地址：https://www.npmjs.com/package/objecteye-lib-ui
4. git 地址：http://192.168.10.182/mfchen/componentLibrary
5. version： <1.0.3>

更新日志(正式库版本:1.0.1 开始，提交本版更新)

• 2023.02.03 组件库拆分，抛出_C 组件、_M 方法，新增 addColor 方法，更改组件库主题颜色 （v1.0.4）
• 2023.02.02 视频，图片新增 close 方法，noData 新增 iconClass 属性 （v1.0.3）
• 2023.01.31 更新 dist 包（v1.0.1），
• 2023.01.31 TableContainer、FormContainer 新增 multiple、selectAxios 属性详情查看 reanme。表格操作按钮新增 tooltip（v1.0.1）
• 2023.01.30 确认初始版本(v1.0.1)，只支持 BG 项目目前功能，后续增加新功能

Install

npm cache clean --force 清除缓存
npm install zksy-lib -S

Quick Start

// 组件加载：ObjecteyeLibUi._C
import Vue from "vue";
import ObjecteyeLibUi from "objecteye-lib-ui";

Vue.use(ObjecteyeLibUi._C);
// 方法：ObjecteyeLibUi._M
ObjecteyeLibUi._M;

组件方法

1.addColor，autoColor 使用方法

// 全局覆盖
import ObjecteyeLibUi from "objecteye-lib-ui";
let _M = ObjecteyeLibUi._M;
// 组件库自带
_M.addColor("主题颜色"); // 主题颜色：darkColor（暗黑色）

// 自定义颜色。 除了组件库固定属性，可自定义添加其他属性，最后生成到全局。
_M.autoColor({
  "--mainBackground": "#18232a", // 最外层盒子颜色
  "--itemBackground": "#1e2a31", // 每一个小盒子的颜色
  "--fontColor": "#fff", // 字体颜色
  "--TableHeader": "#203240", // 表格Header
  "--TableCon": "#1e2a31", // 表格列表Container
  "--scrollBackBar": "#8a98ac", // 滚动条颜色
  "--pagerBackGround": "#409eff", // 分页选中颜色
  "--inputBackground": "transparent", // input背景颜色
  "--inputBorder": " #959b9e", // 输入框边框，可能带入其他边框颜色
  "--inputPlaceholder": "#d8e9f4", // 输入框Placeholder
  "--dialogTitleBackground": "#203241" // 弹窗顶部颜色
});

组件介绍

TableContainer 自定义表格
FormContainer  自定义表单
ImgDialog      图片弹窗
UploadContainer上传组件
VideoDialog    视频弹窗
NoData         无数据展示
SvgIcon        icon展示
VideoPlayback  综合安防管理平台视频播放

Setup

TableContainer 使用方法

属性

tableConfig

TopBtu

searchK

注释：

type为selectAxios时新增三个属性
axios        是否开启axios请求 Boolean
axiosUrlFn   请求函数  比如：axios.get() Function
defaultProps 自定义lable，value
               比如defaultProps: { label: "clientName", value: "id"}  Object

newSearchCon

tableProp

方法

其余方法通过 callBack 方法返回

示例代码

  da: {
         page: {
           //页数
           current: 1,
           pageSize: 10
         },
         TopBtu: [
           //顶部按钮
           {
             type: "primary",
             label: "新建",
             icon: "el-icon-circle-plus",
             incident: "Add",
             callBack: () => {

             }
           }
         ],
         searchK: [
           //顶部搜索框部分
           {
             type: "select",
             label: "xxxxx",
             prop: "status",
             options: [
               {
                 label: "xxxx",
                 value: 0
               }
             ]
           }
         ],
         tableProp: [
           //表格部分
           { prop: "xxxx", name: "xxxx", width: "150" },
           { prop: "xxxx", name: "xxxx", width: "300" },
           { prop: "xxxx", name: "xxxx", width: "100" },
         ],
         tableData: [{}], //表格数据
         tabletotal: 0, //数据数量
         tableConfig: {
           //表格配置
           pagin: true,
           selection: true, // 选择框
           index: true, // 序号
           border: false, // 边框
           handle: true, // 是否显示操作列
           buttonAffairs: [
             //操作列按钮
             {
               name: "xxxx",
               icon: "el-icon-edit",
               type: "primary",
               affairs: "editer",
               callBack: row => {

               }
             }
           ]
         }
       }

FormContainer 使用方法

属性

PopupViewinput

注释：

type为selectAxios时新增三个属性
axios        是否开启axios请求 Boolean
axiosUrlFn   请求函数  比如：axios.get() Function
defaultProps 自定义lable，value
               比如defaultProps: { label: "clientName", value: "id"}  Object

示例代码

PopupViewinput: [
          //表单部分
      {
        prop: "avatar",
        name: "头像",
        width: "100px",
        type: "img"
      },
      {
        prop: "id",
        name: "用户id",
        width: "80px",
        type: "text",
        disabled: true
      },
      { prop: "account", name: "账户", width: "80px", type: "text" },
      { prop: "age", name: "年龄", width: "80px", type: "text" },
      {
        prop: "createDate",
        name: "注册时间",
        width: "80px",
        type: "datetime"
      },
      {
        prop: "admin",
        name: "管理员",
        type: "switch",
        switch: {
          text: { left: "否", right: "是" },
          value: { left: 0, right: 1 }
        }
      },
      {
        prop: "lastLogin",
        name: "最后登录时间",
        width: "100px",
        type: "datetime"
      },
      {
        prop: "deleted",
        name: "可删除",
        type: "switch",
        switch: {
          text: { left: "否", right: "是" },
          value: { left: 0, right: 1 }
        }
      },
      { prop: "design", name: "个性签名", width: "80px", type: "text" },
      {
        prop: "v",
        name: "v认证",
        type: "switch",
        switch: {
          text: { left: "未完成", right: "已完成" },
          value: { left: 1, right: 3 }
        }
      },
      { prop: "email", name: "邮箱", width: "80px", type: "text" },
      {
        prop: "sex",
        name: "性别",
        width: "80px",
        type: "switch",
        switch: {
          text: { left: "女", right: "男" },
          value: { left: 0, right: 1 }
        }
      },
      { prop: "hobby", name: "兴趣爱好", width: "80px", type: "text" },
      { prop: "area", name: "地区", width: "80px", type: "text" },
      {
        prop: "mobilePhoneNumber",
        name: "电话号码",
        width: "80px",
        type: "text"
      },
      { prop: "nickname", name: "昵称", width: "80px", type: "text" },
      { prop: "password", name: "密码", width: "80px", type: "text" },

      {
        prop: "status",
        name: "状态",
        width: "80px",
        type: "switch",
        switch: {
          text: { left: "离线", right: "在线" },
          value: { left: 0, right: 1 }
        }
      },
      { prop: "work", name: "职业", width: "80px", type: "text" }
    ]

ImgDialog 使用方法

属性

方法

VideoDialog 使用方法

属性

方法

UploadContainer 使用方法

属性

方法

NoData 使用方法

属性

SvgIcon 使用方法

属性

VideoPlayback 使用方法

属性

插件库开发成员注意事项

1. 每次更新后的版本请将更新内容、更新人标注在日志中
2. 更新内容上传至组件所在的 git 上
3. 如有问题及时反馈，共同维护
4. 请按照规范书写 readme 文档

版本号说明

1. 版本号规范主版本号.次版本号.增强版本号.里程碑版本号
2. 主版本号：项目的重大重构
3. 次版本号：新功能的添加和变化
4. 增强版本号： BUG 的修复