微信小程序基于mpvue的ui组件之选择器

第一次自己开发组件,希望大家能够指出错误的地方或者改进的思路~

先上图片

微信小程序基于mpvue的ui组件之选择器_第1张图片

主页面

微信小程序基于mpvue的ui组件之选择器_第2张图片

选中状态

微信小程序基于mpvue的ui组件之选择器_第3张图片

返回结果

 

说明,该UI组件是为小程序而开发的,能够对传入的参数进行处理,最多加载四个选择器,最少一个

创建文件Vselect.vue并复制代码进去






vue组件的引用这边不在说了......

在static下面新建images文件夹放图片。

                                                                                 

choose.png                   choose-active.png                    tack.png

然后父组件页面






然后当你选择一个选项后会返回一个数组

微信小程序基于mpvue的ui组件之选择器_第4张图片

数组在索引0的位置有值说明选择了第一个选择器的内容,空值则代表没选择。

200代表选择的200元所对应的value值

微信小程序基于mpvue的ui组件之选择器_第5张图片

喜欢就给我点个赞呗~

你可能感兴趣的:(微信小程序基于mpvue的ui组件之选择器)