直播平臺軟體開發,完整擷取整個螢幕的截圖方式
直播平臺軟體開發,完整擷取整個螢幕的截圖方式
一、npm install --save vue-fullpage.js
1.man.js引入 ,
// An highlighted block import router from './router' Vue.config.productionTip = false // 整屏滾動 import 'fullpage.js/vendors/scrolloverflow'; import VueFullPage from 'vue-fullpage.js'; Vue.use(VueFullPage) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
二、 使用
1.html,
<template> <div> <full-page :options="options" id="fullpage" ref="fullpage"> <div class="section"> <h3>vue-fullpage.js</h3> </div> <div class="section"> <div class="slide"> <h3>Slide 2.1</h3> </div> <div class="slide"> <h3>Slide 2.2</h3> </div> <div class="slide"> <h3>Slide 2.3</h3> </div> </div> <div class="section"> <h3>Section 3</h3> </div> </full-page> </div> </template>
2.js
export default { data() { return { options: { anchors: ["page1", "page2", "page3", "page4", "page5", "page6"], licenseKey: "OPEN-SOURCE-GPLV3-LICENSE", afterLoad: this.afterLoad, // method中的方法 即回撥函式 scrollOverflow: true, scrollBar: false, menu: "#menu", sectionsColor: [ "#23A84A", "#ff5f45", "#0798ec", "#fec401", "#000000", "#E7EFFE", ], }, }; }, }
三、常用API
1.afterLoad:對應的函式寫在methods中,常用作對頁面的處理
methods:{ afterLoad: function (origin, destination, direction) { // origin 起點 destination終點 direction方向 固定寫法 this.navIndex = destination.index; //destination.index代表對應頁面index(從0開始) //拿到對應頁面的index就可以進行操作 if (destination.index > 0) { this.phoneShow = true; } if (destination.index === 0) { this.phoneShow = false; } }, }
2.moveTo通過事件跳轉到對應的page頁面
options: { afterLoad: this.afterLoad, //一定要在options中插入這段陣列,陣列的值對應page頁面 anchors: ["page1", "page2", "page3", "page4", "page5", "page6"], licenseKey: "OPEN-SOURCE-GPLV3-LICENSE", afterLoad: this.afterLoad, // method中的方法 即回撥函式 scrollOverflow: true, scrollBar: false, menu: "#menu", sectionsColor: [ "#23A84A", "#ff5f45", "#0798ec", "#fec401", "#000000", "#E7EFFE", ], }, moveTo(pages) { //固定寫法,第一個引數代表options中anchors陣列中的值 //在點選時傳遞對應的pages值即可 fullpage_api.moveTo(pages, 1); },
以上就是直播平臺軟體開發,完整擷取整個螢幕的截圖方式, 更多內容歡迎關注之後的文章
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2888826/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- SPX螢幕截圖軟體
- 如何用Chrome自帶的截圖功能擷取超過一個螢幕的網頁Chrome網頁
- 用electron開發了一個螢幕截圖工具
- 最強大的螢幕截圖軟體:Snagit for macGitMac
- Android三種方式擷取任意介面螢幕Android
- Android螢幕截圖方式總結Android
- TechSmith Snagit mac最強大的螢幕截圖軟體MITGitMac
- QT擷取螢幕的實現QT
- Snagit 2023 for Mac(螢幕截圖軟體)GitMac
- 如何使用 gnome-screenshot 截圖命令來擷取螢幕、視窗或指定區
- C#軟體開發例項.私人訂製自己的螢幕截圖工具(四)基本截圖功能實現C#
- 直播平臺原始碼,vue圖片中劃框擷取部分圖片原始碼Vue
- 少俠學截圖-C#螢幕捕捉的方式C#
- Movavi Screen Recorder 22 Mac(螢幕錄影截圖軟體)Mac
- iOS螢幕截圖的方法iOS
- Android獲取當前Activity的螢幕截圖Android
- ScreenFloat for Mac(螢幕截圖軟體) 1.5.22啟用版Mac
- C#軟體開發例項.私人訂製自己的螢幕截圖工具(一)功能概覽C#
- 直播app開發,螢幕效果與圖片的處理APP
- 直播平臺軟體開發,監聽WebView滑動到底部的兩種方式WebView
- 直播平臺軟體開發,登陸時獲取當前時間
- 在Windows 10中擷取截圖的6種方式 簡介Windows
- node平臺擷取圖片模組——jimp
- 直播平臺軟體開發,前端實現登入拼圖驗證前端
- 全功能的螢幕截圖軟體:Snagit 2021 for Mac中文版GitMac
- 直播平臺軟體開發,flex佈局例項Flex
- 螢幕擷取程式Ashampoo SnapYa! v1.53
- 高畫質螢幕截圖工具GrabIt ,體驗不一樣的截圖感受
- 超好用螢幕截圖軟體:Snagit 2021 Mac中文版GitMac
- 直播平臺軟體開發,卡片式輪播圖,可左右滑動
- selenium實現螢幕截圖
- iSnapshot for Mac螢幕截圖工具Mac
- android 螢幕截圖原始碼Android原始碼
- mac蘋果螢幕截圖快捷鍵Mac蘋果
- C#軟體開發例項.私人訂製自己的螢幕截圖工具(六)新增配置管理功能C#
- 設定背景圖片鋪滿整個螢幕
- Python網頁截圖/螢幕截圖/截長圖如何實現?Python網頁
- TableView ScrollreView 截圖 擷取全屏 圖片模糊View