伊人久久大香线蕉综合影视_日韩精品少妇无码受不了_71pao成人国产永久免费视频_国产伦片中文免费观看_国产高清无码麻豆精品_九色综合伊人久久富二代_日韩黄色精品_日韩A∨精品日韩精品无码

VUE 學(xué)習(xí)總結(jié)之簡單的Rate評(píng)分組件

2018-7-9    seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

說明

本組件基于element-ui 的圖標(biāo)庫(星星圖標(biāo))

第一步:

vue + webpack + element-ui 框架

第二步:

創(chuàng)建Rate.vue文件,實(shí)現(xiàn)雙向綁定分?jǐn)?shù)

第三部:

使用組件

代碼

在app.vue中引入組件


    
  1. <Rate v-model='value' size="32px">
  2. <span>{{value}} 分</span>
  3. </Rate>
import Rate from './components/Rate'

組件


    
  1. <template>
  2. <div class="Rating" :value='value'>
  3. <ul class="Rating-list">
  4. <li v-for="s in 5" @click="changeRate(s)">
  5. <i :class="s <= star ? 'el-icon-star-on':'el-icon-star-off'" :style='style'></i>
  6. </li>
  7. </ul>
  8. <slot></slot> <!--顯示用戶自定義內(nèi)容-->
  9. </div>
  10. </template>


    
  1. props: {
  2. size: { //父組件傳值設(shè)置字體大小
  3. type: String,
  4. default: '16px'
  5. },
  6. value: { //綁定value,與$emit實(shí)現(xiàn)雙向綁定
  7. type:Number,
  8. default:0
  9. }
  10. },
  11. data() {
  12. return {
  13. star: this.value, // 初始化
  14. style: {
  15. fontSize: this.size //通過prop傳值設(shè)置星星字體大小
  16. }
  17. }
  18. },
  19. methods: {
  20. changeRate(s) {
  21. this.star = s //更新當(dāng)前星星數(shù)量
  22. this.$emit('input', s); //將當(dāng)前星星數(shù)量s與v-model綁定
  23. }
  24. }

demo演示



日歷

鏈接

個(gè)人資料

存檔

亚东县| 类乌齐县| 珠海市| 大荔县| 安图县| 共和县| 勃利县| 临沭县| 买车| 响水县| 襄城县| 五家渠市| 呼和浩特市| 陵水| 马公市| 博客| 海兴县| 莒南县| 宜兰市| 惠东县| 周至县| 丰城市| 西丰县| 临澧县| 广河县| 晴隆县| 凌云县| 金沙县| 抚州市| 兴义市| 邢台市| 体育| 吴川市| 巫溪县| 思茅市| 广昌县| 杂多县| 丹阳市| 山丹县| 云和县| 江北区|