vue常用组件、功能

 

vue 顶部页面加载进度条 ：

main.js

//NProgress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({showSpinner: false});
NProgress.configure({ease:'ease',speed:750});
NProgress.configure({minimum:0.3});
NProgress.set(0.4);
router.beforeEach((to, from, next) => {
    NProgress.start()
    next()
})
router.afterEach(() => {
    NProgress.done()
})

app.vue

#nprogress .bar {
  background: #e25132 !important; 
}

 

---

 

vue 实现数字滚动增加效果 ：

https://segmentfault.com/a/1190000015496498

 

<template>
<div class="number-grow-warp">
  <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span>
  </div>
</template>

<script>
export default {
  props: {
    time: {
      type: Number,
      default: 2
    },
    value: {
      type: Number,
      default: 720000
    }
  },
  methods: {
    numberGrow (ele) {
      let _this = this

      let step = (_this.value * 10) / (_this.time * 1000)
      let current = 0
      let start = 0
      let t = setInterval(function () {
        start += step
        if (start > _this.value) {
          clearInterval(t)
          start = _this.value
          t = null
        }
        if (current === start) {
          return
        }
        current = start
        ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
      }, 10)
    }
  },
  mounted () {
    this.numberGrow(this.$refs.numberGrow)
  }
}
</script>

<style>
.number-grow-warp{
  transform: translateZ(0);
}
.number-grow {
  font-family: Arial-BoldMT;
  font-size: 64px;
  color: #ffaf00;
  letter-spacing: 2.67px;
  margin:110px 0 20px;
  display: block;
  line-height:64px;
}
</style>

 

<NumberGrow :value="720000"></NumberGrow>

 

---

 

vue element中登录加入前端的图片验证：

https://blog.csdn.net/qq_34652478/article/details/106666775

 

第一步：新建组件identify.vue

<template>
 <div class="s-canvas">
  <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
 </div>
</template>
<script>
export default{
 name: 'SIdentify',
 props: {
  identifyCode: { // 默认注册码
   type: String,
   default: '1234'
  },
  fontSizeMin: { // 字体最小值
   type: Number,
   default: 25
  },
  fontSizeMax: { // 字体最大值
   type: Number,
   default: 35
  },
  backgroundColorMin: { // 验证码图片背景色最小值
   type: Number,
   default: 200
  },
  backgroundColorMax: { // 验证码图片背景色最大值
   type: Number,
   default: 220
  },
  dotColorMin: { // 背景干扰点最小值
   type: Number,
   default: 60
  },
  dotColorMax: { // 背景干扰点最大值
   type: Number,
   default: 120
  },
  contentWidth: { // 容器宽度
   type: Number,
   default: 90
  },
  contentHeight: { // 容器高度
   type: Number,
   default: 38
  }
 },
 methods: {
  // 生成一个随机数
  randomNum (min, max) {
   return Math.floor(Math.random() * (max - min) + min)
  },
  
  // 生成一个随机的颜色
  randomColor (min, max) {
   let r = this.randomNum(min, max)
   let g = this.randomNum(min, max)
   let b = this.randomNum(min, max)
   return 'rgb(' + r + ',' + g + ',' + b + ')'
  },
  
  drawPic () {
   let canvas = document.getElementById('s-canvas')
   let ctx = canvas.getContext('2d')
   ctx.textBaseline = 'bottom'
   // 绘制背景
   ctx.fillStyle = '#e6ecfd'
   ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
   // 绘制文字
   for (let i = 0; i < this.identifyCode.length; i++) {
    this.drawText(ctx, this.identifyCode[i], i)
   }
   this.drawLine(ctx)
   this.drawDot(ctx)
  },
  
  drawText (ctx, txt, i) {
   ctx.fillStyle = this.randomColor(50, 160) // 随机生成字体颜色
   ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' // 随机生成字体大小
   let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
   let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
   var deg = this.randomNum(-30, 30)
   // 修改坐标原点和旋转角度
   ctx.translate(x, y)
   ctx.rotate(deg * Math.PI / 180)
   ctx.fillText(txt, 0, 0)
   // 恢复坐标原点和旋转角度
   ctx.rotate(-deg * Math.PI / 180)
   ctx.translate(-x, -y)
  },
  
  drawLine (ctx) {
   // 绘制干扰线
   for (let i = 0; i < 4; i++) {
    ctx.strokeStyle = this.randomColor(100, 200)
    ctx.beginPath()
    ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
    ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
    ctx.stroke()
   }
  },
  
  drawDot (ctx) {
   // 绘制干扰点
   for (let i = 0; i < 30; i++) {
    ctx.fillStyle = this.randomColor(0, 255)
    ctx.beginPath()
    ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
    ctx.fill()
   }
  }
 },
 watch: {
  identifyCode () {
   this.drawPic()
  }
 },
 mounted () {
  this.drawPic()
 }
}
</script>

 

