vue支持多列的选择框

最新推荐文章于 2024-10-08 14:41:10 发布

笋笋~

最新推荐文章于 2024-10-08 14:41:10 发布

阅读量587

点赞数

分类专栏：随记文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_35699198/article/details/118099307

版权

随记专栏收录该内容

88 篇文章 0 订阅

订阅专栏

样子：

使用：

<select-drapdown v-model="queryParams.product" :sd-list="productList" @change="changeProduct"></select-drapdown>

<script type="text/html" id="selectDrapdown">
	  <div class="select-drapdown" :class="stateActive?'state-active':''">
			<div class="select-drapdown-btn" @mouseenter="selectMouseenter" @mouseleave="selectMouseleave">
				<span class="select-drapdown-btn-value">{{ value.label }}</span>
				<i class="arrow-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 5"><g><g><polyline points="0.5 0.5 4.5 4.5 8.5 0.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/></g></g></svg>
				</i>
				<div class="select-drapdown-panel" :style="{'width': listWidth.width, 'column-count':  listWidth.count, '-webkit-column-count':  listWidth.count,'-ms-column-count':  listWidth.count,'-moz-column-count':  listWidth.count, }" @mouseenter="selectMouseenter" @mouseleave="selectMouseleave">
					<div class="select-drapdown-panel-tips"></div>
					<div class="select-drapdown-panel-item" v-for="(item, i) in sdList" :key="i" @click="handleItem(item)">{{ item.label }}</div>
				</div>
			</div>	
		</div>
	</script>

// 下拉选择
var selectDrapdown = {
    props: ['value', 'sdList'],
    data: function () {
        return {
            stateActive: false
        }
    },
    computed: {
        listWidth: function () {
            var count = 1
           if(!this.sdList || !this.sdList.length) {
               return {
                   count: count,
                   width: '80px'
               }
           } else {
                count = Math.ceil(this.sdList.length / 9)
               return {
                    count: count,
                    width: ( count * 80) + 'px' 
                }
           }
       } 
    },
    template: $('#selectDrapdown').html(),
    methods: {
        handleItem: function (item) {
            this.$emit('change', item)
            this.selectMouseleave()
        },
        selectMouseenter: function () {
            this.stateActive = true
        },
        selectMouseleave: function () {
            this.stateActive = false
        }
    }
}

var vm = new Vue({
    el: '#main',
    components: {
        'select-drapdown': selectDrapdown
    },
    data: {
        productList: [
            { label: 'a', ID: 0 },
            { label: 'b', ID: 1 },
            { label: 'c', ID: 2 },
            { label: 'd', ID: 3 },
            { label: 'e', ID: 4 },
            { label: 'f', ID: 5 },
            { label: 'g', ID: 6 },
        ],
        queryParams: {
            product: { label: '全部产品', ID: 0 }
        },
    },
    created: function () {
    },
    methods: {
        changeProduct: function (item) {
        }
    }
});

<style>
.select-drapdown {
    display: inline-block;
    color: #3E4552;
}
.select-drapdown  .select-drapdown-btn {
    position: relative;
    cursor: pointer;
    padding: 0 10px;
}
.select-drapdown  .select-drapdown-btn .arrow-icon {
    vertical-align: middle;
    display: inline-block;
    margin-left: 8px;
    width: 9px;
    height: 16px;
    line-height: 16px;
    transition: transform .3s;  
    margin-bottom: 3px;
}
.select-drapdown  .select-drapdown-btn,
.select-drapdown.state-active  .select-drapdown-btn .arrow-icon svg * {
    color: #3E4552;
    stroke: #3E4552;
}
.select-drapdown.state-active  .select-drapdown-btn .select-drapdown-btn-value,
.select-drapdown.state-active  .select-drapdown-btn .arrow-icon svg * {
    color: #2184FF;
    stroke: #2184FF;
}
.select-drapdown.state-active  .select-drapdown-btn .arrow-icon { 
    transform: rotateZ(180deg);
}

.select-drapdown .select-drapdown-panel{
    z-index: 100;
    position: absolute;
    background-color: #ffffff;
	box-shadow: 0px 5px 20px 0px rgba(51,57,85,0.25);
	border-radius: 5px;
    transition: transform .3s, opacity .3s;
    -webkit-transition: transform .3s, opacity .3s;
    transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    opacity: 0;
    max-height: 360px;
    padding:0 10px;
    box-sizing: border-box;
}

.select-drapdown .select-drapdown-panel .select-drapdown-panel-tips {
    position: absolute;
    top: -14px;
    left: 45px;
    margin-right: 17px;
    display: block;
    line-height: 0;
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent rgba(255,255,255,1);
    font-size: 0;
    filter: drop-shadow(0 -4px 4px rgba(0,0,0,0.1));
    -webkit-filter: drop-shadow(0 -4px 4px rgba(0,0,0,0.1));
    z-index: 0;
}

.select-drapdown.state-active .select-drapdown-panel{
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
    opacity: 1;
}
.select-drapdown .select-drapdown-panel-item {
    text-align: center;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select-drapdown .select-drapdown-panel-item:hover {
    color: #2184FF;
}
</style>