v-viewer的应用

最近用到了v-viewer，使用方法：

main.js中配置

import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer, {
  defaultOptions: {
      button: true,
      navbar: true,
      title: false,
      toolbar: false,
  }
})

table中配置，因为viewer要求必须是list，对数据进行处理

 <el-table-column key="2" prop="s" label="s" width="200">
   <template scope="scope">
     <viewer :images="scope.row.s">
       <img v-for="src in scope.row.s" :src="src" :key="src" width="200"> 
     </viewer>
   </template>
 </el-table-column>

//canvas转图片
toImage() {
        console.log("toImage")
        for (var m in this.MoleData) {
            let canvas = document.getElementById('myCanvas')
            let s = this.MoleData[mole].C
            console.log(canvas)
            console.log(s)
            let options = {
                width: 200,
                height: 130,
                bondThickness: 1,
                atomVisualization: 'default',
                terminalCarbons: true,
                explicitHydrogens: true,
            }
            let smilesDrawer = new SmilesDrawer.Drawer(options)
            SmilesDrawer.parse(smiles, function (tree) {
                smilesDrawer.draw(tree, canvas, 'light', false)
            }, function (err) {
                console.log(err);
            })
            if (canvas) {
            	//此处将原本string数据存放进list中
                var srcList = []
                srcList.push(canvas.toDataURL("image/png"))
                this.MoleData[m].s = srcList
            }
        }
        // console.log(this.MoleData)
      },

调整viewer背景色，默认是透明度50%黑色，根据引入css文件位置，找到node_modules/viewerjs/dist/viewer.css,修改

/* .viewer-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
} */

.viewer-backdrop {
  background-color: rgba(255, 255, 255, 0.8);
}