I【Mweb训练作业】 select 组件

最新推荐文章于 2021-09-27 23:56:27 发布

wi_tim

最新推荐文章于 2021-09-27 23:56:27 发布

阅读量275

点赞数

分类专栏： vue.js学习笔记

本文链接：https://blog.csdn.net/wi_tim/article/details/70368124

版权

vue.js学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

-----------------------------------------

这个基本安老师的思路完成的

——————————————

html js 源码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>自定义select</title>
	<link rel="stylesheet" type="text/css" href="./select.css">
    <script type="text/javascript" src="./vue.js"></script>
</head>
<body>
    <div id="app">
    	<div>
    		<h1>自定义下拉框1</h1>
    		<custom-select btns-value='查询' v-bind:list='list1'></custom-select>
            
             
    	</div>
    	<div>
    		<h1>自定义下拉框2</h1>
    		<custom-select btns-value='检索' v-bind:list='list2'></custom-select>
    	</div>
    </div>  
    <script type="text/javascript">
        
        //注册组件
         Vue.component("customSelect",{
                data:function(){
                    return {
                        selecshow:false,
                        val:"",
                    };
                },
                props:['btnsValue','list'],
               template: '<section><div class="searchInput" @click="selecshow=!selecshow" ><input type="text" class="keyWord" :value="val" /><input type="button" class="btn" :value="btnsValue"/> </div><custom-list v-show="selecshow" :list="list" v-on:receved="changeval"></custom-list></section>',
               methods:{
                changeval:function(value){
                 
                      this.val=value;
                }
              }
         });
         Vue.component("custom-list",{
              props:['list'],
              template:'<ul class="list" ><li v-for="item of list" @click="selected(item)">{{item}}</li></ul>',
              methods:{
                selected:function(item){
                    //需要自定义事件
                    this.$emit('receved',item);
                }
              }
         });
         
         new Vue({
            el:"#app",
            data:{
                 list1:['北京','上哈','广州','西安'],
                 list2:['三月','四月','五月','六月'],
            },
         })
    </script>
</body>
</html>

css

body{padding: 0;margin: 0;}
input,ul,li,div{padding: 0;margin: 0;}
ul,li {list-style-type: none}
#app {width: 800px; margin: 40px auto;}
/*#app div {width: 400px; float: left;}
#app div */
#app .searchInput {overflow: hidden;}
#app .searchInput .keyWord {width: 250px; height: 35px; border: 1px solid #ccc; border-radius: 6px; float: left;}
#app .searchInput  .btn {width:50px; height: 35px; float: left; }
#app .list { width: 252px;  }
#app .list li {display: block; width: 240px; padding-left:10px;  height: 30px; line-height: 30px; }
#app .list li:hover { border-radius: 6px;  background-color: red;}

-------------------------

效果

wi_tim

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
I【Mweb训练作业】 select 组件

-----------------------------------------这个基本安老师的思路完成的——————————————html js 源码自定义select 自定义下拉框1 自定义下拉框2
复制链接

扫一扫