记Viewer.js使用(文档内图片点击放大)

先奉上GitHub:https://github.com/fengyuanchen/viewerjs

演示地址:https://fengyuanchen.github.io/viewerjs/

注:代码中参数不一 一 讲解请点击上面链接查看详细说明

笔者使用场景: markdown生成的html 点击图片有放大效果 类似掘金等网站的效果

import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';



class WikiPage extends Component {
    ...


 getImg = ()=>{
    if(this.viewer){ //判断是否已经实例 是则销毁 以免切换路由导致图片无法更新
      this.viewer.destroy();
    }
    this.viewer = new Viewer(document.getElementById('scroll'), {
      show (){
        this.viewer.update();
      },
      viewed() {
        this.viewer.zoom(0)
      },
      container: 'body',
      toolbar: false,
      navbar: false,
      movable: false
    });
  }

    ...

    render(){
        return(

            ...
                <div
                  className="tui-editor-contents"
                  id="scroll"
                  dangerouslySetInnerHTML={{ __html: desc }}
                />
                </div>
            ...

        )
     }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值