我的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);
};

//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

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

alert(sessionStorage.getItem('aaa'))

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

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

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

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

六.实时显示当前时间

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);
},}

七.自定义滚动列表

  • 张三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表单提交

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

    十.实现分页效果

    序号 姓名 手机号 性别 用户等级 上级用户 创建日期 操作 {{ 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;">>

    { 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;

    }

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

    所有用户

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

    解决就好。

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

    v-model="radio" labelv-model="radio"
      我出来了 

    export '0' (.radio==="1".show=.show=

    十三.搜索功能

    搜索 {{ index+1>9?index+1:"0"+(index+1) }} {{item.userID}} {{item.agentnum}} {{item.username}} {{item.phone}}

    {{ index+1>9?index+1:"0"+(index+1) }} {{item.userID}} {{item.agentnum}} {{item.username}} {{item.phone}}

    十四.点击按钮复制文字

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

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

    十五.点击按钮下载图片

    分享二维码 下载二维码

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

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

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

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

    相关文章

    https://segmentfault.com/a/1190000022018995 https://www....
    ES6 (ECMAScript 6)中的模块是一个包含 JavaScript 代码的...
    from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ V...
    D:\Temp&gt;npm init vite@latest vue3study --temp...
    文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组...
    文章浏览阅读3.3k次,点赞3次,收藏16次。静默打印是什么?简...