Element Rate 评分的使用方法


Posted in Javascript onJuly 27, 2020

组件—评分

基础用法

Element Rate 评分的使用方法

<div class="block">
 <span class="demonstration">默认不区分颜色</span>
 <el-rate v-model="value1"></el-rate>
</div>
<div class="block">
 <span class="demonstration">区分颜色</span>
 <el-rate
  v-model="value2"
  :colors="colors">
 </el-rate>
</div>

<script>
 export default {
  data() {
   return {
    value1: null,
    value2: null,
    colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
   }
  }
 }
</script>
————————————————
版权声明:本文为CSDN博主「ForeverJPB.」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/GU_AO_SHI_TAI_DU/article/details/94563654

辅助文字

Element Rate 评分的使用方法

<div class="block">
 <span class="demonstration">默认不区分颜色</span>
 <el-rate v-model="value1"></el-rate>
</div>
<div class="block">
 <span class="demonstration">区分颜色</span>
 <el-rate
  v-model="value2"
  :colors="colors">
 </el-rate>
</div>

<script>
 export default {
  data() {
   return {
    value1: null,
    value2: null,
    colors: ['#99A9BF', '#F7BA2A', '#FF9900'] // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
   }
  }
 }
</script>

其它 icon

Element Rate 评分的使用方法

<el-rate
 v-model="value"
 :icon-classes="iconClasses"
 void-icon-class="icon-rate-face-off"
 :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate>

<script>
 export default {
  data() {
   return {
    value: null,
    iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
   }
  }
 }
</script>

只读

Element Rate 评分的使用方法

<el-rate
 v-model="value"
 disabled
 show-score
 text-color="#ff9900"
 score-template="{value}">
</el-rate>

<script>
 export default {
  data() {
   return {
    value: 3.7
   }
  }
 }
</script>

Attributes

Element Rate 评分的使用方法

Element Rate 评分的使用方法

Events

Element Rate 评分的使用方法

到此这篇关于Element Rate 评分的使用方法的文章就介绍到这了,更多相关Element Rate 评分内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js实现ASP分页函数 HTML分页函数
Sep 22 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
Jquery公告滚动+AJAX后台得到数据
Apr 14 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
vue模板语法-插值详解
Mar 06 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
浅析Vue 生命周期
Jun 21 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
Element InputNumber计数器的使用方法
Jul 27 #Javascript
基于Vue中的父子传值问题解决
Jul 27 #Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 #Javascript
JS图片懒加载技术实现过程解析
Jul 27 #Javascript
Element Notification通知的实现示例
Jul 27 #Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 #Javascript
Element Backtop回到顶部的具体使用
Jul 27 #Javascript
You might like
使用PHP批量生成随机用户名
2008/07/10 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
微信小程序实现点击返回顶层的方法
2017/07/12 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
自定义vue组件发布到npm的方法
2018/05/09 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
python 算法 排序实现快速排序
2012/06/05 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
Python实现最常见加密方式详解
2019/07/13 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
幼儿园数学教学反思
2014/02/02 职场文书
投标担保书范文
2014/04/02 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
公司市场部岗位职责
2015/04/15 职场文书
mysql全面解析json/数组
2022/07/07 MySQL