要实现如图所示的验证码登录： 1、展示中以图片的形式来做展示出来 2、其中@keyup.enter=”doSubmit”为enter键执行doSubmit函数 3、图片的展示地址为url 12345678910111213141516171819<el-form-item prop="checkCode"> <div class="check-code-panel"> <el-input size="large" placeholder="请输入验证码" v-model.trim="formData.checkCode" @keyup.enter="doSubmit" > <template #prefix> <span class="iconfont icon-checkcode"></ ...

当点击“未收到邮箱验证码”时弹出左边所示的气泡框。 elemt-plus组件使用范例如下 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677<template> <el-popover placement="top-start" title="Title" :width="200" trigger="hover" content="this is content, this is content, this is content" > <template #reference> <el-button class="m-2">Hov ...

如图：要实现如上所示的3D滚动轮播图效果 采用https://wlada.github.io/vue-carousel-3d/playground/所示的组件 具体实现代码如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106<!-- autoplay：自动旋转autoplayTimeout：旋转倒计时perspective：非主slide朝内旋转的角度inverseScaling：非主slide离屏幕的距离space：非主slide的间隔宽度loop:是否循环轮播width:轮播图宽度height：轮播图高度--><template> <div > <car ...

要实现如图所示的上传头像的功能 1、其中img的展示通过v-if来控制展示哪张图片，如果this.avatar值为空，展示默认图片，否则展示上传的图片。 2、通过input type=”file“ 来设置上传按钮的属性，同时设置属性名为iptRef，展示为隐藏展示 3、通过两个按钮来分别实现选择图片和上传图片的功能 4、按钮本身没有上传文件的功能，通过选择图片按钮的点击事件触发chooseImg执行函数，模拟input的点击行为，执行模型行为同时触发change的onFileChange执行函数 5、获取avatar资源，同时上传头像的disable与否通过是否有avatar来决定 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384<template> <div> <e ...

管理系统的容器布局： 要实现如下样式的布局 范例代码如下： 123456789101112<template> <div class="common-layout"> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> </el-container> </el-container> </div></template>

当我们要实现如上所示的表单校验规则时： elemt-plus给出如下所示范例与代码 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109rules:表示的是表单规则model 为绑定数据ref 绑定控件，$refs 获取控件ref 是接收dom数据的属性， 而:model就是要接受的数据本身<template> <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width=" ...

1、打包问题 文件路径的配置，设置base文件路径 noUnusedLocals和noUnusedParameters这两项分别用来检测是否有无用变量和无用参数分别设置为false，防止打包报错。 2、Content Security Policy: 升级不安全的请求“https://sph-api.atguigu.cn/admin/acl/index/login”至使用“https” 1<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> index.html文件会默认将http请求转为https，但是目标api的域为http会产生冲突。治标不治本的方式是chorm浏览器设置，允许显示不安全的网页中添加目标网址。

博客中插入项目展示 当hexo文件经历过npx hexo cl && npx hexo g && npx hexo s后 把我们已经打包好的项目复制到生成的public文件目录下 在link中写入跳转链接，跳转到项目中去 其中部署项目出现如下问题：1Mixed Content: The page at https://xxx was loaded over HTTPS 问题原因：通过对代码以及报错信息分析，问题出现在跨域请求上，（跨域请求：跨域是指浏览器不允许当前所在的源请求去访问另一个不一样的源请求，源是指请求协议、域名、端口号，这三个如果有一个不一致就是跨域请求） 解决方式http请求变更为https处理方式在生成的index.html中添加如下代码 1<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

1、标题封面的设置，设置为如下所示的标题封面 md文件，Front-matter是文档最上方以一分隔的区域，用于指定文件的变数。 其中cover的设置就是为了改变封面。 其设置如下 1cover: '/img/favicon.png' 注意这边的img文件夹对应的是butterfly中source下的img 2、link链接的设置创建友情链接页 1hexo new page link 找到source/link/index.md这个文件，修改为 12345---title: 友情链接date: 2018-01-05 00:00:00type: "link"--- 添加友情链接 在Hexo博客目录中的source/_data，创建一个文件link.yml 内容如下 12345678class: class_name: 本站 link_list: 1: name: Hello #这里举一个例子 link: https://rady3.github.io/dist/#/ ...

要实现如上静态与动态面包屑的功能。 静态面包屑：主要借助elemt-plus中的el-breadcrumb来实现 $route.matched是给定路由地址匹配的标准化的路由记录数组 1234567891011121314151617<!-- 左侧面包屑 --><el-breadcrumb separator-icon="ArrowRight"> <!-- 面包动态展示路由名字与标题 --> <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index" v-show="item.meta.title" :to="item.path" > <!-- 图标 --> <el-icon> <component :is="item.meta.icon">&l ...