jh-npm22 v2.0.0-beta.39

jh-npm22

// 安装依赖包
npm install jh-npm22

// 导入组件
import BaseCom from 'jh-npm22'

// 导入样式
import 'jh-npm22/lib/vue-component.css'

// 导入自定义指令
import Directives from 'jh-npm22/directives'

// 导入常用js函数工具类
import util from 'jh-npm22/utils'

// 导入sass通用变量
@import '~jh-npm22/styles/variables.scss';

// 导入sass
@import '~jh-npm22/styles/index.scss';


// 全局注册
Vue.use(BaseCom)
Vue.use(Directives)

// 绑定全局
Vue.prototype.$util = util

更新日志

1.0.1-alpha.52

• 新增 SubMenuItem 组件，配合 el-menu 使用。

1.0.1-alpha.49

• 扩展 el-radio-group 样式使用 is-underline 会呈现不一样的风格。

1.0.1-alpha.47

• util 新增 createPoller，适用于轮询业务类。

1.0.1-alpha.40

• util merge 工具类函数优化，支持自定义深度合并。

1.0.1-alpha.39

• util 新增 merge、hasOwnProperty 工具类函数。

1.0.1-alpha.38

• util 新增 CountDownTimer 工具类函数。

1.0.1-alpha.37

• util 新增 selectFiles 工具类函数。

1.0.1-alpha.34

• BaseTable 默认点击行高亮。如果不想高亮，可以设置 ElTable 中的highlight-current-row为 false

1.0.1-alpha.32

• TextMessageEditor 移除 allow-line-break 属性，由 content-filter 取代。

1.0.1-alpha.31

• 新增 QQIcon 组件。

1.0.1-alpha.28

• TextMessageEditor 新增属性 tooltiop-placement。

1.0.1-alpha.27

• TextMessageEditor 新增属性 show-mask、mask-class 和插槽 mask。

1.0.1-alpha.26

• el-card 样式问题修复。

1.0.1-alpha.25

• BaseUpload 文档补充。

• el-switch 自定义样式调整。

1.0.1-alpha.24

• sass

  • el-form在 inline 模式下，el-form-item 内容默认宽度调整 原 250px 改为 220px。

  • el-date-picker样式问题修复。

1.0.1-alpha.23

• BaseTable

  • 新增 emptyImageSize、allowRemoveChecked 属性

1.0.1-alpha.20

• BaseTable 组件新增 offset-view-height 属性。

• TextMessageEditor 组件新增 paste 事件。

1.0.1-alpha.19

• ElMenu 组件的 el-menu--popup 样式调整。

1.0.1-alpha.17

• BaseRadioGroup bug 修复。

1.0.1-alpha.16

• BaseSelectTree 迭代优化。

  • multiple 模式下的样式问题修复。

  • 单选模式增持 disabled。节点数据 disabled 为 true 时，节点不可点击。

1.0.1-alpha.15

• BaseSelectTree 新增 @clear

1.0.1-alpha.14

• BaseTable props.toolbar.selectionTotal 默认值改为 true

1.0.1-alpha.13

• BaseTable 新增方法 getCheckedRows、getCheckedKeys、setCheckedRows

1.0.1-alpha.12

• 新增 element-ui 扩展样式文档。

• el-button 扩展样式调整。

• base-form 按钮组中的按钮样式调整。

1.0.1-alpha.9

• TextMessageEditor组件，readonly="true"，且有显示光标时，导致按键 F5 无法刷新页面...等等，诸多问题修复。

1.0.1-alpha.8

• TextMessageEditor组件，readonly="true" 时问题修复。

  • 已设置 show-cursor 为 false，首次编辑时还是会显示光标问题修复。

  • 按删除键，会导致页面回退问题修复。

1.0.1-alpha.7

• variables.scss 调整。

• 新增 style 文档

1.0.1-alpha.6

• BaseTree、BaseSelectTree、BaseDateRange、BaseNumberRange，文档补充。

1.0.1-alpha.5

• BaseForm 按钮组间距调整。

• BaseForm、BaseTable、TextMessageEditor，文档补充。

1.0.1-alpha.4

• TextMessageEditor优化，解决 1.0.1-alpha.3 版本之前的多次触发 change 事件问题。

• BaseForm调整。end、btns插槽名称变更，废弃fontItemProps属性。

1.0.0

正式发布

• 支持部分旧版 js 常用函数工具类。

• 整改 Date 相关常用函数工具类以及原型扩展。

• 组件调整优化，部分旧版属性或方法不予支持。

0.0.0

BaseForm

基于 ElForm 扩展表单

