国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

表單選項互斥問題(vue)

shiyang6017 / 2693人閱讀

摘要:最近有一個需求表單中有個多選框,而他們的選項是一樣的,但是如果其中一個選項被選擇之后,在另外個多選框里面就不能再選了。上代碼乒乓球放入不同的盒子選項互斥每個對象都有一個屬性,用來表示它屬于哪個盒子。

最近有一個需求:
表單中有3個多選框,而他們的選項是一樣的,但是如果其中一個選項被選擇之后,在另外2個多選框里面就不能再選了。
這樣的問題,讓我想到了“將乒乓球放入不同盒子”的例子。

上代碼

// index.html



    
        
        
        
        Document

        
        
    
    
        

乒乓球放入不同的盒子(選項互斥)

// main.js

const balls = Array(12)
    .fill(undefined)
    .map((v, i) => ({ id: i < 9 ? `0${i + 1}` : i + 1, category: null }))

const vm = new window.Vue({
    el: "#app",

    data: () => ({
        msg: "hahahhaha",
        balls,
        categories: ["red", "green", "blue"],
        currCategory: "red"
    }),

    computed: {
        ballList() {
            return this.balls.map(v => {
                let className = ["ping-pong-ball"]
                if (v.category) {
                    className.push(v.category)
                    if (v.category !== this.currCategory) {
                        className.push("disable")
                    }
                }
                return { ...v, className }
            })
        }
    },

    methods: {
        onBoxClick(category) {
            if (category !== this.currCategory) {
                this.currCategory = category
            }
        },

        onBallClick(id) {
            const ball = this.balls.find(v => v.id === id)
            if (ball) {
                ball.category = ball.category ? null : this.currCategory
            }
        }
    }
})
// styles.css

#app {
    user-select: none;
}

.ping-pong-list {
    display: flex;
    margin: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.ping-pong-ball {
    width: 50px;
    height: 50px;
    margin: 5px;
    border-radius: 50%;
    box-shadow: 0 0 10px 0 #aaa;
    text-align: center;
    line-height: 50px;
}

.ping-pong-list .ping-pong-ball {
    cursor: pointer;
}

.box-wrapper {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
}

.box {
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap-reverse;
    width: 300px;
    height: 200px;
    border: 10px solid;
    border-top-width: 0;
    cursor: pointer;
    transition: all 0.25s;
}

.box.red {
    border-color: rgb(238, 97, 97);
}

.box.green {
    border-color: rgb(97, 238, 156);
}

.box.blue {
    border-color: rgb(97, 146, 238);
}

.box.active {
    box-shadow: 0 10px 20px 0 #aaa;
}

.ping-pong-ball.red,
.box.red .ping-pong-ball {
    background-color: rgb(238, 97, 97);
}

.ping-pong-ball.green,
.box.green .ping-pong-ball {
    background-color: rgb(97, 238, 156);
}

.ping-pong-ball.blue,
.box.blue .ping-pong-ball {
    background-color: rgb(97, 146, 238);
}

.ping-pong-ball.disable {
    opacity: 0.25;
    pointer-events: none;
}

每個ball對象都有一個category屬性,用來表示它屬于哪個盒子。然后在渲染的時候,根據category來計算使用的類名。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101994.html

相關文章

  • Vue.js-表單與v-model

    摘要:學習筆記表單與表單與提供了指令,用于在表單類元素上雙向綁定數據。事實上,也是一個特殊的語法糖,只不過它會在不同的表單上智能處理。選擇的項復選框復選框單獨使用時,也是用綁定一個布爾值。復選框選擇列表當選中時,是一個,所以。 學習筆記:表單與v-model 表單與v-model Vue.js提供了v-model指令,用于在表單類元素上雙向綁定數據。 使用v-model后,表單控件顯示的值...

    jollywing 評論0 收藏0
  • Vue2.0 實現互斥

    摘要:需要實現如上圖的功能首次加載頁面,根據里的高亮對應的選項點擊某個選項,該選項高亮,其他去掉高亮代碼結構自我理解參考鏈接 showImg(https://segmentfault.com/img/bV8k6F?w=929&h=182); 需要實現如上圖的功能 1. 首次加載頁面,根據data里的catgoryId高亮對應的選項 2. 點擊某個選項,該選項高亮,其他去掉高亮 代碼結構: ...

    endiat 評論0 收藏0
  • 使用Vue渲染可配置表單--記一次問卷平臺項目

    摘要:相當于可以編輯問卷并提供問卷展示,數據統計的這么一個平臺。極大的節省了需要進行表單樣式修改的時間,同時,讓動態渲染表單成為一件可能且容易的事情。表單動態渲染剛好在項目之前,有過一次動態配置表單的嘗試通過字段自動生成表單及驗證。 近幾天來了個緊急項目,想要做一個內部版本的問卷星。相當于可以編輯問卷并提供問卷展示,數據統計的這么一個平臺。整個項目耗時不長,本著積淀和積累的原則,將過程中的...

    mcterry 評論0 收藏0

發表評論

0條評論

shiyang6017

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<