Skip to content

Commit 3103169

Browse files
kouchaokouchao
committed
新增 评分组件，新增 评分demo
1 parent c2467db commit 3103169

File tree

7 files changed

+236
-3
lines changed

7 files changed

+236
-3
lines changed

‎src/App.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,8 @@
8383
</template>
8484
<lay-menu-child-item title="弹出层" :to="{name: 'layer'}"></lay-menu-child-item>
8585
<lay-menu-child-item title="分页" :to="{name: 'laypage'}"></lay-menu-child-item>
86+
<lay-menu-child-item title="评分" :to="{name: 'rate'}"></lay-menu-child-item>
87+
8688
</lay-menu-item>
8789

8890
</lay-menu>

‎src/assets/layui.css

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1727,6 +1727,34 @@ a cite {
17271727
color: #666 !important
17281728
}
17291729

1730+
.layui-co-red {
1731+
color: #FF5722 !important
1732+
}
1733+
1734+
.layui-co-orange {
1735+
color: #FFB800 !important
1736+
}
1737+
1738+
.layui-co-green {
1739+
color: #009688 !important
1740+
}
1741+
1742+
.layui-co-cyan {
1743+
color: #2F4056 !important
1744+
}
1745+
1746+
.layui-co-blue {
1747+
color: #1E9FFF !important
1748+
}
1749+
1750+
.layui-co-black {
1751+
color: #393D49 !important
1752+
}
1753+
1754+
.layui-co-gray {
1755+
color: #eee !important;
1756+
}
1757+
17301758
.layui-badge-rim, .layui-colla-content, .layui-colla-item, .layui-collapse, .layui-elem-field, .layui-form-pane .layui-form-item[pane], .layui-form-pane .layui-form-label, .layui-input, .layui-layedit, .layui-layedit-tool, .layui-quote-nm, .layui-select, .layui-tab-bar, .layui-tab-card, .layui-tab-title, .layui-tab-title .layui-this:after, .layui-textarea {
17311759
border-color: #e6e6e6
17321760
}

‎src/components/rate/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* kouchao 创建于 2018/8/27
3+
*/
4+
5+
import LayRate from './src/rate';
6+
/* istanbul ignore next */
7+
LayRate.install = function(Vue) {
8+
Vue.component(LayRate.name, LayRate);
9+
};
10+
11+
export default LayRate;

‎src/components/rate/src/rate.vue

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<template>
2+
<div class="layui-inline">
3+
<ul class="layui-rate" @mouseleave="handleMouseLeave()" :readonly="disabled">
4+
<li class="layui-inline" v-for="(item, index) in rates">
5+
<i class="layui-icon"
6+
@mousemove="handleMouseMove(index, $event)"
7+
@click="handleClick()"
8+
:class="[{
9+
'layui-icon-rate-solid': item == 1,
10+
'layui-icon-rate-half': item == 0.5,
11+
'layui-icon-rate': item == 0
12+
},
13+
'layui-co-' + theme]"
14+
:style="color ? 'color: ' + color : ''"></i>
15+
</li>
16+
</ul>
17+
<span class="layui-inline" v-if="showText || showScore">
18+
<span v-if="showScore">
19+
<slot :rate="value"></slot>
20+
</span>
21+
<span v-if="showText && !showScore && texts">{{texts[value] || ''}}</span>
22+
</span>
23+
</div>
24+
25+
</template>
26+
27+
<script>
28+
export default {
29+
name: 'LayRate',
30+
props: {
31+
max: {
32+
type: Number,
33+
default: () => 5
34+
},
35+
disabled: {
36+
type: Boolean,
37+
default: () => false
38+
},
39+
allowHalf: {
40+
type: Boolean,
41+
default: () => false
42+
},
43+
value: {
44+
type: Number,
45+
default: () => 0
46+
},
47+
// 是否显示当前分数，show-score 和 show-text 不能同时为真 show-score优先展示
48+
showScore: {
49+
type: Boolean,
50+
default: () => false
51+
},
52+
// 是否显示文字，show-score 和 show-text 不能同时为真 show-score优先展示，必须定义texts
53+
showText: {
54+
type: Boolean,
55+
default: () => false
56+
},
57+
texts: Object,
58+
theme: String,
59+
color: String
60+
},
61+
data(){
62+
return {
63+
rates: [],
64+
rate: 0
65+
}
66+
},
67+
mounted(){
68+
this.rate = this.value
69+
this.setRates()
70+
},
71+
methods: {
72+
setRates(){
73+
const {rate, max, allowHalf} = this
74+
const rates = []
75+
for (let i = 0; i < max; i++) {
76+
if(rate - i > 0){
77+
rate - i < 1 && allowHalf ? rates.push(0.5) : rates.push(1)
78+
} else {
79+
rates.push(0)
80+
}
81+
82+
}
83+
this.rates = rates
84+
},
85+
handleMouseMove(key, e){
86+
if(this.disabled){
87+
return false
88+
}
89+
const offset = e.offsetX > 10 || !this.allowHalf ? 1 : 0.5
90+
this.rate = key + offset
91+
this.setRates()
92+
},
93+
handleMouseLeave(){
94+
if(this.disabled){
95+
return false
96+
}
97+
this.rate = this.value
98+
this.setRates()
99+
},
100+
handleClick(){
101+
if(this.disabled){
102+
return false
103+
}
104+
this.$emit('input', this.rate)
105+
this.$emit('change', this.rate)
106+
}
107+
},
108+
watch: {
109+
value(){
110+
this.rate = this.value
111+
this.setRates()
112+
}
113+
}
114+
}
115+
</script>
116+
117+
<style>
118+
119+
</style>

