vue2實(shí)現(xiàn)自定義樣式radio單選框

Ocean 發(fā)布于2019-08-29 14:14 / 1688人閱讀

摘要：先上效果主編已回復(fù)是否全部先取消所有選中項(xiàng)再設(shè)置當(dāng)前點(diǎn)擊項(xiàng)選中設(shè)置值，以供傳遞樣式

先上效果


  主編已回復(fù):
  
    
    {{item.label}}

js:

data() {
  return {
    radio: "1",
    radios:[
      {
        label: "是",
        value:"1",
        isChecked: true,
      },
      {
        label: "否",
        value:"2",
        isChecked: false,
      },
      {
        label: "全部",
        value:"3",
        isChecked: false,
      },
    ]
  }
},
methods: {
  check(index) {
    // 先取消所有選中項(xiàng)
    this.radios.forEach((item) => {
      item.isChecked = false;
    });
    //再設(shè)置當(dāng)前點(diǎn)擊項(xiàng)選中
    this.radio = this.radios[index].value;
    // 設(shè)置值，以供傳遞
    this.radios[index].isChecked = true;
    console.log(this.radio);
  }
}

樣式：

.radio-box{
  display: inline-block;
  position: relative;
  height: 25px;
  line-height: 25px;
  margin-right: 5px;
}
.radio {
  display: inline-block;
  width: 25px;
  height: 25px;
  vertical-align: middle;
  cursor: pointer;
  background-image: url(../../../common/images/radio.png);
  background-repeat: no-repeat;
  background-position: 0 0;
}
.input-radio {
  display: inline-block;
  position: absolute;
  opacity: 0;
  width: 25px;
  height: 25px;
  cursor: pointer;
  left: 0px;
  outline: none;
  -webkit-appearance: none;
}
.on {
  background-position: -25px 0;
}

GPU云服務(wù)器云服務(wù)器自定義按鈕樣式 radio單選實(shí)現(xiàn)自定義手勢(shì) 自定義如何實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/113015.html

相關(guān)文章

CSS魔法堂：改變單選框顏色就這么吹毛求疵！

摘要：前言是否曾經(jīng)被業(yè)務(wù)提出能改改這個(gè)單選框的顏色吧讓它和主題顏色搭配一下吧，然后苦于原生不支持換顏色，最后被迫自己手?jǐn)]一個(gè)湊合使用。設(shè)置為的樣式行為特征單選框的行為特征，明顯就是選中與否，及選中狀態(tài)的改變事件，因此我們必須保持對(duì)外提供事件。前言 ?是否曾經(jīng)被業(yè)務(wù)提出能改改這個(gè)單選框的顏色吧！讓它和主題顏色搭配一下吧！，然后苦于原生不支持換顏色，最后被迫自己手?jǐn)]一個(gè)湊合使用。若拋開(kāi)inpu...

freecode 2019-08-29 16:52 評(píng)論0 收藏0
vue2.0學(xué)習(xí)筆記（表單輸入綁定）

摘要：復(fù)選框當(dāng)選中時(shí)當(dāng)沒(méi)有選中時(shí)這里的和特性并不會(huì)影響輸入控件的特性，因?yàn)闉g覽器在提交表單時(shí)并不會(huì)包含未被選中的復(fù)選框。 1、基礎(chǔ)用法 v-model指令可以實(shí)現(xiàn)表單元素和Model中數(shù)據(jù)的雙向數(shù)據(jù)綁定。只能運(yùn)用在表單元素中（input、radio、text、address、email、select、checkbox、textarea）可以用 v-model 指令在表單、及元素上...

Seay 2019-08-23 18:35 評(píng)論0 收藏0
自定義單選框樣式以及獲取單選框的選中狀態(tài)

摘要：為其添加屬性區(qū)分微信還是支付寶微信支付寶獲取標(biāo)簽數(shù)組如果被選中則執(zhí)行以下代碼如果選中微信，則輸出反之輸出四自定義選中框樣式未選中的樣式不換行空格選中之后的樣式一、用戶可選擇微信支付或者支付寶支付單選框知識(shí)點(diǎn)...

沈儉 2019-08-23 14:33 評(píng)論0 收藏0
CSS3結(jié)合fontawesome字體實(shí)現(xiàn)自定義單選框復(fù)選框效果

摘要：經(jīng)常能看到別人做前端的時(shí)候，實(shí)現(xiàn)一些漂亮的復(fù)選框或單選框按鈕，由于現(xiàn)在項(xiàng)目原因，很多單選框和復(fù)選框看起來(lái)很不好看，于是，心血來(lái)潮打算自己實(shí)現(xiàn)了一遍。經(jīng)常能看到別人做前端的時(shí)候，實(shí)現(xiàn)一些漂亮的復(fù)選框或單選框按鈕，由于現(xiàn)在項(xiàng)目原因，很多單選框和復(fù)選框看起來(lái)很不好看，于是，心血來(lái)潮打算自己實(shí)現(xiàn)了一遍。一、首先上css代碼：其中，說(shuō)明我以注釋的形式寫(xiě)到里面；關(guān)于z-index我是基于...

hover_lew 2019-08-20 12:35 評(píng)論0 收藏0
一套基于vue2.0高質(zhì)量的UI框架，前期開(kāi)發(fā)中

摘要：使用屬性時(shí)選中的值為的值默認(rèn)值屬性類(lèi)型說(shuō)明組合中的所有全部禁用默認(rèn)值屬性類(lèi)型說(shuō)明組合中所有的尺寸默認(rèn)值屬性類(lèi)型說(shuō)明類(lèi)似這樣的數(shù)組，其中指定當(dāng)前項(xiàng)是否選中，為當(dāng)前項(xiàng)的文字描述默認(rèn)值組件組件組件組件組件組件組件組件寫(xiě)在前邊自己在業(yè)余時(shí)間開(kāi)發(fā)的一套基于vue的UI框架，初衷是在平時(shí)的開(kāi)發(fā)過(guò)程中，發(fā)現(xiàn)有很多業(yè)務(wù)利用現(xiàn)有的UI框架實(shí)現(xiàn)起來(lái)比較麻煩，另外自己也希望可以寫(xiě)一套可以盡量多的滿足業(yè)務(wù)...

explorer_ddf 2019-08-26 14:06 評(píng)論0 收藏0