Vux: 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 自动补全插件 显示和值分开

[wang1048076313]

上拉加载。下拉刷新的插件，订单量大的需要这个功能

[airyland]

@wang1048076313 已经不再维护的 scroller 是有你提的功能的，不过由于满足不了所有人各种复杂的需求放弃了，可以使用社区其他的 vue 组件。

[airyland]

@jjjachyty 在手机上 auto-complete 不是常见的需求。你可以举一些场景看看。

[jjjachyty]

@airyland 我需要在所有客户中选择其中一两个客户用做我的担保人，客户有很多，手机屏幕有限，不能像电脑一样弹出框选择，暂没有想到其他好的解决方案，目前觉得auto-complete很合适

[Jiiiiiin]

@airyland scroller的相关依赖是否可以在之后被踢出？

[airyland]

@jjjachyty 长选项列表建议使用 search + cell list 来解决，可以在新页面选择。

@Jiiiiiin 什么意思，不引用组件相关代码不会被引入？

[Jiiiiiin]

@airyland 没有被打入build之后的文件，只是建议

[browneyedape]

search 组件 搜索结果做成 <slot>

[browneyedape]

或者包含至少一个<slot>,以方便做其他操作，目的比如在slot里放置筛选工具

[airyland]

@browneyedape 应该是文档漏了，默认 slot 就是搜索结果所在位置。

https://github.com/airyland/vux/blob/v2/src/components/search/index.vue#L23

[zhouchang2017]

x-textarea 请问下这个组件，如何自动获得焦点

[vv13]

组件demo、接口文档、代码示例可否组织在一个页面展示？

[airyland]

@zhouchang2017 Safari 下无法实现。
@vv13 很快文档会改版了。

[fuerpeng]

cell的左滑删除，like this

[wg5945]

@fuerpeng 可以使用swipeout组件

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

[airyland]

@giiiiiit 自行解决，issue 不是这么提的。

[o624366705]

该框架是否可以用于基于 phonegap 打包的app开发 ?

[adophper]

@o624366705 可以，cordova

[ParkerFiend]

radio组件可否自定义选中的weui-icon-checked样式？

[wg5945]

@ParkerFiend 自行覆盖 .weui-icon-checked:before 的样式即可

[lbb00]

类似xinput这样的组件希望可以加一个属性，在用户没有点击时就可以产生验证并提示。

[lbb00]

range组件希望增加一个点击改变滑块位置的功能

[aliyoung]

和tabbar一样固定在底部的可自定义内容的footer组件有没有？

[airyland]

@aliyoung 这就是一个 fixed 定位的 div 吧。。

[susansjy]

是否可以考虑滚动监听？

[greedying]

可否增加一个简单的组件，显示时间。比如一个帖子发表后，时间显示 刚刚 或 五分钟前 等等

[suizhiwen]

Previewer只支持一组图片放大预览吗？请问假如有两组或者多组图片 怎么配置

[rochzp]

能否在picker组件中增加一个显示行数的属性啊，还有popup-picker、datetime等

[airyland]

@rochzp 不理解你想要什么效果，上个截图什么的吧。

[xiaolongyuan]

这个滑动组件不错 https://github.com/ustbhuangyi/better-scroll

[ghost]

提个建议，放到issue里也不对。
今天在先前vue-cli init 的项目里（未用vux模版），照官网文档装了vux包，配置了vux-loader，但在引入组件使用的时候，一直报vue-style-loader,css-loader的异常，未找到原因。后面没办法跟着官网又装了less-loader，才能正常使用。
建议在官网把必要包放到前面，或者在异常报告中提示一些更确的异常处理。

[wg5945]

@a346721573
并不是所有人都用less的

[airyland]

对于不想使用 vux2 模板想自己折腾的官网有详细文档，并没有遗漏 less，你跳过了某一步不算文档的坑。

报错是 webpack 调用时报错，vux-loader 没有这类检测依赖没有安装的功能

[ghost]

@airyland 好的，感谢指教，可能我理解偏差，把 快速入门 和 手动使用 理解成了两个部分。

[alvawu]

@airyland 想想分享
请教一下，search组件，建议可否做搜索结果slot？即可以由父组件决定如何显示结果。或者可以考虑用v-html？

