精华内容
下载资源
问答
  • emoji-toolbar': true, 'emoji-textarea': true, 'emoji-shortname': true } }, messageLength: 0, maxLength: 2000 } }, watch: { content: function (val) { this.messageLength &...
  • 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:...
    1. 安装依赖
    cnpm install --save-dev v-viewer
    
    1. 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,
        }
      }
    })
    
    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);
    }
    
    展开全文
  • 1.下载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, 'too

    1.下载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>
    

     

    展开全文
  • 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'...

    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>
    

    效果

    在这里插入图片描述

    展开全文
  • 1.安装插件 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: ...
  • path_extra -toolbar -clientserver +job +perl +user_commands +clipboard +jumplist +persistent_undo +vartabs +cmdline_compl +keymap +postscript +vertsplit &#...
  • 1、安装依赖 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:37
    npm install v-viewer 还要引入css样式 import 'viewerjs/dist/viewer.css' 第二步 注册 Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': ...
  • ion-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...
  • 注意:在v1.5及以前的老版本中,Radmin Server被控端必须将“使用权限...”(Permissions)设置为“Windows NT 安全性”(Security),如果设置为“Radmin安全性”(Security)则不能实现自动登录功能。在新版本中,这两...
  • 效果图如下 <div @click="getpopupVisible">产品选择</div> <mt-popup v-model="popupVisible" popup-transition="popup-fade" ...div class="picker-toolbar-title"> <div class="usi-bt
  • DevExpress VCL v2012 vol 2.6 包含所有源码、例子、帮助 如果你安装过其它版本的DevExpressVCL,安装前请完全卸载老版本的Dev控件,并执行“清理Dev残余文件”,清理System32下的DevExpress的BPL文件。 What's ...
  • DevExpress 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) ...
  • -增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件(比如Panel,Region,Tab等)增加AJAX属性IFrameUrl(feedback:BluesT)。 -重新设计模拟树的下拉列表的实现,避免...
  •  app: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 ...
  • resize-snapped-title waterfall blend-background parallax-background"> <!-- TOOLBAR --> <!-- TOOLBAR --> <!-- TOOLBAR --> <app-toolbar class="top-toolbar"&...
  • Version 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:49
    private Toolbar toolbar; private BaseQuickAdapter mQuickAdapter; private int PageIndex=1; private SpringView springView; private SchoolListPresent present; @Override protected void onCreate...
  • theme-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 ...
  • - [x] DialogTitle - [x] Divider - [x] Drawer - [x] ExpansionPanel - [x] ExpansionPanelActions - [x] ExpansionPanelDetails - [x] ExpansionPanelSummary - [x] Fab - ...
  • , 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"/...
  • /v-toolbar-title> <v-btn icon dark="dialog = !dialog"></v-btn> </v-toolbar> <vuesignaturepad width="95%" height="80%" ref="...

空空如也

空空如也

1 2 3 4 5 ... 15
收藏数 299
精华内容 119
热门标签
关键字:

v-toolbar-title