Component Proposal (新组件建议集中在这里提 )

[airyland]

If you need a new component, comment here and attach screenshots, thanks.

如果有新组件需求，请在这里评论并附上实际例子截图。

• [ ] Off-canvas menus 侧边栏 #124 #139
• [x] Badge #124
• [ ] Uploader #139 不做封装，很难满足所有人需求，引入样式自己开发 https://github.com/airyland/vux/blob/v2/src/demos/Uploader.vue 或者使用 @greedying 开发的 vux-uploaders #997
• [ ] Smart select #199
• [x] Image preview @nowui
• [x] swipeout #412
• [x] popover
• [ ] collapse #1117 @zerofront
• [ ] index-list #1882

scroller不是一个好的解决方式，如果只是为了Loadmore, 将独立提供loadmore组件

• [ ] Load more

[nowui]

考虑一下图片预览的功能

[liniu]

考虑一下增加Tags Input 类似于微信的好友标签，参考 http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

[cheneywan]

考虑拓展一下现有的 Tab，增加水平方向可以滑动的选项，参考：http://kissygalleryteam.github.io/xtab/doc/demo/index.html

[terranc]

增加右侧对齐的input，label在左侧，输入内容右侧对齐，且支持type=date等。

[airyland]

@terranc 1.可以用text-align来实现右侧对齐。 2.组件有type属性

文档还没发布，具体看x-input代码。

[terranc]

@airyland 好的，我只是看了Demo里的示例，建议可以加上这些常见的场景

[agileago]

增加一个 x-scratch组件 刮刮乐

[airyland]

@agileago 这个暂时没有计划，但是欢迎PR

[hubinjie]

增加一个 GOTOP 组件，功能比较简单，用得还是比较广

[airyland]

@hubinjie 暂时未在计划中，欢迎PR。

[jsonviewer]

<template>
  <div class="weui-uploader">
    <div class="weui-uploader__hd">
    </div>
    <div class="weui-uploader__bd">
      <ul class="weui-uploader__files">
        <li class="weui-uploader__file" v-for="(thumbnail, index) in thumbnails" :style="{ backgroundImage: `url(${ thumbnail })` }" @click="click(index)">
          <badge text="x" class="delete" @click.native.stop="deleteImage(index)"></badge>
        </li>
      </ul>
      <div class="weui-uploader__input-box">
        <button class="weui-uploader__input" @click="onButtonClick"></button>
      </div>
    </div>
  </div>
</template>

<script>
  import { Badge } from 'vux';

  export default {
    props: {
      thumbnails: Array,
    },
    methods: {
      onButtonClick() {
        this.$emit('on-button-click');
      },
      click(index) {
        this.$emit('on-item-click', index);
      },
      deleteImage(index) {
        this.$emit('on-delete-click', index);
      },
    },
    components: {
      Badge,
    },
  };
</script>

<style>
  .delete {
    float: right;
  }
</style>

@airyland 业务中需求，自己写了个uploader组件，删除了weui-uploader的hd里的代码（个人没使用到），接收图片url数组，默认有个添加按钮，每个图片有点击事件（为预览需求），每个图片的右上角有个删除按钮（這个实现纯粹为了省事、不美观，weui是使用gallery预览里面有删除，我用的vux的previewer，所以就没办法在预览里删除，希望作者能够使用gallery实现预览功能或者在previewer中增加删除）。希望作者能加到vux中，我实现的方式可能有问题，只是提个思路。下配图。

还有一个image-list组件，和uploader很像，只提供图片点击事件

<template>
  <div>
    <div class="weui-uploader">
      <div class="weui-uploader__bd">
        <ul class="weui-uploader__files">
          <li class="weui-uploader__file" v-for="(thumbnail, index) in thumbnails" :style="{ backgroundImage: `url(${ thumbnail.src })` }" @click="click(index)"></li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    props: {
      thumbnails: Array,
    },
    methods: {
      click(index) {
        this.$emit('on-item-click', index);
      },
    },
    components: {},
  };
</script>

<style>
</style>

[guntertien]

考虑一下侧滑菜单、聊天界面组件开发。😝

[airyland]

@guntertien 聊天界面这个组件就相当复杂了

[lsbrucelincoln]

简单的聊天界面，可以参考quasar的http://quasar-framework.org/components/chat.html， @airyland ，不过我是觉得没必要，哈哈

[baimiaolei]

建议提供图片上传功能

[airyland]

@baimiaolei 上传不做封装，大家需求不一样，这个是个无底洞。

https://github.com/airyland/vux/blob/v2/src/demos/Uploader.vue

[BoringDays]

