更新记录

1.0.0（2024-03-06） 下载此版本

初始化，有什么改进或者优化的地方，各位可在评论区留言，我很听劝 ^_^ ！

平台兼容性

BJL-rate 使用文档

属性说明

获取评分结果

使用 ref 获取

基础使用

<template>
    <BJL-rate  ref="rate"></BJL-rate>
    <button @click="rateEvent">点击输出结果</button>
</template> 

<script setup >
    import {ref} from 'vue'
    const rate=ref(null)
    function rateEvent ( ){
        console.log('输出==>',rate.value.scoreResult);
    }
</script>

默认选中

<template>
    <BJL-rate  ref="rate" defaultValue='一般'></BJL-rate>
    <button  @click="rateEvent">点击输出结果</button>
</template> 

<script setup >
    import {ref} from 'vue'
    const rate=ref(null)
    function rateEvent ( ){
        console.log('输出==>',rate.value.scoreResult);
    }
</script>

自定义数据

<template>
    <BJL-rate  ref="rate" :data="data" defaultValue='亲亲'></BJL-rate>
    <button  @click="rateEvent">点击输出结果</button>
</template> 

<script setup >
    import {ref} from 'vue'
    const rate=ref(null)

    //图片不生效情况下，请注意路径是否正确
    const data = ref([{
        name: '惊讶',
        imgN: "../../../../static/bb.png",
        imgY: "../../../../static/bb1.png",
        score: false,
    }, {
        name: '卖萌',
        imgN: "../../../../static/cc.png",
        imgY: "../../../../static/cc1.png",
        score: false,
    }, {
        name: '亲亲',
        imgN: "../../../../static/dd.png",
        imgY: "../../../../static/dd1.png",
        score: false,
    }, {
        name: '生气',
        imgN: "../../../../static/ee.png",
        imgY: "../../../../static/ee1.png",
        score: false,
    }, {
        name: '鄙视',
        imgN: "../../../../static/aa.png",
        imgY: "../../../../static/aa1.png",
        score: false,
    }])

    function rateEvent ( ){
        console.log('输出==>',rate.value.scoreResult);
    }
</script>

指定key值

<template>
    <BJL-rate  ref="rate" defaultKey="key" defaultValue='40'></BJL-rate>
    <button  @click="rateEvent">点击输出结果</button>
</template> 

<script setup >
    import {ref} from 'vue'
    const rate=ref(null)
    //图片不生效情况下，请注意路径是否正确
    const nativeData = ref([{
        name: '惊讶',
        imgN: "../../../../static/bb.png",
        imgY: "../../../../static/bb1.png",
        score: false,
        key:10
    }, {
        name: '卖萌',
        imgN: "../../../../static/cc.png",
        imgY: "../../../../static/cc1.png",
        score: false,
        key:20
    }, {
        name: '亲亲',
        imgN: "../../../../static/dd.png",
        imgY: "../../../../static/dd1.png",
        score: false,
        key:30
    }, {
        name: '生气',
        imgN: "../../../../static/ee.png",
        imgY: "../../../../static/ee1.png",
        score: false,
        key:40
    }, {
        name: '鄙视',
        imgN: "../../../../static/aa.png",
        imgY: "../../../../static/aa1.png",
        score: false,
        key:50
    }, ])

    function rateEvent ( ){
        console.log('输出==>',rate.value.scoreResult);
    }
</script>

自定义图片样式

<template>
    <BJL-rate  ref="rate" defaultValue='很满意' :imgStyle="{width: '100rpx',height: '100rpx'}"></BJL-rate>
    <button  @click="rateEvent">点击输出结果</button>
</template> 

<script setup >
    import {ref} from 'vue'
    const rate=ref(null)
    function rateEvent ( ){
        console.log('输出==>',rate.value.scoreResult);
    }
</script>

自定义文字样式

<template>
    <BJL-rate  ref="rate" defaultValue='强烈推荐' :Y_txtTtyle="{color:'#ffaa00'}" :N_txtTtyle="{color:'#29395d'}"></BJL-rate>
    <button  @click="rateEvent">点击输出结果</button>
</template> 

<script setup >
    import {ref} from 'vue'
    const rate=ref(null)
    function rateEvent ( ){
        console.log('输出==>',rate.value.scoreResult);
    }
</script>