- 博客(51)
- 收藏
- 关注
RSS订阅原创 Vue3+codemirror6实现公式（规则）编辑器
vue3+codemirror6+ts实现公式编辑器，可以插入标签、公式，也有补全提示
2025-02-07 10:56:36
1847
2
原创 Leaflet+Leafer实现地层、井轨迹的切面图展示
leaflet+leafer，通过地图筛选数据，然后通过leafer画出筛选后井的轨迹和地层的切面图
2024-12-18 15:57:09
490
原创 Vue3中使用LogicFlow实现简单流程图以及节点/边的配置
Vue3使用LogicFlow实现流程图，拖拽节点、自定义节点、自定义快捷键、动态配置项、表单验证...
2024-11-07 17:11:07
3090
原创 使用Vue-PDF实现预览、翻页、放大缩小、侧边栏预览
使用vue-pdf实现pdf预览、翻页、侧边栏预览、放大缩小、禁止下载和打印（并有下载打印的实现方式）
2023-04-13 17:04:50
3943
原创 Vue通过link实现换肤功能
主要使用的是link的rel属性中的alternate，不清楚的可以看MDN先写好css，然后引入有alternate的时候，需要加上title无alternate、无title：始终应用，无论如何都会加载并渲染无alternate、有title：默认应用，可以选择，作为默认样式CSS文件加载并渲染有alternate stylesheet、有title：默认禁用，可以选择，作为备选样式CSS文件加载，默认不渲染通过js来控制disabled，达到换肤的效果<temp
2021-05-31 14:56:17
420
原创 vue的mvvm的简易实现
看了源码解析重写了一下<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) {
2021-03-30 11:06:33
147
原创 小程序自定义tabBar实现
1. app.json中开启自定义 "tabBar": { "custom": true,//开启自定义 "list": [ { "pagePath": "pages/index/index", "text": "发现", "iconPath": "images/homeFill.png", "selectedIconPath": "images/homeFillActive.png" },
2021-03-25 11:25:40
209
原创 探索JS数值
参考文章网道-数值整数和浮点数JavaScript 内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。所以，1与1.0是相同的，是同一个数。1 === 1.0 // true但是浮点数不是精确的值，运算要注意0.1 + 0.2 === 0.3 // false0.1 + 0.2 //0.300000000000000040.3 / 0.1 // 2.9999999999999996parseFloat((0.1+0.2).toFixed(10))===0.3 //t.
2020-12-17 15:30:52
144
原创 div的contenteditable属性(及鼠标位置问题)
contenteditable属性全局属性 contenteditable 是一个枚举属性，表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。该属性是一个枚举属性，而非布尔属性。这意味着必须显式设置其值为 true、false 或空字符串中的一个，并且不允许简写为 <label contenteditable>Example Label</label>正确的用法是 <label contenteditable="true">Example L
2020-12-15 12:26:31
3573
2
原创 vue手写一个抽屉组件
手写一个抽屉组件基于vue的过渡动画样式（点击消息提醒，从右侧弹出抽屉）transition + v-show/v-if<template> <transition name="show" mode="out-in" @before-enter='transitionComplete' @after-leave='transitionComplete' @enter='transitioning' @leave='transitioning'>
2020-11-26 16:28:09
1390
原创 Vue鼠标移动跟随特效（开箱即用）
效果图直接在需要的页面引用该组件就行<template> <div id="panel"> </div></template><script>export default { methods: { mouseMove(e) { /*这里获取元素节点*/ let oPanel = document.getElementById("panel");
2020-11-11 17:14:44
5670
7
原创 vue3.0路由route/router的使用
注意vue-router版本，我用的是"vue-router": "^4.0.0-alpha.6"官网的使用步骤// 1. Define route components.// These can be imported from other filesconst Home = { template: '<div>Home</div>' }const About = { template: '<div>About</div>' }// 2. .
2020-10-22 12:11:40
12281
原创 Vue3.0初体验（组合API使用）
关于watch监听监听简单的数据 const num = ref(0); const numAdd = () => { num.value++; }; watch( () => num.value, (newNum, oldNum) => { console.log(newNum); console.log(oldNum); } );
2020-10-21 17:55:48
779
原创 vue用户登录之后每隔30s验证
需求： 当用户登录之后，我们可能需要每隔N秒，会去请求一下接口，去判断登录状态变化。这里肯定要用到全局路由守卫router.beforeEach，登录之后路由跳转，开启定时器。import userLoginState from './userLoginState';router.beforeEach((to, from, next) => { if (to.name !== 'signIn' && to.meta.auth) { userLoginS
2020-10-19 16:53:01
416
原创 vue封装日期组件（基于elementUI）
样式（主要自定义了左边快捷选项，可以自己自定义，默认近七日）props传参：[startTime,endTime] (yyyy-mm-dd)类型<template> <div class="date-picker"> <el-date-picker v-model="dateTime" type="daterange" align="right" u.
2020-10-10 11:08:01
1177
原创 vue的echarts学习（折线图line，柱状图bar）
末尾有vue的echarts组件echarts自适应页面 let myChart = echarts.init(document.getElementById(`${this.id}`)); myChart.clear(); myChart.setOption(option, true); window.addEventListener("resize", () => { myChart.resize(); });提示+吸附 .
2020-09-24 10:16:34
1557
原创 elementUI级联选择器Cascader，删除tag存在的问题
elementUI级联选择器Cascader，删除tag存在的问题 <div class="address-choose"> <div class="card-show"> <el-button class="tags" v-for="(item,index) in cityShowList" :key="index"
2020-09-17 17:15:19
4702
原创 js一行代码实现回到顶部滚动(带过渡效果)
//html//锚点<div class="title" id="#title">锚点</div>//跳转<div @click="scollTo()"></div>//jsscollTo() { document.querySelector('#title').scrollIntoView({ behavior:'smooth', block:'start' });},详情MDN...
2020-08-30 15:43:53
653
原创 background[-color/-image]优先级问题
background和background-colorbackground和background-imagebackground-color 和 background-imagebackground/background-color/background-image
2020-08-13 14:54:18
1833
原创 超实用的浏览器截屏(全屏、区域、节点)
截全屏截区域截节点截全屏f12ctrl+shift+pscreenshotCapture full size screenshot/Capture screenshot区域截图f12ctrl+shift+pscreenshotCapture area screenshot节点截图f12ctrl+shift+p选中节点screenshotCapture node screenshot...
2020-08-13 14:27:50
1182
原创 Vue如何给页面加水印（超简单）
给页面加上水印用canvas画一张背景图export default { //tool.js addWaterMark() { const strArr = `${localStorage.getItem( "loginUserName" )}${localStorage .getItem("logunUserPhone") .slice(7, 11
2020-07-30 09:21:35
4732
7
原创 apply/call/bind的用法及区别
每个函数都包含两个非继承而来的方法：call()和apply()；在JavaScript中，call和apply作用是一样的，都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部this的指向。bind()方法会创建一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入 bind()方法的第一个参数作为 this，传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。apply/cal
2020-06-15 17:44:57
417
原创 es6数组和对象常用方法
数组forEach() 方法对数组的每个元素执行一次给定的函数。var arr = [1, 2, 3]arr.forEach((value, index) => { console.log('数组值：' + value); console.log('数组索引：' + index);})map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一次提供的函数后的返回值。var arr = [1, 2, 3]var arr1 = arr.map((value, in
2020-06-14 17:00:57
833
原创 关于js继承的方法
通过es6实现继承// es6继承class Animal { constructor(name, age) { this.name = name this.age = age } eat() { console.log('eat'); }}class Dog extends Animal { constructor(name, age, food) { super(name, age) //相当于调用了父构造函数，必须在 this.food =
2020-06-13 21:20:34
140
原创 VUE的高级特性
VUE 高级特性自定义 v-model在 vue 中，v-model 是用来进行数据双向绑定的一个语法糖，比如说用在 input 上，输入框数据变化，v-model 绑定的对应的值也会跟着变化，无需单独获取。其实 v-model 还可以在自定义组件中使用，可以被拆解为 props:value 和 event：input，也就是说组件必须接收一个 value 值以及名为 input 的自定义事件，就可以在自定义组件上使用 v-model 了。新建一个组件UseVModel.vue<te
2020-05-12 18:07:19
415
原创 关于vue的watch监听
<template> <div class="hello"> <button @click="change1">改变msg</button> <h1>{{msg}}</h1> <hr> <button @click="change2">改变obj</button> <h2>{{obj.a}}</h2> </div>&
2020-05-10 17:47:22
382
2
原创 一次完整的HTTP服务过程
分析：当我在浏览器输入www.baidu.com，具体发生了什么？首先对www.baidu.com这个网址进行DNS域名解析，得到对应的IP地址。（解析域名）根据IP找到对应的服务器，发起TCP的三次握手。（发起连接）建立TCP连接，发起HTTP请求。（建立连接）服务器响应HTTP请求，发送HTML代码，浏览器得到代码。（响应请求）浏览器解析HTML代码，并请求HTML中的资源（css...
2020-04-30 16:31:02
345
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人