第二步，在登录页面中加入

<el-form-item prop="code">
    <el-input type="text" v-model="account.code" placeholder="- - - -">
       <template slot="prepend">验证码</template>
       <template slot="append">
        <div class="login-code" @click="refreshCode">
         <Identify :identifyCode="identifyCode"></Identify>
        </div>
       </template>
      </el-input>
</el-form-item>

 

第三步，引入组件

import Identify from '@/views/identify';


components:{
            Identify
        },//调用组件

created() {
      let reg_user = JSON.parse(window.sessionStorage.getItem('register-user'));
      if (reg_user) {
        this.account.username = reg_user.username;
        this.account.pwd = '';
        this.pwdFocus = true;
      }
    },
mounted () {
          // 初始化验证码
          this.identifyCode = ''
          this.makeCode(this.identifyCodes, 4)
         },


 // 重置验证码
          refreshCode () {
           this.identifyCode = ''
           this.makeCode(this.identifyCodes, 4)
          },
            makeCode (o, l) {
               for (let i = 0; i < l; i++) {
                this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
               }
              },
              randomNum (min, max) {
               return Math.floor(Math.random() * (max - min) + min)
              },

 

第四步，加入参数

identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',
identifyCode: '',


//最后在登录提交按钮中加入
if (this.account.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
 this.$message.error('请填写正确验证码')
    this.refreshCode()
    return
   }

 

---

 

vue 点击下载图片：

        downloadIamge(imgsrc, name) {//下载图片地址和图片名
            var image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function() {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
            
                var a = document.createElement("a"); // 生成一个a元素
                var event = new MouseEvent("click"); // 创建一个单击事件
                a.download = name || "photo"; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = imgsrc;
        },

 

---

 

vue 点击复制粘贴：

https://www.cnblogs.com/ldlx-mars/p/8819717.html

npm install clipboard --save 

 

import Clipboard from 'clipboard';

 

        copy() {  
            var clipboard = new Clipboard('.tag-read');
            clipboard.on('success', e => {  
                // 释放内存  
                this.$message.success('复制成功'); 
                clipboard.destroy()  
            })  
            clipboard.on('error', e => {  
                // 不支持复制  
                this.$message.error('该浏览器不支持自动复制'); 
                // 释放内存  
                clipboard.destroy()  
            })  
        },

 

---

 

vue 动态修改伪元素样式：

https://blog.csdn.net/qq_44827891/article/details/106413564

var(--width)

var(--color)......

 

---

 

vue 自定义标题组件：

<template>
    <div>
        <p class="brforeRoundP" 
            :style="{color:$store.state.contentTextColor,'--color':$store.state.activeColor}">
            {{titleName}}
        </p>
    </div>
</template>

<script>
export default {
    name:'MainTitle',
    props:{
        titleName:String,
    },
    data(){
        return{

        }
    }
}
</script>

<style lang="less" scoped>

    .brforeRoundP{ 
        font-size:1.2em;
        font-weight:bold;
        position:relative;
        display:flex;
        align-items:center;
        padding-left:10px;
        margin:0 0 10px 0;
        color:#545454; }
    .brforeRoundP:before{    
        content: "";
        width: 4px;
        height: 0.8em;
        // background: #e25132;
        background: var(--color);
        position: absolute;
        left: 0;
        border-radius: 999px;}
</style>

 

---