自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

任我行

公众号:wePanda

  • 博客(206)
  • 收藏
  • 关注

原创 vue用mixin实现共用数据方法

在src目录新建一个mixins文件夹,里面新建index.js文件这里写公共的值和方法export const mixin = { data() { return { mixinData: 123 } }, methods: { mixinFunction() { console.log("这是来自mixin的方法") } }}在组件中引入<te

2020-11-27 09:55:17 15

原创 vue-waterfall-easy实现瀑布流布局

文档地址安装npm install vue-waterfall-easy --save-dev页面引入import vueWaterfallEasy from "vue-waterfall-easy";components: { vueWaterfallEasy,},完整代码<template> <div class="box"> <div class="waterfall"> <vue-waterfall-easy.

2020-10-27 16:09:11 129 1

原创 mavon-editor引入开发markdown编辑器

文档地址安装npm install mavon-editor --save在组件引入,也可在全局引入import Vue from "vue";import mavonEditor from "mavon-editor";import "mavon-editor/dist/css/index.css";Vue.use(mavonEditor);完整代码<template> <div class="box"> <mavon-editor v-m.

2020-10-24 11:31:22 54

原创 Js隐藏微信公众号分享按钮

//隐藏 document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() { WeixinJSBridge.call("hideOptionMenu"); } ); // 显示 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('showOption.

2020-10-23 13:54:02 53

原创 nprogress路由切换添加进度条

