跟随Element学习Vue小技巧(21)——Rate

七秒记忆的鱼
1,686 阅读4分钟
❝

闭上眼睛想象世界

你能看到奇迹

❞

前言

  • 三加二等于五。五加七等于十二 ... 二十六加五，三十一。哎 哟！一共是五亿一百六十二万二千七百三十一
  • 五亿一百万什么呀？
  • 几百万个小东西，这些小东西有时出现在天空中
  • 苍蝇吗？
  • 不是，是些闪闪发亮的小东西
  • 是蜜蜂吗？
  • 不是，是金黄色的小东西
  • 啊，是星星吗?
  • 对了，就是星星 天上星，亮晶晶, 你有多久没有数星星？
    准备好了吗？
    卸下疲惫，在草地上奔跑，在树林中小憩，在星空下数数
    当你仰望星空的时候，就会像是看到所有的星星都在微笑一般

1 Rate

半颗星

  • 老公，我肚子疼
  • 等会儿，游戏就快完了
  • 爱你100%
  • 。。。
  • 爱你90% 爱你80% 爱你70% 爱你60% 爱你50%
  • 我错了
  • 爱你40%
  • 我也爱你
  • 爱你30%
  • 给你买口红
  • 爱你20%
  • 给你买包
  • 爱你10%

您收到一个520红包

代码片段

<span
  v-for="(item, key) in max"
  :key="key">
  <i 
    ...
    class="el-rate__icon">
    <i
      v-if="showDecimalIcon(item)"
      ...
      class="el-rate__decimal">
    </i>
  </i>
</span>

技巧解析

❝

有充电宝吗？赶紧把电给充上 ^^
半颗星怎么做到的呢？
外层是灰色的星星，o(╥﹏╥)o
内层是高亮的星星，爱你有70%
剩下的30%，得再接再厉喔
努力！奋斗！
愿你成为夜空中最亮的那颗星❤

❞

作用域props

  • 滴 学生卡
  • 滴滴 工作卡
  • 滴滴滴 老年卡

上车请刷卡，但是到底刷多少呢？

余额不足，请充值，￣□￣｜｜

代码片段

showScore: {
  type: Boolean,
  default: false
},
textColor: {
  type: String,
  default: '#1f2d3d'
},
texts: {
  type: Array,
  default() {
    return ['极差', '失望', '一般', '满意', '惊喜'];
  }
},
scoreTemplate: {
  type: String,
  default: '{value}'
}

 text() {
  let result = '';
  if (this.showScore) {
    result = this.scoreTemplate.replace(/\{\s*value\s*\}/, this.rateDisabled
      ? this.value
      : this.currentValue);
  } else if (this.showText) {
    result = this.texts[Math.ceil(this.currentValue) - 1];
  }
  return result;
}

技巧解析

❝

发现没，不同类型props有不同默认值
值类型，直接使用，例如'#1f2d3d'
引用类型，必须使用function返回
模板类型的字符串倒是少见！！！
传入{value}，替换为值

❞
<el-rate
  v-model="value"
  disabled
  show-score
  text-color="#ff9900"
  score-template="平均分：{ value }分">
</el-rate>
❝

有没有想到什么呢？
袋子里面有惊喜，像不像作用域插槽
姑且称之为作用域props吧
又学了一招，不是吗 ^^

❞

工具箱

获取数字小数部分

valueDecimal() {
  return this.value * 100 - Math.floor(this.value) * 100;
}

是否有指定class

// 
export function hasClass(el, cls) {
  if (!el || !cls) return false;
  if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
  if (el.classList) {
    return el.classList.contains(cls);
  } else {
    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
  }
};

是否为对象

export function isObject(obj) {
  return Object.prototype.toString.call(obj) === '[object Object]';
}



「想要见他的话」 「去见他不就好了」

参考链接

往期回顾

avatar
文章
阅读
粉丝