我的Vue之小功能统计

发布时间:2019-03-02 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了我的Vue之小功能统计脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!

摘要:项目中经常会要用到大大小小的功能,所以我在这里进行一个汇总,后面会持续添加至这篇博客,希望当你遇到这个功能时,我的博客能够对你有帮助,(上一篇博客说要在收假后写一篇博客做一个年终总结,想了半天不知道写什么,文笔不好,就算了,不写了,今天是情人节,祝没有脱单的程序员赶快脱单,脱单了的永不脱发,脱发了的就当我没说......)

一.安装(npm)

图片如下:可使用npm进行安装也可以使用VSCode的终端进行安装

1.安装路由vue-router

npm install vue-router

2.安装axios

npm install --save axios

3.安装vuex

npm install vuex --save

4.安装scss

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

5.安装element-ui

npm i element-ui -S

6.main.js配置

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import ElementUI from 'element-ui'
import 'element-ui/lib/Theme-chalk/index.css'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.use(Vuex)

new Vue({
  el: '#app',router,components: { App },template: '<App/>',})

二.路由配置(index.js)

图片如下(进行路由跳转)

1.模块归纳

export default new Router({

  routes: [
    {
      path: '/',name: 'Login',component: Login,},{
        path: '/Forget',name: 'Forget',component: Forget,{
      path: '/',component: Home,name: '用户管理',children: [
          { path: '/User',component: User,name: '用户'},{ path: '/SeeEdit',component: SeeEdit,name: '用户详情'},{ path: '/Modify',component: Modify,name: '修改用户资料'},{ path: '/changepsw',component: changepsw,name: '修改密码'},]
    },......
   ],})

2.路由切换后页面滚动位置不变bug的解决方法

export default new Router({

  routes: [
      ......
  ],scrollBehavior (to,from,savedPosition) {
       // console.log(to) // to:要进入的目标路由对象,到哪里去
       // console.log(from) // from:离开的路由对象,哪里来
       // console.log(savedPosition) // savePosition:会记录滚动条的坐标
       if(savedPosition) {
          return savedPosition;
       }else{
          return {x:0,y:0}
       }
  }

})

三.储存,传值

1.Cookie

1.建立一个cookieUtil.js的文件

//设置cookie
export function setCookie(key,value) {
    var Days = 0.6;
    var exdate = new date(); //获取时间
    exdate.setTime(exdate.getTime() + Days*24*60*60*1000); //保存的天数
    //字符串拼接cookie
    window.document.cookie = key + "=" + value + ";path=/;expires=" + exdate.toGMTString();
  };
  //读取cookie
  export function getCookie(param) {
    var c_param = '';
    if (document.cookie.length > 0) {
      var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('='); //再次切割
        //判断查找相对应的值
        if (arr2[0] == param) {
          c_param = arr2[1];
          //保存到保存数据的地方
        }
      }
      return c_param;
    }
  };

  function padLeftZero (str) {
    return ('00' + str).substr(str.length);
  };

2.在登录界面login.vue引用这个js

//cookie
import {setCookie,getCookie}from '../router/cookieUtil'

3.然后储存,取值

//储存用户信息
setCookie('sellerId',this.information.sellerId);
//取值用户信息
this.sellerId = getCookie("sellerId");

4.退出登录

<button @click="Signout">退出</button>
mounted () {
      this.sellerId = getCookie("sellerId");
      if (this.sellerId==undefined||this.sellerId=="") {
            this.$router.push('/')
      } else {

      }
},methods: {
      //退出
      Signout(){
          setCookie("sellerId","",-1);
          this.$router.push('/')
      },}

 2.Session Storage

A页面缓存aaa的值

sessionStorage.setItem('aaa',"111")

B页面去获取到值

alert(sessionStorage.getItem('aaa'))

3.通过路由带参数进行传值

A和B,A通过query把orderId传递给B

this.$router.push({ path: '/B',query: { orderId: 123 } }) // 跳转到B

B获取

let aaa=this.$route.query.orderId

四.发送验证

图片如下

1.html部分

<el-button :disabled="disabled" @click="sendcode" class="sendcode">{{btntxt}}</el-button>

2.js部分

export default {
        data() {
            return {
                disabled:false,time:0,btntxt:"发送验证码",};
        },methods: {
            //发送手机验证码倒计时
            timer() {
                if (this.time > 0) {
                     this.time--;
                     this.btntxt=this.time+"s后重新获取";
                     setTimeout(this.timer,1000);
                } else{
                     this.time=0;
                     this.btntxt="发送验证码";
                     this.disabled=false;
                }
            },}
}

五.div自适应屏幕宽高

1.像后台管理系统那种格式,有顶部导航栏和左侧导航栏,而切换的那一块盒子怎么能自适应屏幕的宽高减去顶部和左侧固定的宽高呢?