‎src/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,7 @@ import LayTableColumn from '@/components/table-column'
4242
import LayAlert from '@/components/alert'
4343
import LaySwitch from '@/components/switch'
4444
import LayPagination from '@/components/pagination'
45-
46-
45+
import LayRate from '@/components/rate'
4746

4847
const layui = {
4948
config: {},
@@ -91,7 +90,8 @@ const layui = {
9190
LayTableColumn,
9291
LayAlert,
9392
LaySwitch,
94-
LayPagination
93+
LayPagination,
94+
LayRate
9595
]
9696
components.forEach(function (component) {
9797
Vue.component(component.name, component)

‎src/router.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import Animation from './views/Animation.vue'
1717
import Admin from './views/Admin.vue'
1818
import Layer from './views/Layer.vue'
1919
import Laypage from './views/Laypage.vue'
20+
import Rate from './views/Rate.vue'
2021

2122
Vue.use(Router)
2223

@@ -106,6 +107,11 @@ export default new Router({
106107
path: '/laypage',
107108
name: 'laypage',
108109
component: Laypage
110+
},
111+
{
112+
path: '/rate',
113+
name: 'rate',
114+
component: Rate
109115
}
110116

111117

‎src/views/Rate.vue

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<template>
2+
<div>
3+
<lay-block title="基础效果"></lay-block>
4+
<lay-rate v-model="rate"></lay-rate>
5+
6+
<lay-block title="显示文字(自定义)"></lay-block>
7+
8+
<lay-rate v-model="rate" show-score>
9+
<template slot-scope="scope" >
10+
{{scope.rate}} 星
11+
</template>
12+
</lay-rate>
13+
<lay-block title="半星效果"></lay-block>
14+
<lay-rate v-model="rateHalf" allow-half></lay-rate>
15+
<br>
16+
<lay-rate v-model="rateHalf" allow-half show-score>
17+
<template slot-scope="scope">
18+
{{scope.rate}} 星
19+
</template>
20+
</lay-rate>
21+
<lay-block title="自定义内容"></lay-block>
22+
<lay-rate v-model="rate" :texts="texts" show-text></lay-rate>
23+
<lay-block title="自定义长度"></lay-block>
24+
<lay-rate v-model="rate" :max="4"></lay-rate>
25+
<br>
26+
<lay-rate v-model="rate" :max="8"></lay-rate>
27+
<lay-block title="只读"></lay-block>
28+
<lay-rate v-model="rate" disabled></lay-rate>
29+
<lay-block title="自定义主题色"></lay-block>
30+
<lay-rate v-model="rate" theme="orange"></lay-rate>
31+
<br>
32+
<lay-rate v-model="rate" theme="green"></lay-rate>
33+
<br>
34+
<lay-rate v-model="rate" theme="blue"></lay-rate>
35+
<br>
36+
<lay-rate v-model="rateHalf" theme="cyan" allow-half></lay-rate>
37+
<br>
38+
<lay-rate v-model="rateHalf" color="#FF5722" allow-half></lay-rate>
39+
40+
</div>
41+
42+
</template>
43+
44+
<script>
45+
export default {
46+
name: "Rate",
47+
data() {
48+
return {
49+
rate: 3,
50+
rateHalf: 2.5,
51+
texts: {
52+
'1': '极差',
53+
'2': '及格',
54+
'2.5': '良好',
55+
'3': '良好',
56+
'4': '优秀',
57+
'5': '满分'
58+
59+
}
60+
}
61+
}
62+
}
63+
</script>
64+
65+
<style scoped>
66+
67+
</style>

0 commit comments

Comments
 (0)