- 博客(62)
- 收藏
- 关注
RSS订阅原创 js移动端保存图片到相册
用户代理不知道的属性会被忽略；共享数据仅根据用户代理理解的属性进行评估。所有属性都是可选的，但必须至少指定一个已知数据属性。files：File表示要共享的文件的对象数组。有关可共享的文件类型。那么问题来了， 如果将a标签使用在移动端。title：表示要共享的标题的字符串。url：表示要共享的 URL 的字符串。text：表示要共享的文本的字符串。解决办法： 不用a标签，改用。包含要共享的数据的对象。
2022-09-14 10:11:06
4430
原创 jszip 获取上传的zip包中的指定文件的file
使用场景 ：用于批量上传。因为单条上传需要上传字段，文件，因此批量上传需要上传excel和zip包。 excel记录多条数据， 数据中的单条包括字段名， 字段名包括zip包中的对应文件。二次封装插件zipGetFile.js......
2022-06-09 14:19:44
1138
原创 vuex常用辅助函数以及源码解析
其实使用过 Vuex 的同学都知道，我们在页面或者组件中都是通过 this.$store.xxx 来调用的，那么其实，我们只要把你所创建的store对象赋值给页面或者组件中的$store变量即可全局混入MixinVuex的原理通俗讲就是：利用了全局混入Mixin，将你所创建的store对象，混入到每一个Vue实例中，那么全局混入是什么呢？举个例子：import Vue from 'vue'// 全局混入Vue.mixin({ created () { console.lo.
2022-05-31 15:35:56
293
原创 vue常用自定义指令
注册指令src目录下创建 directives 文件定义单个指令文件// directives/debounce.jsconst debounce = { inserted: function(el, binding) { // el : 绑定好的标签 // binding : 各种信息对象，如 value: 传递的值 }};export default debounce;指令定义函数提供了几个钩子函数（可选）：bind: 只调用一次，指令第一次绑定到元素时调用，
2022-05-25 17:46:51
210
原创 typescript学习笔记
介绍背景：JS 的类型系统存在“先天缺陷”弱类型，JS 代码中绝大部分错误都是类型错误（Uncaught TypeError）这些经常出现的错误，导致了在使用 JS 进行项目开发时，增加了找 Bug、改 Bug 的时间，严重影响开发效率为什么会这样？从编程语言的动静来区分，TypeScript 属于静态类型的编程语言，JavaScript 属于动态类型的编程语言静态类型：编译期做类型检查动态类型：执行期做类型检查代码编译和代码执行的顺序：1 编译 2 执行对于 JS 来说：需要
2022-05-18 15:44:34
677
原创 js项目中常见util方法
常见util方法获取video中的第一帧转化成图片export const getVideoBase64 = (url)=> { return new Promise(function (resolve, reject) { let dataURL = ''; let video = document.createElement("video"); video.setAttribute('crossOrigin', 'anonymous');//处理跨域 vi
2022-05-16 19:52:11
528
原创 模仿el-popover实现自己的vue组件
效果样式效果未点击时候是这样的点击按钮，弹出弹框，弹框是主动添加到body下的标签拉动浏览器窗口，弹框可以自动调节显示位置代码效果：代码调用和 el-popover 保持一致。使用具名插槽reference，来显示触发按钮使用默认插槽来显示弹框<template> <div class="clips"> <lm-popover popper-class="customClass" trigger="click"> &l
2022-05-14 15:14:14
1415
原创 js 获取重定向后的地址
使用ajax请求数据var link = 'https://player.vimeo.com/progressive_redirect/playback/696349232/rendition/360p?loc=external&oauth2_token_id=1027659655&signature=405ffb945893ad5f05c543d7665ded03ae2dba2a8b8851ecbb309f63803ad85a'var xhr = new XMLHttpRequ.
2022-05-10 18:05:12
2556
原创 vue自定义鼠标右键组件
全局屏蔽右键功能App.vuemounted(){ window.addEventListener('contextmenu', (e)=>{ e.preventDefault(); }) }右键菜单组件<template> <div class="showRightMenu" ref="showRightMenu" > <div v-for="item in menuLi
2022-04-21 16:03:50
728
原创 vue 基于element的v-infinite-scroll支持无限滚动
样式效果： 无限滚动插件 <div class="topHot" ref="topHot" v-infinite-scroll="Hotload" > // 子元素 </div>// 方法 async Hotload () { if (this.HotScrollloa
2022-04-14 19:43:29
819
原创 vue tabs内容过长切换支持滚动插件
样式效果：tabs切换自动居中// 组件代码<template> <div class="tabs topNavSet" id="topNavSet" > <ul id="topNavSetUl"> <li v-for=" (item, index) in list " :key="item.id" @click="clickSingle(item, index
2022-04-14 16:55:11
542
原创 element表格在Safari浏览器下列对不齐
解决办法： 修改class来处理/* 使表格兼容safari，不错位 */.el-table__body { width: 100%; table-layout: fixed;}
2022-04-02 10:36:46
564
2
原创 工作中git常用操作
git提交部分修改代码在项目中，经常会在本地编译一些代码,自己还在编译的代码并不想提交，此时，你可以利用git这些指令来提交指定文件的代码git status -s 查看仓库状态git add src/pages/文件名 添加需要提交的文件名（加路径–参考git status 打印出来的文件路径）git stash -u -k 忽略其他文件，把现修改的隐藏起来，这样提交的时候就不会提交未被add的文件git commit -m “哪里做了
2022-03-02 19:42:52
152
原创 js websocket 前后端基础实现
前端// data wsUrl: 'ws://127.0.0.1:8080', websocket: null// 初始化 websocketinitWebSocket () { try { if (this.websocket && this.websocket.readyState == 1) { this.stopWebSocket() } this.websocket = new
2022-02-28 17:15:48
716
原创 js监听当前有网络和无网络
let offlineF = () => { // 断网 this.$store.dispatch('setnowNetwork', false) } let onlineF = () => { // 有网络 this.$store.dispatch('setnowNetwork', true) } window.addEventListener('offline', offlineF) window.addE...
2022-02-21 20:21:46
471
原创 vue超级深度监听单个元素使用函数式方法
Failed watching path: “XXXXX” Watcher only accepts simple dot-delimited paths. For full control, use a function instead.
2022-02-16 16:06:02
1872
原创 手把手教你npm发布一个vue插件
效果1. 安装vue脚手架选择最基础的即可vue create 项目名字2. 整理文件删除src文件， 新增packages文件，同时建议把eslint关闭完整结构如下├── packages │ ├── index.js # 入口文件│ ├── components # 组件│ │ ├── index.vue # 本文需要封装的组件├── README.md├── package-lock.json├── package.json└──vue.config.js #
2022-02-15 19:30:06
1573
1
原创 css自定义滚动条样式
样式效果代码/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar { width: 7px; height: 7px; background-color: #252528;}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 0 6px rgb
2022-02-11 16:00:00
262
原创 css解决overflow:scroll或者auto滚动条挤压内容问题
样式效果目标效果：当前效果解决overflow-y: overlay; 编写不易，如果对您有用欢迎点赞评论加关注~
2022-02-11 15:56:26
1486
原创 css使用grid布局解决flex布局space-between最后一行不会左对齐问题，对UI要求较高的（一定要两边对齐的)就实际用js控制
样式效果html<div class="container"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> <div class="item item-
2022-02-11 15:43:21
1297
原创 vue高级知识点集合
1 . Class绑定在不同环境下的用法class绑定分为两种， 一种是对象, 一种是数组。 如下情况：// Object:class="{ active: isActive, 'text-danger': hasError }"data: { isActive: true, hasError: false}// Array:class="[activeClass, errorClass]"data: { activeClass: 'active', errorClas
2022-02-08 15:56:06
573
原创 一行内容显示,超出用省略号,hover显示全部内容
样式效果父组件调用<Tool-tip :content="content"></Tool-tip>子组件<template> <el-tooltip :content="content" placement="bottom-start" effect="dark" :disabled="isDisabled"> <div class="contentnowrap" :class="{isLink: 'link-text
2022-01-19 17:44:22
1558
原创 webpack5从0到1学习笔记
基础学习篇基础安装安装node.js初始化项目npm init -y生成package.json文件3. 本地安装webpacknpm install name -save-dve 简写（npm install name -D） 自动把模块和版本号添加到devdependencies。npm install name -save 简写（npm install name -S） 自动把模块和版本号添加到dependencies。npm install webpac
2022-01-18 23:34:44
599
原创 vue之你不知道的props传参
1. 大小写问题 // 1. 子组件 props: ['postTitle'] // 2. 父组件 <blog-post post-title="hello!"></blog-post>在子组件中使用的是驼峰命名， 父组件中调用子组件props传参可以变成 - 和component中注册组件aB, template中使用类似prop属性几大注意点：require 和 default不可共存， 否则会有警告validator 做深度过滤操作，以下的trig
2022-01-18 20:08:54
573
原创 vue颜色选择器插件
样式效果说明以上效果是基于第三方插件二次封装得来。 默认第三方插件只有如下样式：第三方插件源码地址： vColorPicker使用 ：1. 安装插件npm install vcolorpicker -S2. 全局注册# main.jsimport vcolorpicker from 'vcolorpicker'Vue.use(vcolorpicker)3. 基于vColorPicker二次封装子组件 ： ColorPick子组件文档说明传参props ：color：数据类
2022-01-12 21:03:27
4312
1
原创 element-ui二次封装下拉菜单(支持选中图片)
样式效果代码<template> <div> <el-dropdown trigger="click" style="width:80px" @visible-change="changeRotate" @command="borderStyle" > <div class="selectColor"> <div class="borderStyleBo
2022-01-11 16:59:52
412
原创 element-ui二次封装(下拉菜单el-dropdown)
样式效果效果1效果2效果一组件调用<template> <div> <div v-for="item in tableArr" :key="item"> <Dropdown :propObj="item" @change="menuChange" :selectData="menuSelect.menuSelectData" :buttonIcon="menuSel
2022-01-08 14:39:00
1727
原创 vue项目中使用 vue-i18n
安装npm install vue-i18n --save-devmain.js中导入import VueI18n from 'vue-i18n'Vue.use(VueI18n)const i18n = new VueI18n({ locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换locale的值来实现语言切换 messages: { 'zh': require('./VueI18n/language-zh'), 'en
2021-12-30 17:19:37
864
原创 vue中transition组件在项目中运用
简单单个弹入弹出运用name的名字为多少，则下面的样式class开头就要为多少<template> <div> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div>
2021-12-28 14:38:33
408
原创 前端js实现鼠标多选拖拽
<!DOCTYPE html><html><head> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> * { box-sizing: border-box; }
2021-12-27 17:13:36
2081
2
原创 vue中@符号后支持路径提示与ctrl点击组件支持打开对应组件
ctrl+组件的时候，可以打开对应文件在项目根目录新建 jsconfig.json文件内容如下{ "compilerOptions": { "target": "ES6", "module": "commonjs", "allowSyntheticDefaultImports": true, "baseUrl": "./", "paths": { "@/*": ["src/*"] } }, "exclude": ["node_.
2021-12-27 11:32:07
397
原创 el-table中单元格自定义修改值组件封装
样式效果使用html参数说明：rows： 一行的对象tableInEdit： 全局控制当前只能编辑一个prop： 要修改的字段名submit ： 点击保存，执行更新操作 <el-table-column prop="rank" label="序号" align="center"> <template slot-scope="scope"> <TableEditSingle
2021-12-24 17:45:53
894
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人