/ivu-extends

基于 view-design 扩展的组件库

Primary LanguageJavaScriptMIT LicenseMIT

ivu-extends

基于 view-design（v4.7.0） 扩展的组件库，平时开发造的一些轮子，包括组件的二次封装，Vue 指令和动态主题切换。

安装

npm install ivu-extends -S

使用

import IvuExtends from 'ivu-extends'

Vue.use(IvuExtends)

// 或者
import { FormLabelSuffix, InputNumberUnit } from 'ivu-extends'

Vue.component(FormLabelSuffix.name, FormLabelSuffix)
Vue.component(InputNumberUnit.name, InputNumberUnit)
/* 或写为
 * Vue.use(FormLabelSuffix)
 * Vue.use(InputNumberUnit)
 */

组件

FormLabelSuffix

对原属性 label-colon 进行扩展，可定制 label 后缀。

使用场景：统一为项目中的表单标签都添加中文冒号 ： 后缀。

<FormLabelSuffix :label-width="160" label-colon="：">
  <FormItem label="姓名"><Input></Input></FormItem>
  <FormItem label="年龄"><Input></Input></FormItem>
</FormLabelSuffix>

如果不想更换 Form 组件名（Form => FormLabelSuffix），可以全局/局部替换 ivu-form。

// 在 main.js 中全局替换
Vue.component('Form', FormLabelSuffix)

// 在 Form 使用处，局部替换
import FormLabelSuffix from 'ivu-extends'

export default {
  components: { Form: FormLabelSuffix }
  /* ... */
}

替换后使用，保持原代码不变，只需要添加 label-colon 属性。

<Form :label-width="160" label-colon="：">
  <FormItem label="姓名"><Input></Input></FormItem>
  <FormItem label="年龄"><Input></Input></FormItem>
</Form>

InputNumberUnit

带单位的数字输入框，在 InputNumber 的基础上进行扩展，新增了两个属性：unit 和 unit-placement，一个插槽：unit。

使用场景：原生 InputNumber 添加单位后，单位算作输入框内容的一部分，导致还能选中删除，不优雅。

使用

<InputNumberUnit
  :max="100"
  :min="-10"
  size="small"
  unit="$"
  unit-placement="start"
  v-model="value"
/>

使用插槽

<InputNumberUnit :max="100" :min="0" :step="1" unit-placement="end" size="large" v-model="value">
  <span slot="unit" style="color: red; font-weight: bold">%</span>
</InputNumberUnit>

props

属性 说明
unit 单位，String 类型
unit-placement 单位的位置，String 类型，可选值：start（在数字前） 或者 end（在数字后），默认为 start

slot

名称 说明
unit 自定义单位格式

SelectUnion

联动选择输入框，在 Select 的基础上进行扩展，新增了一个属性：group。

使用场景：多个输入框之间需要联动，已选中项不可再选。

使用

<SelectUnion v-for="(item, key) in list" :key="key" v-model="value" :group="item.group">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</SelectUnion>

props

属性 说明
group 分组名，String 类型，相同组名的 SelectUnion 之间有联动效果，默认为 'default'

TableColumnKeyChain

在 Table 的基础上进行扩展，可链式传入 columns 中的 key。

使用场景：要展示数据项中下层的属性，同时还需要生效 tooltip 。

使用

<TableColumnKeyChain :columns="columns" :data="tableData" border></TableColumnKeyChain>
export default {
  data() {
    return {
      columns: [
        {
          title: 'name',
          key: 'name'
        },
        {
          title: 'age',
          key: 'age'
        },
        {
          title: 'addressName',
          key: 'address.name', // 可以这样写
          tooltip: true // tooltip 也会生效
        },
        {
          title: 'date',
          key: 'date',
          tooltip: true
        }
      ],
      tableData: [
        {
          name: 'John Brown',
          age: 18,
          address: {
            name: 'New York No. 1 Lake Park'
          },
          date: '2016-10-03'
        }
      ]
    }
  }
}

TooltipText

在 Tooltip 的基础上进行扩展，文本内容超出当前容器宽度时，自动开启 Tooltip 。

使用

如果内容是纯文本，则默认将整个文本内容作为 Tooltip 的 content 内容。

<TooltipText>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TooltipText>

如果内容非纯文本，用一个根容器包裹整个内容，同时需要单独指定 content 。

<TooltipText content="bbb">
  <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<span>bbbbbbb</span>aaaaaaaa</div>
</TooltipText>

指令

modify-opacity

ColorPicker 的优化指令，当 opacity 为 0 ，在颜色面板上选取颜色时，将不透明度置为 1 。

使用

<ColorPicker v-model="color" alpha v-modify-opacity />

resize

监听 DOM 尺寸变化。

使用场景：echarts 图表的 DOM 容器尺寸发生变化时，需要执行 echarts.resize() 重新调整图表尺寸。

使用

<div v-resize:200.immediate="handleResize"></div>

配置

属性 说明
arg 传入一个数字，代表节流时间，默认为 500
modifiers 仅支持 immediate，表示是否立即触发，默认为 false
value 触发时的回调方法，参数为 DOMRectReadOnly 类型

scroll-to

将当前元素或子元素的滚动条移动到底部或顶部。

使用场景：列表项过多出现滚动条，新增一项时，将列表的滚动条滚动到底部，确保新增的一项可见。

使用

<div
  v-scroll-to="{
    top: `handleShift`,
    bottom: `handlePush`,
    selector: ''
  }"
></div>

配置

属性 说明
value 配置项信息，Object 类型，有三个可选属性 { top: string, bottom: string, selector: string }
top 滚动到顶部的回调方法名，String 类型，只支持同步方法，当前方法执行后，在下一轮事件循环中将滚动条滚动到顶部
bottom 滚动到底部的回调方法名，String 类型，只支持同步方法，当前方法执行后，在下一轮事件循环中将滚动条滚动到底部
selector 选择器，String 类型，如果想滚动的容器不是当前元素，而是它的子元素，可以提供一个子元素的选择器

set-title-attr

将当前元素或子元素设置原生 title 属性。

使用场景：下拉列表的选项中，有些文字过长，开启文字省略后，还需要能展示全部文字。

使用

<select v-model="model" style="width: 200px">
  <option v-for="item in list" :value="item.value" :key="item.value" v-set-title-attr="item.label">
    {{ item.label }}
  </option>
</select>

配置

属性 说明
value 在 title 中展示的文字

主题切换

只支持 v4.7.0 版本，如果使用其他版本，可以参照 给 ViewDesign 加个主题换肤 💖 生成对应的主题 CSS 文件。

首先需要在 main.js 中更换引入的 CSS 文件。

- import 'view-design/dist/styles/iview.css'
+ import 'ivu-extends/dist/styles/iview.css'

引入 genThemeColor 方法：

import { genThemeColor } from 'ivu-extends'

使用：

genThemeColor(color)

其中 color 为十六进制颜色值，例如 #ff0000、#0f0 都是合法的颜色值。方法执行后，当前项目中使用到的 view-design 组件，主题色都会发生变化。

如果完整引入了 ivu-extends，那么 Vue.prototype 上会有一个全局方法 $genThemeColor，使用方式为 this.$genThemeColor(color) 。