小阮的笔记本

pdf转图片 canvas进行加载 懒加载侧边栏

使用vue-pdf实现pdf预览、翻页、侧边栏预览、放大缩小、禁止下载和打印（并有下载打印的实现方式）

g6手动添加节点和边，修改节点和边信息，获取拓扑图节点和边信息

主要使用的是link的rel属性中的alternate，不清楚的可以看MDN先写好css，然后引入有alternate的时候，需要加上title无alternate、无title：始终应用，无论如何都会加载并渲染无alternate、有title：默认应用，可以选择，作为默认样式CSS文件加载并渲染有alternate stylesheet、有title：默认禁用，可以选择，作为备选样式CSS文件加载，默认不渲染通过js来控制disabled，达到换肤的效果<temp

看了源码解析重写了一下<h3>vue mvvm</h3><div id="app"> <h2 v-text="title"></h2> <p v-text="name"></p> <input v-model="name"></div><script type="text/javascript"> function Vue(opt) {

contenteditable属性全局属性 contenteditable 是一个枚举属性，表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。该属性是一个枚举属性，而非布尔属性。这意味着必须显式设置其值为 true、false 或空字符串中的一个，并且不允许简写为 <label contenteditable>Example Label</label>正确的用法是 <label contenteditable="true">Example L

手写一个抽屉组件基于vue的过渡动画样式（点击消息提醒，从右侧弹出抽屉）transition + v-show/v-if<template> <transition name="show" mode="out-in" @before-enter='transitionComplete' @after-leave='transitionComplete' @enter='transitioning' @leave='transitioning'>

效果图直接在需要的页面引用该组件就行<template> <div id="panel"> </div></template><script>export default { methods: { mouseMove(e) { /*这里获取元素节点*/ let oPanel = document.getElementById("panel");

需求： 当用户登录之后，我们可能需要每隔N秒，会去请求一下接口，去判断登录状态变化。这里肯定要用到全局路由守卫router.beforeEach，登录之后路由跳转，开启定时器。import userLoginState from './userLoginState';router.beforeEach((to, from, next) => { if (to.name !== 'signIn' && to.meta.auth) { userLoginS

样式（主要自定义了左边快捷选项，可以自己自定义，默认近七日）props传参：[startTime,endTime] (yyyy-mm-dd)类型<template> <div class="date-picker"> <el-date-picker v-model="dateTime" type="daterange" align="right" u.

末尾有vue的echarts组件echarts自适应页面 let myChart = echarts.init(document.getElementById(`${this.id}`)); myChart.clear(); myChart.setOption(option, true); window.addEventListener("resize", () => { myChart.resize(); });提示+吸附 .

//html//锚点<div class="title" id="#title">锚点</div>//跳转<div @click="scollTo()"></div>//jsscollTo() { document.querySelector('#title').scrollIntoView({ behavior:'smooth', block:'start' });},详情MDN...

给页面加上水印用canvas画一张背景图export default { //tool.js addWaterMark() { const strArr = `${localStorage.getItem( "loginUserName" )}${localStorage .getItem("logunUserPhone") .slice(7, 11

会用到的知识父组件向子组件传值slot插槽我想要做一个这样的组件头部基本不变，只需要改变图标和标题下面的内容需要我们改变，可以是视频、资料、新闻等。1.先定义一个Card.vue的组件接收父组件动态传过来的图标和标题<template> <div> <!-- card --> <div class="card ...

我是想要实现表单加上图片的上传首先前端代码<template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" enctype='multipart/form-data'> <el-form-item label...

vue的transition动画关于vue中animation动画问题1.找到要用动画的元素。我是想要实现切换页面的动画效果，所以找到app.vue中的router-view，用transition将它包裹起来。2.用动画库animate.css，需要npm install animate.css --save3.在main.js中引入动画import animated from...