- 博客(137)
- 收藏
- 关注
RSS订阅原创 jsTicket前端实现微信公众号页面设置禁止分享（比如分享到好友，朋友圈等）
jsTicket前端实现微信公众号页面设置禁止分享（比如分享到好友，朋友圈等）
2024-01-09 15:25:12
704
原创 ant-design中textArea组件获取光标位置，插入表情之后自动将光标移至文本的最后
ant-design中textArea组件获取光标位置，插入表情之后自动将光标移至文本的最后
2023-04-18 14:45:22
1390
原创 js实现两盒子向上卷曲联动
函数放在mounted钩子函数调用handleScrollEvent() { const oneTable = this.$refs.baseLineDataOne.$refs.oTable.$refs.body oneTable.addEventListener('scroll', (event) => { // let target = event.target // this.scrollTop = target.scrollTop.
2022-05-10 17:31:43
232
原创 实现搜索结果高亮显示
1.低配版（不带特殊字符转义，不区分大小写）：获取要高亮匹配的盒子，再实现盒子里的innerHTML高亮匹配let r = document.getElementsByClassName('ivu-tree-title') let nodeList = Array.from(r) if (nodeList.length) { nodeList.forEach(item => { item.innerH
2021-10-27 17:20:52
571
原创 input输入框获取焦点之后，显示搜索记录下拉表，点击其他地方搜索记录框消失
给input框绑定一个focus事件，获取焦点时给全局绑定一个点击事件，判断下次点击的地方在不在输入框和下拉框内，不在则下拉框消失。记得清除这个点击事件。具体代码如下： // 处理搜索框获取焦点 handleInputSearch () { this.isOnSearch = true document.addEventListener('click', this.listenClick) }, listenClick (event) { c
2021-10-27 15:13:38
1628
1
原创 原生draggleable属性实现拖拽功能
给dragover事件的target盒子都绑定一个id或groupName属性，便于判断元素是否可以拖拽到那个位置<UxCard class="ux-page-modelSet__container flex-column" inner> <div :class="['model-set-container-box', isView ? 'model-set-container-box-view' : '']"> <templ.
2021-10-26 16:18:58
442
原创 canvas将上传的图片文件绘制一个空心圆并往里加个图片，解决canvas绘制jpeg,jpg图片背景变黑为题
async handleGetFile(file) { if (file.size / 1024 / 1024 > 15) { this.$Message.error(`文件大小最大为15M`) return } this.showUpLoadImage(file, file.name) },//处理文件显示 showUpLoadImage(file, fileName) { let rea...
2021-10-26 15:59:36
433
原创 vuex
是vue配套的公共数据管理工具，它可以把一些共享的数据保存到vuex中，方便整个程序的任何组件直接获取或修改公共数据vuex是为力保村组件之间贡献数据诞生的，如果组件之间有共享数据，就可以挂载到vuex中，而不必通过父子组件之间传值，如果组件之间的数据不需要共享，那这些不需要共享的数据就不需要挂载到vuex中vues是一个共享的数据存储区域，相当于是一个数据仓库装包： npm i vuex -S//1、创建数据存储对象：var store = new Vuex.store({ ...
2020-07-30 11:48:00
109
原创 vue vue-router中编成式导航 this.$router.go(-1)控制页面的返回
在vue中，控制页面跳转有两种方法：①router-link 的 to 属性指定要跳转的页面，再在 router.js 里面添加这个路由②编成导航 1. 为dom元素绑定点击事件 2. 点击之后触发 this.router.push 事件，共四种方式// 字符串router.push('home')// 对象router.push({ path: 'home' })// 命名的路由router.push({ name: 'user', params: { userI...
2020-07-28 16:15:52
1612
原创 vue 格式化事件插件moment的使用
main.js里面的引入：// 格式化事件的插件momentimport moment from 'moment'// 定义全局过滤器Vue.filter('dataFormat', function (dataStr, pattern = "YYYY-MM-DD HH:mm:ss") { return moment(dataStr).format(pattern)})组件里面的应用： <span>发表时间：{{ item.add_time | dataFor.
2020-07-23 18:53:25
346
原创 封装读取文件的方法，引入promise
// 需求：封装一个方法，传一个路径，返回文件内容const path = require('path')const fs = require('fs')// 读取文件// fs.readFile(path.join(__dirname, './1.txt'), 'utf-8', function (err, data) {// if (err) {// throw err// } else {// console.log(data)/.
2020-07-22 22:23:52
601
原创 vue render函数渲染组件
render函数创建的元素将会替换el指向的那个容器<body> <div id="app"></div> <script> var login = { template: '<h1>登录页面</h1>' } var vm = new Vue({ el: '#app', data: {},
2020-07-20 18:19:55
222
原创 webpack配置-----有点乱。。。。
是前端的一个项目构建工具，基于nodejs开发出来的安装的两种方式：npm i webpack -g 全局安装npm i webpack --save-dev 安装到项目依赖中作用：①能够处理js文件的相互依赖关系②能够处理js兼容问题，把高级的浏览器不能识别的语法转为低级的，浏览器能正常识别的语法用法： webpack ./src/msin.jd ./dist/bundle.js 前者转换为后者webpack配置文件：webpack ./src/msin.jd ./dist/bun...
2020-07-18 22:59:21
283
原创 vue 使用命名视图实现经典布局-------components里面传对象-----router-view里面增加name属性
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g.
2020-07-18 16:54:06
766
原创 vue -vue-router.js+children实现路由嵌套
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g.
2020-07-18 16:18:38
525
原创 vue-路由传参的两种方式query和params方式-----个人更喜欢query方式，好记一些
第一种方式：querythis.$route.query<body> <div id="app"> <!-- 在路由中如果用查询字符串给路由传参，则不需要修改路由的path属性 --> <router-link to="/login?id=10&name=zs">登录</router-link> <router-link to="/register">注册<
2020-07-18 11:16:59
164
原创 vue vue-router.js路由的基本使用
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g.
2020-07-18 10:13:29
979
原创 vue $refs获取dom元素和组件方法的引用
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g.
2020-07-17 22:17:48
819
原创 vue 评论小案例
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g.
2020-07-17 21:40:25
429
2
原创 vue component组件切换的第二种方式和组件切换动画
<body> <div id="app"> <a href="#" v-on:click.prevent="name='login'">登录</a> <a href="#" v-on:click.prevent="name='register'">注册</a> <!-- component是vue提供的一个占位符，根据name来判断里面要显示的内容 --> &.
2020-07-17 12:19:14
346
原创 vue组件component搭配v-if和v-else实现组件切换
<body> <div id="app"> <a href="#" v-on:click.prevent="flag=false">登录</a> <a href="#" v-on:click.prevent="flag=true">注册</a> <register v-if="flag"></register> <login v-else=".
2020-07-17 11:29:07
1031
原创 vue transition-group列表渲染动画-----v-for动态渲染的列表标签只能用transition-group，并且要渲染的每个元素都要加v-bind=“item里面的属性“
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/vue.js"></scr.
2020-07-14 12:14:47
1394
原创 vue 钩子函数实现小球半场动画 transition 必须要加一个 name 属性 不然enter钩子函数会导致动画会消失
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="lib/vue.js"></scr.
2020-07-14 11:06:49
420
原创 vue-animation.css实现动画
在trasition标签中加入enter-active-class=”动画类名 animated”leave-active-class=”animated 动画类名”来指定动画类型，:duration=”毫秒”指定动画执行时间，这样指定的入场和离场时间是一样的，可以分开指定:duration=”{enter: 200, leave: 400}”<body> <div id="app"> <button v-on:click="flag=!flag.
2020-07-14 09:52:19
396
原创 vue-transition动画和自定义前缀动画
v-enter这是一个时间点，是进入之前，元素的起始状态，此时还没有开始进入v-leave-to 也是一个时间点，是动画离开之后，离开的终止状态，此时东湖啊已经结束了。v-enter-active 入场动画的时间段v-leave-active 立场动画的时间段使用：1、用transition元素把需要被动画控制的元素包裹起来，这个元素vue官方提供的2、规定类样式例子：<!DOCTYPE html><html lang="en"><head>
2020-07-14 08:38:05
707
原创 vue mock 和 品牌案例结合----问题：查询时把localstorage改了，一查询就回不去了。。。。。。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="lib/boo.
2020-07-13 19:29:34
200
原创 axios的配置和并发
配置：axios({ //可以传参 //也可以把url地址等全放这里面 method: 'get', url: 'https://cdn.liyanhui.com/data.json', params: { id: 1, status: 4 } }) .then(r
2020-07-13 12:40:39
490
原创 axios用法
在浏览器直接用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://unp.
2020-07-13 12:34:58
180
原创 mock拦截ajax请求
html文件：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn..
2020-07-13 12:30:59
385
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人