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>
