Vue网站局部实现
文章平均质量分 51
莫亓
力氵口 口由巴 .
https://github.com/censek
展开
-
【Vuetify】v-pagination 怎样输入页码跳转
Vuetify 中提供了 v-pagination 分页的功能,如下图:这样只能两个两个的往下获取页码,如果页码很多的话,查找起来极其不便,所以能不能加个输入页码跳转的功能呢?????️<v-row> <v-col cols="8"> <v-pagination v-model="pageNumber" :length="itemLength" total-visible="10" circle color="#c34450"></v-pagin原创 2021-01-29 09:41:43 · 1667 阅读 · 0 评论 -
vuetify 表格:表头合并单元格
我想用 vuetify 的 v-data-table 实现下面这个表格:(表头有2行,且需要单元格合并)直接上代码:<v-data-table :items="standardDesserts" hide-default-footer> <template v-slot:body="{ items }"> <thead> <tr> <template v-for="(headerItem1, idx1) in原创 2020-12-16 10:10:54 · 2106 阅读 · 0 评论 -
html 导出为 PDF:因页面内有横向滚动条而显示不全的解决方案
在 Vue 中,将 html 内容导出为 PDF为了使横向滚动条的内容全部展示,需要指定 width: document.getElementById(id).scrollWidth。<div ref="myContainer"> <!-- 我是需要导出的内容 --></div>// 生成pdfgetPDF() { this.generatePDF( this.$refs.myContainer, "我是下载的pdf的名字,随便起.原创 2020-12-16 09:11:56 · 4903 阅读 · 2 评论 -
在 Vue 中,将 html 内容导出为 PDF
需要用到两个插件:html2canvas 和 jsPDFnpm install html2canvasnpm install jspdf --saveimport html2canvas from 'html2canvas';download() { // 下面的"print"为需要导出内容的id(把想导出的html内容用div包起来,加上id="print"即可) html2canvas(document.getElementById("print")).then(function原创 2020-06-10 16:47:01 · 1177 阅读 · 3 评论 -
通过监听当前路由的变化,动态更新面包屑的内容
引入 vuetify 的 Breadcrumbs 组件来实现面包屑功能。发现路由变了之后,面包屑内容没有更新。需要刷新才会变化。此时,就需要:监听当前路由的变化,动态更新面包屑的内容watch: { $route() { this.getBreadCrumbs(); }},created() { this.getBreadCrumbs();},...原创 2020-05-21 13:40:07 · 1171 阅读 · 0 评论 -
如何在 Vue 中使用 Font Awesome 字体图标
安装???? 参考链接:https://blog.csdn.net/zyj362633491/article/details/86422353原创 2020-04-26 16:20:03 · 2253 阅读 · 0 评论 -
CSS:加载中转圈动画效果
<div class="donut"></div>@Keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}.donut { display: inline-block; borde...原创 2020-03-27 09:03:46 · 3013 阅读 · 3 评论 -
Vue 路由传参及接收参数
???? 方法一:params 传参this.$router.push({ name:"admin", //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id}}) //这个组件对应的路由配置{ //组件路径 path: '/admin', //组件别名 n...原创 2020-01-03 15:44:53 · 11728 阅读 · 1 评论 -
百度地图API,改变驾车路线颜色(仿淘宝快递查询,一条路线两个颜色)
想仿淘宝做一个物流查询,分为:寄件点、当前点、 收件点 和 路线图。快递已走的路径(寄件点到当前点的颜色)和未走的路径(当前点到收件点)用 颜色 进行区分。利用百度地图提供的API(当时遇到了点问题,所以用的版本是 JavaScript API V2.0)—— 驾车路线规划。百度地图提供的驾车路线规划包括:起点,终点,途经点;和 物流查询 中我可以提供的数据恰好对应。百度地图AP...原创 2019-11-22 14:58:41 · 2883 阅读 · 0 评论 -
怎样修改浏览器标签页上网站的小图标?(设置 favicon 图标)
⚠️ 注意: 用做网站图标的图片文件必须是ico类型,文件名最好统一命名 favicon.icoico 图标在线制作:http://www.faviconico.org步骤:将 favicon 图片放到 static 文件夹下用 vue-cli 搭建的Vue项目。然后在 index.html 中添加:<link rel="shortcut icon" type="...原创 2019-10-24 10:51:51 · 1514 阅读 · 0 评论 -
利用CSS3简单实现加载中效果
<template> <p class="demo">加载中</p></template>.demo:after{ content: "."}.demo:after { animation: dot 3s linear infinite;}@keyframes dot { 0% { content: "."; ...原创 2019-10-21 13:51:43 · 271 阅读 · 0 评论 -
vuelidate 表单验证:必填字段 / 数字,阻止提交 ;自定义验证规则
第一步:安装,导入main.js中可以通过 npm 安装npm install vuelidate --save如果报错,试试加上 sudo然后导入到 main.js 中import Vuelidate from 'vuelidate'Vue.use(Vuelidate)第二步:在组件中使用Vuetify:Forms数据需要用 v-model 绑定, this.$v....原创 2019-08-28 15:29:10 · 4330 阅读 · 0 评论 -
接口:添加成员的两种方法(如果已存在就不添加)
router.post("/memberAdd",(req,res)=>{ let memberid = req.body.id let projectid = req.body.index ProjectList.findOne({"_id": projectid}, function(err,data) { if (err) { res.json({ ...原创 2019-08-27 13:41:50 · 444 阅读 · 0 评论 -
踩坑:for循环里判断条件返回不同结果出错
❌ 原想法: for循环错误:Cannot set headers after they are sent to the client …✅ 解决办法: 用some() + filter()方法代替含有if、else的for循环if (data.some(item => { return 判断条件 })) { data = data.filter(item =...原创 2019-08-22 13:57:04 · 574 阅读 · 0 评论 -
Vue 使用filters进行内容转换
<td>{{ props.item.project.manager | getName }}</td>直接上图:原创 2019-08-20 16:26:13 · 1265 阅读 · 0 评论 -
Vue实现验证码倒计时按钮
描述:点击发送验证码”按钮后进行逻辑判断:▶️ 如果邮箱已输入且格式正确:按钮变为“已发送”,此时为不可点击状态 并开始120s倒计时;▶️ 如果邮箱未输入或格式不正确:显示错误的提示信息。120s倒计时结束后按钮变为“重新发送验证码”。html:<div v-bind:class="{ 'text_email': isActive, 'text_tip': isTip }"...原创 2019-08-02 15:12:05 · 1234 阅读 · 0 评论 -
Vue登录密码的显示与隐藏
点击小眼睛图标,实现输入框中密码的显示与隐藏: <i class="icon-password"></i> <input type="text" v-if="pwdType" v-model="eyeTxt" /> <input type="password" placeholder="输入新密码" v-model="eyeTxt" v-...原创 2019-07-16 13:38:59 · 5689 阅读 · 7 评论 -
消除button按钮默认点击蓝色边框效果 / 鼠标经过按钮变色 / CSS实现按钮点击水波纹效果
<button class="btn">确定</button>.btn { width: 153px; height: 40px; background: #f39b18; border: none; border-radius: 4px; font-family: Helvetica; font-size: 16px; color: #fffff...原创 2019-07-12 23:02:07 · 5411 阅读 · 0 评论 -
Vue mongoDB 连接口
△ 增:post()insertMany()接口:router.post('/url', function(req,res) { var xxx = req.body.xxx; …… XX.insertMany({ xxx: xxx …… }, function(err,docs) { if(err) { ...原创 2019-08-20 15:43:34 · 401 阅读 · 0 评论