common-element-tools v0.1.30

common-element-tools

说明

该项目方便内部开发使用发布

发布命令

npm lib // 打包
npm login // 登陆
npm publish //发布，注意发布之前需要修改版本号，否则发布失败

安装

依赖
element-ui
sortablejs

npm i common-element-tools

import CommonElementTools from 'common-element-tools'
import 'common-element-tools/lib/common-element-tools.css';

common-button

所有功能与el-button相同 后续考虑增加permission
增加了自定义指令v-ripple 实现点击水纹的效果 该功能参考的vue-vban-admin项目 button配置 ripple 属性可实现该效果

common-border

可以prop color 控制颜色 参数

title:'name',// 
buttonLabel:'search',// 默认按钮名称 
color:'',// 左侧颜色条
@onClick 按钮回调事件

<common-border buttonLabel="test" size="mini" type="text">
</common-border>

common-header

增加了点击搜索，自动留存当前搜索内容到input placeholder的效果

common-table

初步整理完成了table组件
默认配有两个主题 props:theme 1、2 后续根据需要可以自行补充 headerStyle
增加了默认按钮的单个显示控制、整体显示控制
hideViewButton || row.hideViewButton 控制默认查看按钮
hideEditButton || row.hideEditButton 控制默认编辑按钮 hideDeleteButton || row.hideEditButton 控制默认删除按钮 hideDefaultButton 控制默认三个按钮显示与否 draggable 是否可以拖动行 @onDragAdd @onDragRemove @onDragEnd 按钮支持两种方式插入，slot方式以及props方式
prop方式

 buttonList: [
    {
      label: "test",
      func: (row) => {
        console.log(row);
      },
    },
  ],

slot方式

  <template v-slot:button="{ scope }">
    <el-button type="danger" size="mini" @click="del(scope)">
      slotbutton</el-button
    >
    <el-button type="danger" size="mini" @click="del(scope)">
      slotbutton</el-button
    >
  </template>

common-dialog

在不改变el-dialog的所有功能基础上整合了drag拖拽的效果 与el-input-number 有冲突 后续解决 ～～优化了点击外部关闭的效果，避免了鼠标在内部点击后移动到外部也会关闭的bug，避免bug组件需要增加fixed参数～～

common-wrapper

简单的组件 实现了margin的效果

coomon-tags

双向绑定一个array 值的tagsIds对象
设置disabled 属性可以只展示当前tagsIds的数据 每当选中值发生变化时候 $emit("getResult",data) 方法 props 配置项 ，默认为 label，value ，请注意value必须为唯一值

  props: {
        label: "label",
        value: "id",
      },

    <common-tags
      :tags="list"
      v-model="tagIds"
      show-search
      :props="props"
      @getResult="getTagsResult"
    >

增加了一些常用的validate方法

  import { isFloat1、isFloat2、isFloat3、isFloat4、isFloat5 } from 'common-elements-tools'

isExternal 是否外部链接 isPureNumber 是否纯数字 isPositiveIntegerWithoutZero 是否正整数不含0 isPositiveIntegerWithZero 是否正整数包含0 isFloat1、isFloat2、isFloat3、isFloat4、isFloat5 是否1～5位小数