Vue組件開發(fā)系列之Rate評分組件

組件源碼:
https://github.com/AntJavascript/widgetUI/tree/master/Rate

FireShot Capture 13 - nvx - http___localhost_8080_demo#_Rate.png

組件結構:

<template>
    <div class='wt-rate'>
      <wt-row>
        <div
        :class="[clicked >= index ? checkedIcon + ' checked' : icon, type]"
        v-for="(item, index) in ~~nubmer"
        @click="handle(item, index)"
        :key="index">
        </div>
      </wt-row>
    </div>
</template>

代碼分析:

props參數:

props: {
    nubmer: { // 組件顯示的數量
      type: Number | String,
      default: () => {
        return 5;
      }
    },
    currentIndex: { // 當前處于第幾個
      type: Number | String,
      default: () => {
        return -1;
      }
    },
    disable: { // 是否禁用
      type: Boolean,
      default: () => {
        return false;
      }
    },
    type: { // 組件類型教藻,(可選)主要是顏色的不同(可選值:"default", "danger", "success", "warning")
      type: String,
      default: () => {
        return 'default';
      }
    },
    icon: { // 默認顯示的圖片
      type: String,
      default: () => {
        return 'icon-favor';
      }
    },
    checkedIcon: { // 選中顯示的圖片
      type: String,
      default: () => {
        return 'icon-favor_fill';
      }
    }
  }

data參數:

data () {
    return {
      clicked: this._props.currentIndex // 父組件指定的選擇項
    };
  }

methods函數:

methods: {
    handle (item, index) {
      if (!this.disable) { // 不禁用才可以點擊
        this.clicked = index; 當前選中選項
        this.$emit('handle', index + 1); // 傳值父組件
      }
    }
  }

組件源碼:
https://github.com/AntJavascript/widgetUI/tree/master/Rate

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末绍哎,一起剝皮案震驚了整個濱河市赴叹,隨后出現的幾起案子叔扼,更是在濱河造成了極大的恐慌糖儡,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件唯鸭,死亡現場離奇詭異舱馅,居然都是意外死亡,警方通過查閱死者的電腦和手機烧颖,發(fā)現死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門弱左,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人炕淮,你說我怎么就攤上這事拆火。” “怎么了?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵们镜,是天一觀的道長币叹。 經常有香客問我,道長模狭,這世上最難降的妖魔是什么颈抚? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮嚼鹉,結果婚禮上邪意,老公的妹妹穿的比我還像新娘。我一直安慰自己反砌,他們只是感情好,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布萌朱。 她就那樣靜靜地躺著宴树,像睡著了一般。 火紅的嫁衣襯著肌膚如雪晶疼。 梳的紋絲不亂的頭發(fā)上酒贬,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機與錄音翠霍,去河邊找鬼锭吨。 笑死,一個胖子當著我的面吹牛寒匙,可吹牛的內容都是我干的零如。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼锄弱,長吁一口氣:“原來是場噩夢啊……” “哼考蕾!你這毒婦竟也來了?” 一聲冷哼從身側響起会宪,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤肖卧,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后掸鹅,有當地人在樹林里發(fā)現了一具尸體塞帐,經...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年巍沙,在試婚紗的時候發(fā)現自己被綠了葵姥。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡句携,死狀恐怖牌里,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤牡辽,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布喳篇,位于F島的核電站,受9級特大地震影響态辛,放射性物質發(fā)生泄漏麸澜。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一奏黑、第九天 我趴在偏房一處隱蔽的房頂上張望炊邦。 院中可真熱鬧,春花似錦熟史、人聲如沸馁害。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽碘菜。三九已至,卻和暖如春限寞,著一層夾襖步出監(jiān)牢的瞬間忍啸,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工履植, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留计雌,地道東北人。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓玫霎,卻偏偏與公主長得像凿滤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子庶近,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內容