更新记录

1.0.0(2024-03-06) 下载此版本

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


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue app-nvue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× ×

BJL-rate 使用文档

属性说明

属性名 类型 默认值 说明
data Object 自定义数据
defaultValue String | Number 默认选中数据,属性名默认为:name
defaultKey String 自定义默认选中的key值
imgStyle Object 自定义图片样式
Object N_txtTtyle 自定义未选中文字样式
Object Y_txtTtyle 自定义已选中文字样式

获取评分结果

使用 ref 获取

属性名 类型 默认值 说明
scoreResult Object | String 获取当前选中的值

基础使用

<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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问