vue + mui PopPicker select
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="../css/app.css" />
<link href="../css/mui.picker.css" rel="stylesheet" />
<link href="../css/mui.poppicker.css" rel="stylesheet" />
<!--<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />-->
<style>
.mui-btn {
font-size: 16px;
padding: 8px;
margin: 3px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">picker（选择器）</h1>
</header>
<div class="mui-content" id="app">
<div class="mui-content-padded">
<input @click="goto" readonly="readonly" type="text" placeholder="请选择外出单位" v-model="goIng">
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../examples/best-practices/list-to-detail/vue.min.js"></script>
<script src="../js/mui.picker.js"></script>
<script src="../js/mui.poppicker.js"></script>
<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
goIng: '', //外出单位
setData: [
{ value: 'aaa', text: '信息中心' },
{ value: 'bbb', text: '图文中心' },
{ value: 'ccc', text: '客服中心' }
], //外出单位的数据
},
methods: {
//外出单位
goto() {
let self = this;
let goto = new mui.PopPicker({//通过new mui.PopPicker()初始化popPicker组件
layer: 1 //显示列数
});
goto.setData(this.setData); //setData() 支持数据格式为: 数组
goto.show(function (e) { //e 就是总数据的数组 显示picker
self.goIng = e[0].text
})
}
}
})
</script>
</body>
</html>
