【vue随手笔记】MuseUI 自定义 select 适配 mobile

说明：由于最近接手项目使用MUSE-UI 进行移动端开发，发现select组件在移动端上面不兼容，故另辟蹊径，通过本身适配的控件，自定义一个简易的selecter。

1、新建控件组件：

在src 目录下 新建一个 MySelect.vue

新建的vue.png

2、构建思路：

2.1、选择弹窗组件

自带弹窗组件有此控件可兼容mobile.png

2.2、选择单选组件

单选组件.png

2.3、结合flex进行简易布局

3、通过第二步骤的思路构建布局：

    
        {{title}}
        {{buttonName}}
    
    
        

            
                
            
        
    

4、自定义attr字段，从父组件读值：

自定义attr.png

5、父组件使用：

6、checked 事件监听点击选择变化：

源码如下：

checked源码.png

我们只用监听此源码即可监听到radio的状态改变。

于是我们之前布局的上面就带上checked，即有：

7、使用checked 事件的回调自定义方法：

这里通过自定义一个change方法来完成对radio单选值的监听，于是有：

 methods: {
        change(i, value) {
            this.$emit("update:result", value[i]);
            this.buttonName = value[i];
        }
    }

通过 emit将result值发给外部实现字父组件的双向绑定，于是父组件获取result值即：

调试效果：

调试效果.gif

8、隔离事件，弹窗关闭

以上写法，如若点击选择点击一个radio弹窗是不会关闭的
于是我们用此写法来使弹窗关闭：

说明：由于checked 监听非常频繁，源码中每单选一个选项，checked都会触发，所以通过匹配radio的index来进行显示弹窗关闭

8、在cordova打包后运行于5.1模拟器：

运行效果.gif

于是我们完成了museUI简易的select。

我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=slhmn39lyydq