// Template
<base-form label-width="90px"
          @submit="onFormSubmit"
          @reset="onFormReset">

  <!-- 原来怎么写，还是怎么写... -->
  <el-form-item><el-form-item>

  <!-- 按钮组插槽 -->
  <template v-slot:button-group>
    <el-button>我是自定义按钮</el-button>
  </template>

  <!-- 追加按钮插槽（如果使用button-group插槽，则当前插槽无效！！！） -->
  <template v-slot:append-button>
    <el-button>我是追加按钮</el-button>
  </template>
</base-form>

Props

• 完美支持 el-form 原生属性。前往 →

• label-suffix: String（默认值: :） // 表单域标签的后缀

• collapse: Boolean（默认值: true） // 内容塌陷 true-隐藏 false-显示

• submit-button-text: String（默认值: 搜索） // 提交按钮文本

• submit-button-icon: String（默认值: el-icon-search） // 提交按钮 icon

• show-reset-button: Boolean（默认值: true） // 显示重置按钮

• show-switch-button: Boolean（默认值: auto） // 显示切换按钮 always|auto|never

  • always // 一直显示

  • auto // 自动

  • never // 从不显示

• pre-check: Boolean（默认值: false） // 开启表单预检查，提交时会根据验证规则验证。

• show-button-group: Boolean（默认值: true） // 显示按钮组

• button-group-offset: String（默认值: 30px） // 按钮组整体偏移

• collapse-props: Array // 批量设置可控显示隐藏 ElFormItem，指定对应的 prop 值即可。

Events

• 完美支持 el-form 事件。前往 →

• reset // 重置时触发的事件。

• submit // 提交按钮时触发的事件。

Methods

• 完美支持 el-form 方法。前往 →

• resetFields() // 重置表单字段

• toggleCollapseState() // 切换塌陷状态

• toggleSubmitState(loading) // 切换提交状态

• submit() // 提交

Slot

• defaultSlot // 自定义插槽，提供参数：{ isCollapse }

• collapse-wrap // 如果表单内容很多，可以通过此插槽实现部分内容（收/展）。

• button-group // 如果当前按钮不满足，可使用此插槽自定义。提供参数： { submit, resetFields, toggleCollapseState, submitState }

• append-button // 如果只是追加按钮，可以使用此插槽。

已废弃

• formItemProps 移除

• end 插槽变更为 button-group

• btns 插槽变更为 append-button

BaseTable

基于 ElTable 和 ElPagination 实现表格分页

// Template
<base-table ref="refBT"
            :request-options="{
                url: '/api',
                data: formParams
            }"
            :response-interceptor="responseInterceptorHandler"
            :columns="tableColumns"
            @created="vm => vm.query()">

  <!-- 头部插槽 -->
  <template v-slot:header="{ total, data, selection, queryParams }"></template>

  <!-- 自定义插槽 -->
  <template v-slot:propName2Slot="row">
    <el-table-column label="自定义" prop="propName2"></el-table-column>
  </template>

  <!-- 支持原始静态方式，但不推荐与动态列方式混用 -->
  <slot></slot>
</base-table>



// JS
export default {
  data () {
    return {
      // 表单请求参数
      formParams: {},

      // 表格列配置项
      tableColumns: [
        // 可查看 el-table-column 属性
        { type: 'selection', 'reserve-selection': true },
        { prop: 'propName', label: 'labelName', 'min-width': '300px' },
        { prop: 'propName2', slot: 'propName2Slot' },
        ......
      ]
    }
  },
  methods: {
    // 解析请求响应数据
    responseInterceptorHandler (res) {
      const { list, total  } = res.data.pageInfo
      return {
        list: list,
        total: total
      }
    },
    query () {
      this.$refs.refBT.query()
    },
    refresh () {
      this.$refs.refBT.refresh()
    }
  }
}

Props

• request-options: Object（默认值: {}） // 请求参数配置项。请参考 axios 的 opts 参数。前往 →

• columns: Array（默认值: []） // table 列配置项

• show-header: Boolean（默认值: true） // 是否显示头部

• toolbar: Object | Boolean（默认值: {selectionTotal, filter, sort, tooltip}） // 工具栏配置项

  • selectionTotal: true // 选择数据总数

  • filter: true // 表格列显示/隐藏控制

  • sort: true // 表格列位置排放控制

  • tooltip: true // 单元格内容超出用省略号替代

• response-interceptor: Function // 响应拦截器。数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。

• use-el-empty: Boolean // 数据为空时，默认使用 el-empty 组件占位显示。

