vue仿协程筛选菜单效果代码-html代码-BFW代码库

vue仿协程筛选菜单效果代码

代码语言：html

所属分类：搜索

代码描述：vue仿协程筛选菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <style>
    body
    {
        background: white;
        padding-top: 80px;
    }
        * {
            margin: 0px;
            padding: 0px;
        }

        i {
            font-style: normal;
            font-size: 14px;
            cursor: pointer;
        }

        .clearfix:after {
            display: block;
            content: '';
            clear: both;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        li {
            list-style: none;
        }

        .box {
            width:440px;
            padding: 5px 15px;
            margin: 10px auto;
            font-size: 14px;
            border: 2px solid #257BF6;
            border-radius: 5px;
        }

        .main .itemRow {
            padding: 5px 0px;
        }

        .hideFrame {
            margin: 0px 65px 0px 60px;
            background: #5ea4de17;
        }

        .hideItem {
            padding: 5px;
            color: #2098fdb5;
        }

        .nameFrame {
            width: 60px;
        }

        .btn {
            padding: 3px 8px;
            font-size: 12px;
            border-radius: 3px;
        }

            .btn span:first-child {
                vertical-align: middle;
            }

        .main dl dd {
            margin: 0px 5px;
            border: 1px solid #fff;
            padding: 0px 5px;
            border-radius: 5px;
        }

        .main dl .active {
            border: 1px solid #0086f6;
            color: #0086f6;
        }

        .selectFrame ul li {
            margin: 3px 5px;
            float: left;
            font-size: 12px;
            background: #0086f6;
            color: #fff;
            padding: 2px 5px;
        }

            .selectFrame ul li span {
                font-size: 10px;
            }

        .selectFrame .sureName {
            display: inline-block;
        }

        .selectFrame .sureBtn {
            color: #0086f6;
            font-size: 14px !important;
        }

        .btnFrame {
            text-align: right;
            padding: 5px 0px;
        }

            .btnFrame span {
                padding: 2px 5px;
                border: 1px solid #cdcdcd;
                color: #cdcdcd;
                border-radius: 3px;
                font-size: 10px;
            }

                .btnFrame span:last-child {
                    border: 1px solid #257BF6;
                    color: #257BF6;
                }

        .reset {
            font-size: 12px;
            color: #257BF6;
            cursor: pointer;
            margin-top: 5px;
        }
    </style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
</head>
<body>
    <div id="app">
        <div class="box">
            <div class="main" id="main">
                <div class="itemRow" v-for="(item,index) in list" key="index" v-show="item.itemRowShow">
                    <div class="showFrame clearfix">
                        <span class="fl nameFrame">{{item.name}}</span>
                        <dl class="fl clearfix">
                            <dd class="fl" v-for="(items,index) in item.itemList" key="index" class="{active:items.nameShow}" @click="itemClick(item.index,index)">{{items.name}}</dd>
                        </dl>
                        <div class="btn fr" style={background:item.itemState?'#0086f6':'#eef1f6'} @click="btnClick(item.index)">
                            <span>{{item.setName}}</span>
                            <span>+</span>
                        </div>
                    </div>
                    <div class="hideFrame clearfix" v-show="item.itemState">
                        <div class="fl hideItem" v-for="(int,index) in item.selectList" key="index">{{int}}</div>
                    </div>
                    <div class="btnFrame" v-show="item.itemState">
                        <span @click="cancelClick(item.index)">取消</span>
                        <span @click="sureClick(item.index)">确定</span>
                    </div>
                </div>
            </div>
            <div class="selectFrame clearfix">
                <span class="fl nameFrame">已选择</span>
                <ul class="fl selectList" id="selectList">
                .........完整代码请登录后点击上方下载按钮下载查看