uview 中组件的复用

177 阅读1分钟

在项目中复用一些组件或者方法,可以使组件的功能更加灵活,适配多种场景。

比如某一个页面中,既包含新增数据的功能,又包含查看详情的功能,新增时可以上传图片,而在查看页面时,只需要简单的展示图片功能以及预览功能,不允许再上传。

很显然,大部分的代码和样式是相同的,但是单独来实现预览图片功能相对比较麻烦,样式也需要调整才能统一,一旦后续有需要修改的地方,维护很麻烦。此时就可以利用上传组件,改造成需要的样子,复用同一个组件。

关于uniapp 中的上传功能的改进

以 uView 为例(其它组件库功能也是类似的),u-upload 组件既支持预览图片,也可以隐藏删除按钮,当删除按钮隐藏时,也就无法再通过点击图片来重新上传。(u-upload 上传

image.png

预览的效果:

image.png

上传数量等于maxCount所规定的数据时,隐藏上传按钮。当获取到图片列表的数据是,将 maxCount 设为 列表长度即可。

<u-upload 
    :fileList="fileList" 
    :maxCount="fileList.length" 
    width="60" 
    height="60" 
    name="photo" 
    multiple 
    :previewFullImage="true" 
    :deletable="false"
>
</u-upload>

最终的效果:

image.png

除此之外,还有很多组件可以进行类似的复用操作,比如表单,在新增/编辑和查看这两种不同状态下,通过 readonly 属性控制是否允许输入,或者 使用disabled 属性来控制输入框是否禁用,在查看模式下,需要修改输入框的禁用颜色(u-input 可以直接设置 disabledColor 属性)

image.png