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

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

1、新建控件组件：

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

新建的vue.png

2、构建思路：

2.1、选择弹窗组件

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

2.2、选择单选组件

单选组件.png

2.3、结合flex进行简易布局

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

<mu-container class="padding">
    <mu-flex justify-content="center" align-items="center">
        <b class="select-title">{{title}}</b>
        <mu-button flat ref="button" @click="open = !open">{{buttonName}}</mu-button>
    </mu-flex>
    <mu-popover placement="bottom" :open.sync="open" :trigger="trigger">
        <div class="select-control-group">
            <mu-flex class="select-control-row" :key="index" v-for="(i,index) in array">
                <mu-radio :value="index" v-model="normal.radio" :label="i" ></mu-radio>
            </mu-flex>
        </div>
    </mu-popover>
</mu-container>

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

自定义attr.png

5、父组件使用：

<template>
    <mu-container>
          <my-select title="交流类型" :array="jllxArr" ></my-select>
    </mu-container>
</template>
<script>
      import mySelect from "./MySelect.vue";
      
      export default {
        components: {mySelect},
        data(){
              return {
                  jllxArr:["aaaaa","bbbbb","ccccc","ddddd"]
              }
        }
      }
</script>

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

源码如下：

checked源码.png

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

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

      <mu-radio :value="index" v-model="normal.radio" :label="i" :checked=change(normal.radio,array)></mu-radio>

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

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

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

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

      <my-select title="交流类型" :array="jllxArr"  v-bind:result.sync="result"></my-select>

调试效果：

调试效果.gif

8、隔离事件，弹窗关闭

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

    <script>
        export default {
              data(){
                   tempIndex :0
              },
              methods:{
                  change(i, value) {
                    …… ……
                  if (this.tempIndex != i) {
                          this.open = false;
                          this.tempIndex = i;
                      }
                  }
              }
             
        }
    </script>

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

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

运行效果.gif

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

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