记Viewer.js使用（文档内图片点击放大）

最新推荐文章于 2024-09-26 10:02:29 发布

Radish999

最新推荐文章于 2024-09-26 10:02:29 发布

阅读量1.3k

点赞数 1

先奉上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>
            ...

        )
     }
}