zoukankan      html  css  js  c++  java
  • Rate 评分

    评分组件

    基础用法

    评分被分为三个等级,可以利用颜色对分数及情感倾向进行分级(默认情况下不区分颜色)。三个等级所对应的颜色用过colors属性设置,而它们对应的两个阈值则通过 low-threshold 和 high-threshold 设定。

     1 <div class="block">
     2   <span class="demonstration">默认不区分颜色</span>
     3   <el-rate v-model="value1"></el-rate>
     4 </div>
     5 <div class="block">
     6   <span class="demonstration">区分颜色</span>
     7   <el-rate
     8     v-model="value2"
     9     :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
    10   </el-rate>
    11 </div>
    12 
    13 <script>
    14   export default {
    15     data() {
    16       return {
    17         value1: null,
    18         value2: null
    19       }
    20     }
    21   }
    22 </script>
    View Code

    辅助文字

    用辅助文字直接地表达对应分数

    为组件设置 show-text 属性会在右侧显示辅助文字。通过设置 texts 可以为每一个分值指定对应的辅助文字。texts 为一个数组,长度应等于最大值 max

     1 <el-rate
     2   v-model="value3"
     3   show-text>
     4 </el-rate>
     5 
     6 <script>
     7   export default {
     8     data() {
     9       return {
    10         value3: null
    11       }
    12     }
    13   }
    14 </script>
    View Code

    其它 icon

    当有多层评价时,可以用不同类型的 icon 区分评分层级

    设置icon-classes属性可以自定义对应 3 个不同分段的图标。本例还使用void-icon-class指定了未选中时的图标类名。

     1 <el-rate
     2   v-model="value4"
     3   :icon-classes="['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']"
     4   void-icon-class="icon-rate-face-off"
     5   :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
     6 </el-rate>
     7 
     8 <script>
     9   export default {
    10     data() {
    11       return {
    12         value4: null
    13       }
    14     }
    15   }
    16 </script>
    View Code

    只读

    只读的评分用来展示分数,允许出现半星

    为组件设置 disabled 属性表示组件为只读,支持小数分值。

    此时若设置 show-score,则会在右侧显示目前的分值。

    可以提供 score-template 作为显示模板,模板为一个包含了 {value} 的字符串,{value} 会被解析为分值。

     1 <el-rate
     2   v-model="value5"
     3   disabled
     4   show-score
     5   text-color="#ff9900"
     6   score-template="{value}">
     7 </el-rate>
     8 
     9 <script>
    10   export default {
    11     data() {
    12       return {
    13         value5: 3.7
    14       }
    15     }
    16   }
    17 </script>
    View Code

    Attributes

    参数说明类型可选值默认值
    max 最大分值 number 5
    disabled 是否为只读 boolean false
    allow-half 是否允许半选 boolean false
    low-threshold 低分和中等分数的界限值,值本身被划分在低分中 number 2
    high-threshold 高分和中等分数的界限值,值本身被划分在高分中 number 4
    colors icon 的颜色数组,共有 3 个元素,为 3 个分段所对应的颜色 array ['#F7BA2A', '#F7BA2A', '#F7BA2A']
    void-color 未选中 icon 的颜色 string #C6D1DE
    disabled-void-color 只读时未选中 icon 的颜色 string #EFF2F7
    icon-classes icon 的类名数组,共有 3 个元素,为 3 个分段所对应的类名 array ['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']
    void-icon-class 未选中 icon 的类名 string el-icon-star-off
    disabled-void-icon-class 只读时未选中 icon 的类名 string el-icon-star-on
    show-text 是否显示辅助文字,若为真,则会从 texts 数组中选取当前分数对应的文字内容 boolean false
    show-score 是否显示当前分数,show-score 和 show-text 不能同时为真 boolean false
    text-color 辅助文字的颜色 string #1F2D3D
    texts 辅助文字数组 array ['极差', '失望', '一般', '满意', '惊喜']
    score-template 分数显示模板 string {value}

    Events

    事件名称说明回调参数
    change 分值改变时触发 改变后的分值
  • 相关阅读:
    start tag, end tag issues in IE7, particularly in xslt transformation
    用SandCastle为注释生成chm文档
    Firebug
    架构的重点
    Linux Shell常用技巧(十) 管道组合
    Linux JDK升级
    Linux Shell常用技巧(十二) Shell编程
    Packet Tracer 5.0实验(一) 交换机的基本配置与管理
    Linux Shell常用技巧(六) sort uniq tar split
    Linux Shell常用技巧(二) grep
  • 原文地址:https://www.cnblogs.com/grt322/p/8553343.html
Copyright © 2011-2022 走看看