- 博客(356)
- 收藏
- 关注
RSS订阅转载 vue的mixins的使用
mixins就是混入。一个混入对象可以包含任意组件选项。同一个生命周期，混入对象会比组件的先执行。1.创建一个test.js，用export暴露出mixins对象export const mixinsTest = { methods:{ hello(){ console.log("hello"); } }, created(){ this.hello() }}2.在
2020-06-29 10:33:00
149
转载 git命令行拉取远程分支代码，并合并后上传到自己的分支
git add . //把当前所有修改添加到本地仓库git commit -m “提交信息” //把当前添加到仓库的修改提交到本地仓库（这里说一下两者的区别，第一个是你仅仅把一些修改添加到本地仓库，并没有生成一条提交记录。commit的意思就是，把当前所有修改生成一条提交记录，然后提交到本地仓库。这样的话你就可以根据这条提..
2020-06-28 08:38:49
1169
转载 vue中的slot（插槽）
**vue中的插槽————slot 什么是插槽？**插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制怎么用插槽？默认插槽父组件<template> <div> 我是父组件 <slotOne1> <p style="color:red"&g
2020-06-23 10:09:44
201
转载 一段代码，vue如何使用photoswipe
使用npm安装photoswipenpm i photoswipe编辑photoswipe的vue组件<template> <!-- 这段html代码，是用来显示图片弹出层的，是由photoswipe提供的 --> <!-- Root element of PhotoSwipe. Must have class pswp. --> <div class="pswp" tabindex="-1" role="dialog" aria-h
2020-06-22 15:59:40
1219
转载 vue中一个dom元素可以绑定多个事件？
其实这个问题有多个解决方法的 这里提出两点第一种第二种现在dom上绑定一个然后在你的methods中直接调用如果要传参数 这时候千万别忘记
2020-06-22 11:27:24
972
转载 使用spy-debugger调试移动端webview
日常的web开发过程中，有时页面空白了，我们要看看是不是页面代码报错了导致渲染中断或有时样式不符合预期效果，我们又要看看是否受到附近的元素影响，这个时候把安卓设备连接电脑debug往往是一个有效快捷的好方法。然而，并非每次问题都能通过上面这种方法解决，因为偶尔会有些ios设备上的特殊问题（大部分是样式上的）在安卓无法重现，在Mac上可以用Xcode或Safari调试，但是这些在Windows上就行不通了，这个时候最直接暴力就是用虚拟机装个MacOS，然后按Mac的调试方法进行，可Windows装MacOS
2020-06-22 11:14:10
818
转载 vue中keepAlive的用法[返回页面不刷新]
使用vue单页开发项目时遇到一个问题：在列表页进入详情页，按返回键返回列表页时页面刷新了，用户体验非常差啊！！！查阅了一下相关问题，使用解决这个问题，下面是我的使用心得。是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。1.在app.vue页面中把替换成下图所示：<keep-alive><router-view v-if="$route.meta.keepLive"></router-view></keep-alive>
2020-06-22 10:02:39
1236
转载 【VUE管理菜单权限】使用router.addRoutes
最近项目迭代完成最后一版需要完成清尾工作。这里需要完成菜单的权限控制，最开始完成这项工作是吧所有的菜单都写到home模块，然后用v-if来判断菜单的显示。看Vue Router的API文档发现router.addRoutes函数签名：router.addRoutes(routes: Array<RouteConfig>)动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。这个命令可以实现我的想法，多的不说直接上代码。（我把他直接放到权限接口请求的回调里简单
2020-06-20 09:55:40
669
转载 js 向上取整、向下取整、四舍五入
// 1.只保留整数部分（丢弃小数部分）parseInt(5.1234);// 5// 2.向下取整（<= 该数值的最大整数）和parseInt()一样Math.floor(5.1234);// 5 // 3.向上取整（有小数，整数就+1）Math.ceil(5.1234);// 4.四舍五入（小数部分）Math.round(5.1234);// 5Math.round(5.6789);// 6// 5.绝对值Math.abs(-1);// 1// 6.返回两者中的较大值
2020-06-11 18:31:08
290
转载 Echarts绘制横向柱状图(圆角+渐变)
横向显示将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示 xAxis: [{ type: 'value', axisLine: { show: false }, axisTick: { show: false } }], .
2020-06-11 18:16:59
2334
转载 echarts背景颜色渐变的三种类型
// 线性渐变，多用于折线柱形图，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置color: { type: 'linear', x: 0, // 左上角x y: 0, // 左上角y x2: 0, // 右下角x y2: 1,
2020-06-11 18:15:56
2575
转载 Echarts隐藏坐标轴
xAxis: { show:false,//不显示坐标轴线、坐标轴刻度线和坐标轴上的文字 axisTick:{ show:false//不显示坐标轴刻度线 }, axisLine: { show: false,//不显示坐标轴线 }, axisLabel: { show: false,//不显示坐标轴上的文字 },},yAxis: { splitLine:{ sh
2020-06-11 18:15:21
2512
转载 vue 如何实现多页面应用
首先第一步:进入\build\webpack.base.conf.js目录下，在module.exports的域里，找到entry，在那里配置添加多个入口：// 文件路径更具自己的实际情况进行配置,我这仅是 demoentry: { app: './src/main.js', one: './src/js/one.js', two: './src/js/two.js' },这里的 one two 一定时要先在这里定义好的,后面是要用到的,好比 里面的app 不是随便瞎
2020-06-09 17:09:57
1252
转载 JavaScript创建二维数组或多维数组
第一种方法：通过数组表达式来创建二维数组var ArrayObj = [ [ 1,2 ], [ 1,2] ];评注：这种方法只适用于已知数值，并且数量极少的情况下使用。第二种方法：通过构造函数来创建二维数组//第一种方式：传递两个Array构造函数到参数中var ArrayObj = new Array(new Array(),new Array()); //第二种方式：传递两个Array表达式到参数中var ArrayObj = new Array([],[]); //第三种
2020-06-05 10:55:24
1568
转载 axios中取消请求
axios中取消请求（使用CancelToken）在平时的开发过程中，我们会经常遇到菜单切换的问题，在一些切换频率较低的情况下，在切换到另一个页面的时候，上一个页面基本没有未完成的异步请求，即使有，在一些情况下也是可以忽略的。但是，在一些切换频率较高的页面中，如果我们不处理这些未完成的请求，那么这些请求会极大的影响页面的性能，甚至导致之后的请求超时。如果需要断开Javascript的ajax请求，一种是通过设置时间，超时自动断开，另一种我们可以调用XMLHttpRequest对象上的abort方法。在
2020-06-01 11:45:28
199
原创 axios中取消请求（使用CancelToken）
source:null,cancelRequest(){ if(typeof this.source ==='function'){ this.source('终止请求') } },getlist1(){ var CancelToken = this.$axios.CancelToken this.cancelRequest(); let that = this this.$axios({ method
2020-06-01 11:44:31
890
转载 vue启动项目报错Module build failed: Error: Missing binding
Module build failed: Error: Missing binding C:\Users\Administrator\Desktop\新建文件夹\mall\node_modules\node-sass\vendor\win32-x64-64\binding.node解决办法：npm i node-sass
2020-05-29 12:24:31
7774
1
转载 vue实现鼠标移入移出事件
<div class="index_tableTitle clearfix" v-for="(item,index) in table_tit"> <div class="indexItem"> <span :title="item.name">{{item.name}}</span> <span class="mypor"> <i...
2020-05-18 12:20:38
8459
原创 拼音排序
newData=[ { name:'王小帅', age:18, sex:'男' }, { name:'张小帅', age:19, sex:'男' }, { name:'李小帅', age:17, sex:'男' }, { name:'王小美', age:22, .
2020-05-18 12:19:35
162
转载 在win10系统中，在文件夹下按Shift+右键无法出来“在此处打开命令窗口”，cmd的快捷键的处理方法
Win键+R键输入“regedit”打开注册表打开“HKEY_CLASSES_ROOT\Directory\Background\shell”，shell右击新建项“在此处打开命令窗口”右击“在此处打开命令窗口”，新建“command”项依次点击command->右击右侧菜单第一项->修改添加“C:\Windows\System32\cmd.exe” “–working...
2020-05-07 21:01:16
2001
原创 npm run dev报错 Module build failed: Error: Cannot find module 'node-sass'
打开一个原来的项目提示Module build failed: Error: Cannot find module 'node-sass'提示没有找到node-sass这个模块先去项目依赖node_module里边看一下是不是没有如果没有就重新安装npm install node-sass --save有的时候这个安装会报错报错就用淘宝镜像的npm install -g cn...
2020-03-17 14:03:55
468
转载 微信小程序实战篇-下拉刷新与加载更多
下拉刷新1. 调用系统的API，系统有提供下拉刷新的API接口home.json 参数配置"enablePullDownRefresh": true我们哪个页面需要下拉刷新，就在哪个页面对应的xxx.json文件配置上面属性,这个属性从字面意思也可以知道，是否允许下拉刷新，当然，如何你不想一个个配置允许下拉刷新，你可以直接在全局变量app.json的window里面配置上面这个属性，...
2020-01-21 15:43:29
502
转载 小程序滚动事件之头部渐隐渐现demo
效果图:代码://test1.wxml<view class='header' style="opacity:{{opacityStyle}}" hidden='{{hiddenModel}}'> 头部</view><view class='demo1'>滑动1</view><view class='demo2'>滑...
2020-01-19 15:03:21
963
转载 微信小程序-实现元素渐入渐出动画效果-封装方法
效果解决1.寻根问底，发现wx_mini_program(下面称呼微信小程序为wxmp [差点叫成 (*´ﾉ皿`)mmp] )有一个全局的js逻辑文件，叫app.js，有意思，可以往里面塞自己写的object(函数数据等等)，那就从那里入手吧2.在app.js中定义全局的动画函数App({ //渐入，渐出实现 show : function(that,param,opacity...
2020-01-19 15:01:39
1925
转载 微信小程序监听页面滚动的事件
有些用户的需求是，上下滑动屏幕要求隐藏掉某些显示区域。或者滑动到指定位置时显示某些内容。可做监听事件四个：一、JS自带的：//开始滚动 onPageScroll (e) { console.log('滚起来') },这个监听的不够灵敏，BUg较多。二 、手势事件<view class="wrapIndex" bindtouchstart="touchStart"...
2020-01-19 13:45:23
3159
转载 微信小程序实现左右滑动(带动画)
实例代码1 wxml<view class="container1" wx:if="{{page == 1}}" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" animation="{{ani1}}">container1</view><view c...
2020-01-16 16:56:13
5267
转载 关于enter及ctrl_enter换行及发送切换问题
<textarea v-if="submitCommond === 'ctrl'" id="messgae_input" v-model="currentMessage" class="border-none" type="textarea" autofocus rows="7" :readonly="loading" placeholder="请输入内容...
2020-01-16 13:09:51
1724
转载 微信小程序 scroll-view 实现横向、纵向滚动
1.纵向滚动api文档有注明，<scroll-view scroll-y style="height: 400rpx;"> 1231231231</scroll-view>即 如果是纵向滚动，必须指定滚动区域的高度2.横向滚动核心思想： 需要让scroll-view里的子元素在一行展示。1> 父元素设置 white-space: nowrap; ...
2020-01-16 10:11:54
1835
转载 微信小程序中使用echarts
首先体验示例小程序在微信中扫描下面的二维码即可体验 ECharts Demo：引入组件在创建项目之后，可以将下载的 ecomfe/echarts-for-weixin 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 ec-canvas 目录到新建的项目下，然后做相应的调整。如果采用完全替换的方式，需要将 project.config.json 中的 appid 替换成在公众平台申请...
2020-01-15 17:06:01
215
原创 js日常记录
太久没写日常记录function aa(){ var fnode=document.body.lastChild; //document.querySelector('#myDiv') //创建元素节点 var br = document.createElement("br"); //把创建的节点添加到指定节点中 fnode.appendChild(br);//添加一个...
2020-01-15 15:27:01
121
转载 微信小程序自定义支持图片的弹窗
为index.wxml添加如下图代码： (微信小程序 - canvas层级最高问题，如何超越canvas的层级,只能使用cover-view标签)<!--index.wxml--><button class="show-btn" bindtap="showDialogBtn">弹窗</button><!--弹窗--><cove...
2020-01-10 13:53:51
1198
转载 echarts中tooltip提示框位置控制
使用echarts时，有时tooltip由于内容太多，可能会导致提示框超出外层div的范围，无法完整显示。此时可以在自己通过代码控制提示框显示的位置，代码如下：option = { title: { text: '折线图堆叠' }, tooltip: { trigger: 'axis', position: functi...
2020-01-08 14:17:47
742
转载 【小程序】生命周期
小程序分为应用、页面和组件三个部分，所以小程序的生命周期涉及以下：应用的生命周期页面的生命周期组件的声明周期应用的生命周期对页面生命周期的影响（1）应用的生命周期App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。App() 必须在 app.js 中调用，必须调用且只能调用一次。App({ onLaunch: function(o...
2020-01-06 16:06:35
187
原创 echarts中国地图
echarts示例代码var mapName = 'china'var data = [ {name:"北京",value:199}, {name:"天津",value:42}, {name:"河北",value:102}, {name:"山西",value:81}, {name:"内蒙古",value:47}, {name:"辽宁",value...
2020-01-04 14:43:13
5885
转载 js-cookie插件
js-cookie一、安装npm install js-cookie --save二、引用import Cookies from 'js-cookie'三、一般使用存到Cookie去// Create a cookie, valid across the entire site:Cookies.set('name', 'value');// Create a cookie ...
2020-01-04 14:19:57
143
转载 Js 删除换行符
mymsg=mymsg.replace(/<\/?.+?>/g,"");//html2txt 去掉html标记 mymsg=mymsg.replace(/\n|\r/g,""); //去掉换行
2020-01-04 11:47:52
2078
转载 前端js实现粘贴图片到可编辑的div(其他标签也可)中
输入框中要实现粘贴图片功能，不能用input、textarea等输入框作为父容器，因为input、textarea中只能接受字符串，对于html标签不进行转义以及渲染。所以用contenteditable='true’属性来使div(其他容器也可)实现可编辑，来模拟输入框，实现粘贴图片至输入框中的效果，提交数据给后端的时候可以用form提交，也可用异步提交，form提交的时候将div中的数据全...
2020-01-03 11:00:51
1215
转载 Ctrl+v 粘贴图片
我们平常使用QQ或者微信聊天的时候都会用到Ctrl+V来粘贴文字或者图片，显得很理所当然。然而自己写的一个文本框或者文本域却只能粘贴文本，不能粘贴图片，这是为什么呢？因为那个文本框并不是我们平常使用的input标签或者textarea标签，而是一个div。首先我们创建一个div，这个时候div还不可以当做文本框这个时候在div加入contenteditable这个属性，设置为true，那这个...
2019-12-31 16:59:33
635
1
转载 echarts2 饼图标签文字换行
在使用echarts2的过程中，有时会遇到标签文字过长导致显示不完整的问题。例如：这时候就需要用到 标签里的formatter 回调函数来处理这种情况了。方式一： formatter : ’ {b} : \n {c} \n ({d}%) ', 这种是指定某个地方换行。** 备注：官方文档里面有{a}，{b}，{c}，{d}的解释：**这里是饼图，所以 { b } 就是数据...
2019-12-30 15:51:08
7297
转载 Javascript和jquery事件--鼠标移动事件mousemove
mousemove,一个监听元素上鼠标移动的事件，如果鼠标在元素上移动，大概每16毫秒触发一次。我觉得挺有趣的一个元素，不过有替代还是不太推荐，从这个事件的触发频率就可以看出它会拖慢响应速度，消耗资源。在js中可以使用onmousemove和addEventListener(‘mousemove’,fn)来设置在jq中可以直接绑定mousemove的监听器，也可以使用封装好的函数mousemo...
2019-12-28 10:28:44
1193
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人