html代码:

<div v-bind:style="{width: mywidth,height: myHeight}"></div>

js代码

export default {

        data() {
            return {
                mywidth: (window.innerwidth - 240) + 'px',myHeight: (window.innerHeight - 100) + 'px',}

六.实时显示当前时间

图片如下(想后台系统一般都会添加一个当前时间,方便用户了解或记录时间)

html代码

<span class="time">{{nowTime}}</span>

js代码

export default {

        data() {
            return {
                nowTime:"",nowWeek:"",// 创建完成时
        created() {
            this.nowTimes();
        },methods: {

            //当前时间
            timeFormate(timeStamp) {
                let year = new Date(timeStamp).getFullYear();
                let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
                let date =new Date(timeStamp).getdate() < 10? "0" + new Date(timeStamp).getdate(): new Date(timeStamp).getdate();
                var week = timeStamp ? new Date(timeStamp) : new date();
                if(week.getDay() == 1){
                    this.nowWeek="周一"
                } else if(week.getDay() == 2){
                    this.nowWeek="周二"
                } else if(week.getDay() == 3){
                    this.nowWeek="周三"
                } else if(week.getDay() == 4){
                    this.nowWeek="周四"
                } else if(week.getDay() == 5){
                    this.nowWeek="周五"
                } else if(week.getDay() == 6){
                    this.nowWeek="周六"
                } else {
                    this.nowWeek="周日"
                }
                let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
                let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
                this.nowTime = year + "/" + month + "/" + date +"  "+ this.nowWeek +"  "+ hh +":"+ mm ;
                // console.log(this.nowTime)
                clearInterval(this.Times);
            },// 定时器函数
            nowTimes(){
                this.timeFormate(new date());
                this.Times=setInterval(this.nowTimes,1000);
            },}

切记一定要清除定时器,当时作者忘记清除定时器页面一直崩溃,后来打印才发现是忘记清除定时器了, 

七.自定义滚动列表

图片如下

html代码

<div class="right-select">
         <ul>
                 <li>张三1</li>
                 <li>张三2</li>
                 <li>张三3</li>
                 <li>张三4</li>
                 <li>张三5</li>
                 <li>张三6</li>
                 <li>张三7</li>
         </ul>
</div>

css代码

    .right-select{
        width: 500px;
        height: 105px;
        overflow-y: scroll;
        border: 1px solid #bbbbbb;
        border-radius: 5px;
        margin-left: 65px;
    }
    .right-select::-webkit-scrollbar {
        width: 12px;
        background-color: #fff;
    }
    .right-select::-webkit-scrollbar-thumb {
        height: 26px;
        background-color: #666;
        border-radius: 50px;
    }

    .right-select::-moz-scrollbar {
        width: 12px;
        background-color: #fff;
    }
    .right-select::-moz-scrollbar-thumb {
        height: 26px;
        background-color: #666;
        border-radius: 50px;
    }

 自定义滚动条时,请记住要定义盒子的高度,不然滚动条会显示不出来

八.判断数据列表序号

图片如下

html

<ul>
     <li  v-for="(item,index) in list" :key="item.id" >
          <p class="p1">{{ index+1>9?index+1:"0"+(index+1) }}</p>
          <p class="p2">{{ item.name }}&nbsp;&nbsp;{{ item.id }}&nbsp;&nbsp;{{ item.source }}</p>
     </li>
</ul>

js代码

list: [{
     name: '张一',id: '1241',source: '经销商',{
     name: '张二',id: '1242',source: '业务员',{
     name: '张三',id: '1243',source: '普通用户',{
     name: '张四',id: '1244',source: '商城',}],

九.form表单提交

html代码

<form :model="reportform">
        <input type="text" v-model="reportform.name" placeholder="姓名"/>
        <input type="text" v-model="reportform.sex" placeholder="性别"/>
        <input type="text" v-model="reportform.age" placeholder="年龄"/>
</form><button @click="sub"></button>

js代码

export default {
    data() {
        return {
              reportform: {
                  name: '',sex:'',age: '',}
        }
    },methods: {
       sub() {
               let reportdata = this.reportform;
               console.log(reportdata)
       }
    }}

十.实现分页效果

效果图如下

该处是结合element-ui来写的,请记得安装element-ui,不知道安装的请参考第一条

html代码:

<template>
                 <table>
                       <thead>
                              <tr>
                                   <th class="sequence left-radius">序号</th>
                                   <th>姓名</th>
                                   <th>手机号</th>
                                   <th>性别</th>
                                   <th>用户等级</th>
                                   <th>上级用户</th>
                                   <th>创建日期</th>
                                   <th class="right-radius">操作</th>
                              </tr>
                       </thead>
                       <tbody>
                              <tr v-for="(item,index) in tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="item.id">
                                   <td class="sequence">{{ index+1>9?index+1:"0"+(index+1) }}</td>
                                   <td>{{ item.name }}</td>
                                   <td>{{ item.phone }}</td>
                                   <td>{{ item.sex==1?"男":"女" }}</td>
                                   <td>{{ item.user }}</td>
                                   <td>{{ item.username }}</td>
                                   <td>{{ item.date }}</td>
                                   <td><a @click="See">查看</a><a @click="Edit">修改</a><a @click="Edit">删除</a></td>
                              </tr>
                       </tbody>
                 </table>

           <div class="page">
                <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="[5,10,20,40]"
                      :page-size="pagesize"        
                      layout="total,sizes,prev,pager,next,jumper"
                      :total="tableData.length">
                </el-pagination>
           </div>

</template>

js代码

<script>

     export default {
      data() {
        return {
          currentPage:1,//初始页
          pagesize:10,//每页的数据
          tableData: [{
            name: '张一',phone: '13111111111',sex: '1',user: '普通用户',username: '李四',date: '2018/11/30'
          },{
            name: '张二',phone: '13122222222',sex: '0',user: '特殊用户',date: '2018/12/30'
          },{
            name: '张三',phone: '13133333333',{
            name: '张四',phone: '13144444444',{
            name: '张五',phone: '13155555555',date: '2018/05/14'
          },{
            name: '张六',phone: '13166666666',date: '2018/10/30'
          },{
            name: '张七',phone: '13177777777',date: '2019/01/06'
          },{
            name: '张八',phone: '13188888888',date: '2018/06/17'
          },{
            name: '张九',phone: '13199999999',date: '2018/09/25'
          },{
            name: '张十',phone: '13110101010',date: '2019/02/10'
          },{
            name: '张十一',phone: '13124683579',date: '2019/02/10'
          }]
        }
      },methods: {
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
              this.pagesize = size;
              console.log(this.pagesize)  //每页下拉显示数据
            },handleCurrentChange: function(currentPage){
              this.currentPage = currentPage;
              document.documentElement.scrollTop = 0;//点击翻页的时候回到顶部
              console.log(this.currentPage)  //点击第几页
            },}

</script>

css代码:

//分页
    /deep/.el-pagination{

      margin-bottom: 30px;
      float: right;
      font-size: 20px;
      color: #333333;
      margin-right: 55px;
      font-weight: normal;

    .el-select .el-input{
      width: 126px;
      height: 36px;
    }
    .el-select .el-input .el-input__inner{
      height: 100%;
      font-size: 20px;
      color: #333333;
    }
    .el-pagination__editor.el-input .el-input__inner{
        height: 36px;
    }
    .btn-prev,.btn-next{
      height: 36px;
    }
    .btn-prev{
      border-radius: 5px 0 0 5px;
    }
    .btn-next{
      border-radius: 0 5px 5px 0;
    }
    .el-pager li{
      line-height: 36px;
      height: 36px;
      font-size: 20px;
    }
    .el-pagination__total{
      color: #333333;
    }
     button,span:not([class*=suffix]){
      height: 36px;
      line-height: 36px;
      font-size: 20px;
      color: #333333;
    }
    .el-pagination__editor.el-input{
      font-size: 20px;
    }
  }

十一.悬浮改变图片和文字颜色

图片事例如下:

起始

悬浮后

html代码:

<div class="UserChoice-listtop">
        <div class="listonebtn" @mouseenter="enter1" @mouseleave="leave1">
                 <img :src="img1" />
                 <p>所有用户</p>
        </div>
</div>

js代码

export default {
      data() {
        return {
            img1: require('../../images/alluser.PNG'),}
      },methods: {
            //悬浮切换图片
            enter1: function(){
                this.img1 = require('../../images/alluser2.PNG');
            },leave1: function(){
                this.img1 = require('../../images/alluser.PNG');
            },}

至于文字样式改变的话,直接用css的:hover解决就好。

十二.单选按钮控制模块显示隐藏

html如下:

<div class="attribute-radio" @change="btn">
         <el-radio v-model="radio" label="0"></el-radio>         <el-radio" v-model="radio" label="1"></el-radio> 
</div> <div v-show="show"> <p>我出来了<p> </div>

js如下:

export default {
        data () {
            return {    
                radio:'0',show:false,}
        }
        methods: {
            //选择代理商属性
            btn(){
                if(this.radio==="1"){
                    this.show=true;
                }else{
                    this.show=false;
                }
            },}
}

十三.搜索功能

1.点击按钮进行搜索

html代码:

<!-- 搜索框加按钮 -->
<el-input placeholder="请搜索关键词" prefix-icon="el-icon-search" v-model="keyword"></el-input>
<el-button class="searchbtn" @click="search">搜索</el-button>
<!-- 数据 -->
<ul>
    <li v-for="(item,index) in agentlisttwo" :key="item.id" >
          <p class="p1">{{ index+1>9?index+1:"0"+(index+1) }}</p>
          <p>{{item.userID}}</p>
          <p>{{item.agentnum}}</p>
          <p>{{item.username}}</p>
          <p>{{item.phone}}</p>
    </li>
</ul>

js代码

<script>

    export default {
      data() {
        return {
            keyword:'',//搜索关键词
            agentlisttwo:'',//搜索重定义数组
            agentlist: [{
                userID: "1240",agentnum: "22",username: "张无忌",phone: "13112345678",{
                userID: "1241",agentnum: "23",username: "林平之",phone: "13114785236",{
                userID: "1242",agentnum: "24",username: "令狐冲",phone: "13196584589",{
                userID: "1243",agentnum: "25",username: "独孤求败",phone: "13115963256",{
                userID: "1244",agentnum: "26",username: "包租婆",phone: "13110254523",{
                userID: "1245",agentnum: "27",username: "韦小宝",phone: "13187455236",{
                userID: "1246",agentnum: "28",username: "小燕子",phone: "13174552223",{
                userID: "1247",agentnum: "29",username: "花无期",phone: "13174586358",// 创建完成时
      created() {
           //重定义数组
           this.agentlisttwo =  this.agentlist;
      },methods: {

            search(){
                //搜索
                var keyword = this.keyword;
                if (keyword) {
                        this.agentlisttwo =  this.agentlist.filter(function(agentlist) {
                            return Object.keys(agentlist).some(function(key) {
                                return String(agentlist[key]).toLowerCase().indexOf(keyword) > -1
                            })
                        })
                }else{
                    this.agentlisttwo =  this.agentlist;
                }
            },}

</script>

2.输入框边输入边搜索

html代码:

<!-- 搜索框加按钮 -->
<el-input placeholder="请搜索关键词" prefix-icon="el-icon-search" v-model="keyword" v-on:input ="inputFunc"></el-input>
<!-- 数据 -->
<ul>
    <li v-for="(item,index) in agentlisttwo" :key="item.id" >
          <p class="p1">{{ index+1>9?index+1:"0"+(index+1) }}</p>
          <p>{{item.userID}}</p>
          <p>{{item.agentnum}}</p>
          <p>{{item.username}}</p>
          <p>{{item.phone}}</p>
    </li>
</ul>

js代码

<script>

    export default {
      data() {
        return {
            keyword:'',methods: {

            inputFunc(){
                //搜索
                var keyword = this.keyword;
                if (keyword) {
                        this.agentlisttwo =  this.agentlist.filter(function(agentlist) {
                            return Object.keys(agentlist).some(function(key) {
                                return String(agentlist[key]).toLowerCase().indexOf(keyword) > -1
                            })
                        })
                }else{
                    this.agentlisttwo =  this.agentlist;
                }
            },}

</script>

十四.点击按钮复制文字

html代码:

<!-- 复制链接 -->
<div class="link-popup">
         <div class="link-popup-con">
                <div class="linkpopup-title">分享链接</div>
                 <p>{{address}}</p>
                 <el-button class="copyurl" @click="copylink">复制链接</el-button>
          </div>
 </div>

js代码

export default {
      data() {
        return {
             address:'https://www.baidu.com/',methods: {
            //复制链接
            copylink(){
                const input = document.createElement('input')
                document.body.appendChild(input)
                input.setAttribute('value',this.address)
                input.select()
                if (document.execCommand('copy')) {
                    document.execCommand('copy');
                }
                document.body.removeChild(input)
            },}

十五.点击按钮下载图片

html代码:

<!-- 下载二维码 -->
<div class="link-popup">
         <div class="link-popup-con">
                <div class="linkpopup-title">分享二维码</div>
                <img :src="imgs" />
                 <el-button @click="downloadqrcode">下载二维码</el-button>
         </div>
</div>

js代码

export default {
      data() {
        return {
             imgs:require("../../images/qrcode.PNG"),methods: {
            //下载二维码
            downloadqrcode(){
                //必须同源才能下载
                var alink = document.createElement("a");
                alink.href = this.imgs;
                alink.download = "二维码"; //图片名
                alink.click();
                this.qrcodeshow=false;
            },}

十五.input框禁止输入负数和小数

html代码:

<input type="number" @blur="handleInput($event,index)" v-model="num" />

js代码

//input框
handleInput(e,i) {
           let boolean = new RegExp("^[1-9][0-9]*$").test(e.target.value)
            if(!boolean){
                 this.$message.warning("请输入正整数!")
                 this..num = '1'
            }
 },

还在持续更新中~,觉得有帮助的麻烦关注一下,谢谢!

总结

以上是脚本之家为你收集整理的我的Vue之小功能统计全部内容,希望文章能够帮你解决我的Vue之小功能统计所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

标签: