
前端开发
Angular baby
软妹前端开发工程师自留地,专注Angular、Vue。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue:弹窗中列表的复选框效果实现(列表需要做分页),复选数据带到父组件中
弹窗中列表前需要多选框,可以复选数据带到父级页面的列表中原创 2022-06-01 14:26:38 · 2214 阅读 · 2 评论 -
Vue:uniapp实现NFC标签读取功能
微信小程序官方文档中提供了调用NFC功能的基础库:NFC - wx.getNFCAdapter - 《微信小程序官方开发文档(全) - 20210305》 - 书栈网 · BookStackNFCAdapter wx.getNFCAdapter()返回值NFCAdapter错误示例代码 微信小程序提供了一个简单、高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务。本手册整理于2021年3月份,内容包含微信小程序开发指南、微信小程序框架、微信小程序组件、微信小程序A原创 2022-05-25 15:33:27 · 5623 阅读 · 4 评论 -
input输入框前后去空格:使用v-model.trim
介绍v-model的三种修饰符原创 2022-05-05 14:23:27 · 6278 阅读 · 0 评论 -
微信小程序-下载文件并打开/下载视频播放视频/下载音频文件-Android和IOS调试终版
下载文件并预览:调接口下载文件,接口返回的是.bin类型的临时文件,直接调用uniapp原生接口openDocument可能出现打不开的情况或者可能打开文件乱码异常,所以我们需要获取一下文件类型fileType适用于接口返回头中返回了文件名称和类型的情况:使用var arr = res.header['Content-Disposition'].toString().split('filename=')[1].split('.')从返回头Content-Disposition中截取文件原创 2022-04-28 13:51:11 · 6727 阅读 · 0 评论 -
Vue:在特定页面(route)执行定时任务
首先在项目的入口App.vue中使用watch对路由route进行判断,当路由不是指定的"Dashboard"路由时执行事件触发,关闭定时任务:watch: { $route: { handler (newValue) { if (newValue.name != "Dashboard") { events.$emit('clearInterval') } }, immediate: true }原创 2022-02-07 14:05:51 · 1202 阅读 · 0 评论 -
Vue使用aplayer播放.wav格式音频不显示时长问题
在弹窗中使用了aplayer播放器,但是发现.mp3格式音频显示和播放正常,.wav格式无法显示音频总时长,于是想到做以下改造:1、由于在点击播放后,可以显示总时长,所以想到打开页面后,自动播放,先把时长展示出来::autoplay="autoplay"其中autoplay初始化为true2、在打开弹窗后,使用ref绑定页面元素的办法,调用音频播放器的pause(暂停)方法,让自动播放的音频暂停播放,这样用户的体验就是打开音频可以显示时长,也没有自动播放了:ref="aplayer"原创 2021-12-02 11:20:28 · 2437 阅读 · 0 评论 -
解决antd下拉框a-select下拉列表和输入框分离的问题
问题多出现在弹窗内使用a-select的情况中,当打开下拉框的情况下,滑动页面,会发现下拉列表和输入框分离了这种情况只需要在a-select标签内加上以下属性就可以:getPopupContainer="(trigger) => trigger.parentElement"完整代码:<a-tree-select multiple placeholder="请选择所属角色类型" all原创 2021-11-20 11:08:23 · 2506 阅读 · 0 评论 -
Vue页面antd select多选模式下(mode=“multiple“),点击框外下拉选项无法收起的问题完美解决
<a-select class="w260" allowClear :maxTagTextLength="maxTagTextLength" mode="multiple" :open="isOpen" @focus="isOpenFocus" @ch...原创 2021-11-19 18:23:18 · 8207 阅读 · 0 评论 -
解决vue项目页面F5刷新mounted里的函数不执行问题
解决方案:这个问题和Vue的生命周期有关,想要在F5刷新后调用的接口,可以写在beforeCreate中补充学习资料:常见的钩子触发事件beforeCreate在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。数据和实例都不能访问created实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始原创 2021-11-19 18:01:58 · 2705 阅读 · 1 评论 -
Vue antd分页器pagination的使用方法
<a-table bordered :scroll="{ x: 500 }" :rowKey="(record) => record.id" :columns="columns" :dataSource="data" :total="total" :pagination="paginationOpt" >在data中进行分页器的初.原创 2021-11-18 11:44:47 · 6247 阅读 · 0 评论 -
remote: HTTP Basic: Access deniedfatal: Authentication failed for ‘xxxxx‘的问题解决
在没有修改git密码的情况下,使用vs code推送代码,总是会报错:remote: HTTP Basic: Access deniedfatal: Authentication failed for 'xxxxxxxx'(git仓库地址)网上试了一堆方法,只有下面这个方法生效了,分享给大家。首先要删除Windows记住的git本地的密码——第一步:找到凭据管理器(控制面板-用户账户-凭证管理器-windows凭据),删除git项的密码。第二步:重新去执行gitpush命令时,就.原创 2021-11-16 13:34:34 · 2630 阅读 · 0 评论 -
密码和确认密码校验(使用<a-popover>做强度校验)
密码字段在点击填写的时候,右侧弹出校验密码强度的浮框:<a-popover placement="rightTop" :trigger="['focus']" :getPopupContainer="(trigger) => trigger.parentElement" v-model="state.passwordLevelChecked" ..原创 2021-10-28 10:49:41 · 2830 阅读 · 0 评论 -
<a-tree-select>多选树组件的输入搜索功能清空
树型选择控件多选支持搜索的时候,输入文字,可以对树进行筛选:<a-tree-select class="w260" multiple placeholder="请选择业务分类" v-model="queryParam.businessTypeIdList" allowClear :filterTreeNod原创 2021-10-26 13:50:23 · 4460 阅读 · 0 评论 -
PC端禁止用户缩放页面的实现方式
对于移动端,我们可以直接这样限制:<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no">在PC端上:1、禁止用户在页面上使用ctrl+鼠标滚轮和ctrl+“+”“-”进行页面缩放:可以在index.html中增加如下代码:<script> document.addEventListener('m...原创 2021-10-25 18:11:13 · 3813 阅读 · 1 评论 -
Vue开发小记:前端直接导出表格为excel
首先安装依赖:npm install --save xlsx file-saver组件中引入:import FileSaver from 'file-saver'import XLSX from 'xlsx'然后在页面上添加导出按钮,导出方法绑定到table对象:<!-- 前端直接导出xlsx --> <a-button style="margin-left: 10px" @click="outTab" >导出<原创 2021-08-31 12:12:14 · 254 阅读 · 0 评论 -
ant-design treeSelect组件replaceFields属性报错
使用ant-desgin的treeSelect组件时,由于接口返回的数据键值并不是组件想要的value、title、key、children四个参数,所以考虑替换查看api,有一个replaceFields属性可以替换接口的参数,所以立刻使用起来 <a-tree-select class="w240" v-model="queryParam.deptId" tree-data-simple-mo.原创 2021-08-24 14:24:29 · 6956 阅读 · 0 评论 -
antdesign(vue)中 a-tree-select组件用filterTreeNode设置筛选结果不正确
antdesign中的文档里,让我们这么筛选,那么代码里就要这么写<a-tree-select v-model="queryParam.businessTypeIdList" multiple :filterTreeNode="filterTreeOption" show-search treeDefaultExpandAll ..原创 2021-08-23 11:08:26 · 11486 阅读 · 9 评论 -
u-view的u-select组件除了label和value,传递其他参数
组件除了label和value,还可以传递其他参数,用extra进行传递:例如在给u-select绑定的array赋值时,extra用来保存每个数据的一个额外属性<u-select :list="industryCodeList"@confirm="confirm"></u-select>其中industryCodeList像这样赋值:this.myhttp.post('device', '/basic/region/xxxxlist', { dic..原创 2021-08-19 11:11:52 · 2852 阅读 · 0 评论 -
转载:打印插件LODOP Vue中的使用
官网:http://www.lodop.net/index.html首先需要官网下载安装软件:进入官网后,在下载中心里面下载:下载后的产品下载压缩包中文件如下图:其中CLodop_Setup_for_Win32NT.exe和install_lodop64.exe(或install_lodop32.exe)需要安装,而LodopFuncs.js则引入项目中。不过在引入LodopFuncs.js之前需要引入JQuery,引入方法网上有很多,但这里要注意,如果你的项目中没有配置文件w.转载 2021-06-05 09:58:36 · 794 阅读 · 0 评论 -
小程序开发小记
1、暂存方法:uni.setStorageSync('scanInfo', JSON.stringify(res.data));原创 2021-06-04 15:21:30 · 212 阅读 · 0 评论 -
You provided ‘undefined‘ where a stream was expected. You can provide an Observable,...报错解决
调接口时,我做了一个状态判断,如果后端返回的指定状态码不是我想要的,就返回提示信息并退出整个方法:queryMaterial = () => { ....... let loader = this.commonProvider.showLoading(''); // 页面加载状态 this.stockProvider.getPurchaseBarcode(this.barcodeObj[this.BarcodeTypeEnum.Material].barCode,原创 2020-09-23 11:57:06 · 2384 阅读 · 0 评论 -
ionic打包apk时报错No resource identifier found for attribute ‘appComponentFactory‘ in package ‘android‘
运行打包apk的指令ionic cordova run android,报错No resource identifier found for attribute 'appComponentFactory' in package 'android'我的解决方法:①在安卓平台中./platforms/android/build.gradle文件内,查找到allprojects,在它下面增加:configurations.all { resolutionStrategy.force 'co..原创 2020-07-28 17:42:48 · 600 阅读 · 0 评论 -
AngularJs:跨一级导航进行路由跳转时,自动刷新对应二级导航栏的内容
对AngularJs初学者来说,有了Angular6的经验,直接上手项目时,有的用法还是不太清晰:之前我在AngularJs做导航之间的路由跳转的时候,都没有接触过跨一级导航跳转的情况,所以没有接触过需要刷新二级导航列表的情况,今天遇到时候,发现使用之前传统的$state.go()方法没有对二级导航的列表做处理,结果就是一级导航跳转过去了,二级导航栏还是维持原有的列表——原本的代码:$scope.transforOut = function (item) {原创 2020-07-06 09:15:12 · 549 阅读 · 0 评论 -
AngularJs:table中实现单元格展示多条可点击的数据(字符串split成array后,ng-repeat遍历)
js文件:在js文件中,初始化声明表格的地方,在想要展示多条可点击数据的表头属性中,用一个自定义的属性做标记,标记本列需要做特殊的展示效果:$scope.tableConfig={fixedWidth:280,scrollWidth:1400,tableCol:[{type:"",...原创 2020-07-01 15:30:11 · 846 阅读 · 0 评论 -
ionic5:那些我在Android平台打包apk时踩的坑(qr-scanner二维码扫描改造)
ionic的打包和发布可以参考下面这篇文章,这里就不赘述了:https://www.jianshu.com/p/457365fc04e01、网页调试没问题,打包成apk,在请求接口时一直报404的错误:解决方法:1、在package.json查看安装的版本。版本为1.3.32、删掉cordova-plugin-whitelistcordova plugin rm cordova-plugin-whitelist3、添加cordova-plugin-whitelistcor原创 2020-05-22 10:35:36 · 1077 阅读 · 0 评论 -
解决:对修饰器的实验支持是一项将在将来版本中更改的功能。设置+"experimentalDecorators"+选项以删除此警告
编写代码的时候有时候会遇到这种问题:【ts】对修饰器的实验支持是一项将在将来版本中更改的功能。设置+"experimentalDecorators"+选项以删除此警告解决方法:1、打开配置文件tsconfig.js,在compilerOptions选项中配置:"experimentalDecorators": true, 2、在VS Code中配置:文件-首选项-设置-打...原创 2020-03-16 10:41:59 · 2237 阅读 · 0 评论 -
Vue:单文件组件-学习笔记
在很多 Vue 项目中,我们使用Vue.component来定义全局组件,紧接着用new Vue({ el: '#container '})在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显:全局定义...原创 2020-03-13 14:28:22 · 3734 阅读 · 0 评论 -
手动打包更新项目前端环境(Jenkins崩溃的时候使用)
前几天前端项目使用Jenkins打包总是会报内存溢出的错误(FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory),试了很多解决方法都没办法正常打包,只能自己在本地手动打包,生成镜像后更新前端环境了,具体操作如下:1️⃣在自己本地的项目中使用npm run build,将本地代码打包成dist文件;...原创 2020-03-03 13:57:47 · 703 阅读 · 0 评论 -
npm install、npm install --save与npm install --save-dev、npm install -g区别
npm install XXXX:会把X包安装到node_modules目录中 不会修改package.json 之后运行npm install命令时,不会自动安装Xnpm install XXXX –save: 会把X包安装到node_modules目录中 会在package.json的dependencies属性下添加X 之后运行npm install...转载 2020-02-26 14:22:54 · 352 阅读 · 0 评论 -
前端笔试题整理:活到老学到老③
18、改造下面的代码,使之输出0 - 9,写出你能想到的所有解法。for (var i = 0; i< 10; i++) { setTimeout(() => { console.log(i); }, 1000) }答案:首先我们先要复习一下setTimeout的用法:方法一:我们可以使用setTimeout的第三个参数,会作为回调函数的第一个参数...原创 2020-02-13 17:30:47 · 347 阅读 · 0 评论 -
Angular:路由守卫AuthGuardProvider中的checkLogin验证登录状态
系统中路由想要被访问,需要先通过路由守卫验证,看当前用户是否登录:AuthGuardProvider路由守卫服务:/* * @Author: Wangcan * @Date: 2018-05-16 13:34:23 * @Last Modified by: Wangcan * @Last Modified time: 2019-08-17 15:46:20 * @Descrip...原创 2020-01-21 14:06:58 · 1220 阅读 · 0 评论 -
echarts的雷达图(radar)鼠标移动到图标上面,如何给数据加单位
我们只需要在雷达图的data中,找到emphasis,这个是控制鼠标悬浮时高亮显示展示的雷达图中的具体数据的样式在label项中,我们配置formatter为:formatter:'{c}(单位)'这样就可以展示出数据的单位了,比如我想要我的数据单位是“%”,那么我的formatter需要这样写formatter:'{c}%'完整的代码:series: [ ...原创 2020-01-16 14:17:41 · 6261 阅读 · 0 评论 -
使用npm指令卸载安装指定版本的ng-zorro-antd
卸载:npm uninstall ng-zorro-antd安装指定版本:npm install ng-zorro-antd@1.8.1 --save原创 2020-01-08 10:25:27 · 3369 阅读 · 0 评论 -
Angular:装饰器(注解)是什么?有什么作用?
装饰器/注解就是一个函数,但它是一个返回函数的函数,它属于Typescript的特性,而非Angular的特性。类装饰器(https://www.jianshu.com/p/57ed7747c45d):@NgModule、@Component、@Injectable、@Pipe、@Directive在使用Angular进行开发的时候,我们很多时候都是在设计Component、Modul...原创 2019-12-18 15:55:40 · 1181 阅读 · 0 评论 -
Angular:组件和模块有什么区别?
设计上看,组件(带有@Component装饰器的类)强调重复调用,就像零件一样,一颗螺丝、螺丝帽分别是一个零件——组件化就好比:做一个网站,可以把一个个区域拆成多个组件,比如导航栏是一个组件、编辑区是一个组件、页脚是一个组件,可以尽情拆分,一个组件包含了html、css和js代码,可以简单理解为页面的一块,可以根据需要把它放在页面的任何部位,也可以和其他组件组成新的组件。每个组件对应一个工程目录,...原创 2019-12-18 15:48:15 · 1890 阅读 · 0 评论 -
Angular:修改第三方组件的样式——ng-zorro等组件默认样式的修改
在项目中修改ng-zorro组件默认样式的一些方法:类名等 前加::ng-deep; 类名等 前加:root; 类名等 前加:host /deep/;例如:页面上左侧有一个菜单栏,使用了ant design中的导航栏组件,其中我们想改变导航选中的默认样式,可以先在控制台查看当前组件的类——可以看出来,当前组件的被选中时的样式属于.ant-menu-item-selecte...原创 2019-12-14 13:54:35 · 4861 阅读 · 1 评论 -
Angular:ngStyle的使用,实现列表数据不同颜色展示
想要实现一个table中,根据数据不同而用不同颜色展示,比如:审批表经过不同次数编辑保存后,审批表列表页对应行的字体颜色变化。如第一次保存默认为黑色,第二次保存为绿色,第三次保存为红色......(暂设置5层,5层后颜色不再变化)首先要声明,由于我的table是封装起来的一个公共组件,也就是说我不得不将表格内容通过@Input()从我的使用的页面传到公共组件中,首先我们只有审批表这个列表需...原创 2019-12-12 17:28:20 · 3862 阅读 · 2 评论 -
Git:如何修改git仓库URL(地址)
在git的使用中,经常会出现git服务器IP地址变更的现象,一旦服务器的IP地址有变化,本地仓库的代码就和服务器失去了联系,无法同步服务器的代码。这里简单介绍三种方法实现git地址的变更:第一种方法:到项目所在目录找到git地址的配置文件,在文件内更改git的URL: 第二种方法:是直接使用git命令修改git地址: git remote set-url origin URL /...原创 2019-12-10 14:54:56 · 28220 阅读 · 0 评论 -
Git:vs code上,出现fatal:refusing to merge unrelated histories错误
今天拉取分支上代码的时候出现了一个问题,git pull失败,提示:fatal:refusing to merge unrelated histories这个问题是因为两个不相干的git库,一个本地库,一个远端库,本地要推送到远端,远端觉得这个库和自己不相干,所以告知无法合并。接下来我们有两种方法解决这个问题:第一个方法也是我使用的方法:强制的方法: git pull ori...原创 2019-12-10 14:46:03 · 1239 阅读 · 0 评论 -
Git:vs code上,从其他分支合并merge的代码,还没git push之前想撤销的解决方法
今天想把代码合并到master分支上提交,结果把代码从我本地的分支都merge到主分支上后发现,有其他同事在我的分支修改提交过,所以本次合并把同事提交的代码也都合并过来了,然而他的这部分代码又是不需要提交的,该怎么做?其实很简单,我们的vs code就提供了方法进行撤销merge操作:这样就撤销了刚刚的合并,我们的merge过来的代码会重新显示在源代码管理栏那里,我们从中选取我们真正想...原创 2019-12-05 17:44:25 · 8003 阅读 · 0 评论