直播平台软件开发,完整截取整个屏幕的截图方式

直播平台软件开发,完整截取整个屏幕的截图方式

一、npm install --save vue-fullpage.js

1.man.js引入 ,

 

1
// An highlighted block<br>import router from './router'<br>Vue.config.productionTip = false<br>// 整屏滚动<br>import 'fullpage.js/vendors/scrolloverflow';<br>import VueFullPage from 'vue-fullpage.js';<br>Vue.use(VueFullPage)<br>/* eslint-disable no-new */<br>new Vue({<br>  el: '#app',<br>  router,<br>  components: { App },<br>  template: '<App/>'<br>})

​二、使用

1.html,

 

1
<br><template><br>  <div><br>    <full-page :options="options" id="fullpage" ref="fullpage"><br>      <div class="section"><br>        <h3>vue-fullpage.js</h3><br>      </div><br>      <div class="section"><br>        <div class="slide"><br>          <h3>Slide 2.1</h3><br>        </div><br>        <div class="slide"><br>          <h3>Slide 2.2</h3><br>        </div><br>        <div class="slide"><br>          <h3>Slide 2.3</h3><br>        </div><br>      </div><br>      <div class="section"><br>        <h3>Section 3</h3><br>      </div><br>    </full-page><br>  </div><br></template>

 

2.js

 

1
<br>export default {<br>  data() {<br>    return {<br>      options: {<br>        anchors: ["page1", "page2", "page3", "page4", "page5", "page6"],<br>        licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",<br>        afterLoad: this.afterLoad, // method中的方法 即回调函数<br>        scrollOverflow: true,<br>        scrollBar: false,<br>        menu: "#menu",<br>        sectionsColor: [<br>          "#23A84A",<br>          "#ff5f45",<br>          "#0798ec",<br>          "#fec401",<br>          "#000000",<br>          "#E7EFFE",<br>        ],<br>      },<br>    };<br>  },<br>}

 

三、常用API

1.afterLoad:对应的函数写在methods中,常用作对页面的处理

 

1
<br>methods:{<br>afterLoad: function (origin, destination, direction) {<br>        // origin 起点 destination终点 direction方向 固定写法<br>      this.navIndex = destination.index; <br>      //destination.index代表对应页面index(从0开始)<br>      //拿到对应页面的index就可以进行操作<br>      if (destination.index > 0) {<br>        this.phoneShow = true;<br>      }<br>      if (destination.index === 0) {<br>        this.phoneShow = false;<br>      }<br>    },<br>}

2.moveTo通过事件跳转到对应的page页面

 

1
<br>    options: {<br>        afterLoad: this.afterLoad,<br>        //一定要在options中插入这段数组,数组的值对应page页面<br>        anchors: ["page1", "page2", "page3", "page4", "page5", "page6"],<br>        licenseKey: "OPEN-SOURCE-GPLV3-LICENSE",<br>        afterLoad: this.afterLoad, // method中的方法 即回调函数<br>        scrollOverflow: true,<br>        scrollBar: false,<br>        menu: "#menu",<br>        sectionsColor: [<br>          "#23A84A",<br>          "#ff5f45",<br>          "#0798ec",<br>          "#fec401",<br>          "#000000",<br>          "#E7EFFE",<br>        ],<br>      },<br> moveTo(pages) {<br> //固定写法,第一个参数代表options中anchors数组中的值<br> //在点击时传递对应的pages值即可<br>      fullpage_api.moveTo(pages, 1);<br>    },

 

以上就是直播平台软件开发,完整截取整个屏幕的截图方式, 更多内容欢迎关注之后的文章

 

posted @   云豹科技-苏凌霄  阅读(268)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示