【IMWeb训练营作业】select 组件

最新推荐文章于 2017-04-25 20:50:29 发布

Acxlove

最新推荐文章于 2017-04-25 20:50:29 发布

阅读量279

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Acxlove/article/details/70344601

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用vue做一个select组件：

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="vue.js"></script>
</head>


<body>
    <!-- <table> 处理不符合w3c规则的 is="custom-select"
		<tr is="custom-select"><custom-select btn-value="搜索"></custom-select></tr>
	</table> -->
    <div id="app">
        <h2>自定义的下拉框1</h2>
        <custom-select btn-value="搜索" v-bind:list="list1"></custom-select>
        <h2>自定义的下拉框2</h2>
        <custom-select btn-value="呵呵" v-bind:list="list2"></custom-select>
    </div>
    <div id="app1"></div>
    <script type="text/javascript">
    /*var obj = {
    			selectShow:false
    		}*/
    //注册组件 全局
    Vue.component("custom-select", {
        data: function() {
            return {
                selectShow: false,
                val: ""
            };
        },
        props: ["btn-value", "list"],
        template: `
				<section class="warp">
					<div class="searchIpt clearFix">
					 	<div class="clraeFix">
					 		<input type="text" class="keyWord" :value="val"  @click="selectShow = !selectShow" >
					 		<input type="button" :value="btnValue">
					 		<span></span>
					 	</div>
					 <custom-list 
					 v-show="selectShow"
					  :list="list" 
					 v-on:receive="changeValueHandle"
					 >
					 </custom-list>
					 </div> 
				</section>
			`,
        methods: {
            changeValueHandle: function(value) {
            	//alert("wobeihcufa"+ value)
                this.val = value;
            }
        }
    });
    Vue.component("custom-list", {
        props: ["list"],
        template: `
			<ul class="list">
					 	<li v-for= "item in list" @click="selectValueHandle(item)">{{item}}</li>
					 </ul>`,
        methods: {
            selectValueHandle: function(item) {
                //在子组件交互父组件  需要出发一个自定义事件
                //console.log(item);
                this.$emit("receive", item);
            }
        }
    })


    var data = {
        list1: ["北京", "上海", "杭州"],
        list2: ["17-02-16", "17-03-16", "17-03-19"]
    }
    new Vue({
        el: "#app",
        //局部注册 只能在本对象#app下使用
        components: {
            /*"custom-select":`
            <section class="warp">
            	<div class="searchIpt clearFix">
            	 	<div class="clraeFix">
            	 		<input type="text" class="keyWord" value="">
            	 		<input type="button" value="GO">
            	 		<span></span>
            	 	</div>
            	 </div> 
            	 <ul class="list">
            	 	<li>1111</li>
            	 	<li>1111</li>
            	 	<li>1111</li>
            	 	<li>1111</li>
            	 	<li>1111</li>
            	 	<li>1111</li>
            	 	<li>1111</li>
            	 </ul>
            </section>
            `*/
        },
        data: data
    });
    </script>
</body>


</html>