DolphinHybrid
点我扫二维码，查看demo

# Rate 评分

# 介绍

显示评分和打分组件，可现实半颗星星效果

# 使用场景

1、列表中仅展示用
2、可操作给与评分；例如食谱食物等



# 基本样式

分为大（32px）、中（28px）、小（16px）三个尺寸
1、小号16px：只可查看无点击操作功能；多用于搜索结果等列表中展示
2、中号28px：可点击操作；多用于穿插展示的评分模快；
3、大号32px：可点击操作；多用于重点展示的评分页面


# 引入

通过以下方式来按需注册组件。

import Vue from 'vue';
import { Rate } from '@dolphin-iot/ui'

Vue.use(Rate);
1
2
3
4

# 代码演示

# 基础用法

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="demo-panel">
        <mx-rate v-model="value1"/>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: 3,
    };
  },
};
</script>
<style lang="scss" scoped>
.demo-list {
  > div {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .demo-panel {
    position: relative;
    padding-left: 18px;
    padding-top: 10px;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 自定义数量

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="demo-panel">
        <mx-rate :count="6"  v-model="value2" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value2: 3,
    };
  },
};
</script>
<style lang="scss" scoped>
.demo-list {
  > div {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .demo-panel {
    position: relative;
    padding-left: 18px;
    padding-top: 10px;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 自定义样式

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="demo-panel">
        <mx-rate color="#c0c0c0" activeColor="red" size="18px" v-model="value3" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value3: 3,
    };
  },
};
</script>
<style lang="scss" scoped>
.demo-list {
  > div {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .demo-panel {
    position: relative;
    padding-left: 18px;
    padding-top: 10px;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 滑动评分

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="demo-panel">
        <mx-rate :touchable="true" v-model="value4" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value4: 3,
    };
  },
};
</script>
<style lang="scss" scoped>
.demo-list {
  > div {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .demo-panel {
    position: relative;
    padding-left: 18px;
    padding-top: 10px;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 监听change事件

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="demo-panel">
        <mx-rate v-model="value5" @change="onChange"/>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value5: 3,
    };
  },
  methods: {
    onChange(value) {
      console.log('当前分值为',value)
    }
  }
};
</script>
<style lang="scss" scoped>
.demo-list {
  > div {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .demo-panel {
    position: relative;
    padding-left: 18px;
    padding-top: 10px;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 半星

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="demo-panel">
        <mx-rate :allow-half="true" v-model="value6" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value6: 2.5,
    };
  },
};
</script>
<style lang="scss" scoped>
.demo-list {
  > div {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .demo-panel {
    position: relative;
    padding-left: 18px;
    padding-top: 10px;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 禁用

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="demo-panel">
        <mx-rate disabled v-model="value7"/>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value7: 3,
    };
  },
};
</script>
<style lang="scss" scoped>
.demo-list {
  > div {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .demo-panel {
    position: relative;
    padding-left: 18px;
    padding-top: 10px;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# 只读

<template>
  <div class="demo-list">
    <div class="panel">
      <div class="demo-panel">
        <mx-rate :readonly="true" v-model="value8"/>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value8: 3,
    };
  },
};
</script>
<style lang="scss" scoped>
.demo-list {
  > div {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .demo-panel {
    position: relative;
    padding-left: 18px;
    padding-top: 10px;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# Api

# Props

参数 说明 类型 默认值 是否必须
value 评分分值 number 0 -
count 评分图标个数 number 5 -
size 评分尺寸, 可选值为: small middle large string | number middle -
gutter 评分图标之间的间隔 number 0 -
color 未评分之前图标颜色 string #c7c7cc -
active-color 评分后图标的颜色, 可填写的值为 string #FF9500 -
icon 未评分时的显示图标 string star-line -
active-icon 评分后显示的图标 string star -
disabled 是否禁用评分操作 boolean false -
readonly 是否只允许查看评分 boolean false -
touchable 是否可以滑动评分 boolean false -
allow-half 是否允许半星选择和显示 boolean false -

# Events

事件名称 说明 回调参数
change 改变评分后触发 value: 当前的分值
更新时间: 12/14/2021, 9:38:18 AM

← Radio 单选框 →