IMWeb训练营作业------仿SELECT

来源：互联网发布：摇骰子软件编辑：程序博客网时间：2024/06/05 03:14
完成截图

这里写图片描述
源码

<!DOCTYPE html><html lang="zh-cmn-Hans"><meta charset='utf-8'><title>IMWeb前端课程作业2</title><link rel="stylesheet" href="style.css"><script src="vue.js"></script></head><body>    <div id="app">        <div class="left">            <h2>地区</h2>            <custom-select btn="查询" :list="list1"></custom-select>        </div>        <div class="left">            <h2>日期</h2>            <custom-select btn="搜索" :list="list2"></custom-select>        </div>    </div>    <script>      // 父组件        Vue.component("custom-select", {            data: function() {                return {                    selectShow: false,                    val: ""                };            },            props: ["btn", "list"],            template: `<section class="warp">                    <div class="searchIpt clearFix" >                        <div class="clearFix">                            <input type="text" class="keyWord" :value="val"  @click="selectShow = !selectShow" />                            <input type="button" :value="btn">                            <span></span>                        </div>                        <custom-list                            v-show="selectShow"                            :list="list"                            @receive="changeValueHandle"                        ></custom-list>                    </div>                </section>`,            methods: {                changeValueHandle(value) {                    this.val = value;                    this.selectShow=false;                }            }        })        // 子组件        Vue.component("custom-list", {            props: ["list"],            template: `<ul class="list">                            <li v-for="item of list"  @click="selectValueHandle(item)">{{item}}</li>                        </ul>`,            methods: {                selectValueHandle: function(item) {                    this.$emit("receive", item);                }            }        })    // 实例        new Vue({            el: "#app",            data: {                list1: ["北京", "上海", "杭州"],                list2: ["17-02-17", "17-02-18", "17-02-19"]            }        });    </script></body></html>
0 0