- 博客(64)
- 收藏
- 关注
RSS订阅原创 Github实现push触发自动构建（包括提交代码到另一个仓库中和发布npm）
github提交代码时触发自动构建，可将部分文件自动push到另一个代码仓库中，也支持自动发布npm包
2024-03-27 11:25:52
309
原创 ckeditor富文本编辑器使用行间距插件lineheight扩充，改变行距
1、首先需要下载一个lineheight包，网上很多资源都需要花钱或者花积分下载找到ckeditor官网，在以下链接中直接下载即可https://ckeditor.com/cke4/addon/lineheight2、下载好后，添加在ckeditor下载plugin文件夹下，新建一个lineheight文件夹，如下图：3、在config中添加 config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');
2021-04-16 10:00:09
2664
7
原创 uniapp使用教程（包括下载、初次使用以及使用中的一些细节总结）
记录，以防后面忘记感觉uniapp就是vue的语法结构、小程序的api和标签 这两者混合起来使用1、下载，参考之前的博文https://blog.csdn.net/mao871863224/article/details/1093287492、开始使用：（1）一般在pages.json里面进行页面的全局配置（参照官方文档https://uniapp.dcloud.io/collocation/pages）pages.json这里面配置的主要内容包括：所有页面路径、全局的外观、底部tabBar、生
2021-01-06 17:51:01
24368
4
原创 使用gzip打包vue项目，减少打包文件的体积，减少首页渲染的时间
项目打包好部署到服务器上，首页加载时间需要7秒以上，这肯定是不友好的，看了看，是因为app.css、vendor.js文件居然达到了2M以上，造成了加载时间过长，开始考虑优化打包1、首先考虑到能不能用cdn引入资源文件，小众第三方插件不是很敢使用cdn引入，怕因为线上崩溃了，项目跟着一起完蛋，所以就引入了一些比较大一点的第三方插件以vue-cli3项目为例子（vue-cli3一下版本可能写法不一样，网上一搜一大把）vue.config.js文件module.exports = { chain
2020-12-21 11:34:25
639
原创 vue项目使用px2remLoader插件将px转为rem之后加载瞬间尺寸由小变大，页面闪现错乱样式
vue项目使用px2remLoader插件，在index.html自定义设置font-size的大小，尤其是在首屏加载的时候，会出现页面各个元素尺寸由小变大的一个过程，很难看刚开始一直在想是不是因为css文件过大，加载的时候先渲染了页面，然后css文件加载完之后样式才恢复正常，后来使用gzip压缩了打包的文件之后还是这样，（使用gzip打包可以减少打包文件体积，减少首屏渲染的时间，详见），还使用了v-cloak方法，并没有生效。转换思路，最后发现是px转rem的原因！在index.html文件中自定义了
2020-12-18 14:05:59
1853
1
原创 vue+antd实现购物车
<template> <div class="shopping-card"> <div class="card-title"> 我的购物车 </div> <div class="card-table"> <a-table :row-selection="{ selectedRowKeys: selectedRowKeys,
2020-12-07 17:30:41
756
原创 vue组件通信7种常用方法
这个链接里面总结的非常详细了供自己参考https://juejin.cn/post/6887709516616433677#heading-28
2020-11-27 09:43:04
232
原创 深拷贝和浅拷贝具体分析以及实现
如何区分深拷贝和浅拷贝呢？简单来说如果b复制了a，a改变了，b也跟着一起改变了，那么就是浅拷贝，如果a改变，b没有跟着一起改变，那么就是浅拷贝那么在实际开发中我们如何进行深拷贝呢？分两种情况1、对基本数据类型进行深拷贝基本数据类型： string、number、Boolean、null、undefined、Symbollet a = '123456'let b = aa = 'abcde'console.log(a,b) //此时a = 'abcde' b = '123456'
2020-11-25 14:44:07
135
原创 记录遇到过的匹配规则
1、判断值是否为空if(!value) { console.log('值为空')}2、判断是否为数字if(!NaN(value)) { console.log('值为数字')}3、判断是正整数或者0if (!(/(^[0-9]\d*$)/.test(parameter))) { console.log('值不是正整数或者0')} else { console.log('值为正整数或者0')}4、检查邮箱格式let regEmail = new RegExp('^[a-zA
2020-11-24 15:33:52
89
原创 实时监听input输入框中的内容以及失去焦点的时候再去获取输入框中的值
1、实时监听input的输入值伴随着输入框中内容变化，实时打印输入框中绑定变量的值<input (keyup)="onChange()" [(ngModel)]="value1" />onChange() { console.log(this.value1)}2、失去焦点的时候才去获取输入框中的值该输入框失去焦点的时候才去打印输入框中的值<input (blur)="onChange()" [(ngModel)]="value2">onChange() {
2020-11-24 15:10:34
2082
1
原创 获取图片的原始高度宽度和在页面上实际渲染出来的高度宽度
1、获取原始高度和宽度，也就是图片本身的高度和宽度<img id="id1" src="图片路径" alt="">//首先获取dom元素let dom = document.getElementById('id1')//如果图片是动态返回的，那么直接按照下面的方式写，可能获取不到值，一直显示为0//这是因为这时候返回的图片还没加载完成就去获取，当然是0了let img_url = url //获取到动态返回的图片的链接let width = img_url .naturalWi
2020-11-24 11:35:41
1340
原创 css绝对定位的三种方法
1、兼容性不错，但是需要提前知道元素的高度宽度，往往需要通过JS获取.content { position: absolute; top: 50%; left: 50%; width: 300px; height: 400px; margin-top: -200px; //高度的一半 margin-left: -150px; //宽度的一半}2、【推荐】css3的一种用法，使用transform代替margin. transform中translate偏移的百分比值是相对于
2020-11-21 17:57:08
1383
原创 微信二维码登录
准备工作：（参考二维码登录指导文档）https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html下面直接上代码login页面<div class="QR_code" id="login_container">这个是二维码显示区</div>// 这个链接是扫码之后跳转的一个空白页面，在这个空白页面做登录处理// appid和secret是向微信申请好mou
2020-11-17 18:46:49
605
原创 uni-app中引入moment.js插件
1、如果是在uni-app项目中第一次使用npm installnpm init -y初始化创建一个package.json文件2、安装moment插件npm install moment --save-dev3、使用moment插件在使用的文件中引入测试：结果：
2020-10-28 14:24:17
10822
2
原创 uni-app使用，并引入thor-ui
供自己以后参考1、ThorUI组件库官网地址：http://www.thorui.cn/注意，这里下载的是这个代码库2、初始化创建一个uni-app项目，官方文档：https://uniapp.dcloud.net.cn/quickstart首先，在https://www.dcloud.io/hbuilderx.html下载uni-app开发工具运行开发工具后，新建一个uni-app项目新建好之后可以运行的终端注意：运行在小程序端的时候要在小程序开发工具中配置打开安全代理才能在小
2020-10-28 11:21:59
5478
原创 angular项目中modal的使用
首先，安装@delon/theme插件接下开始使用1、在需要的ts文件中引入import { ModalHelper } from ‘@delon/theme’;2、在constructor中声明constructor(private modal: ModalHelper) { }3、点击按钮来打开弹框this.modal//.open方法打开modal框//PostEditAddTagModal是自己写的弹框页面，open直接跳到这个自定义页面//{ data: this.data |
2020-10-23 11:25:59
2085
原创 angular7使用路由守卫
供自己以后查阅https://www.jianshu.com/p/8d468bafa2f4https://www.cnblogs.com/starof/p/9012193.html
2020-10-23 09:54:00
177
原创 微信小程序选择框（通用）
供自己之后参考<view class="select-box"> <view class="select-current" catchtap="openClose"> <text class="current-name">{{defaultOption.name}}</text> </view> <view class="option-list" wx:if="{{isShow}}" catchtap="optionTap
2020-09-30 11:51:29
4338
原创 微信小程序中使用ec-canvas(包括单图表和多图表)
微信小程序中使用ec-cavas注意（踩坑）的点：1 ec-canvas组件标签这里一定要设置百分比宽高，不然页面不显示2 ec初始化渲染图表的顺序一定要在数据挂载之前，为了保证这一点，要在数据挂载那里做一个异步，不然概率性出现数据挂载在初始化渲染图表之前3 在挂载的时候判断一下图表有没有初始化渲染上去，不然图表未初始化渲染会报错4 写多个图表的时候不能写一个子组件然后多次调用，这样子只会显示最后一个渲染的图表，乖乖的一个一个的按照下面的这个写吧（ TODO 这个多个图表的目前只找到这种写法，应
2020-09-29 23:11:35
15462
4
原创 vue中使用国际化i8n切换语言
1 安装依赖//安装antd插件，这个跟i18n无关，写整体页面的时候用的这个插件npm install ant-design-vue --save-dev//安装i18n依赖npm install vue-i18n --save-dev2 创建自己的国际语言文件（目录自己定义），文件里面要写的就是所有切换语言的时候要切换的词条en.js文件中内容const EN = { "测试moment插件": "test moment", "英文": 'English',
2020-09-15 14:35:39
638
转载 图片设置大小后变形css处理办法
供自己参考https://blog.csdn.net/weixin_43301427/article/details/107221886
2020-09-12 14:41:43
485
原创 Input内容自动填充后,浏览器渲染的默认背景 文字问题
使用标签的时候，某些浏览器会自动渲染其中的背景以及文字的效果，这个时候需要去除自动渲染出来的效果<input type="name" value="" class="form-control" placeholder="Name">.form-control{ // 覆盖浏览器默认input的背景颜色 // 生效的就是下面这句bo-shadow box-shadow: inset 0 0 0 1000px #f7f7f8 !important; //下面就是自己写的一
2020-09-12 14:32:17
231
原创 如何安装nvm
供自己查阅安装步骤晚上一抓一大把，比如参考一下方式安装即可https://www.cnblogs.com/hamsterPP/p/8076131.html需要注意的是，nvm install node版本号的时候，如果node版本号应该是大于10的话，不会自动去下载npm，这时候就需要自己去下载npm，具体步骤也是网上都有，具体参考如下方法https://blog.csdn.net/cn_1937/article/details/106756417...
2020-09-12 14:26:00
283
原创 运行angular1老项目的步骤（gulp打包，bower安装依赖）
记录供自己以后查阅1 首先node版本不能太高，基本上使用4.4.6或者6.10.3左右，项目中有具体要求的话就是用具体要求的node版本，没有的话基本上就这两个2 全局安装gulp-clinpm install -g gulp-cli3 安装gulp依赖npm install gulp --save-dev4 安装bower依赖npm install bower --save-dev5 安装package.json中的依赖，生成node_modules包npm install有时候np
2020-09-12 14:16:55
749
原创 angular7项目中引入动画AOS库
angular7项目中引入动画AOS库1 安装依赖npm install aos --save-dev2 在angular.json中引入文件//style"node_modules/aos/dist/aos.css",//js"node_modules/aos/dist/aos.js",3 初始化AOS具体使用方法参考：https://www.xyhtml5.com/3322.html...
2020-09-10 16:01:51
296
原创 angular项目中引入fontawesome插件
angular项目中引入fontawesome插件1 安装依赖npm install font-awesome --save-dev2 angular.json中引入font-awesome.css"node_module/font-awesome/css/font-awesome.css"3 在需要的less文件中引入（一般是在入口的less文件中引入）@fa-font-path: "../../node_modules/font-awesome/fonts";@import '~fon
2020-09-10 15:57:07
499
原创 使用拖拽功能
使用angualr中的插件dnd进行拖拽https://blog.csdn.net/fsxxzq521/article/details/86164499
2020-08-26 14:23:56
180
原创 页面刷新后滚动条部分默认滚动到指定位置
列表页面进入详情页面，在列表页点击靠后的图片，进入详情页之后左侧有个列表滚动区域，在该区域让该图片默认指定。接口异步返回后，数据处理完成后，设置一个setTimeout（）异步处理主要实现的原理就是：利用异步，接口返回是异步，在这个异步返回数据之前，dom元素还没有被渲染完成，这里说的还没被渲染完成的dom元素只包括绑定数据的DOM元素，比如for循环等，angular中任意一个初始化的生命周期函数都获取不到for内的DOM元素，只能等异步数据返回后才能获取到getPostsData（） {//这里
2020-08-17 17:51:35
1034
原创 angular生命周期函数 以及 执行顺序
1、angular每个组件都有被一个Angular管理得生命周期；当Angular使用构造函数新建一个指令后，按照下面额顺序执行生命周期钩子；画线的为主要用到的生命周期钩子。2、关于子父组件生命周期钩子的调用顺序问题；...
2020-08-10 18:56:19
1251
原创 ts监听浏览器窗口大小变化
//首先要引入Observable依赖，import {Observable} from 'rxjs/Rx';//在ngOnInit()中使用下面的监听Observable.fromEvent(window, 'resize') .debounceTime(100) // 以免频繁处理 .subscribe((event) => { // 这里处理页面变化时的操作,处理高度和宽度都可以 console.log('come on ..'); this.winHei
2020-08-07 15:51:16
1831
原创 鼠标右键触发事件
需求：鼠标 右键的时候使用系统自带的打开链接功能如下图：解决：1、鼠标右键要展示上述默认功能，首先被点击部分要使用a标签，a标签拥有属性href才能默认打开上图2、angular7项目中右键触发（contextMenu）事件<当然也可以使用（mousedown）事件，当e.which为3的时候就是鼠标右键，当e.which为1的时候是鼠标左键事件，当e.which为2的时候就是鼠标中键事件>TS文件中获取该id下的a标签，给该a标签增加一个href属性，并且把跳转的路由给该href
2020-08-07 15:39:23
1507
1
原创 设置button按钮不禁用的样式
设置button不禁用时的样式：/* == 按钮 == */.btn-options .btn-green:not(:disabled),.btn-options .btn-green .ant-select-selection,.btn-options .btn-green:not(:disabled)~.btn-green:not(:disabled) { background: #6ac5a2; border-color: #6ac5a2; color: #fff;}...
2020-08-07 15:30:04
808
原创 页面的内容不能自动撑开整个屏幕
当页面内容不能自动撑开整个屏幕的时候，给整个页面设置一个margin：0的样式，再给对应要撑开屏幕的部分设置width： 100%
2020-08-07 14:59:35
386
原创 js获取视频的时长
利用video标签的duration属性获取时长<video (src)="">//将视频文件的地址动态写入video.src//利用video.duration直接获取视频时长
2020-08-07 14:47:33
1142
原创 angualr7项目引入echarts
1、首先安装echarts和ngx-ecahrtsnpm install [email protected] --save-devnpm install [email protected] --save-dev注意：如果安装好后打包失败，建议更换echarts的版本号重新尝试，或者如果项目没跑起来，可能是因为node的版本号不匹配，目前上述echarts版本号对应10.16.1运行正常、打包正常2、找到angualr.json文件，在文件中的scripts添加如下代码："node_modules/echa
2020-08-07 14:41:17
156
原创 angualr7项目下新增子模块路由搭建
用于记录便于自己查看新增一个子模块的时候搭建改子模块的路由1、在app-data.json里面新增路径2、在总的路由文件中添加该子模块3、该模块路由文件注册添加4、ts文件中导出5、html文件写页面...
2020-08-07 14:30:32
111
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人