文档地址安装npm install nprogress -S在vue路由页面进行引入import NProgress from 'nprogress'import 'nprogress/nprogress.css'npm install nprogress -S使用router.beforeEach((to, from, next) => { NProgress.start(); next()})router.afterEach(() => { NProgr.

2020-10-12 16:50:01 39

原创 vue-json-excel导出excle表格

文档地址名称类型描述默认值dataArray要导出的数据。fieldsObject您要导出的JSON对象中的字段。如果未提供,则将导出JSON中的所有属性。export-fields (exportFields)Object用于解决其他使用变量字段的组件的问题,例如vee-validate。exportFields的工作原理类似于字段typestringMIME类型[xls,csv]xlsnamestring要导出的文件名。d.

2020-10-12 15:15:58 47

原创 vue-cropper裁剪图片

文档地址安装npm install vue-cropper组件引入import { VueCropper } from "vue-cropper"; components: { VueCropper, },完整代码<template> <div class="box"> <div class="crop"> <vueCropper ref="cropper" :img="opt

2020-10-09 17:37:32 48

原创 Js实现list导出为excel表格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button

2020-09-25 14:32:07 38

原创 vue-drawer-layout实现手势滑出菜单栏

文档链接地址安装npm install vue-drawer-layout --savemain.js导入import DrawerLayout from 'vue-drawer-layout'Vue.use(DrawerLayout)完整代码<template> <div class="box"> <vue-drawer-layout :drawer-width="230" ref="drawerLayout" @mask-click="clo.

2020-09-17 13:44:54 68

原创 vuedraggable实现列表拖动排序

文档地址安装npm i -S vuedraggable页面进行导入import draggable from "vuedraggable";完整代码效果<template> <div class="box"> <draggable v-model="list" chosenClass="active" animation="500" @end="dragEnd"> <div class="row" v-for="(item,.

2020-09-17 10:03:44 85

原创 微信小程序导航栏页面滑动切换

<view class="banner"> <scroll-view scroll-x="true" scroll-with-animation="true" scroll-into-view="nav-{{select > 0 ? select -1 : select}}"> <view wx:for="{{sortList}}" wx:for-index="index" wx:key="index" id="nav-{{index}}" cl.

2020-09-16 10:37:06 164

原创 vue简单实现九宫格抽奖

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>九宫格抽奖</title> &l.

2020-09-15 17:44:16 94

原创 微信小程序获取页面高度

watchHeight() { var query = wx.createSelectorQuery() //.box为指定类名高度 query.select('.box').boundingClientRect((res) => { this.setData({ height: parseInt(res.height) }) }).exec() }

2020-09-15 11:22:23 59

原创 Js实现文本复制

function copyText() { var ctx = document.createElement("input"); var content = "需要复制的内容"; ctx.setAttribute("value", content); document.body.appendChild(ctx); ctx.select(); document.execCommand("copy"); ...

2020-09-11 10:23:24 32

原创 Ts安装及自动编译ts文件

安装npm install -g typescript新建个index.ts文件手动执行ts文件tsc index.ts自动编译终端执行tsc --init会在自动生成tsconfig.json文件修改这个文件 "outDir": "./js",VsCode打开终端 ->运行任务 -> typescript ->“tsc: 监视 - tsconfig.json (ts)”...

2020-09-06 16:09:06 96

原创 Js根据数组相同的值生成二维数组

原数组新数组<script> var list = [ { id: 1, num: 3, }, { id: 1, num: 3, }, { id: 1, num: 2, }, { id: 2, num: 1, }, { id: 2, num: 2, }, { id: 3, num: 2, }, { id: 3, num: 3, }, ] var res

2020-09-05 11:37:09 91

原创 vue-lazyload实现图片懒加载

文档链接安装npm i vue-lazyload -Smain.js全局引入import VueLazyLoad from 'vue-lazyload'Vue.use(VueLazyLoad, { preLoad: 1.3, error: '', //错误图占位 loading: '',//加载图占位 attempt: 1}) <img v-lazy="item.imgurl" alt /> <div v-lazy:background-image=

2020-09-01 11:16:54 78

原创 Vue实现pc/H5弹窗拖拽

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>vue拖拽</title> &lt

2020-08-31 16:16:40 85

原创 微信小程序skeleton骨架屏

github链接地址https://github.com/jayZOU/skeleton.git克隆dist文件放入到项目component目录中page页面引入{ "usingComponents": { "skeleton": "../../component/skeleton/skeleton" },}文本添加<skeleton wx:if="{{isSkeleton}}" loading="chiaroscuro"></skeleton>.

2020-08-06 11:42:39 236

原创 微信小程序锚点选择导航栏

<view class='box'> <scroll-view scroll-y scroll-with-animation style="width:25%"> <view class='nav'> <view wx:for="{{navList}}" wx:key='index' class="title {{index == active ?'select':''}}" data.

2020-07-24 16:37:33 181

原创 vue-ripple-directive点击水波纹

安装npm install vue-ripple-directive --savemain.js引入import Ripple from 'vue-ripple-directive'Vue.directive('ripple', Ripple);Ripple.color = 'rgba(0, 0, 0, 0.2)'; <div class="rippleBtn" v-ripple>水波纹按钮</div>

2020-07-10 16:29:43 347

原创 vue引入echarts实现数据可视化

安装npm install echarts -Smain.js全局引入import echarts from 'echarts'Vue.prototype.$echarts = echarts<template> <div class="box"> <div id="polyLineChart" :style="{width: '300px', height: '300px'}"></div> </div></

2020-07-07 16:43:51 1347

原创 Vue4.x配置env开发环境、测试环境、生产环境

在项目根目录新建三个env文件.env.development //开发环境.env.production //生产环境.env.test //测试环境.env.developmentNODE_ENV = 'development'VUE_APP_MODE = 'development'VUE_APP_BASE_URL = "http://testapi".env.productionNODE_ENV = 'production'VUE_APP_MODE = 'production

2020-07-04 11:17:46 1071

原创 Js数组获取最大、最小值

var list = [-1, 0, 1, 2, -10, 3, 4] console.log(Math.max(...list)) console.log(Math.min(...list))

2020-07-03 13:40:50 90

原创 Vue监听文本框实时输入限制输入长度

<textarea v-model="value" placeholder="输入内容" @input="inputArea()"></textarea> new Vue({ el: ".box", data: { value: "", maxLength: 100, currentLength: 0 }, methods: { ..

2020-07-02 15:58:21 684

原创 Js时间戳倒计时天时分秒

countDown(endTimeStamp) { var nowTimeStamp = new Date().getTime() var time = {} if (endTimeStamp > nowTimeStamp) { var mss = endTimeStamp - nowTimeStamp; var days = parseInt(mss / (1000 * 60 * 60 * 24)) var hours = parseIn.

2020-06-29 14:47:37 285

原创 微信小程序密码输入框

<view class='box'> <view class='row' bindtap='inputFocus'> <view class="{{index == active ? 'active' : '' }}" wx:for="{{Length}}" wx:key="index"> <input type="number" value="{{entryList.length>=index+1?entry.

2020-06-01 16:07:15 472

原创 微信小程序弹出层动画

<button bindtap="showModal">Click Me</button><view class="pop" wx:if="{{showPop}}"> <view class="popbg" bindtap="hideModal"></view> <view class="popup" animation="{{animationData}}">内容</view></view>

2020-05-29 16:57:39 165

原创 Vue引入highCharts实现数据可视化

效果图文档Api地址安装npm install highcharts-vue在main.js进行全局配置import HighchartsVue from 'highcharts-vue'Vue.use(HighchartsVue)<highcharts :options="chartOptions"></highcharts><script>export default { data() { return { chartO

2020-05-27 16:50:45 138

原创 Vant引入CDN实现图片懒加载

<!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="https:/

2020-05-27 09:50:03 591

原创 微信小程序使用Painter组件生成海报

文档地址我是直接下载github源码放到项目组件中{ "usingComponents": { "painter": "../../component/painter/painter" }}<view class="box"> <painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="canvasSuc" />

2020-05-23 13:53:38 975

原创 微信小程序引用we-cropper裁切图片

文档地址github下载源码直达链接复制dist文件夹中的 .min.js 和 .wxml文件到项目中我引入的目录结构page页面<view> <view class='avatar'> <image mode='scaleToFill' src="{{avatar}}" bindtap='chooseimg'></image> </view> <view wx:if="{{showWeC

2020-05-19 17:44:29 154

原创 NodeJs获取get/post传值

const http = require('http');const routes = require('./module/routes')const url = require('url')const ejs = require('ejs')http.createServer((req, res) => { routes.static(req, res, './static') // 路由 let pathname = url.parse(req.url).pathn

2020-05-17 19:24:48 149

原创 NodeJs使用ejs模板引擎实现后端渲染

安装ejsnpm install ejs项目引入const ejs = require('ejs') 目录文件app.jsconst http = require('http');const url = require('url')const ejs = require('ejs')http.createServer((req, res) => { // 路由 let pathname = url.parse(req.url).pathname; if

2020-05-17 18:15:05 278

原创 NodeJs封装静态web服务器、路由、读取文件获取响应类型

首先展示目录结构app.jsconst http = require('http');const fs = require('fs');const path = require('path');const url = require('url')const common = require('./module/common.js')http.createServer((req, res) => { // 1.获取地址,清除get传值 let pathName = u

2020-05-10 17:22:21 290

原创 Vue监听返回键关闭弹出层不返回页面

//监听页面销毁之前 beforeDestroy() { window.removeEventListener( "popstate", e => { console.log(e); if (this.showPop) { this.showPop = false; } else { ...

2020-05-08 10:56:38 427

原创 Js获取富文本所有图片src地址

getImgSrc(rich) { var imgList = []; htmlstr.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => { imgList.push(capture); }); return imgLis...

2020-05-06 11:17:33 723

原创 Css添加div点击态

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...

2020-05-05 17:54:54 338

原创 Vue用keep-alive实现页面缓存

App.vue<template> <div id="app"> <keep-alive :exclude="excludePage"> <router-view /> </keep-alive> </div></template><script>expor...

2020-05-03 11:10:05 107

原创 NodeJs的Stream(流)应用

createReadStream读取流const fs = require('fs');var readStream = fs.createReadStream('./data.text')var count = 0var str = '';// 监听正在读取readStream.on('data', (data) => { str += data; count+...

2020-05-02 15:00:14 120

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除