• empty-image-size: Number // 空数据时显示占位图片的大小（宽度）。

  // table 组件默认规定的数据格式为
  {
    data: {
      list: [{}, {}],
      total: 1000
    }
  }
  
  // 很多时候，您接口返回的数据格式并不一定都符合 table 默认规定的格式，比如：
  {
    data: {
      list: [{}, {}],
      pageInfo: {
        list: [{}, {}],
        total: 1000
      }
    }
  }
  
  // 那么你需要借助 responseInterceptor 回调函数将其解析成 table 组件所规定的数据格式。参考例子：responseInterceptorHandler

• table-attrs: Object（默认值: {}） // el-table 属性。参数。前往 →

• table-events: Object（默认值: {}） // el-table 事件。参数。前往 →

• show-overflow-tooltip: Boolean（默认值: false） // 单元格，显示溢出提示

• multiple: Boolean（默认值: true） // 是否多选

• allow-remove-checked: Boolean（默认值: false） // multiple 为 false 时，允许去除选中。

• show-error-msg: Boolean（默认值: true） // 提示错误信息

• offset-view-height: Number // 设置 table 在视口中呈现内容的高度。负数表示当前视口高度减去设定值，反之则加。

Events

• created // 创建时触发的事件。

• mounted // 挂载时触发的事件。

• response-success // 请求成功时触发的事件。

• response-error // 请求错误时触发的事件。

• response-done // 请求完成时触发的事件；不论成功或失败。

• select // 当用户手动勾选数据行的 Checkbox 时触发的事件。

• select-all // 当用户手动勾选全选 Checkbox 时触发的事件。

• selection-change // 当选择项发生变化时会触发该事件。

Methods

• getCheckedRows() // 获取选中行数据

• getCheckedKeys() // 获取选中行数据的 key 所组成的数组

• setCheckedRows(rows) // 设置表格待勾选行数据

• setCheckedDatas(rows) // 废弃 请使用 setCheckedRows

• setCheckedKeys(keys) // 通过 keys 设置表格待勾选行数据

• toggleRowSelection(row, selected) // 用于多选表格，切换某一行的选中状态

  • row // 指定目标行数据

  • selected // 状态

• removeRowSelection(row) // 移除单个选项

• clearSelection // 清空所有选项

• clearAll // 清空所有

• query(params, resetPage, isClearSelection) // 查询，支持参数

  • params: Object // 查询参数

  • resetPage: Boolean // 重置分页

  • isClearSelection: Boolean // 是否清空选项

• refresh(isClearSelection) // 刷新

  • isClearSelection: Boolean // 是否清空选项

Slot

• header // 可自定义头部展示内容。提供参数： { total, data, selection, queryParams }

• defaultSlot // 默认插槽

• customSlot // 自定义插槽，提供参数： { name, col, colIndex, slotKey, showOverflowTooltip }

已废弃

• selection-accumulate: true // 表示开启多选，该属性已废弃，请使用 el-table-column 原生方式 reserve-selection

BaseTree

用清晰的层级结构展示信息，可展开或折叠。在 el-tree 基础上扩展

// Template
<base-tree ref="refTree"
   :data="treeData"
   :default-expanded-keys="[3,5]"
   :default-checked-keys="[3,10]"
   node-key="id"
   show-checkbox
   check-strictly
   :chkbox-type="{  Y: 'ps', N: 'ps' }"
   @onCheck="handleCheck">
</base-tree>
<base-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></base-tree>


// JS
export default {
  data() {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
}

Props

• el-tree 属性。前往 →

• chkbox-type: Object（默认值: { Y: 'ps', N: 'ps' }） // 父子节点的关联关系，checkStrictly 为 true 时有效。

  • Y // checkbox 被勾选后的情况；"p" 表示操作会影响父级节点；"s" 表示操作会影响子级节点。

  • N // checkbox 取消勾选后的情况；"p" 表示操作会影响父级节点；"s" 表示操作会影响子级节点。

Events

• el-tree 事件。前往 →

• on-check // 当复选框被点击的时候触发。（注意！！！on-check 取代 el-tree 组件 check 事件。）

Methods

• el-tree 方法。前往 →

BaseSelectTree

当选项过多时，使用下拉菜单展示并选择内容。下拉菜单支持树形结构展示。

// Template
<BaseSelectTree node-key="id"
                :props="defaultProps"
                :data="treeData"
                v-model="visibleValue" />


// JS
export default {
  data () {
    return {
      visibleValue: ''，
      defaultProps: {
        label: 'catalogName',
        children: 'children'
      },
      treeData: [
        { id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1' }] },
        { id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }, { id: 6, label: '二级 2-2' }] },
        {
          id: 3,
          label: '一级 3',
          children: [
            { id: 7, label: '二级 3-1' },
            { id: 8, label: '二级 3-2' },
            { id: 9, label: '二级 3-3', children: [{ id: 10, label: '三级 3-3-1' }] }]
        }
      ]
    }
  }
}

