您的位置：首页 > 产品设计 > UI/UE

IMWEB-Vue 实现Select组件

2017-04-22 21:21 549 查看
今天带来一个Select组件的实现。

首先，需要了解的是如何用Vue去实现一个组件？这个组件可以直接在HTML中以标签的形式存在。

Vue自带一个component函数来定义组件，其参数也是一个对象，其中，template属性就是我们Select的结构；props也是一个对象，用来存储外部传来的参数，相当于是连接外界和组件内部的一个桥梁。如果需要利用事件来改变某些数据从而改变某些结构的渲染情况，那么还需要在component参数中的对象加入data属性来定义数据，但这里的data必须为一个函数。

最终实现的效果如下图所示：



当点击文本框时，界面如下：



当然，这种是定义全局组件的方式，还有一种定义局部组件的方式。

直接在某个选项对象作用域中定义component:{key : value}的形式就可以。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
ul{
margin:0px;
padding:0px;
border-radius:3px;
}
ul li {
text-indent: none;
list-style: none;
/* border:1px solid gray;
border-radius:3px; */
}
li:hover{
background-color:rgba(200,3,12,0.8);
}
#outbox{
background-color:rgba(10,10,200,0.5);
width:60%;
position:relative;
}
#inbox{
width:100%;
}
ul{
width:100%;
}
#inp{
width:99%;
}
#gobtn{
border:0px solid red;
background-color:rgba(10,10,200,0.4);
border-radius:5px;
padding:3px;
position:absolute;
top:1px;
right:0px;
}
</style>

</head>
<body>
<div id="urs">
<custom-select btn-value="Search"></custom-select>
</div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<script>
Vue.component("custom-select", {                //利用Vue里面的component函数，先注册组件，然后再在html中引入组件名作为标签
props: ['btnValue'],
data: function(){        //data必须是一个函数
return {
selectShow : false
}
},
template: `<div id="outbox">
<input id="inp" type="text" @click = "selectShow = !selectShow" />
<input id="gobtn" type="button" :value = 'btnValue' />
<div id="inbox" v-show = "selectShow">
<ul>
<li>上海</li>
<li>北京</li>
<li>杭州</li>
<li>西安</li>
</ul>
</div>

</div>`
});

new Vue({
el:'#urs'
});
</script>
</body>
</html>


当然，其中的ul 部分也可以另外定义成一个组件，修改部分代码如下：

<script>
Vue.component("custom-select", {                //利用Vue里面的component函数，先注册组件，然后再在html中引入组件名作为标签
props: ['btnValue'],
data: function(){        //data必须是一个函数
return {
selectShow : false
}
},
template: `<div id="outbox">
<input id="inp" type="text" @click = "selectShow = !selectShow" />
<input id="gobtn" type="button" :value = 'btnValue' />
<div id="inbox" v-show = "selectShow">
<custom-list></custom-list>
</div>

</div>`
});

Vue.component("custom-list", {
template : `<ul>
<li>上海</li>
<li>北京</li>
<li>杭州</li>
<li>西安</li>
</ul>
`
})


然而，如果我们想要让两个组件传入不同的数值，那么需要用到props属性来获取参数；

若还需要在子组件中操作之后将数据返回给父组件，此时需要用到this.$emit()函数，将自定义事件返回给父组件；此时父组件要利用v-on来监听自定义事件的发生，并且在父组件要定义自定义事件的处理函数，其中事件处理函数中的参数可以通过之前的函数传参来实现.

最终的实现效果如下图：



整体代码附上：

<script>
Vue.component("custom-select", {                //利用Vue里面的component函数，先注册组件，然后再在html中引入组件名作为标签
props: ['btnValue', 'list'],
data: function(){        //data必须是一个函数
return {
selectShow : false,
val: ''
}
},
template: `<div id="outbox">
<input id="inp" type="text" @click = "selectShow = !selectShow" v-model = "val" />
<input id="gobtn" type="button" :value = 'btnValue' />
<div id="inbox" v-show = "selectShow">
<custom-list v-bind:list = "list" v-on:recieve = "recieveHandler($event)"></custom-list>
</div>

</div>`,
methods : {
recieveHandler: function(e){
//console.log(e.data);
this.val = e.data;
this.selectShow = false;
}
}
});

Vue.component("custom-list", {
props: ['list'],
template : `<ul>
<li v-for='item of list' @click = "selectValue(item)">{{item}}</li>
</ul>
`,
methods : {
selectValue : function(e){
//要把数据传回给父组件
this.$emit("recieve", {data : e});
}
}
})

new Vue({
el:'#urs',
data : {
list1 : ['上海', '北京', '杭州', '西安'],
list2 : ['上海交大', '北大', '浙大', '西电']
}
});
//如果想要两个组件里面的list显示不同的内容，就需要传参进去
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Vue javascript
相关文章推荐
新的分享
章节导航