- 博客(26)
- 收藏
- 关注
RSS订阅原创 vue跨组件触发方法
中间页middle-utils.jsimport Vue from 'vue'export default new Vue()触发import MiddleUtils from '@/common/utils/middle-utils'change(){MiddleUtils.$emit('changeNav', { key: '' })}接收import MiddleUtils from '@/common/utils/middle-utils'mounted()
2021-11-22 16:03:26
1068
1
原创 vue常见问题
1，新挂载的组件的created会在卸载的组件的beforeDestroy之前被执行从列表子组件直接跳转到详情页，就会出现这个问题从列表子组件$emit('toDetail'),在父组件跳转到详情页就没问题
2021-10-11 16:50:46
112
原创 vue+typeScript常见问题
1，refs获取组件<template> <div class="info"> <field ref="field"></field> </div></template><script lang="ts">import { Component, Prop, Vue, Ref, Watch } from "vue-property-decorator";import { State, Action
2021-09-29 11:40:51
105
原创 vue向右滑动加载更多
listScroll() { const scrollLeft = (document.getElementById('tablist') as HTMLElement) .scrollLeft console.log('卷去宽度', scrollLeft) const clientWidth = document.documentElement.clientWidth || document.body.clientWidth console.l...
2021-09-29 11:34:36
390
原创 vue+typescript+vant配置按需加载和定制主题
1.配置按需加载按需加载用的是ts-import-plugin,需要先安装：cnpm i ts-import-plugin -D在vue.config.js添加下面的配置，这里注意的是，要把原来的style:true改成下面这种方式，不然修改主题没有效果const merge = require('webpack-merge')const tsImportPluginFactory = require('ts-import-plugin')module.exports = {...
2021-03-30 15:36:57
823
原创 vue引入ant design vue时无法加载less-loader/less模块
报错如下：问题来源：项目使用了vuecli3和ts，引入ant-design-vue之后，还需要安装less和less-loader。都安装好了之后运行，less会报错错误描述：less-loader3.0以上的版本修改了配置，不支持InlineJavasript，可查看https://github.com/ant-design/ant-motion/issues/44解决办法：1，重新安装，把less版本降到3.0以下2，修改vue.config.js配置// vue..
2020-11-06 11:25:55
1244
原创 vuecli3引入字体文件失败
使用vue-cli搭建项目，需要引入font-icon文件，图标不显示，然后报错解决方案：由于使用vue-cli后，引入css 样式表的写法也发生了改变，正确写法: @import '~@/路径' 需要使用绝对路径，相比较js文件的 '@'，引入css文件需要使用 '~@' ...
2020-04-16 16:13:47
2097
原创 vuecli3全家桶项目初始化
全局安装vuenpm install -g @vue/cli创建项目vue create vue-cli3-demops：名称不能采用驼峰命名这里有两种配置可以选择（可以使用上下方向来切换选项）default (babel, eslint) 默认套餐，提供 babel 和 eslint 支持。 Manually select features 自己去选择需要的功能，提供更...
2020-04-16 15:58:48
258
原创 h5使用vue+quagga识别条形码图片
最近有一个需求，要求扫描识别条形码，研究了各种方法，最后选定了拍照上传图片，然后使用quagga识别这一方案使用demo：拍照上传图片这里尝试了两种方法，一种是原生的input实现，一种是使用了vant上传组件quagga可使用npm下载，https://www.npmjs.com/package/quagga<template> <div class="h...
2020-04-16 14:41:23
5618
7
原创 vue切换路由后，保存原页面的input框输入信息
配合vue-router，可以配置meta中的keep-alive解决这个问题：在vue-router的配置中，添加（keepAlive: true） { path: '/HelloWorld', name: 'HelloWorld', component: HelloWorld, meta: { requireAuth: true, keepAlive:...
2020-02-26 16:03:39
4004
原创 VueCli3打包后Vant样式丢失
在vuecli3中使用了vant，配置vant的按需引入，因为项目还使用了typescript，所以配置参考官网，下载ts-import-plugin和webpack-merge，具体配置(vue.config.js)如下：const merge = require("webpack-merge");const tsImportPluginFactory = require("ts-i...
2020-02-26 15:38:09
2690
原创 本地测试微信授权登录
本地测试微信授权登录，首先要下载一个微信开发者工具，因为微信回调域名不支持IP地址，所以我们要获取到一个域名，映射到本地ip，目前我尝试成功的有两种方法：使用natapp：注册一个natapp账号，购买一个免费隧道，具体可参考教程NATAPP1分钟快速新手图文教程 下载客户端，下载完成后，新建一个config.ini文件，具体配置参考使用本地配置文件config.ini 配置隧道，修改...
2019-11-08 14:10:59
7721
3
原创 子类的static方法中用父类的方法会报错
class base{ show(){ console.log('显示') }}class child extends base{ static init(){ this.show() }}this.show()会报错，找不到show这个方法原因：还不知道。。解决：把static先删掉了...
2019-10-10 15:54:49
164
原创 小程序评分组件
一个简单的小程序的评分组件，在父组件传入key值：key的值为0时，用户可以点击星星进行评分操作， key的值不为0时，则只显示评分，用户没有点击操作组件（star）目录和组件效果：下面是具体代码：//star.html<view class='starbox'> <text class='startext'>综合评分</text>...
2019-07-03 19:09:49
2754
3
原创 踩坑：重写了alert方法，在点击事件中调用苹果手机不兼容
今天公司同事找我，说出现了一个奇怪的bug：浏览器：微信浏览器7.0问题描述：给div添加一个简单的点击事件，弹出一个提示的alert，这个在大部分手机没问题，可是在部分苹果手机（iphone6s，iphoneX）上，alert框没有弹出，还会刷新页面。解决办法：尝试了多种办法，还是有这个问题，后来重新审查了代码，发现同事为了把alert上面的网址标题去掉，重写了alert方法。把...
2019-06-25 16:42:34
3086
3
原创 css一些样式的兼容和一些写法出现的bug
1.ul的li要同一行排列，如果用display: inline-block;在html的li换行时会产生3px的间距。解决办法：（1）改变html结构<ul> <li> item1</li><li> item2</li><li> item3</li><li> ...
2019-05-25 11:45:26
90
原创 小程序封装get和post请求
简单的封装了一下get和post请求request.js//这里是你备案的域名信息var host = 'https://www.baidu.com';/** * POST请求， * URL：接口 * data：参数，json类型 * success：成功的回调函数 * fail：失败的回调函数 */function postData(requestHandler)...
2019-04-25 15:03:43
694
1
原创 小程序实现简单倒计时
倒计时：00:10:22:23（天数，时，分，秒）wxTimer.jsvar wxTimer = function (initObj) { initObj = initObj || {}; this.wxTimerSecond = initObj.wxTimerSecond; this.complete = initObj.complete; //结束任务 this.na...
2019-04-25 14:33:48
2702
原创 mysql安装
mysql-8.0.12-winx64（Win10）的安装过程1，下载压缩包mysql官网安装目录下载解压后的目录是这样的：2，新建一个my-default.ini文件用记事本打开编辑，basedir，datadir以及port三项要改成相对应的值[mysql] # 设置mysql客户端默认字符集 default-character-set=utf8 [m...
2018-08-14 12:36:01
101
原创 git flow使用
安装git flowWindows配合Cygwin使用。Cygwin之下的安装非常简单。执行如下指令即可：wget -q -O - --no-check-certificate https://github.com/nvie/gitflow/raw/develop/contrib/gitflow-installer.sh | bash如果没有安装cygwin
2018-01-10 15:13:31
233
原创 禁止 上滑下滑的时候出现微信浏览器的黑色背景
在做微信h5开发的时候，当你在页面中滑动或者拖拽的时候，整个网页也会跟着动，然后会露出微信浏览器的黑色背景，还能看到域名。一般做法是这个： 给body标签添加禁止滑动或者拖拽事件document.body.addEventListener('touchmove' , function(e){ e.preventDefault();})可是用了这种方法，当某个页面是需要滚动的...
2017-12-06 14:27:04
9663
4
原创 控制loading
loading加载的太快，看不到loading的效果function rate(cb, delay = 400, count = 100){ const time = delay / count; let num = 0; const call = function (){ num += 1; if(cb)cb(num, count); setTime
2017-12-06 12:11:04
271
原创 刮刮卡
实现思路用canvas画三层， 最下面的一层为奖品图片 中间一层为灰色的刮卡层 最上面一层是用户的滑动范围利用canvas的destination-out 让相加的部分变透明 //只绘制先绘制图形不相交的部分,由先绘制图形的填充覆盖,其余部分透明,全部浏览器通过Canvas里的globalCompositeOperationjs代码class RafflePages extends Base
2017-12-05 17:54:55
203
原创 图片拖动旋转缩放裁剪
引入css文件<link rel="stylesheet" type="text/css" href="css/cropper.css"/>引入js文件<script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>//手势<script src="resources/hammer.js"
2017-12-04 17:41:10
894
1
原创 一键复制功能
需要引入jquery,clipboard http://lib.baomitu.com/jquery/2.2.4/jquery.min.js http://lib.baomitu.com/clipboard.js/1.6.1/clipboard.min.jsgithub:https://clipboardjs.com/一键复制<p id="itemWord" class="itemWord"
2017-12-04 17:17:20
1518
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人