vue-例5-19创建带提示的搜索框.html

最新推荐文章于 2024-04-05 22:29:42 发布

虾米大王

最新推荐文章于 2024-04-05 22:29:42 发布

阅读量182

点赞数

分类专栏： Vue 文章标签： css html 前端

本文链接：https://blog.csdn.net/modern358/article/details/129976764

版权

Vue 专栏收录该内容

661 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建带提示的搜索框</title>
    <style type="text/css">
        html,body{
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .main{
            width: 99%;
            margin: 100px auto 0;
            box-sizing: border-box;
        }
        .main-box{
            float: left;
            width: 45%;
            padding: 40px 0;
            border: 1px solid #999;
            background-color: #f05a10;
        }
        .main-work{
            width: 80%;
            min-height: 60px;
            margin: 0 auto;
            border-radius: 30px;
            background-color: #ededed;
        }
        .main-work .main-work-top{
            height: 60px;
            padding: 5px 3%;
        }
        .main-work .main-work-top input[type="text"]{
            width: 75%;
            height: 50px;
            margin: 0;
            padding: 0;
            border: 1px solid #999;
            border-radius: 25px;
            outline: none;
            box-sizing: border-box;
            background-color: #dedede;
            text-indent: 1em;
            font-size: 20px;
        }
        .main-work .main-work-top button{
            width: 20%;
            height: 50px;
            margin: 0;
            padding: 0;
            background-color: #ff6600;
            box-sizing: border-box;
            border-radius: 25px;
            font-size: 24px;
            line-height: 46px;
            color: #fff;
        }
        .main-work .main-work-bottom{
            width: 100%;
            margin: 0;
            padding: 5px 5%;
            border:none;
            box-sizing: border-box;
            list-style: none;
        }
        .main-work .main-work-bottom li{
            width: 75%;
            height: 36px;
            margin: 0;
            padding: 0;
            border-radius: 18px;
            list-style: none;
            text-indent: 1em;
            font-size: 20px;
            line-height: 36px;
            color: #666;
            cursor: pointer;
        }
        .main-work .main-work-bottom li:hover{
            background-color: #ff6600;
        }
        .left{
            float: left;
        }
        .clearfix:after{
            content: ".";
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="main clearfix">
            <main-work v-bind:btn="btnOne"></main-work>
        </div>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        Vue.component('main-work',{
            template:`
                <div class="main-work">
                    <div class="main-work-top clearfix">
                        <input type="text" class="left" v-model="input" v-on:focus="showSelectListFunc">
                        <button class="right">{{btn}}</button>
                    </div>
                    <main-work-list v-on:setvalue="setvalue" v-bind:show="showSelectList"></main-work-list>
                </div>
            `,
            props:['btn'],
            data:function () {
                return{
                    input:'',
                    showSelectList:false
                }
            },
            methods:{
                showSelectListFunc:function () {
                    this.showSelectList = true;
                },
                hideSelectListFunc:function () {
                    this.showSelectList = false;
                },
                setvalue:function (list,show) {
                    this.input = list;
                    this.showSelectList = !show;
                }
            }
        });

        Vue.component('main-work-list',{
            template: `
                <ul class="main-work-bottom" v-show="show">
                    <li v-for="list in lists" v-on:click="selectList(list)">{{list}}</li>
                </ul>
            `,
            props: ['show'],
            data:function () {
                return {
                    lists:[
                        'html+css',
                        'html5+css3',
                        'javascript',
                        'react',
                        'vue',
                        'iview',
                        'angular'
                    ]
                }
            },
            methods: {
                selectList:function (list) {
                    this.$emit('setvalue',list,this.show);
                }
            }
        });

        let vm = new Vue({
            el:'#app',
            data:{
                btnOne:'查询'
            }
        })
    </script>
</body>
</html>