[airyland]

@alvawu 默认slot就是结果 slot，你可以试试不指定结果自定义默认 slot。

[alvawu]

@airyland 我想我知道原因了，组件里面的slot，没有包住后面的div，所以造成无法替换组件定义的渲染内容。
我尝试改了下search的index.vue为

<slot>
<div class="weui-cell weui-cell_access" v-for="item in results" @click="handleResultClick(item)">
<div class="weui-cell__bd weui-cell_primary">
<p>{{item.title}}</p>
</div>
</div>
</slot>

可以实现到效果

可能我理解错了search的这个default slot的使用场景。

现在只是想找个方法去替换掉默认的显示结果 : )

[hrqde]

x-header 这个组件我里面写样式覆盖不了他默认的样式啊

[airyland]

@hrqde 请先学会怎么提问题。况且这个 issue 是用来收集建议不是用来反馈 bug 的。

[shijunti19]

希望Popover增加show参数，Popover=true就是进入页面就显示着，用来做新手指导。用css去实现总觉得不太好

[tong233]

希望加一个上拉菜单组件，类似微信公众号底部按钮 点击会出现的上拉菜单，和ElementUI的Dropdown组件，还能根据位置变成上拉或下拉菜单。免费使用我还提要求真是不好意思了。感谢作者大大，vux对我的帮助很大。

[wsjhdwzq]

希望能增加一个自定义键盘的功能，用户可以自定键盘中的候选文字，比如现在经常看到的车牌输入键盘

[Jiiiiiin]

项目不是万能的吧。 ：）

在 2017年10月31日，17:32，wsjhdwzq [e-mail] 写道：

希望能增加一个自定义键盘的功能，用户可以自定键盘中的候选文字，比如现在经常看到的车牌输入键盘
https://user-images.githubusercontent.com/18392803/32216940-6614ea00-be61-11e7-81e7-e684eb4a43d3.png
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/airyland/vux/issues/139#issuecomment-340707730, or mute the thread https://github.com/notifications/unsubscribe-auth/AIblvHlctxA7YFVJPWXnsSlJBZZ5q4SXks5sxulKgaJpZM4IOo5e.

[lirahalu]

建议加一个下拉多选的功能

[yuu2lee4]

keyboard num-keyborad . carnum-keyboard

[justnowanna]

@airyland 建议x-icon支持:type使用，因为我们的项目里面的菜单是循环路由出来的，每个菜单都是不同的icon，给每个路由加了一个icon属性，然后v-for的时候使用:type='item.icon', 结果发现是无效的。希望可以通过这种方式使用，不然就得把路由写死在页面里面，维护起来很不方便。

[airyland]

@justnowanna 目前是不支持的，原因是 x-icon 在解析时直接换成单个 svg 的形式，如果要实现动态意味着要把整个 ionicon svg 列表都得引入了。不过你可以手动直接 require vux/src/ 下面需要的 icon，动态切换。

[greedying]

用vif判断下，再封装一层

发自网易邮箱大师
在2017年11月21日 11:37，Airyland 写道：

@justnowanna 目前是不支持的，原因是 x-icon 在解析时直接换成单个 svg 的形式，如果要实现动态意味着要把整个 ionicon svg 列表都得引入了。不过你可以手动直接 require vux/src/ 下面需要的 icon，动态切换。

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[justnowanna]

@airyland 谢谢回复。@greedying 您的意思是先在页面里面把要用到的icon写死，然后用v-if来展示吗？这样好像跟写死差不多呀？
我现在在考虑要不要引入iconfont，http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=1832
这里也是inoicons的图标

[greedying]

本来也就是写死吧，无非是作者封装，还是你自己封装的问题。作者封装，就需要引入所有素材，你的话，则可以引入需要的，解决包过大问题

[kitkimwong]

@airyland
有計劃加入這種下拉select嗎？
https://vuematerial.io/components/select

現在的selector用起來就是原生的html select 在IOS上看起來不怎麼樣

[bailin240]

现在的 radio 禁用只能一次所以的禁用所有的 业务需求 状态只能向上改动不能向下 比如我现在在处理中 就不能向前面的状态修改 如果要做本来也是可以用两个数据源 但是感觉这样不好的吧 可不可单独设置那些需要禁用的呢

