我的Vue之小功能统计

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

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

npm install vue-router

npm install --save axios

npm install vuex --save

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

npm i element-ui -S

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: '',})

二.路由配置（index.js）

图片如下（进行路由跳转）

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: '修改密码'},]
},......
],})

页面的解决方法

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

文件

//设置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);
};

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

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

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

退出登录

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

页面缓存aaa的值

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

页面去获取到值

alert(sessionStorage.getItem('aaa'))

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

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

B获取

let aaa=.$route.query.orderId

四.发送验证码

图片如下

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自适应屏幕宽高

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

HTML代码：

代码：

export default {

    data() {
        return<span> {
            myWidth: (window.innerWidth - 240) + 'px'<span>,myHeight: (window.innerHeight - 100) + 'px'<span>,}</span></span></span></span></pre>

六.实时显示当前时间

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

HTML代码

代码

export default {

    data() {
        return<span> {
            nowTime:""<span>,nowWeek:""<span>,// 创建完成时

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代码

张三1

张三2

张三3

张三4

张三5

张三6

张三7

代码

.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;
}</pre>

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

八.判断数据列表序号

图片如下

9?index+1:"0"+(index+1) }}

代码

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

九.Form表单提交

HTML代码

代码

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

十.实现分页效果

效果图如下

HTML代码：

序号姓名手机号性别用户等级上级用户创建日期操作 {{ index+1>9?index+1:"0"+(index+1) }} {{ item.name }} {{ item.phone }} {{ item.sex==1?"男":"女" }} {{ item.user }} {{ item.username }} {{ item.date }} <查看<修改<删除

       <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;div </span><span style="color: #ff0000;"&gt;class</span><span style="color: #0000ff;"&gt;="page"</span><span style="color: #0000ff;"&gt;></span>
            <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;el-pagination
                  </span><span style="color: #ff0000;"&gt;@size-change</span><span style="color: #0000ff;"&gt;="handleSizeChange"</span><span style="color: #ff0000;"&gt;
                  @current-change</span><span style="color: #0000ff;"&gt;="handleCurrentChange"</span><span style="color: #ff0000;"&gt;
                  :current-page</span><span style="color: #0000ff;"&gt;="currentPage"</span><span style="color: #ff0000;"&gt;
                  :page-sizes</span><span style="color: #0000ff;"&gt;="[5,10,20,40]"</span><span style="color: #ff0000;"&gt;
                  :page-size</span><span style="color: #0000ff;"&gt;="pagesize"</span><span style="color: #ff0000;"&gt;        
                  layout</span><span style="color: #0000ff;"&gt;="total,sizes,prev,pager,next,jumper"</span><span style="color: #ff0000;"&gt;
                  :total</span><span style="color: #0000ff;"&gt;="tableData.length"</span><span style="color: #0000ff;"&gt;></span>
            <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;el-pagination</span><span style="color: #0000ff;"&gt;></span>
       <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>

<span style="color: #0000ff;"></<span style="color: #800000;">template<span style="color: #0000ff;">>

代码：

分页 /deep/.el-pagination{

  margin-bottom</span>:<span style="color: #0000ff;"&gt; 30px</span>;<span style="color: #ff0000;"&gt;
  float</span>:<span style="color: #0000ff;"&gt; right</span>;<span style="color: #ff0000;"&gt;
  font-size</span>:<span style="color: #0000ff;"&gt; 20px</span>;<span style="color: #ff0000;"&gt;
  color</span>:<span style="color: #0000ff;"&gt; #333333</span>;<span style="color: #ff0000;"&gt;
  margin-right</span>:<span style="color: #0000ff;"&gt; 55px</span>;<span style="color: #ff0000;"&gt;
  font-weight</span>:<span style="color: #0000ff;"&gt; normal</span>;<span style="color: #ff0000;"&gt;

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

}

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

图片事例如下：

HTML代码：

所有用户

代码：

export '../../images/alluser.png'图片 enter1: .img1 = require('../../images/alluser2.png'.img1 = require('../../images/alluser.png'

文字样式改变的话，直接用css的解决就好。

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

dio" dio v-model="radio" label无diodiov-model="radio" 有dio

  我出来了

export dio:'0'属性 (.radio==="1".show=.show=

十三.搜索功能

搜索

HTML代码：

搜索框加按钮搜索关键词" 搜索 {{ index+1>9?index+1:"0"+(index+1) }} {{item.userID}} {{item.agentnum}} {{item.username}} {{item.phone}}

代码：

搜索

HTML代码：

搜索框加按钮搜索关键词" {{ index+1>9?index+1:"0"+(index+1) }} {{item.userID}} {{item.agentnum}} {{item.username}} {{item.phone}}

代码：

十四.点击按钮复制文字

HTML代码：

链接分享链接 {{address}} 复制链接

代码：

export 'https://www.baidu.com/'链接 = document.createElement('input''value', (document.execCommand('copy''copy'

十五.点击按钮下载图片

HTML代码：

二维码分享二维码下载二维码

代码：

export "../../images/qrcode.png"二维码 alink = document.createElement("a"= = "二维码"; 图片名 .qrcodeshow=

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

HTML代码：

代码：

= RegExp("^[1-9][0-9]*$"(!.$message.warning("请输入正整数!"..num = '1'

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

原文链接：https://www.f2er.com/vue/74419.html

上一篇：关于vue的常识问题及解决方法下一篇：Vue怎么使用Echarts创建图表

我的Vue之小功能统计

猜你在找的Vue相关文章