Props

• value / v-model: Array|String|Number 绑定值。

• data: Array // 数据选项

• placeholder: String（默认值: 请选择） // 占位符

• hide-tag-colse: Boolean（默认值: true） // 隐藏标签关闭按钮

• multiple: Boolean // 是否多选

• collapse-tags: Boolean // 多选时是否将选中值按文字的形式展示

• node-key: String // 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的

• props: Object（默认值: { label: 'label', children: 'children' }） // 配置选项

• check-strictly: Boolean（默认值: false） // 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法。

• chkbox-type: Object（默认值: { Y: 'ps', N: 'ps' }） // 父子节点的关联关系，checkStrictly 为 true 时有效。

  • Y // checkbox 被勾选后的情况；"p" 表示操作会影响父级节点；"s" 表示操作会影响子级节点。

  • N // checkbox 取消勾选后的情况；"p" 表示操作会影响父级节点；"s" 表示操作会影响子级节点。

• highlight-current: Boolean（默认值: false） // 是否高亮当前选中节点。

• default-expandAll: Boolean // 是否默认展开所有节点。

• expand-on-click-node: Boolean // 是否在点击节点的时候展开或者收缩节点， 默认值为 false，只有点箭头图标的时候才会展开或者收缩节点。

• clickLeaf: Boolean // 为 true 时，只有末级节点才能触发选中。单选模式有效（multiple:false ）。

• value-type: String（默认值: String） // 返回值类型（Array | String），默认字符串。只有（multiple: true ）时该值有效。

• value-consists-of: String（默认值: LEAF_PRIORITY） // 在多选模式下，数组中应包括哪种节点。支持一下集中方式

  • ALL // 所有为选中状态的数据。

  • LEAF_PRIORITY // 只有末级选中数据

  • ALL_WITH_INDETERMINATE // 所有选中的数据含半选状态的数据

Events

• change // 选项改变时执行。

• clear // 清空选项时执行。

BaseDateRange

范围日期时间选择器。

// Template
<BaseDateRange v-model="value" />


// JS
export default {
  data () {
    return {
      value: []
    }
  }
}

Props

• value / v-model: Array 绑定值。

• start-placeholder: String（默认值: 开始时间） 开始输入框占位内容。

• end-placeholder: String（默认值: 截止时间） 截止输入框占位内容。

• range-separator: String（默认值: 至） 分隔字符

• picker-options: Object 当前时间日期选择器特有的选项。

• clearable: Boolean（默认值: true） 是否可清空。

Events

• change // 选项改变时执行。

BaseNumberRange

范围数值选择器。

// Template
<BaseNumberRange v-model="value" />


// JS
export default {
  data () {
    return {
      value: []
    }
  }
}

Props

• value / v-model: Array 绑定值。

• start-placeholder: String 开始输入框占位内容。

• end-placeholder: String 截止输入框占位内容。

• range-separator: String（默认值: 至） 分隔字符

• suffix-text: String 输入框尾部内容

• max: Number 最大值

• min: Number 最小值

• precision: Number 数值精度

• clearable: Boolean（默认值: true） 是否可清空。

Events

• change // 选项改变时执行。

BaseUpload

在 el-upload 基础上扩展。增显上传进度效果，提供取消操作按钮。

// Template
<base-upload name="file"
              accept=".txt, .xls, .xlsx"
              :headers="{ accessToken: '如果没有token可忽略...' }"
              action="/upload-api"
              :on-success="onUploadSuccess">
  <el-button class="is-always-shadow ml-2"
              type="primary"
              round
              slot="reference"
              icon="el-icon-upload2"
              size="mini">上传文件</el-button>
</base-upload>


// JS
export default {
  methods: {
    onUploadSuccess (response, file, fileList) {
      // 请求响应结果。
      console.log(response)

      // 上传的文件信息
      console.log(file)

      // 上传文件列表
      console.log(fileList)
    }
  }
}

Props

• upload-button-text: String（默认值: 上传） 上传按钮文案。

• accept: String（默认值: .txt,.xls,.xlsx,.csv） 接受上传的文件类型。

• max-size: Number（默认值: 50 1024 1024） 文件最大限制，单位 B。

• show-file-list: Boolean（默认值: false） 显示默认文件列表。

• before-upload: Function 上传前的钩子。

• on-progress: Function 文件上传时的钩子。