[airyland]

@kitkimwong 用 popup-radio 吧
@bailin240 没看懂，还是代码说明吧

[bailin240]

@airyland radio源数据可否禁用一部分不可点击 一部分可以点击选择 数据有不可操作项 现在的禁用属性是禁用所有斗不可操作嘛

[greedying]

关于panel的几点小需求：
1、图片可否自由选择放到左侧还是右侧？ 左右都是很普遍的。
2、图片目前限定是方形的，其他尺寸比例会有空白。可否自适应一下？比如使用 object-fit:cover 之类的属性？

[KarnaughK]

x-input 可否添加一个屏蔽表情输入的功能？

[yjj5855]

建议 添加一个form表单组件 来统一管理验证问题，像element-ui一样用async-validator验证库
目前我参考element-ui自己撸了一个，用起来是这样的

<bb-form ref="form">
        <group>
          <bb-input title="姓名" prop="name" v-model="value.basic.name" :rules="rules.basic.name"></bb-input>
          <bb-datetime title="出生年月" prop="birthday" v-model="value.basic.birthday" :rules="rules.basic.birthday"></bb-datetime>
          <bb-select title="证件类型" prop="idType" v-model="value.basic.idType" :options="selectOptions.idTypeCodeList" :rules="rules.basic.idType"></bb-select>
        </group>
</bb-form>

rules 就是async-validator的规则

#验证整个表单只要
this.$refs['form'].validate(function (valid) {
  if (valid) {
     // 验证成功
   }
})

#验证某个字段
this.$refs['form'].validateField('name', function (valid) {
  if (valid) {
     // 验证成功
   }
})

但是某些组件不能像XInput那样很容易的添加错误提示比如selector组件

[lbb00]

@yjj5855 cool.你的github name跟我一个朋友好像~

[airyland]

@yjj5855 统一验证这是在计划中的，不过暂时没有时间做。

[zn3051644]

建议做个模态窗的弹出 例如https://wangdahoo.github.io/vonic/docs/#/advanced/modal
这样的 @airyland

[sendking]

现如今的x-dialog是通过引组件的方式，一般dialog其实使用

Dialog.alert({
  title:'',
  content:'',
  handle:{
    onOk:()=>{},
    onClose:()=>{}
 }
})

类似这种形式即可满足需求。

如果是更加可定制化，弹出模态框的形式，往里面塞元素的形式是不是更加解耦一点?
参考: https://github.com/youzan/vant/blob/dev/packages/dialog/dialog.vue

[CongjiZhu]

我从2.1版本升级到2.9版本后，无法编译less
报错： error in ./~/[email protected]@vux/src/styles/1px.less
Module build failed: Unknown word (22:5)
20 | .vux-1px {
21 | &:before {

（已经安装less 和 less-loader）
如果我把less的文件全部删除，则会报错Uncaught TypeError: _vm.$t is not a function，关于$t的一些列报错，好磨人

[tangMr1234]

pannel组件的图片能否加上懒加载。希望pannel组件能加上slot，自定义一部分不同的样式，比如不想只是标题加简介，可能希望简介的地方能自定义样式，能写多个按钮或者其他的

[airyland]

@CongjiZhu 这种类似于升级到某个版本什么都没有做出错了但是没有 repo 的 issue 是无法解决的。

[ahkid]

希望能加入导航的下拉菜单组件 :)

[jjskay]

下拉刷新的组件为什么不维护了呢？这个在移动端不是很常用的功能吗？

[iamwelk]

swiper组件在自定义swiper-item时，如果嵌入了video元素，在微信中会导致无法左右滑动切换

[GuoJiKaiHehe]

Previewer 这个组件，打包后，占用了 1MB的大小。怎么优化？

[wxingheng]

一个完美的补充，包含完整的演示demo vux-uploads

新增 预览 删除 loading 。。。 包含完整的演示demo （包括服务端接口），已在公司项目使用

[eJayYoung]

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

毛遂自荐一下自己写的上传组件，样式和交互基本是按照WeUI来实现，已经在公司的实际项目上使用了
https://github.com/eJayYoung/vux-uploader-component
目前的需求是想增强图片预览功能，想引用Previewer，看能不能merge进去呢？