一、概述

Rate 评分组件，官方链接：https://element.eleme.cn/#/zh-CN/component/rate

二、辅助文字

用辅助文字直接地表达对应分数

test.vue

<template><div style="width: 20%"><el-ratev-model="value"show-text></el-rate></div>
</template><script>export default {data() {return {value: null}},methods: {},}
</script><style scoped></style>

View Code

效果如下：

在el-rate中有默认的辅助文字['极差', '失望', '一般', '满意', '惊喜']，如果我们想改成更酷的文字，我们需要自定义辅助文字

增加texts属性，完整代码如下：

<template><div style="width: 20%"><el-ratev-model="value":texts="texts"show-text></el-rate></div>
</template><script>export default {data() {return {texts:['差','一般','好','非常好','非常棒'],value: null}},methods: {},}
</script><style scoped></style>

View Code

效果如下：

本文参考链接：https://blog.csdn.net/qq_41883461/article/details/116801582

ElementUI Rate 评分相关推荐

css限制字体三行_讲道理，仅3行核心css代码的rate评分组件，我被自己秀到头皮发麻...
(给100素材网点亮★号,提升开发技能) 像rate评分组件一般都用javascript写,所以这次将是一个全新的尝试,用css实现一个rate评分 ❗ 核心代码也就三行?01效果图02原理主要是借助 ...
Concis组件库封装——Rate评分
Rate评分组件官方文档如下: 源码如下: import React, { FC, useState, useEffect, memo, useCallback } from 'react'; imp ...
Layui 实现rate评分点击后只读，动态rate控制只读，动态控制只读
废话不多说了..直接粘代码 layui.use(['rate'], function(){var rate = layui.rate;rate.render({elem: '#score',value ...
layui rate (评分组件）使用的一点经验分享
背景这几天在做管理后台的功能开发时需要添加一个可以进行标签打分的模块,方便后期对接单人员的信息收集根据需求,我选取的是常用的 layui.rate 组件在嵌入页面是发现: 如果直接在页面上 ...
vue2 在element-ui的rate组件中，使用iconfont的图标
背景: 在收到的设计稿里看到这么一个内容:20个人形图标,通过图标数目展示男女比例. 当然,通过计算的方式,使用div一个一个的把图标循环显示出来也不是不可以.但我是一个懒人,如果是有组件可用,一定是 ...
ElementUI组件库
官网:https://element.eleme.cn/#/zh-CN/component/installation npm 安装推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具 ...
Vue.js(十) element-ui PC端组件库
一:简介饿了么公司基于Vue开发了两套UI组件库,PC端组件库和移动端组件库. 一部分组件库是对原生的HTML标签元素的封装,增加了一些新的功能. 另一部分组件库是原生HTML标签元素没有的,是 ...
Element-UI组件之表单Form
Element-UI组件之表单Form Radio 单选框基础用法禁用状态单选框组按钮样式带有边框 Checkbox 多选框基础用法禁用状态多选框组 indeterminate 状态 ...
018_rate评分
1. rate评分 1.1. rate评分组件. 1.2. 评分属性参数说明类型默认值 value / v-model 绑定值 number 0 max 最大分值 number 5 disab ...

ElementUI Rate 评分

一、概述

二、辅助文字

ElementUI Rate 评分相关推荐

最新文章

热门文章