项目中为实现风格灵活、轻量级的头像选择器，作者基于 Vue 创建了一个简单且可定制的组件。该组件使用 flex 布局、boxShadow 和 backgroundPosition 实现关键功能，并允许通过 slots 进行样式和组件的个性化。示例展示了在不加任何组件库样式和融入 Vuetify 风格后的效果。
Preface
项目中需要一个头像选择器，但经过调研，市面上的头像选择器（或者图片截取器）一方面风格固定，无法所用组件库风格融合，另一方面，为了做到尽善尽美，大家为选择器预设了许许多多的属性，这对于选择器本身而言是一种增强的效果，但对于具体的项目而言有些过重。于是实现一个简单、可定制（通过 slots）的头像选择器的想法诞生。
Example
不融入任何组件库时，头像选择器长这样：
在 vuetify 中，定制后：
Principle & Implement
原理上这个小组件没有任何技术含量：通过 flex 布局排列图像编辑区域与操作按钮区域、通过 boxShadow 实现遮罩层、通过更新 backgroundPosition 实现图片的移动、通过 canvas.toDataUrl 导出图片等等。
而定制化诸如 slider、button 等组件基于一系列 slots 以及组件 props，具体见
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