• on-success: Function 文件上传成功时的钩子。

TextMessageEditor

文本短信编辑器

// Template
<text-message-editor ref="refTME"
:prefix-text="prefixText"
:suffix-text="suffixText"
:variable-list="variableList"
v-model="content"
@change="handleChange">

      <!-- 头部插槽 -->
      <template v-slot:header>
        <el-button @click="insertVariable('变量名1')">变量名1</el-button>
      </template>

      <!-- 底部插槽 -->
      <template v-slot:footer></template>

      <!-- 前缀选项插槽 -->
      <template v-slot:prefix-option>
        <el-option label="labelName" value="val"></el-option>
      </template>

      <!-- 前缀选项插槽 -->
      <template v-slot:mask>
        <el-button>选择模板</el-button>
      </template>

</text-message-editor>

// JS
export default {
  data () {
    return {
      prefixText: '【签名】',
      suffixText: '回 T 退订',
      variableList: ['变量名 1', { name: '变量名 2', size: 18 }],
      content: '我是内容...'
    }
  },
  methods: {
    insertVariable (varText) {
      this.$ref.refTME.insertVariable(varText)
    },

    handleChange (data) {
      // data 与 this.$ref.refTME.getDate() 得到的值相同。
    }

  }
}

Props

• readonly: Boolean // 是否只读

• disabled: Boolean // 是否禁用

• show-cursor: Boolean // 显示光标，在特殊状况下排上用场，例如 readonly 为 true 时

• placeholder: String // 输入框占位文本

• autosize: Object（默认值: { minRows: 5, maxRows: 6 }） // 自适应内容高度

• maxlength: Number （默认值: 500） // 最大字数限制，默认 500

• value: String // 编辑区域内容

• value-format: String // 指定 value 内容格式（pcs| cs | c） 默认 c 输入内容文本

• prefix-text: String // 头部内容（签名）

• prefix-disabled: Boolean // 头部内容禁用

• prefix-options: Object（默认值: []） // 头部内容选项

• show-prefix: Boolean（默认值: true） // 显示头部内容（签名）

• suffix-text: String // 尾部内容（例如：回 T 退订）

• variable-list: Array // 变量标签，支持字符串数组:String、json 数组:Json

  • name: String // 变量名

  • hidden: Boolean // 是否隐藏，默认 false

  • size: Number // 变量内容实际长度。

• highlight-on-click-var: Boolean（默认值: true） // 点击变量标签时高亮突出显示

• allow-line-break: Boolean（默认值: true） // 允许内容换行【1.0.1-alpha.32 废弃】

• show-mask: Boolean（默认值: true） // 显示 mask

• mask-class: String // mask 的自定义类名

• tooltiop-placement: String // tooltip 的出现位置

• content-filter: Function // 自定义内容过滤器

Events

• on-insert // 插入文本内容时触发的事件。

• prefix-change // 前缀内容改变时触发的事件。

• content-change // 输入内容框中的内容变化时触发的事件。

• change // 内容变化时触发的事件。

• paste // 粘贴时触发的事件。

• mask-click // 蒙版被点击时触发。

Methods

• focus // 获取焦点

• clear // 清空内容

• insertAtCaret(text, pos) // 在光标处插入一段文本

  • text: String // 要插入的文本

  • pos: String // 要插入的位置 start | end，不指定则插入光标位置

• insertVariable(text) // 插入变量标签

• getData() // 获取所有数据，返回 Object

const obj = getData()

obj.prefixText // 前缀文本（签名）
obj.suffixText // 后缀文本（回 T 退订）
obj.contentText // 输入文本内容
obj.smsText // 完整内容（前缀文本 + 输入文本内容 + 后缀文本）
obj.pcs // 同上
obj.cs // 输入文本内容 + 后缀文本
obj.contentLength // 输入文本内容长度，不含前缀文本，后缀文本（字数）
obj.smsLength // 完整内容长度（字数）
obj.smsCount // 短信条数

Slot

• header // 可自定义头部展示内容。提供参数： { d }

• footer // 可自定义底部展示内容。提供参数： { d }

• prefix-option // 可自定义前缀选项，必须为 el-option

QQIcon

在线 QQ icon。

<QQIcon type="4" :value="123456" />

Props

• type: {} QQ 展示类型 1~20

• value: {} QQ 账号

SubMenuItem

基于 ElMenu 使用。

// Template
<el-menu>
  <SubMenuItem v-for="route in childMenus"
              :key="resolvePath(route.path, parentPath)"
              :route="route"
              :base-path="resolvePath(route.path, parentPath)" />
</el-menu>

