<template>
<div>
<lc-title title="评分"></lc-title>
<category title="基本用法"></category>
<div>
<lc-cell>
<span slot="title"><lc-rate v-model="val"></lc-rate></span>
</lc-cell>
<lc-cell>
<span slot="title">当前分数：{{val}}分</span>
</lc-cell>
</div>
<category title="只读"></category>
<div>
<lc-cell>
<span slot="title"><lc-rate v-model="val2" :readOnly="true"></lc-rate></span>
</lc-cell>
<lc-cell>
<span slot="title">结果：{{val2}}</span>
</lc-cell>
</div>
<category title="自定义尺寸"></category>
<div>
<lc-cell>
<span slot="title"><lc-rate
:size="30"
></lc-rate></span>
</lc-cell>
</div>
<category title="事件"></category>
<div>
<lc-cell>
<span slot="title"><lc-rate @click="onClick"></lc-rate></span>
</lc-cell>
<lc-cell>
<span slot="title">结果：{{result}}</span>
</lc-cell>
</div>
<category title="自定义ICON"></category>
<div>
<lc-cell>
<span slot="title"><lc-rate
:checkedIcon="icon1"
:uncheckedIcon="icon2"
></lc-rate></span>
</lc-cell>
</div>
</div>
</template>
<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
components: { LcTitle, Category },
data(){
return{
val:4,
val2:2,
result:'',
result2:'',
icon1:`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zM6.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm2.16 3H4.34a6 6 0 0 0 11.32 0z'/%3E%3C/svg%3E")`,
icon2:`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM6.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm7 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 13h6a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2z'/%3E%3C/svg%3E")`
}
},
methods:{
onClick(idx){
this.result = '您点击了第'+idx+'个!';
},
onClick2(idx){
this.result2 = '您点击了第'+idx+'个!';
}
}
}
</script>
<style lang="less" scoped>
.demo{
padding-left:0;
padding-right:0;
}
h4{
padding:0 10px;
}
</style>
|
