IMWEB-Vue 实现Select组件

来源：互联网发布：淘宝助理可以加水印吗编辑：程序博客网时间：2024/06/07 05:35

今天带来一个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>

0 0