Props

• route: Object 必须 // 路由信息

• base-path: String // 基础路径

• icon-handler: String // icon 处理器

Util

js 常用函数工具类

core 工具函数

hasOwnProperty();
typeOf(); // 判断数据类型
isDefined();
isNull();
isUndefined();
isObject();
isFunction();
isArray();
isBoolean();
isSymbol();
isString();
isEmpty();
isDate();
isvalidDate();
toCamelCase(); // 转为 camelCase
toKebabCase(); // 转为 kebab-case
toPascalCase(); // 转为 PascalCase

common 工具函数

debounce(fn, delay, immediate); // 防抖
throttle(fn, delay, immediate); // 节流
listToTree(list, pId, ruleOptions); // 扁平数据转换成树型结构数据
jsonArrayFlatten(data, children); // JSON树形结构转换为扁平数组结构
getViewportHeight(offset, minHeight, unit); //  获取浏览器可视区域高度
selectFiles(options); // 选择上传文件，接收参数options: { accept = '', capture = '', multiple = false }
new CountDownTimer(60); // 传入倒计时数值，通过 new 得到实例。提供start、stop、reset等方法，count为倒计时数，execCount为执行计数。
merge(boolean|function, false, target, option1, option2, ...); // 合并对象，参数一是否深度合并（可选）、参数二是否锁定target字段（可选，且在参数一存在是有效）
createPoller(callback, delay, immediate); // 构建一个定时轮询器。返回 { start、cont、stop }

Date 扩展

Date.today(); // 返回今天的日期，时间设置为00:00:00(一天的开始)。
Date.now('yyyy-MM-dd HH:mm:ss'); // 根据指定格式返回日期时间。ymd | ymdhms
Date.getListByDates(date1, date2); // 获取两个时间之间的日期数组。
Date.diff(date1, date2); // 获取两个时间之间的毫秒差。
Date.compare(date1, date2); // 将第一个日期与第二个日期进行比较，-1 = date1 < date2. 0 = 值相等. 1 = date1 > date2。
Date.equals(date1, date2); // 将第一个Date对象与第二个Date对象进行比较，如果相等则返回True。
new Date().toString('yyyy-MM-dd HH:mm:ss'); // 根据指定格式返回日期时间。
new Date().clearTime(); // 将时间设置为00:00:00(一天的开始)。
new Date().setTimeToNow(); // 将时间重置为当前时间(现在)。
new Date().set({ day: 15 }); // 将日期设置为当前月份和年份的15号。其他属性：year|month|day|hour|minute|second
new Date().add({ day: 2 }); // 将日期增加2天。其他属性：year|month|day|hour|minute|second
new Date().addYears(1); // 增加1年
new Date().addMonths(-2); // 减去2个月。
new Date().addDays(1); // 增加1天
new Date().addHours(1); // 增加1小时
new Date().addMinutes(1); // 增加1分钟
new Date().addSeconds(1); // 增加1秒
new Date().addMilliseconds(1000); // 增加1000毫秒。
new Date().compareTo(date, format); // 与当前时间比较，-1：小于date. 0：与date相等. 1：大于date。（支持指定比较格式ymd | ymdhms | 'yyyy-MM-dd HH:mm:ss'）
new Date().diffTo(date, format); // 与当前时间比较差值，返回毫秒差。（支持指定比较格式ymd | ymdhms | 'yyyy-MM-dd HH:mm:ss'）
new Date().firstDayOfYear(); // 获取当前所在年份的第一天
new Date().firstDayOfSeason(); // 获取当前所在季度的第一天
new Date().firstDayOfMonth(); // 获取本月份的第一天
new Date().firstDayOfWeek(); // 获取本周第一天
new Date().lastDayInMonth(); // 获取本月最后一天
new Date().getListByDays(3); // 按天数获取日期列表。

Style

常用 CSS 样式名

// Background
<div class="bg-primary"></div>
<div class="bg-success"></div>
<div class="bg-warning"></div>
<div class="bg-danger"></div>
<div class="bg-base"></div>
<div class="bg-white"></div>
<div class="bg-dark"></div>
<div class="bg-transparent">.bg-transparent</div>


// Border
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>


// Border color
<span class="border border-primary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-base"></span>
<span class="border border-light"></span>
<span class="border border-lighter"></span>
<span class="border border-extra-light"></span>


// Border radius
<span class="border border-radius-0">圆角边框0</span>
<span class="border border-radius-4">圆角边框4px</span>
<span class="border border-radius-100">圆角边框100%</span>


