我的Vue之小功能统计

发布时间：2020-12-16 23:13:16 所属栏目：百科来源：网络整理

导读：进行安装也可以使用的终端进行安装 npm install vue-router npm install --save axios npm install vuex --save npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sass npm i element-ui -S import Vue from 'v

进行安装也可以使用的终端进行安装

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" label无v-model="radio" 有

  我出来了

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

十三.搜索功能

搜索 {{ 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'

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!