在项目中复用一些组件或者方法,可以使组件的功能更加灵活,适配多种场景。
比如某一个页面中,既包含新增数据的功能,又包含查看详情的功能,新增时可以上传图片,而在查看页面时,只需要简单的展示图片功能以及预览功能,不允许再上传。
很显然,大部分的代码和样式是相同的,但是单独来实现预览图片功能相对比较麻烦,样式也需要调整才能统一,一旦后续有需要修改的地方,维护很麻烦。此时就可以利用上传组件,改造成需要的样子,复用同一个组件。
关于uniapp 中的上传功能的改进
以 uView 为例(其它组件库功能也是类似的),u-upload 组件既支持预览图片,也可以隐藏删除按钮,当删除按钮隐藏时,也就无法再通过点击图片来重新上传。(u-upload 上传)
预览的效果:
上传数量等于maxCount所规定的数据时,隐藏上传按钮。当获取到图片列表的数据是,将 maxCount 设为 列表长度即可。
<u-upload
:fileList="fileList"
:maxCount="fileList.length"
width="60"
height="60"
name="photo"
multiple
:previewFullImage="true"
:deletable="false"
>
</u-upload>
最终的效果:
除此之外,还有很多组件可以进行类似的复用操作,比如表单,在新增/编辑和查看这两种不同状态下,通过 readonly 属性控制是否允许输入,或者 使用disabled 属性来控制输入框是否禁用,在查看模式下,需要修改输入框的禁用颜色(u-input 可以直接设置 disabledColor 属性)