-
quill Cannot import modules/emoji-toolbar. Are you sure it was registered?
2021-01-02 12:49:00emoji-toolbar': true, 'emoji-textarea': true, 'emoji-shortname': true } }, messageLength: 0, maxLength: 2000 } }, watch: { content: function (val) { this.messageLength &... -
vue 图片-点击放大预览-好用的插件-v-viewer
2020-05-25 15:43:34cnpm install --save-dev v-viewer main.js 引用 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer, { defaultOptions: { zIndex: 9999, title: false, //显示标题 navbar:...- 安装依赖
cnpm install --save-dev v-viewer
- main.js 引用
import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer, { defaultOptions: { zIndex: 9999, title: false, //显示标题 navbar: false, toolbar: { zoomIn: 1, zoomOut: 1, reset: 1, oneToOne: 1, rotateRight: 1, rotateLeft: 1, } } })
- 页面组件中使用,images必须是一个数组,数组内直接放入图片链接即可
<viewer :images="images"> <img :src="getObjectURL(value)" /> </viewer>
参考:https://zhuanlan.zhihu.com/p/55117558
-
v-viewer的应用
2020-08-17 14:05:54最近用到了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, ...最近用到了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); }
-
使用v-viewer点击图片预览的组件封装
2020-09-25 16:14:421.下载v-viewer npm install v-viewer -S ... import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.... Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'too1.下载v-viewer
npm install v-viewer -S
2.main.js中引入注册
import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
3.封装成组件
ImgPreview.vue
<template> <div> <viewer :options="options" :images="images" @inited="inited" class="viewer" > <template > <img v-for="src in images" :src="src" :key="src" class="images" /> </template> </viewer> </div> </template> <script> import 'viewerjs/dist/viewer.css' import Viewer from 'v-viewer/src/component.vue' export default { components: { Viewer }, props: { images: { type: Array, default: function () { return [] } } }, data () { return { options: { 'navbar': false } } }, created () { // console.log(this.images) }, methods: { // 这个初始化会在页面初始的时候就执行一次,后续每次传入图片也会自动执行,所有用来转发事件 inited (viewer) { this.$viewer = viewer this.$emit('getViewer', viewer) } } } </script> <style scoped> .images{ width: 100px; height: 100px; margin: 10px; } </style>
父组件调用
<template> <div> <a-row> <a-col :span="24"> <a-descriptions bordered> <a-descriptions-item label="图片" :span="3" > <ImgPreview :images="evaluateUrls" @getViewer="getViewer"></ImgPreview> </a-descriptions-item> </a-descriptions> </a-col> </a-row> </div> </template> <script> import ImgPreview from './ImgPreview.vue' export default { name: 'ResidentDetails', components: { ImgPreview }, data () { return { viewer: '', evaluateUrls: []//获取需要的图片数据 } }, methods: { getViewer (viewer) { if (this.viewer) { this.$nextTick(() => { viewer.show() }) } else { // 先定义这个变量为空,防止第一次页面加载的时候就出现遮罩层 this.viewer = viewer } } } } </script> <style lang='less' scoped> </style>
-
Vue使用v-viewer,实现图片预览
2020-09-08 18:56:44npm install v-viewer --save 2.在main.js中引入 import Viewer from 'v-viewer' //图片查看插件 import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button'...1.安装依赖
npm install v-viewer --save
2.在main.js中引入
import Viewer from 'v-viewer' //图片查看插件 import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' } })
3.在组件中引用
<van-swipe :autoplay="3000"> <van-swipe-item v-for="(image, index) in moodsImg" :key="index"> <viewer :images = "moodsImg" > <img :src="image"/> </viewer> </van-swipe-item> </van-swipe>
效果
-
关于vue插件v-viewer 的使用方法
2020-12-18 12:10:151.安装插件 npm/cnpm i v-viewer -S main.js 粘贴到main.js 里面就可以了。 import Viewer from ‘v-viewer’ import ‘viewerjs/dist/viewer.css’ Vue.use(Viewer, { defaultOptions: { zIndex: 9999, inline: ... -
Increased startup time and breaking V-Block mode
2020-12-25 17:01:01path_extra -toolbar -clientserver +job +perl +user_commands +clipboard +jumplist +persistent_undo +vartabs +cmdline_compl +keymap +postscript +vertsplit ... -
vue 轮播图点击放大 vue+carousel+v-viewer
2020-11-06 16:12:351、安装依赖 npm install v-viewer --save 2、在main.js引入 import Viewer from 'v-viewer' ... Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': -
Vue图片点击放大预览插件 v-viewer
2019-09-30 15:39:37npm install v-viewer 还要引入css样式 import 'viewerjs/dist/viewer.css' 第二步 注册 Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': ... -
Ionic 2 Popover: Toolbar within ion-header or ion-footer doesn't stay fixed
2020-12-09 01:29:15ion-toolbar></code> within <code><ion-header></code> or <code><ion-footer></code> scrolls together with the content. <p>The toolbar should stay fixed on its relative position (top resp.... -
template v-slot:buttons> <vxe-button @click="exportEvent">MyExport.pdf</vxe-button> </template> </vxe-toolbar> <vxe-table ref="xTable" height="600" :data="tableData...
-
Radmin自动登录器v2.0-多国语言绿色版-Release9-20140109-5
2014-03-04 10:02:08注意:在v1.5及以前的老版本中,Radmin Server被控端必须将“使用权限...”(Permissions)设置为“Windows NT 安全性”(Security),如果设置为“Radmin安全性”(Security)则不能实现自动登录功能。在新版本中,这两... -
mint-ui 写一个下拉滑动选择,mt-popup和mt-picker结合使用
2020-07-07 23:32:44效果图如下 <div @click="getpopupVisible">产品选择</div> <mt-popup v-model="popupVisible" popup-transition="popup-fade" ...div class="picker-toolbar-title"> <div class="usi-bt -
DevExpress VCL 12.2.6(v2012vol2.6) 源码-例子-帮助-part1
2013-07-31 12:36:24DevExpress VCL v2012 vol 2.6 包含所有源码、例子、帮助 如果你安装过其它版本的DevExpressVCL,安装前请完全卸载老版本的Dev控件,并执行“清理Dev残余文件”,清理System32下的DevExpress的BPL文件。 What's ... -
DevExpress VCL 12.2.6(v2012vol2.6) 源码-例子-帮助-part2
2013-07-31 12:39:09DevExpress VCL v2012 vol 2.6 包含所有源码、例子、帮助 如果你安装过其它版本的DevExpressVCL,安装前请完全卸载老版本的Dev控件,并执行“清理Dev残余文件”,清理System32下的DevExpress的BPL文件。 What's ... -
Fontisto by Kenan Gündoğan (v3.0.4, 615 icons) Foundation by ZURB, Inc. (v3.0, 283 icons) Ionicons by Iconic Framework (v5.0.1, 1227 icons) MaterialIcons by Google, Inc. (v4.0.0, 1547 icons) ...
-
ExtAspNet v2.2.1 (2009-4-1) 值得一看
2010-04-01 09:41:27-增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件(比如Panel,Region,Tab等)增加AJAX属性IFrameUrl(feedback:BluesT)。 -重新设计模拟树的下拉列表的实现,避免... -
JellyToolbar-果冻肉效果的Toolbar.zip
2019-09-24 02:35:12app:title="@string/str_news_feed" app:titleTextColor="@android:color/white" /> </LinearLayout>public class MainActivity extends AppCompatActivity { private JellyToolbar toolbar; ... -
,{title:'操作', toolbar: '#barDemo', width:150} ]] ,done: function () { soulTable.render(this) } }); 详细介绍 一、支持使用的几种情况 demo 中都有示例 前端不分页 即 page:false 注意:layui框架...
-
home.vue
2021-01-07 11:17:04<template> <!-- <div :search="search"> --> <div> <v-app-bar app flat > <v-app-bar-nav-icon @click="drawer = !...v-toolbar-title>.../v-toolbar-title> -
[Number, Function]: the first element indicate the visibility, the second element customize the title content Specify the visibility and the content of the title. The name comes from the alt ...
-
Internet Explorer Bugs: app-header effects
2020-12-26 01:35:32resize-snapped-title waterfall blend-background parallax-background"> <!-- TOOLBAR --> <!-- TOOLBAR --> <!-- TOOLBAR --> <app-toolbar class="top-toolbar"&... -
FlexGraphics_V_1.79_D4-XE10.2_Downloadly.ir
2018-11-22 17:06:08Version 1.7 ----------- - ADD: Delphi/CBuilder 10.2 Tokyo now supported. - ADD: Delphi/CBuilder 10.1 Berlin now supported. - ADD: Delphi/CBuilder 10 Seattle now supported. - ADD: Delphi/CBuilder XE8 ... -
LCRapidDevelop-master
2017-12-21 17:04:49private Toolbar toolbar; private BaseQuickAdapter mQuickAdapter; private int PageIndex=1; private SpringView springView; private SchoolListPresent present; @Override protected void onCreate... -
Elementor 3 --> links not rendering properly
2021-01-09 07:03:02theme-archive-title : 1 footer : 2 form : 2 heading : 3 image : 8 social-icons : 2 text-editor : 14 header : 5 icon-list : 2 image : 2 nav-menu : 2 search-form : 2 social-icons : 2 page ... -
" + z + "=" + JSON.stringify(worksheet[z].v)); } }); Complete examples: http://oss.sheetjs.com/js-xlsx/ HTML5 File API / Base64 Text / Web Workers Note that older versions of IE does not support ...
-
WIP: [@material-ui/core_v4.0.0] Add new definition
2021-01-09 09:17:59- [x] DialogTitle - [x] Divider - [x] Drawer - [x] ExpansionPanel - [x] ExpansionPanelActions - [x] ExpansionPanelDetails - [x] ExpansionPanelSummary - [x] Fab - ... -
Vim 8.1 - not working - NameError: name 'sessionStorage' is not defined
2020-12-31 04:04:53, v["name"]).group(1) AttributeError: 'NoneType' object has no attribute 'group' Error detected while processing function <snr>25_JiraVimSearch: line 6: Traceback (most ... -
autojs-Intent生成器v 0.3
2020-03-28 21:41:58"ui"; var color = "#009688"; ui.layout( <drawer id="drawer"> <vertical h="*" w="*"> <appbar> <toolbar id="toolbar" title="Intent生成器 V0.3"/... -
VueSignaturePad not display properly until browser resize
2020-12-02 14:12:03/v-toolbar-title> <v-btn icon dark="dialog = !dialog"></v-btn> </v-toolbar> <vuesignaturepad width="95%" height="80%" ref="...
收藏数
299
精华内容
119