【Vue】3.屏幕自适应加滚动条

最新推荐文章于 2024-02-26 17:09:20 发布

Anabel Chen

最新推荐文章于 2024-02-26 17:09:20 发布

阅读量1k

点赞数 1

分类专栏：【Vue】文章标签： vue.js javascript 前端加滚动条

本文链接：https://blog.csdn.net/benben513624/article/details/129245282

版权

【Vue】专栏收录该内容

29 篇文章 3 订阅

订阅专栏

html部分：

<div class="xianZhongSwarp" ref="scrollDiv">
    <div 
        class="xianZhongType" 
        :class="[activited == item.value? '':activitedClass, commonClass]" 
        style="" 
        v-for="item in xianZhongList" 
        :key="item.value">
        <span @click="clickBySelected(item.value,$event)">{{item.label}}</span>
        <p class="xianZhongAdd" @click="addXianZhongGuiZeZu('1',item.value)">+</p>
    </div>
</div>

js部分：

export default {
    data(){
        return {
            commonClass:"xianZhongType",
            activitedClass:"xianZhongTypeActivited",
            xianZhongList:[{
                    value:"1",
                    label:"家安芯A款"
            },{
                value:"2",
                label:"家安芯B款"
            },
            {
                value:"3",
                label:"家安芯C款"
            },{
                value:"4",
                label:"家安芯D款"
            },
            {
                value:"5",
                label:"家安芯E款"
            }],
            activited:"1",
            dialogGuiZeListVisible:false
        }
    },
    methods:{
        clickBySelected(val,e){
            console.log(val, '=======选中的险种=======');
            this.activited = val;
        },
        /** 增加险种自核规则组 */
        addXianZhongGuiZeZu(type,flag){
            if(type == '0'){
                this.dialogGuiZeListVisible = true;
            }
            if(type == '1' && this.activited == flag){
                this.dialogGuiZeListVisible = true;
            }
            if(type == '1' && this.activited !== flag){
                this.dialogGuiZeListVisible = false;
            }
        },
    }
}

css部分：

.xianZhongSwarp{
    width: 100%;
    display: flex;
    overflow-x: scroll;
}
.xianZhongType{
    height: 30px;
    background: blue;
    border-radius: 5px;
    line-height: 30px;
    text-align: center;
    color: #ffffff;
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-left: 10px;
    padding-right: 10px;
}
.xianZhongType span{
    cursor: pointer;
}
.xianZhongAdd{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    color: blue;
    font-size: 18px; 
    font-weight: bold;
    line-height: 18px; // +号居中，行高要比高度小一点儿
    text-align: center;
    margin-left: 5px;
    cursor: pointer;
}
.xianZhongTypeActivited{
    opacity: 0.7;
}