// Text
<p class="text-wrap">让文字折行</p>
<p class="text-nowrap">防止文字折行</p>
<p class="text-nowrap">防止文字折行</p>
<p class="text-pre-wrap">保留空白符序列，但是正常地进行换行</p>
<p class="text-truncate">将文本截断并添加省略号。display必须是inline-block或block</p>


// Text align
<p class="text-left">把文本排列到左边</p>
<p class="text-right">把文本排列到右边。</p>
<p class="text-center">把文本排列到中间。</p>
<p class="text-justify">实现两端对齐文本效果。</p>


// 垂直(纵向)对齐
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>


// Color
<p class="text-primary"></p>
<p class="text-success"></p>
<p class="text-warning"></p>
<p class="text-danger"></p>
<p class="text-white"></p>
<p class="text-black"></p>
<p class="gray-primary"></p>
<p class="gray-regular"></p>
<p class="gray-secondary"></p>
<p class="gray-placeholder"></p>


// 浮动与清除浮动
<div class="clearfix">
  <button type="button" class="float-left">向左浮动</button>
  <button type="button" class="float-none">元素不浮动，并会显示在其在文本中出现的位置。</button>
  <button type="button" class="float-right">向右浮动</button>
</div>


// Visible
<div class="visible">显示</div>
<div class="invisible">隐藏</div>


// Overflow
<div class="overflow-visible"></div>
<div class="overflow-auto"></div>
<div class="overflow-hidden"></div>
<div class="overflow-scroll"></div>
<div class="overflow-inherit"></div>

<div class="overflow-y-visible"></div>
<div class="overflow-y-auto"></div>
<div class="overflow-y-hidden"></div>
<div class="overflow-y-scroll"></div>
<div class="overflow-y-inherit"></div>

<div class="overflow-x-visible"></div>
<div class="overflow-x-auto"></div>
<div class="overflow-x-hidden"></div>
<div class="overflow-x-scroll"></div>
<div class="overflow-x-inherit"></div>


// Display
<div class="d-none"></div>
<div class="d-inline"></div>
<div class="d-inline-block"></div>
<div class="d-block"></div>
<div class="d-table"></div>
<div class="d-table-row"></div>
<div class="d-table-cell"></div>
<div class="d-flex"></div>
<div class="d-inline-flex"></div>


// Flex
<div class="d-flex flex-row"></div>
<div class="d-flex flex-row-reverse"></div>

<div class="d-flex flex-column"></div>
<div class="d-flex flex-column-reverse"></div>

<div class="d-flex flex-nowrap"></div>
<div class="d-flex flex-wrap"></div>
<div class="d-flex flex-wrap-reverse"></div>

<div class="d-flex justify-content-start"></div>
<div class="d-flex justify-content-end"></div>
<div class="d-flex justify-content-center"></div>
<div class="d-flex justify-content-between"></div>
<div class="d-flex justify-content-around"></div>

<div class="d-flex align-items-start"></div>
<div class="d-flex align-items-end"></div>
<div class="d-flex align-items-center"></div>
<div class="d-flex align-items-baseline"></div>
<div class="d-flex align-items-stretch"></div>

<div class="d-flex align-content-start flex-wrap"></div>
<div class="d-flex align-content-end flex-wrap"></div>
<div class="d-flex align-content-between flex-wrap"></div>
<div class="d-flex align-content-around flex-wrap"></div>
<div class="d-flex align-content-stretch flex-wrap"></div>

<div class="d-flex">
  <div class="flex-fill">Flex item</div>
  <div class="flex-grow-0">Flex item</div>
  <div class="flex-grow-1">Flex item</div>
  <div class="flex-shrink-0">Flex item</div>
  <div class="flex-shrink-1">Flex item</div>

  <div class="align-self-start">Flex item</div>
  <div class="align-self-end">Flex item</div>
  <div class="align-self-center">Flex item</div>
  <div class="align-self-baseline">Flex item</div>
  <div class="align-self-stretch">Flex item</div>
  <div class="align-self-stretch">Flex item</div>
</div>


// Position
<div class="position-static"></div>
<div class="position-relative"></div>
<div class="position-absolute"></div>
<div class="position-fixed"></div>
<div class="position-sticky"></div>

<div class="fixed-top"></div>
<div class="fixed-bottom"></div>
<div class="absolute-all-0"></div>
<div class="sticky-top"></div>


// 盒子大小
<div class="w-25">25% 的宽度</div>
<div class="w-50">50% 的宽度</div>
<div class="w-75">75% 的宽度</div>
<div class="w-100">100% 的宽度</div>
<div class="w-auto">Width auto</div>
<div class="mw-100">maxWidth 100%</div>

