mg4377娱乐娱城官网_mg4377娱乐手机版_www.mg4377.com

当前位置: mg4377娱乐娱城官网 > www.mg4377.com > 正文

Vue仿手提式无线电话机qq的实例代码,Vue分页组件

时间:2019-06-07 20:30来源:www.mg4377.com
vue简介 概述 那是2个16年六月份找的开源项目源代码,结合本身的莫过于景况张开的修改项目,将来内容将会有相当大的不一样,项目标对象是向QQ看齐 脚下组件正视bootstrap样式,使用

vue简介

概述

那是2个16年六月份找的开源项目源代码,结合本身的莫过于景况张开的修改项目,将来内容将会有相当大的不一样,项目标对象是向QQ看齐

脚下组件正视bootstrap样式,使用前请先引用相关css。

重新整建文书档案,搜刮出三个行使 Vue.js 仿百度找寻框的实例代码,稍微整理精简一下做下分享。

Vue.js(读音 /vjuː/, 类似于 view) 是一套创设用户分界面包车型地铁渐进式框架。
Vue 只关怀视图层, 采取自底向上增量开拓的陈设。
Vue 的对象是经过尽大概简单的 API 达成响应的数量绑定和重组的视图组件。
Vue仿手提式无线电话机qq的实例代码,Vue分页组件实例代码。Vue 学习起来非常轻松,本课程基于 Vue 2.一.捌 版本测试。

页面效果呈现

www.mg4377.com 1

www.mg4377.com,功效呈现

Vue.component('pagination', {
  template: `<nav aria-label="Page navigation">
    <ul class="pagination">
      <li :class="{'disabled': pageNum == 1}"><a href="#" v-on:click.prevent="turnToPage(1)" title="首页" aria-label="首页"><i class="fa fa-fast-backward"></i></a></li>
      <li :class="{'disabled': pageNum == 1}"><a href="#" v-on:click.prevent="turnToPage(pageNum - 1)" title="上一页" aria-label="上一页"><i class="fa fa-backward"></i></a></li>
      <li v-if="pageNum > 4"><a href="#" v-on:click.prevent="turnToPage(pageNum - 4)">...</a></li>
      <li v-if="pageNum <= 4 && pageNum >1"><a href="#" v-on:click.prevent="turnToPage(1)">1</a></li>
      <li v-if="pageNum - 3 > 1"><a href="#" v-on:click.prevent="turnToPage(pageNum - 3)">{{pageNum-3}}</a></li>
      <li v-if="pageNum - 2 > 1"><a href="#" v-on:click.prevent="turnToPage(pageNum - 2)">{{pageNum-2}}</a></li>
      <li v-if="pageNum - 1 > 1"><a href="#" v-on:click.prevent="turnToPage(pageNum - 1)">{{pageNum-1}}</a></li>
      <li class="active"><a href="#" v-on:click.prevent="turnToPage(pageNum)">{{pageNum}}</a></li>
      <li v-if="pageNum   1 < pageTotal"><a href="#" v-on:click.prevent="turnToPage(pageNum   1)">{{pageNum 1}}</a></li>
      <li v-if="pageNum   2 < pageTotal"><a href="#" v-on:click.prevent="turnToPage(pageNum   2)">{{pageNum 2}}</a></li>
      <li v-if="pageNum   3 < pageTotal"><a href="#" v-on:click.prevent="turnToPage(pageNum   3)">{{pageNum 3}}</a></li>
      <li v-if="pageNum >= pageTotal - 4 && pageNum < pageTotal"><a href="#" v-on:click.prevent="turnToPage(pageTotal)">{{pageTotal}}</a></li>
      <li v-if="pageNum < pageTotal - 4"><a href="#" v-on:click.prevent="turnToPage(pageNum   4)">...</a></li>
      <li :class="{'disabled': pageNum == pageTotal}"><a href="#" v-on:click.prevent="turnToPage(pageNum   1)" title="下一页" aria-label="下一页"><i class="fa fa-forward"></i></a></li>
      <li :class="{'disabled': pageNum == pageTotal}"><a href="#" v-on:click.prevent="turnToPage(pageTotal)" title="尾页" aria-label="尾页"><i class="fa fa-fast-forward"></i></a></li>
    </ul>
  </nav>`,
  props: {
    pageNum: Number,
    pageSize: Number,
    totalItemCount: Number,
  },
  computed: {
    pageTotal: function () {
      return Math.ceil(this.totalItemCount / this.pageSize)
    }
  },
  methods: {
    turnToPage: function (num) {
      if (num > this.pageTotal || num <= 0) {
        //toastr.error(`当前页码超出了范围。页码:${num}`, '错误')
        return false
      }
      this.$emit('change', num)
    }
  }
})
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Vue demo</title>
  <style type="text/css">
  .bg {
    background: #ccc;
  }
  </style>
  <script src="https://cdn.bootcss.com/vue/2.1.7/vue.min.js"></script>
  <script src="http://www.chansem.com/uploads/allimg/190607/2030356245-2.jpg"></script>
  <script type="text/javascript">
  window.onload = function() {
    new Vue({
      el: '#box',
      data: {
        inputText: '',
        text: '',
        nowIndex: -1,
        result: []
      },
      methods: {
        show: function(ev) {
          if (ev.keyCode == 38 || ev.keyCode == 40) {
            if (this.nowIndex < -1){
              return;
            }
            if (this.nowIndex != this.result.length && this.nowIndex != -1) {
              this.inputText = this.result[this.nowIndex];
            }
            return;
          }
          if (ev.keyCode == 13) {
            window.open('https://www.baidu.com/s?wd='   this.inputText, '_blank');
            this.inputText = '';
          }
          this.text = this.inputText;
          this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
            params: {
              wd: this.inputText
            },
            jsonp: 'cb'
          }).then(res => {
            this.result = res.data.s;
          })
        },
        down: function() {
          this.nowIndex  ;
          if (this.nowIndex == this.result.length) {
            this.nowIndex = -1;
            this.inputText = this.text;
          }
        },
        up: function() {
          this.nowIndex--;
          if (this.nowIndex < -1){
            this.nowIndex = -1;
            return;
          }
          if (this.nowIndex == -1) {
            this.nowIndex = this.result.length;
            this.inputText = this.text;
          }
        }
      }
    });
  }
  </script>
