Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: 滚轮控制缩放,拖动图片查看 #44

Open
wants to merge 14 commits into
base: dev
Choose a base branch
from
Open

Feature: 滚轮控制缩放,拖动图片查看 #44

wants to merge 14 commits into from

Conversation

DeepenLau
Copy link

@DeepenLau DeepenLau commented Sep 17, 2019

Why

场景:
之前遇到一个问题,某些图片的尺寸在放大后 scale 固定为1,在视觉上看起来比原图还小,且不能缩放

需求:
(pc端)

  1. 希望加一个滚轮控制缩放
  2. 放到很大之后,图片会超出屏幕,希望拖动图片查看

How

Describe your steps:

  1. 点开图片
  2. 滚轮控制缩放
  3. 拖动图片查看
  4. 点击遮罩关闭
  5. 点击右上角关闭按钮关闭

Demo

img-preview-480

@netlify
Copy link

netlify bot commented Sep 17, 2019

Deploy preview for img-preview ready!

Built with commit 449b4f6

https://deploy-preview-44--img-preview.netlify.com

src/img-preview.vue Outdated Show resolved Hide resolved
src/img-preview.vue Outdated Show resolved Hide resolved
src/img-preview.vue Outdated Show resolved Hide resolved
src/img-preview.vue Outdated Show resolved Hide resolved
@lianghx-319
Copy link
Member

我认为如果增加这个功能,应该给一个开关。并不是所有人都需要滚动缩放的。
开启滚动缩放后的移动端行为特性是否符合预期也应该去验证一下。

@lianghx-319
Copy link
Member

最大缩放倍率也需要设置一下。

@eviIIt
Copy link
Contributor

eviIIt commented Sep 18, 2019

  • 需要定义一个开关是否开启滚动缩放(应该是prop, 默认关闭
  • 设置可放大的最大值(可以是prop, 有个默认最大值, 默认最大值不满足可以通过这个 prop 增加或减少

@lianghx-319
Copy link
Member

关闭按钮的层级比图片高一点,保证任何状态都能直接关闭

@DeepenLau
Copy link
Author

  • feat: 新增是否开启图片拖拽开关
  • feat: 新增是否开启滚轮缩放
  • feat: 新增最大滚轮缩放倍率
  • fix: 调整关闭按钮,层级最高
  • fix: 移动端保持原本的效果

由于在移动端没有相关的鼠标事件,所以在移动端(微信浏览器)测试效果符合预期
同时判断移动端关闭右上角关闭按钮,保持原有的移动端体验

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants