【vue随手笔记】MuseUI 自定义 select 适配 mobile
【vue随手笔记】MuseUI 自定义 select 适配 mobile
stormKid
发布于 2018-09-12 15:39:04
发布于 2018-09-12 15:39:04
文章被收录于专栏：计算机编程
说明：由于最近接手项目使用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
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018.09.03 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
