el-rate入门学习

最新推荐文章于 2025-01-16 14:27:04 发布

自律最差的编程狗

最新推荐文章于 2025-01-16 14:27:04 发布

阅读量2.2k

点赞数

分类专栏： element-ui 文章标签：学习 elementui

本文链接：https://blog.csdn.net/qq_40765784/article/details/125104620

版权

element-ui 专栏收录该内容

43 篇文章

订阅专栏

el-rate入门学习

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id='app'>
        <el-form>
            <el-form-item label='基础用法'>
                <el-rate v-model='value1' @change='getValue(value1)'></el-rate>
            </el-form-item>
            <el-form-item label='区分颜色'>
                <el-rate v-model='value2' @change='getValue(value2)' :colors="colors"></el-rate>
            </el-form-item>
            <el-form-item label='文字提示'>
                <el-rate v-model='value3' @change='getValue(value3)' :colors='colors' show-text></el-rate>
            </el-form-item>
            
            <el-form-item label='只读可精确星级'>
                <el-rate v-model='value4' 
                 @change='getValue(value4)'
                 text-color='blue'
                 score-template="{value}"
                 show-score
                 disabled
                 ></el-rate>
            </el-form-item>
            <el-form-item label='图标显示'>
                <el-rate
                v-model='value5'
                @change='getValue(value5)'
                :icon-classes="iconClasses"
                void-icon-class='el-icon-shopping-bag-2'
                :colors='colors'
                :texts='texts'
                show-text
                ></el-rate>
            </el-form-item>
        </el-form>
    </div>
</body>
</html>

<script>
    new Vue({
        el:'#app',
        data:{
            value1:0,
            value2:0,
            value3:0,
            value4:3.7,
            value5:0,
            texts:['空','一点','一些','很多','满当当'],
            colors:['red','blue','green'],//小于三，等于三，大于三
            iconClasses:['el-icon-sold-out','el-icon-shopping-bag-1','el-icon-sell']
        },
        methods:{
            getValue(value){
                console.log(value)
            }
        }
    })
</script>

知识点

el-rate的colors属性，对应[三颗星以下颜色，三颗星，三颗星以上]
el-rate的show-text可以提示文字
el-rate的disabled，配合scope-template='{value}'设置分数模板，text-color设置分数颜色，星级可以精确显
el-rate的void-icon-class设置的是v-model/value为0时的图标
el-rate的icon-classes为[三个以下的图标，三个的图标，三个以上的图标]
el-rate的texts为[一星文本，二星文本，三星文本，四星文本，五星文本]