【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、通过第二步骤的思路构建布局:

<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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python小屋

Python爬虫基础:常用HTML标签和Javascript入门

大部分HTML标签是闭合的,由开始标签和结束标签构成,二者之间是要显示的内容,例如:<title>网页标题</title>。也有的HTML标签是没有结束标签的,...

1301
来自专栏Youngxj

hislider自适应幻灯片焦点图-emlog插件

1604
来自专栏林德熙的博客

win10 uwp 横向 AppBarButton

一般看到的 AppBarButton 都是图片在上面,文字在下面,是否可以更改让文字在和图片相同的位置?本文告诉大家如何做出横向的 AppBarButton 把...

831
来自专栏王二麻子IT技术交流园地

《跟我学IDEA》五、快捷键(编码利器)

上一篇博文,我们学习了idea的一些模版配置,但是只有模版是不行的,一款编辑器如何能为我们灵活的使用,快捷键的功劳不用多说大家也明白。今天我们就来学习快捷键的配...

3246
来自专栏快乐八哥

手动实现jQuery Tools里面tab功能

平时开发中用的Javascript类库都是jQuery,用到插件或者第三方类库能从jQuery Tools里面找到,基本不用其他的。当然有时同事喜欢使用jQue...

2309
来自专栏WindCoder

Jquery控制input与selected

当以form表单提交,diabled时无法获取数值,readonly可以获取到数值。

1811
来自专栏编程微刊

混合开发

1673
来自专栏前端小叙

input框取消光标颜色手机端不生效

<style> input{ color:transparent; } </style> <input value="我要隐藏光标"> //文字颜色可以...

4356
来自专栏编程微刊

网页里如何使用js屏蔽鼠标右击事件

在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只...

4183
来自专栏微信小程序开发

微信小程序开发-常见问题

知晓程序员,专注微信小程序开发的程序员! 好久没写文章,今天总结一下小程序开发过程中遇到的问题,有不对的地方,欢迎各位指正~ 1、域名必须是HTTPS 非HT...

5199

扫码关注云+社区

领取腾讯云代金券