Vue 组件库 heyui@1.18.0 发布，新增地址选择、图片预览组件

骑猪看日落 2022-02-13 12:19 199阅读 0赞

# 新增 #

## CategoryPicker ##

新增组件 CategoryPicker，地址级联组件的最佳方案。

![1f83ab2eede60cc14a3eb59197c87ad0818.jpg][]

[相关文档][Link 1]

## ImagePreview ##

新增组件 ImagePreview，图片预览列表。

![62d650766b978ff9942ab0f57a0a0157426.jpg][]

[相关文档][Link 2]

## Modal ##

modal 支持自定义事件替换event事件，并支持多参数传递。

// 直接使用emit触发外部的events监听，兼容性 1.18.0+
    this.$emit('success', this.value, 'test');

[相关文档][Link 3]

## Pagination ##

支持 v-model 分页控制。

<Pagination v-model="pagination" @change="getData"></Pagination>
    
    pagination: {
      page: 1,
      size: 10,
      total: 100
    }

[相关文档][Link 4]

## Tree ##

新增 expand 方法，可以通过 key 指定打开哪些节点。

this.$refs.tree.expand([1,2,3]);

[相关文档][Link 5]

## Button ##

新增属性 transparent ，按钮是否背景透明。

<Button transparent text-color="primary">主色系按钮</Button>

[相关文档][Link 6]

## TimelineItem ##

新增slot icon

<TimelineItem>
      <i class="h-icon-user primary-color" slot="icon"></i>
      <div slot="time">2012-12-23</div>
      <div slot="content">到达呼伦贝尔</div>
    </TimelineItem>

[相关文档][Link 7]

## FormItem ##

新增属性 icon ，显示图标。

新增 slot label，自定义slot。

![d410d3ef441cec0b6c16689899d3f0d257c.jpg][]

[相关文档][Link 8]

## Tooltip ##

新增属性 editable，支持tooltip内部编辑模块

<Tooltip theme="white" @show="show" trigger="click" @hide="hide" editable>
      <span class="text-hover">Component调用</span>
      <div slot="content">
        <div v-padding="10">
          <Select dict="simple" v-model="value" style="width: 200px;"></Select>
        </div>
      </div>
    </Tooltip>

[相关文档][Link 9]

## Category ##

补充异步加载功能

<Category :option="param" v-model="value"></Category>
    
    param: {
      keyName: 'id',
      titleName: 'title',
      dataMode: 'list',
      getDatas: (parent, resolve) => {
        setTimeout(() => {
          if (!parent) {
            resolve([
              { id: 1, title: '一级', disabled: true },
              { id: 2, title: '二级' },
              { id: 3, title: '三级' }]);
          } else if (parent.id % 2 == 0) {
            resolve([]);
          } else {
            resolve(genList(parent.title, parent.id, 5, 'id', 'title'));
          }
        }, 100);
      }
    }

[相关文档][Link 10]

# 修复bug #

### 日期时间选择器选择问题 ###

选择日期时间后，不关闭，直接重新选择年月无效。

### 超级日期选择器，点下一页稍微快一点，就会变成选中状态 ###

Closes [\#91][91]

### 栅格布局错位问题 ###

Closes [\#90][90]

[1f83ab2eede60cc14a3eb59197c87ad0818.jpg]: /images/20220213/8da1b5b12b4b46b6bbc8ac21d6cdc6b6.png
[Link 1]: https://www.heyui.top/component/other/categorypicker
[62d650766b978ff9942ab0f57a0a0157426.jpg]: /images/20220213/4f9b93e397764d8cadf5cfe215e14bb5.png
[Link 2]: https://www.heyui.top/component/view/imagepreview
[Link 3]: https://www.heyui.top/component/message/modal#Modal%E8%B0%83%E7%94%A8%E7%BB%84%E4%BB%B6
[Link 4]: https://www.heyui.top/component/data/view/page
[Link 5]: https://www.heyui.top/component/plugin/tree
[Link 6]: https://www.heyui.top/component/basic/button
[Link 7]: https://www.heyui.top/component/view/timeline
[d410d3ef441cec0b6c16689899d3f0d257c.jpg]: /images/20220213/b6ba3f90df1742f58c5e71e7003499cf.png
[Link 8]: https://www.heyui.top/component/form/form
[Link 9]: https://www.heyui.top/component/message/tooltip#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%86%85%E5%AE%B9
[Link 10]: https://www.heyui.top/component/plugin/category#%E5%AF%B9%E8%B1%A1%E8%B0%83%E7%94%A8%E4%B8%8E%E5%BC%82%E6%AD%A5%E8%B0%83%E7%94%A8
[91]: https://github.com/heyui/heyui/issues/91
[90]: https://github.com/heyui/heyui/issues/90