</head>

<body>
  <div id="box">
    <input type="text" placeholder="请输入搜索内容" v-model='inputText' @keyup='show($event)' @keydown.down='down()' @keydown.up.prevent='up()'>
    <ul>
      <li v-for="(item, index) in result" :class='{bg: index==nowIndex}'>
        {{item}}
      </li>
    </ul>
  </div>
</body>

</html>

概述

豁免义务注脚

本项目为开源项目,如有类同,纯属巧合。

props定义四个特性:如今页码,当前页展现数量,总量量

上述就是本文的全体内容,希望对大家的求学抱有帮忙,也期望大家多多扶助脚本之家。

那是三个16年六月份找的开源项目源代码,结合自身的实际上景况开始展览的修改项目,现在内容将会有极大的不等,项指标对象是向QQ看齐

花色已落到实处际效果益

侧边栏
联系页面
动态页面
信息列表
搜索好友
对话页面
信息列表左右滑动

computed定义了四个测算格局:获取总量量/当前页呈现数量,向上取整,暗许取十二个

您或然感兴趣的小说:

  • Vue.js达成实例寻找选拔效益详细代码
  • vue.js完成含寻觅的多种复选框(附源码)
  • Vue.js实现多规格筛选、找寻、排序及分页的报表功效
  • 依照Vue.js达成简单寻找框
  • 依据Vue.js 二.0达成百度找寻框效果

页面效果显示

新增效益

增加了信息列表的删除,
标记可读,
置顶

methods定义了1个根据页码跳转方法:最终用于触发change事件,$emit用于抛出自定义事件,组件外能够捕获当前定义的change事件

www.mg4377.com 2

存在难点

删除事件,置顶事件和标记事件的触发区域发生了位移,正在排查原因,欢迎各位指教

注:项指标费用注意事项,填坑,以及手艺栈等相关小说请访问小编的丹佛掘金队(Denver Nuggets)个人主页

html组件彰显:

豁免权利表明

桌面及运动端测试

  • 桌面测试: npm run dev 后,打开开辟者工具 F12,模拟手提式有线电话机预览 Ctrl Shift M (Chrome)
  • 移动端测试: npm run dev 后,在cmd命令行中输入ipconfig(win)获取到局域网内ip地址

复制代码 代码如下:

编辑:www.mg4377.com 本文来源:Vue仿手提式无线电话机qq的实例代码,Vue分页组件

关键词: Vue.js开发技巧 vue项目