fly_666的博客

原创 vue2.x 富文本组件 支持图片、文件、视频上传

vue2.x 富文本组件 支持图片、文件、视频上传。

原创 vue 词云

vue 词云 按照数据的大小显示深浅程度

原创 vue-cli打包 nodejs内存溢出 vue2.x Last few GCs

nodejs内存溢出 vue-cli打包内容溢出 vue2.x打包报错Last few GCs Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

原创 vue 滚动触底加载下一页

【代码】vue 滚动触底加载下一页。

转载 vue中inheritAttrs、$attrs与$listners的使用

vue中inheritAttrs、$attrs与$listners的使用

转载 Babel/Plugin -JS支持ES6新语法[可选链操作符/空值合并操作符/空值合并操作符]

Babel/Plugin -JS支持ES6新语法[可选链操作符/空值合并操作符/空值合并操作符]

转载 uniapp 上下滚动头部固定，左右滚动左侧边栏固定布局

uniapp 上下滚动头部固定，左右滑动左侧固定

转载 vue实现手风琴下拉菜单带动画效果

1、添加collapse-transition.jsconst elTransition = '0.3s height ease-in-out';const Transition = { beforeEnter(el) { el.style.transition = elTransition; if (!el.dataset) el.dataset = {}; el.style.height = 0; }, enter(el) {

转载 uni-app px rpx 互相转换

1、rpx 转 px// 100 为 100rpx的值var px = uni.upx2px(100);2、px 转 rpx// 200 为 px 的值，后面的两个 100 为计算比例使用var rpx = 200/(uni.upx2px(100)/100); // 验证上面rpx的值var px = uni.upx2px(rpx); // px的值 = 200...

转载 vue组件间通信7种方式

1、 props/$emitprops：props可以是数组或对象，用于接收来自父组件通过v-bind传递的数据。当props为数组时，直接接收父组件传递的属性；当 props 为对象时，可以通过type、default、required、validator等配置来设置属性的类型、默认值、是否必传和校验规则。$emit：在父子组件通信时，我们通常会使用$emit来触发父组件v-on在子组件上绑定相应事件的监听。父向子传值：父组件通过:messageFromParent="message"将父组件 m

原创 el-select滚动到底部加载更多

自定义指令： directives: { 'loadmore': { inserted(el, binding) { const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap'); SELECTWRAP_DOM.addEventListener('scroll', function() { const conditi

原创 git status 暂存

查看当前状态git status 如果有修改,添加修改文件git add .暂存操作git stash save '暂存标识名称'查看记录git stash list恢复指定的暂存工作, 暂存记录保存在list内,需要通过list索引index取出恢复恢复后,暂存区域会删除当前的记录git stash pop stash@{index}恢复后,暂存区域会保留当前的记录git stash apply stash@{index}...

转载 移动端touch事件滚动

本来想用在北京欢乐谷手机上用touch事件来模拟局部左右内容滚动里，但在touchmove上下滚动时由于禁止了默认事件而body滚动条不能滚动，虽然可以根据touchmove的坐标来判断方向，但体验效果不理想。后来在查询相关资料后原来可以直接在css中使用overflow:auto;出来的滚动条用CSS3的-wekit-scrollbar{display:none}来隐藏;*拓展*::-webkit-scrollbar 滚动条整体部分*::-webkit-scrollbar-thumb 滚动条里面的

转载 前端常见跨域解决方案

转载：https://segmentfault.com/a/1190000011145364

转载 element ui el-scrollbar组件监听滚动返回顶部

转载：https://segmentfault.com/a/1190000020516669

转载 CSS 实现多行文本“展开收起”

效果图：实现这一类布局和交互难点主要有以下几点位于多行文本右下角的“展开收起”按钮“展开”和“收起”两种状态的切换当文本不超过指定行数时，不显示“展开收起”按钮说实话，之前单独看这个布局，即使借助 JavaScript 也不是一件容易的事啊（需要计算文字宽度动态截取文本，vue-clamp就是这么做的），更别说下面的交互和判断逻辑了，不过经过我的一番琢磨，其实纯 CSS 也能完美实现的，下面就一步一步来看看如何实现吧~一、位于右下角的“展开收起”按钮很多设计同学都喜欢这样的设计，把按钮放

原创 git在未push到远程的情况下撤销本地commit

撤销所有：git reset HEAD~撤销指定记录git reflog //查看历史记录操作，查看提交版本git reset --hard [索引值] //索引值为记录每条历史记录操作的哈希值ps：撤销后修改项不会被删除 页面上可看到修改记录...

转载 css 变量注入

<template> <div class="box" :style="styleVar"> </div></template><script>export default { props: { height: { type: Number, default: 54, }, }, computed: { styleVar() { return {

转载 git stash 在不提交的情况下临时缓存文件

查看待缓存文件 git status “临时保存标签” git stash save查看临时保存的标签 git stash list查看临时缓存的文件明细 git stash show恢复临时缓存的文件 git stash apply转载：https://www.cnblogs.com/zndxall/archive/2018/09/04/9586088.html...

转载 vue设置多个layout（页面公共内容布局）

https://www.cnblogs.com/duanzhenzhen/p/13045613.html

原创 css 设置遮罩层

div { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.5);}

原创 软连接创建

终端：ln -s 本地文件夹的绝对路径 node_modules内的路径例如：ln -s /Users/webdeveloper/Workspace/00010003/web/modules/w-0012 node_modules/@airchick/w-0012

转载 [CSS] 用伪元素:after实现分割线和气泡

转载: https://www.jianshu.com/p/b8e2f836633e

原创 微信小程序自定义日期选择组件（带 “至今” 选项）

组件引用方式：全局引用就是在 app.json 文件添加："usingComponents": { "pickerDate": "/components/pickerDate/index" }同理：组件局部引用就是在需要用到该组件的页面的.json文件中添加上面代码主页面（date文件夹）：date.wxmlfields 属性值有：year、month、day 不填默...

原创 微信小程序之下拉刷选、上拉加载

import request from '../../utils/request.js'Page({ /** * 页面的初始数据 */ data: { settlementList: [], page: 1, totalPages: 1 }, getSettlementList: function (pageNo, override) {...

原创 nuxt 低版本浏览器不兼容处理

一、在middleware文件夹中创建中间件文件 browserVersion.jsexport default function (context) { const userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent let re = new RegExp("MS...

转载 nuxt html转pdf下载

<div> <div id='pdfDom'>要转为pdf下载的内容</div> <div> <button @click='getPdf(htmlTitle)'>下载</button> </div></div>data(){ return{ htmlTitle: 'resume'...

转载 jquery实现数字滚动特效

一、引入js文件<script src="https://code.jquery.com/jquery-3.3.1.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenLite.min.js"></script><script ...

原创 vue 路由跳转

路由跳转方式-----methods方法下：方法一：this.$router.push({ path: "/", //即将跳转的路由地址 query: { //传参 key: value }})方法二：this.$router.push({ name: "/", //即将跳转的路由地址 params: { //传参 key: value }})方法三...

转载 js高德地图 地理位置转经纬度 生成地图

参考高德地图API文档：https://lbs.amap.com/api/javascript-api/example/geocoder/geocoding<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...

原创 vue input file 上传图片

原始图父组件：<div class="my-basic"> <my-basic :items="category[3].menu[0]" @uploadHeadImg="uploadHeadImg" @handleFile="handleFile"></my-basic> </...

原创 git 修改 commit备注内容，未push到远程的情况下

1、在项目所在的文件夹内空白处，右击选择 Git Bash Here，弹出命令窗2、执行命令： git commit --amend弹出最近一次提交本地的备注和文件3、按键盘上的 i 按键，进入编辑状态（确定是否已进入编辑状态可以查看左下角是否显示 “插入”字样）4、备注信息更新后，可按 ESC键 退出编辑5、更新commit说明后，执行 :wq 保存并退出 （此时请看左上...

原创 git提交

git常用命令：https://www.cnblogs.com/allanli/p/git_commands.html终端进入到项目所在目录：①初始化本地仓库 git init②添加所有文件 git add .③提交文件到本地仓库 git commit -m “提交备注说明”④绑定远程仓库 git remote add origin git@xxxxx⑤推送到远程分支 git push...

转载 使用git将项目上传到github（最简单方法）

参考链接：https://www.cnblogs.com/cxk1995/p/5800196.html首先你需要一个github账号，所有还没有的话先去注册吧！https://github.com/我们使用git需要先安装git工具，这里给出下载地址，下载后一路直接安装即可：https://git-for-windows.github.io/1.进入Github首页，点击New repo...

原创 nuxt.js框架+iview插件搭建项目

一、使用nuxt创建项目（https://zh.nuxtjs.org/guide/installation）创建项目：npx create-nuxt-app &amp;lt;项目名&amp;gt;配置sass：npm install --save-dev node-sass sass-loader二、安装iview插件（https://www.iviewui.com/docs/guide/install）...

原创 【2019.6.26更新版本】使用gulp将sass文件编译成css样式 + 浏览器异步执行

一、安装gulphttps://www.gulpjs.com.cn/docs/getting-started/1.全局安装：npm install --global gulp2.作为项目的开发依赖安装：npm install --save-dev gulp3.在项目根目录下创建一个名为 gulpfile.js 的文件const gulp = require('gulp');const ...

原创 VUE-CLI脚手架工具搭建步骤

原创 node.js安装+webpack安装及环境搭建

node.js安装： 引用：https://blog.csdn.net/u012862227/article/details/54019006npm (Node Package Mangaer) node.js的第三方模块/包管理器,可以用于下载;更新;删除; 维护包依赖关系的工具 npm 工具默认www.npmjs.com网站下载所需的第三方模块 ...