威尼斯人网上赌场基于vue2实现上拉加载效用,vue2达成加载功用

第一种方法:通过npm 安装插件

基于vue2实现上拉加载功能,vue2实现加载功能

本文实例为大家分享了vue2实现上拉加载展示的具体代码,供大家参考,具体内容如下

因为我们项目中,还用了swiper。很多都是滑动切换的,但是又得上拉加载,所以导致,很多UI框架,我们用了,都有不同的bug出现,没办法,最后写了一个。代码如下(这个因为很多地方会用,所以建议放在components/common下面):

<template>
  <div class="loadmore">
    <slot></slot>
    <slot name="bottom">
    </slot>
  </div>
</template>

<style>
  .loadmore{
    width:100%;
  }
</style>

<script>
  export default {
    name: 'loadmore',
    props: {
      maxDistance: {
        type: Number,
        default: 0
      },
      autoFill: {
        type: Boolean,
        default: true
      },
      distanceIndex: {
        type: Number,
        default: 2
      },
      bottomPullText: {
        type: String,
        default: '上拉刷新'
      },
      bottomDropText: {
        type: String,
        default: '释放更新'
      },
      bottomLoadingText: {
        type: String,
        default: '加载中...'
      },
      bottomDistance: {
        type: Number,
        default: 70
      },
      bottomMethod: {
        type: Function
      },
      bottomAllLoaded: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        // 最下面出现的div的位移
        translate: 0,
        // 选择滚动事件的监听对象
        scrollEventTarget: null,
        containerFilled: false,
        bottomText: '',
        // class类名
        bottomDropped: false,
        // 获取监听滚动元素的scrollTop
        bottomReached: false,
        // 滑动的方向  down---向下互动;up---向上滑动
        direction: '',
        startY: 0,
        startScrollTop: 0,
        // 实时的clientY位置
        currentY: 0,
        topStatus: '',
        // 上拉加载的状态  ''   pull: 上拉中
        bottomStatus: '',
      };
    },
    watch: {
      // 改变当前加载在状态
      bottomStatus(val) {
        this.$emit('bottom-status-change', val);
        switch (val) {
          case 'pull':
            this.bottomText = this.bottomPullText;
            break;
          case 'drop':
            this.bottomText = this.bottomDropText;
            break;
          case 'loading':
            this.bottomText = this.bottomLoadingText;
            break;
        }
      }
    },
    methods: {
      onBottomLoaded() {
        this.bottomStatus = 'pull';
        this.bottomDropped = false;
        this.$nextTick(() => {
          if (this.scrollEventTarget === window) {
          document.body.scrollTop += 50;
        } else {
          this.scrollEventTarget.scrollTop += 50;
        }
        this.translate = 0;
      });
        // 注释
        if (!this.bottomAllLoaded && !this.containerFilled) {
          this.fillContainer();
        }
      },

      getScrollEventTarget(element) {
        let currentNode = element;
        while (currentNode && currentNode.tagName !== 'HTML' &&
        currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {
          let overflowY = document.defaultView.getComputedStyle(currentNode).overflowY;
          if (overflowY === 'scroll' || overflowY === 'auto') {
            return currentNode;
          }
          currentNode = currentNode.parentNode;
        }
        return window;
      },
      // 获取scrollTop
      getScrollTop(element) {
        if (element === window) {
          return Math.max(window.pageYOffset || 0, document.documentElement.scrollTop);
        } else {
          return element.scrollTop;
        }
      },
      bindTouchEvents() {
        this.$el.addEventListener('touchstart', this.handleTouchStart);
        this.$el.addEventListener('touchmove', this.handleTouchMove);
        this.$el.addEventListener('touchend', this.handleTouchEnd);
      },
      init() {
        this.bottomStatus = 'pull';
        // 选择滚动事件的监听对象
        this.scrollEventTarget = this.getScrollEventTarget(this.$el);
        if (typeof this.bottomMethod === 'function') {
          // autoFill 属性的实现  注释
          this.fillContainer();
          // 绑定滑动事件
          this.bindTouchEvents();
        }
      },
      // autoFill 属性的实现  注释
      fillContainer() {
        if (this.autoFill) {
          this.$nextTick(() => {
            if (this.scrollEventTarget === window) {
            this.containerFilled = this.$el.getBoundingClientRect().bottom >=
                document.documentElement.getBoundingClientRect().bottom;
          } else {
            this.containerFilled = this.$el.getBoundingClientRect().bottom >=
                this.scrollEventTarget.getBoundingClientRect().bottom;
          }
          if (!this.containerFilled) {
            this.bottomStatus = 'loading';
            this.bottomMethod();
          }
        });
        }
      },
      // 获取监听滚动元素的scrollTop
      checkBottomReached() {
        if (this.scrollEventTarget === window) {
          return document.body.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeight;
        } else {
          // getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。 right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离。
          return this.$el.getBoundingClientRect().bottom <= this.scrollEventTarget.getBoundingClientRect().bottom + 1;
        }
      },
      // ontouchstart 事件
      handleTouchStart(event) {
        // 获取起点的y坐标
        this.startY = event.touches[0].clientY;
        this.startScrollTop = this.getScrollTop(this.scrollEventTarget);
        this.bottomReached = false;
        if (this.bottomStatus !== 'loading') {
          this.bottomStatus = 'pull';
          this.bottomDropped = false;
        }
      },
      // ontouchmove事件
      handleTouchMove(event) {
        if (this.startY < this.$el.getBoundingClientRect().top && this.startY > this.$el.getBoundingClientRect().bottom) {
          // 没有在需要滚动的范围内滚动,不再监听scroll
          return;
        }
        // 实时的clientY位置
        this.currentY = event.touches[0].clientY;
        // distance 移动位置和开始位置的差值    distanceIndex---
        let distance = (this.currentY - this.startY) / this.distanceIndex;
        // 根据 distance 判断滑动的方向 并赋予变量  direction down---向下互动;up---向上滑动
        this.direction = distance > 0 ? 'down' : 'up';
        if (this.direction === 'up') {
          // 获取监听滚动元素的scrollTop
          this.bottomReached = this.bottomReached || this.checkBottomReached();
        }
        if (typeof this.bottomMethod === 'function' && this.direction === 'up' &&
            this.bottomReached && this.bottomStatus !== 'loading' && !this.bottomAllLoaded) {
          // 有加载函数,是向上拉,有滚动距离,不是正在加载ajax,没有加载到最后一页
          event.preventDefault();
          event.stopPropagation();
          if (this.maxDistance > 0) {
            this.translate = Math.abs(distance) <= this.maxDistance
                ? this.getScrollTop(this.scrollEventTarget) - this.startScrollTop + distance : this.translate;
          } else {
            this.translate = this.getScrollTop(this.scrollEventTarget) - this.startScrollTop + distance;
          }
          if (this.translate > 0) {
            this.translate = 0;
          }
          this.bottomStatus = -this.translate >= this.bottomDistance ? 'drop' : 'pull';
        }
      },
      // ontouchend事件
      handleTouchEnd() {
        if (this.direction === 'up' && this.bottomReached && this.translate < 0) {
          this.bottomDropped = true;
          this.bottomReached = false;
          if (this.bottomStatus === 'drop') {
            this.translate = '-50';
            this.bottomStatus = 'loading';
            this.bottomMethod();
          } else {
            this.translate = '0';
            this.bottomStatus = 'pull';
          }
        }
        this.direction = '';
      }
    },
    mounted() {
      this.init();
    }
  };
