Element UI 的上传和评分

Upload 上传

通过点击或者拖拽上传文件。

  • 点击上传
    通过 slot 你可以传入自定义的上传按钮类型和文字提示。可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为。可通过设置before-remove来阻止文件移除操作。



  • 用户头像上传
    使用 before-upload 限制用户上传的图片格式和大小。



  • 照片墙
    使用 list-type 属性来设置文件列表的样式。



  • 文件缩略图
    使用 scoped-slot 去设置缩略图模版。



  • 图片列表缩略图



  • 上传文件列表控制
    通过 on-change 钩子函数来对列表进行控制。



  • 拖拽上传



  • 手动上传



  • Attribute




  • Slot


  • Methods


Rate 评分

评分组件。

  • 基础用法
    评分默认被分为三个等级,可以利用颜色数组对分数及情感倾向进行分级(默认情况下不区分颜色)。三个等级所对应的颜色用colors属性设置,而它们对应的两个阈值则通过 low-threshold 和 high-threshold 设定。你也可以通过传入颜色对象来自定义分段,键名为分段的界限值,键值为对应的颜色。



  • 辅助文字
    用辅助文字直接地表达对应分数。
    为组件设置 show-text 属性会在右侧显示辅助文字。通过设置 texts 可以为每一个分值指定对应的辅助文字。texts 为一个数组,长度应等于最大值 max。



  • 其它 icon
    当有多层评价时,可以用不同类型的 icon 区分评分层级。
    设置icon-classes属性可以自定义不同分段的图标。若传入数组,共有 3 个元素,为 3 个分段所对应的类名;若传入对象,可自定义分段,键名为分段的界限值,键值为对应的类名。本例还使用void-icon-class指定了未选中时的图标类名。



  • 只读
    只读的评分用来展示分数,允许出现半星。
    为组件设置 disabled 属性表示组件为只读,支持小数分值。此时若设置 show-score,则会在右侧显示目前的分值。可以提供 score-template 作为显示模板,模板为一个包含了 {value} 的字符串,{value} 会被解析为分值。



  • Attributes



  • Events


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容