<div style="height: 100px;">
  <div class="h-25 d-inline-block">Height 25%</div>
  <div class="h-50 d-inline-block">Height 50%</div>
  <div class="h-75 d-inline-block">Height 75%</div>
  <div class="h-100 d-inline-block">Height 100%</div>
  <div class="h-auto d-inline-block">Height auto</div>
  <div class="mh-100 d-inline-block">maxHeight 100%</div>
</div>

<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>


// 内外间距（m：margin；p：padding；可选值0~5，值越大间距越宽）
<div class="m-0">外边距0</div>
<div class="mx-0">左右外边距0</div>
<div class="my-0">上下外边距0</div>
<div class="mt-0">顶部外边距0</div>
<div class="mr-0">右边外边距0</div>
<div class="mb-0">下边外边距0</div>
<div class="ml-0">左边外边距0</div>

<div class="p-0">内边距0</div>
<div class="px-0">左右内边距0</div>
<div class="py-0">上下内边距0</div>
<div class="pt-0">顶部内边距0</div>
<div class="pr-0">右边内边距0</div>
<div class="pb-0">下边内边距0</div>
<div class="pl-0">左边内边距0</div>


// Cursor
<span class="cursor-default">默认光标（通常是一个箭头）</span>
<span class="cursor-auto">默认。浏览器设置的光标。</span>
<span class="cursor-crosshair">光标呈现为十字线。</span>
<span class="cursor-pointer">光标呈现为指示链接的指针（一只手）</span>
<span class="cursor-move">此光标指示某对象可被移动。</span>
<span class="cursor-e-resize">此光标指示矩形框的边缘可被向右（东）移动。</span>
<span class="cursor-ne-resize">此光标指示矩形框的边缘可被向上及向右移动（北/东）。</span>
<span class="cursor-nw-resize">此光标指示矩形框的边缘可被向上及向左移动（北/西）。</span>
<span class="cursor-n-resize">此光标指示矩形框的边缘可被向上（北）移动。</span>
<span class="cursor-se-resize">此光标指示矩形框的边缘可被向下及向右移动（南/东）。</span>
<span class="cursor-sw-resize">此光标指示矩形框的边缘可被向下及向左移动（南/西）。</span>
<span class="cursor-s-resize">此光标指示矩形框的边缘可被向下移动（南）。</span>
<span class="cursor-w-resize">此光标指示矩形框的边缘可被向左移动（西）。</span>
<span class="cursor-text-resize">此光标指示文本。</span>
<span class="cursor-wait-resize">此光标指示程序正忙（通常是一只表或沙漏）。</span>
<span class="cursor-help">此光标指示可用的帮助（通常是一个问号或一个气球）。</span>

element-ui style 扩展

el-button

// 边框阴影效果
<el-button class="is-always-shadow"></el-button>

// small圆角按钮延长，目前只支持small
<el-button class="is-long" round size="small"></el-button>

// 比mini还要小的按钮
<el-button size="xxs"></el-button>

el-card

// 两个card垂直方向会有15px的间隙
<el-card></el-card>
<el-card class="is-top-space"></el-card>

el-dialog

// 隐藏 header
<el-dialog class="is-hide-header"></el-dialog>

// 垂直居中
<el-dialog class="is-vertical-center"></el-dialog>

el-form

// form 顶部内边距 22px
<el-form class="is-form-pt"></el-form>

// 重置了el-form-item 在inline模式下固定宽250px，可以通过使用is-inline-auto恢复原本样式。
<el-form-item class="is-inline-auto"></el-form-item>

el-popover

// min-width: auto
<el-popover class="min-w-auto"></el-popover>

el-scrollbar

// height: 100%
<el-scrollbar class="is-h100"></el-scrollbar>

el-switch

// 自定义风格
<el-switch class="is-custom"></el-switch>

el-table

// table-tool-dropdown-link 修饰
<el-table>
  <el-table-column>
    <template v-slot="{row}">
      <el-dropdown>
              <span class="table-tool-dropdown-link">
                选择操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">添加</el-dropdown-item>
                <el-dropdown-item command="2">修改</el-dropdown-item>
                <el-dropdown-item command="3">删除</el-dropdown-item>
              </el-dropdown-menu>
        </el-dropdown>
    </template>
  </el-table-column>
</el-table>

el-tabs

// 使用 is-custom 自定义 card 模式样式
<el-tabs type="card"
          class="is-custom"
          :value="$route.path">
  <el-tab-pane label="窗格1" name="/pane1"></el-tab-pane>
  <el-tab-pane label="窗格2" name="/pane2"></el-tab-pane>
</el-tabs>