form preview 和 panel 能否考虑提供 slot，满足更多自定义的需求？

[airyland]

@BoringDays 建议看一下提问的智慧，你说的和希望能提供更多有用的组件以及你在吗一样没有任何细节。

[howyhuang]

@airyland 有页面按需加载的组件么，比如一个页面有2000px高 屏幕640px高 下拉到一定距离加载显示一块内容

[lmasdata]

@LaiXuechao 能不能提供下你写的上传图片组件？正好业务需求上也用到这。

[jsonviewer]

@lmasdata 代码我已经写在上面了 样式就是用的weui

[cucr]

侧边栏组件什么时候能够提供呢，谢谢

[zhengtulymGh]

建议Radio组件添加icon slot

[guntertien]

@airyland 作者你好，这个组件对于信息的确认和预览蛮重要；比如手机拍照、扫描某些图片，扫描信息自动填入input框中，如果扫描的信息部分有误，还可以通过手动修改输入框的信息，然后点击保存，点击取消进行重新操作。温馨提示：如果显示的信息条目太多，对于小屏幕手机会显示不下，模态框里面的内容做一个上下滚动查看的。

示例可以参考 jqweui的 Prompt组件 示例地址：http://jqweui.com/components#dialog

Best wishes

[airyland]

@guntertien 第一，需要输入大量的东西的需求不应该放在弹窗里，如果填写了不小心关闭或者退出又得重新填写，对用户不友好。第二，如果滚动查看一个div定高overflow就可以了，不需要在组件上做。

[guntertien]

@airyland 我再看看

[dangenius]

一个界面里有2个XButton，如何设置不同的颜色呢？ theme.less里的@button-primary-bg-color是全局的。

[airyland]

@dangenius 这种情况目前只能自行覆盖颜色。后面 vux-loader 可能 会实现自行注册按钮颜色。

[HansPeng]

@airyland 你好，现在的Grid组件默认一行显示3个GridItem，这个能否改成自定义，支持一行显示2个或者4个？谢谢

[airyland]

@HansPeng 使用 flexbox + 1px 样式 可以自定多宫格。

[greedying]

同求 Image preview

[lukai199121]

@airyland 你好，能不能开发一个类似Table的组件，或者就目前的组件来说，哪几个组件组合起来使用能够起到展示表格信息的作用？谢谢！

[zn3051644]

有没有考虑做个Tree选择 类似 collapse 用于通讯录的展示 效果类似于 一层一层展开

[wg5945]

@zn3051644 看一下cell的demo，里面有

[zn3051644]

上面那个图可能描述的不准确，实际上要基于cell做个树组件 这样的。

[lykgithub]

能否考虑增加一个侧滑面板吗？

[lishuhao]

能否考虑增加一个侧滑面板吗

[wg5945]

@lishuhao @lykgithub 可以看看 https://vux.li/demos/v2/?x-page=v2-doc-home#/component/popup

[Garfield-yin]

@jsonviewer 自己重新修改previewer组件，定义一个按钮，监听on-delete事件，当删除时触发： this.$emit('on-delete',this.photoswipe.getCurrentIndex()); 删除这个index 的图片。

[dgburn]

swiper可以拓展出凸出效果吗？像这样。

[SAOSO]

Scroller不在维护了。但是实际上现在移动端页面基础都是需要做上拉加载和下拉刷新的。 如果能补充这个组件。

[airyland]

@dgburn 暂时没有这个计划，因为现在实现上只会显示 100% 轮播宽度的部分，你可以使用第三方组件。 @SAOSO 主要是 scroller 的依赖作者不更新了，而我并没有打算接手维护，而且场景很多，出了很多问题，所以焦头烂额之下才放弃了。你可以看看 finger-move https://github.com/HcySunYang/finger-mover 或者使用第三方组件。

[dgburn]

好的 谢谢

[greedying]

希望新增一个toptip组件。可以参考 http://jqweui.com/components

[YiGuaIn]

好像目前的版本還沒有像mint-ui的index list組件；覺得挺實用的。

[wg5945]

@greedying

popup可以设置position，应该能够实现你的那个需求

https://vux.li/demos/v2/?x-page=v2-doc-home#/component/popup

[greedying]

@wg5945 看了下，可以满足需求，甚至可以做侧滑使用，谢谢

[wanghaijuan]

多行文本向上循环滚动

设置了height="30px"这个还是单行显示，height是设置每个swiper-item的高度，没有看到设置一次显示多少个swiper-item的属性

[airyland]

@wanghaijuan swiper-item 里样式是多行就行了。

[jjjachyty]

能否新增个 auto-complete 自动补全插件 显示和值分开