</script>

然后哪个页面需要,在哪个页面导入即可:import LoadMore from
‘./../common/loadmore.vue’;在需要引入他的页面写法如下:

<template>
 <section class="finan">
  <!-- 上拉加载更多 -->
  <load-more
  :bottom-method="loadBottom"
  :bottom-all-loaded="allLoaded"
  :bottomPullText='bottomText'
  :auto-fill="false"
  @bottom-status-change="handleBottomChange"
  ref="loadmore">
    <div>
  这里写你需要的另外的模块
    </div>
    <div v-show="loading" slot="bottom" class="loading"> 这个div是为让上拉加载的时候显示一张加载的gif图
     <img src="./../../assets/main/uploading.gif">
    </div>
  </load-more>
 </section>
</template>

然后在此页面的data里和methods设置如下:

  export default {
    name: 'FinancialGroup',
    props:{

    },
    data () {
      return {
        // 上拉加载数据
        scrollHeight: 0,
        scrollTop: 0,
        containerHeight: 0,
        loading: false,
        allLoaded: false,
        bottomText: '上拉加载更多...',
        bottomStatus: '',
        pageNo: 1,
        totalCount: '',
      }
    },
    methods: {
    /* 下拉加载 */
    _scroll: function(ev) {
      ev = ev || event;
      this.scrollHeight = this.$refs.innerScroll.scrollHeight;
      this.scrollTop = this.$refs.innerScroll.scrollTop;
      this.containerHeight = this.$refs.innerScroll.offsetHeight;
    },
    loadBottom: function() {
      this.loading = true;
      this.pageNo += 1;  // 每次更迭加载的页数
      if (this.pageNo == this.totalGetCount) {
        // 当allLoaded = true时上拉加载停止
        this.loading = false;
        this.allLoaded = true;
      }
      api.commonApi(后台接口,请求参数) 这个api是封装的axios有不懂的可以看vue2+vuex+axios那篇文章
          .then(res => {
        setTimeout(() => {
      要使用的后台返回的数据写在setTimeout里面
         this.$nextTick(() => {
          this.loading = false;
        })
      }, 1000)
     });
    },
    handleBottomChange(status) {
      this.bottomStatus = status;
    },
  }

这样就完成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

本文实例为大家分享了vue2实现上拉加载展示的具体代码,供大家参考,具体内容如下
因为我…

项目中遇到了要打印页面的功能,我感觉我这个方法不太好,欢迎各位来改善指导

一 需求:

1,安装npm install vue-print-nb –save

使用print插件

公司项目需要通过electron调用系统打印机,实现打印小票的功能。

2,引入安装好以后在main.js文件中引入

1.在min.js中引入2.import Print from ‘@/plugs/print’3.Vue.use // 注册

二、分析:

import Print from 'vue-print-nb'Vue.use(Print); //注册
   不要打印我   this.$print // 调用方法使用

electron打印大概有两种:

3,现在就可以使用了

总结

第一种:通过window的webcontent对象,使用此种方式需要单独开出一个打印的窗口,可以将该窗口隐藏,但是通信调用相对复杂。

div  p明月照于山间/p p清风来于江上 /p/divbutton v-print="'#printTest'"打印/button

以上所述是小编给大家介绍的vue+element实现打印页面功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

第二种:使用页面的webview元素调用打印,可以将webview隐藏在调用的页面中,通信方式比较简单。

4.如需通过链接地址打印:window.location.href =
airway_bill;airway_bill为链接地址。

两个对象调用打印方法的使用方式都一样。

5.如果内容打印不全,在打印操作时点击更多设置,然后设置缩放。

本文是通过第二种方法实现静默打印。

第二种方法:手动下载插件到本地

三、实现过程:

插件地址:_printjs

1、要实现打印功能,首先要知道我们的设备上有哪些打印机。方法是:在渲染线程通过electron的ipcRenderer对象发送事件到主线程获取。(本文的渲染线程可以当做为一个print.vue文件)

1.在src下新建文件夹plugs,将下载好的print.js放入plugs文件夹下,然后操作如下

//引入electronimport electron from 'electron';//创建一个浏览器对象const window = new electron.BrowserWindow({ width, height, frame: false, show: false, backgroundColor: '#4b5b79', minWidth: 1024, minHeight: 768, webPreferences: { webSecurity: false }, }); //在主线程下,通过ipcMain对象监听渲染线程传过来的getPrinterList事件electron.ipcMain.on('getPrinterList',  => { //主线程获取打印机列表 const list = window.webContents.getPrinters(); //通过webContents发送事件到渲染线程,同时将打印机列表也传过去 window.webContents.send('getPrinterList', list);});
import Print from '@/plugs/print'Vue.use(Print) // 注册template section ref="print" 打印内容 div 不要打印我/div /section/templatethis.$print(this.$refs.print) // 使用

===============================================================================

2.注意事项
需使用ref获取dom节点,若直接通过id或class获取则webpack打包部署后打印内容为空

 //&#24341;&#20837;ipcRenderer&#23545;&#35937;,&#35813;&#23545;&#35937;&#21644;&#20027;&#32447;&#31243;&#30340;ipcMain&#36890;&#35759; import { ipcRenderer } from 'electron'; //&#28210;&#26579;&#32447;&#31243;&#20027;&#21160;&#21457;&#36865;getPrinterList&#20107;&#20214;&#21040;&#20027;&#32447;&#31243;&#35831;&#27714;&#25171;&#21360;&#26426;&#21015;&#34920; ipcRenderer.send; //&#30417;&#21548;&#20027;&#32447;&#31243;&#33719;&#21462;&#21040;&#25171;&#21360;&#26426;&#21015;&#34920;&#21518;&#30340;&#22238;&#35843; ipcRenderer.once('getPrinterList',  =&gt; { //data&#23601;&#26159;&#25171;&#21360;&#26426;&#21015;&#34920; this.printList = data; });//获取打印机列表完成

3.指定不打印区域

2、获取打印机列表后,就需要通过electron自带的标签实现小票排版。
是什么?可以把它当做标签,它里面显示的是你需要打印的内容。

方法1. 添加no-print样式类

使用之前,需要新建一个print.html文件,把你要打印的内容通过print.html显示出来。我们项目的需求是将要打印的内容通过canvas画出后,再将canvas转成图片资源,然后放到里面显示,伪代码如下:

div不要打印我/div
 Document  //@page样式是用来设置打印机打印出来的样式,例如设置小票外边距样式 @page { margin: 0px; }  //&#24341;&#20837;ipcRenderer&#23545;&#35937; const {ipcRenderer} = require //&#30417;&#21548;&#28210;&#26579;&#32447;&#31243;&#20256;&#36807;&#26469;&#30340;webview-print-render&#20107;&#20214; ipcRenderer.on('webview-print-render',  =&gt; { // &#21160;&#24577;&#21019;&#24314;&#19968;&#20010;img&#26631;&#31614;&#65292;&#28982;&#21518;&#25554;&#20837;&#21040;&lt;body&gt;&#20013;&#12290;deviceInfo&#26159;&#28210;&#26579;&#32447;&#31243;&#20256;&#36807;&#26469;&#30340;&#25968;&#25454; let html = ''; html = `&lt;img src="${deviceInfo.imgSource}" width="${deviceInfo.imgWidth}px" height="${deviceInfo.imgHeight}px"&gt;`; document.getElementById.innerHTML = html; //&#24403;&#22270;&#29255;&#25554;&#20837;&#21040;&#39029;&#38754;&#21518;&#65292;&#36890;&#36807;ipcRenderer&#23545;&#35937;&#30340;sendToHost&#26041;&#27861;&#21644;&#28210;&#26579;&#32447;&#31243;&#36890;&#35759;&#65292;&#21578;&#35785;&#28210;&#26579;&#32447;&#31243;&#25171;&#21360;&#30340;&#20869;&#23481;&#24050;&#32463;&#20934;&#22791;&#23436;&#27605;&#65292;&#35831;&#24320;&#22987;&#25171;&#21360;&#25805;&#20316; ipcRenderer.sendToHost; });

方法2. 自定义类名

html文件创建完成后,将print.html引入到。该需要显式的定义在print.vue文件中,但需要将它用v-show=”false”隐藏,不能用v-if,因为我们需要的dom节点存在于页面上,只是不展示而已。

div不要打印我/divthis.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用
mounted() { //&#24403;vue&#33410;&#28857;&#28210;&#26579;&#23436;&#25104;&#21518;&#65292;&#33719;&#21462;&lt;webview&gt;&#33410;&#28857; const webview = this.$refs.printWebview; //&#30417;&#21548;&lt;webview&gt;&#37324;&#38754;&#30340;&#28040;&#24687;&#65292;&#20063;&#23601;&#26159;&#30417;&#21548;print.html&#37324;&#38754;&#30340;ipcRenderer.sendToHost&#21457;&#36865;&#30340;&#20107;&#20214;&#65292;&#24403;&#35813;&#20107;&#20214;&#21457;&#36865;&#25104;&#21151;&#21518;&#23601;&#20250;&#36827;&#20837;&#19979;&#38754;&#30340;&#22238;&#35843;&#20107;&#20214;&#20013;&#25191;&#34892;&#25171;&#21360;&#25805;&#20316;&#12290; webview.addEventListener('ipc-message',  =&gt; { if (event.channel === 'webview-print-do') { //&#22914;&#26524;&#25910;&#21040;&lt;webview&gt;&#20256;&#36807;&#26469;&#30340;&#20107;&#20214;&#65292;&#21517;&#20026;"webview-print-do"&#65292;&#23601;&#25191;&#34892; webview.print&#25171;&#21360;&#26041;&#27861;&#65292;&#25171;&#21360;&lt;webview&gt;&#37324;&#38754;&#30340;&#20869;&#23481;&#12290; webview.print( { //&#26159;&#21542;&#26159;&#38745;&#40664;&#25171;&#21360; silent: true, printBackground: true, //&#25171;&#21360;&#26426;&#30340;&#21517;&#31216;&#65292;&#23601;&#26159;&#26412;&#25991;&#19968;&#24320;&#22987;&#33719;&#24471;&#30340;&#25171;&#21360;&#26426;&#21015;&#34920;&#20854;&#20013;&#19968;&#20010; deviceName: 'xxx', },  =&gt; { //&#36825;&#20010;&#22238;&#35843;&#26159;&#25171;&#21360;&#21518;&#30340;&#22238;&#35843;&#20107;&#20214;&#65292;data&#20026;true&#23601;&#26159;&#25171;&#21360;&#25104;&#21151;&#65292;&#20026;false&#23601;&#25171;&#21360;&#22833;&#36133; console.log('webview success', data); }, ); } });},

到这里本electron调用打印机的功能就实现了。

总结

以上所述是小编给大家介绍的electron +
vue项目实现打印小票功能及实现代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

发表评论

电子邮件地址不会被公开。 必填项已用*标注