使用rem布局(js动态改变根字体大小),兼容pc端,设计稿750px <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <meta name="keywords" content="关键字"/> <meta name="description" content="描述"/> <!--360浏览器渲染模式优先级:极速/ie兼容/ie标准--> <meta name...
angularJS系列:基础篇
[ 2017/05/11, 3789阅, 1评 ]
1.日期格式化 13位时间戳(毫秒为单位的直接格式化) {{1423130269432 | date:'yyyy-MM-dd HH:mm:ss'}} 10位时间戳(秒为单位的需要×1000转为毫秒再格式化) {{1438668006*1000 | date:'yyyy-MM-dd HH:mm:ss'}} 2.截取字符串 在HTML的模板绑定中:{{ limitTo_expression | limitTo : limit : begin}} In JavaScript:$filter('limitTo')(input, limit, begin) 栗子: ...
js自定义多字段排序
[ 2023/11/18, 443阅, 0评 ]
某些场景下,需要在前端实现将数组中的数据按照多个字段进行排序,Array实例内置的sort方法只能实现按照单个字段的排序。 多字段同时排序在后端很好实现,直接order by field1 asc, field2 asc, field3 desc… 在js中可以通过扩展sort方法来实现多个字段的同时排序: const items = [ { name: 'linc', age: 28, num: 1234 }, { name: 'linc', age: 28, num: 12345 }, { name: 'kiki', age: 20, num...
一个基于vue2的h5项目,被嵌套在安卓APP和iOS APP中使用。因为某些原因无法在webview中使用缓存,也无法使用cdn方式。 在经过分包、按需加载、代码清理、压缩资源文件、减少并发请求等常规手段优化后,网络较差的情况下较长的白屏时间仍然很尴尬。于是在index.html中加上了默认loading动画效果,这样用户在加载完入口文件后就可以直接看到动画,待vue初始化完成时再关闭loading动画,体验更佳。 辣么问题来了,在PC和Android设备上进行测试,都能达到预期效果。但是在iOS设备上,不管是 Safari 还是基于 iOS的WebView中,ind...
TypeScript中enum枚举类型的常用姿势
[ 2023/04/08, 4250阅, 0评 ]
1、转换为字面量的联合类型 1.1、数字枚举 enum Test1 { red, green, yellow, } type KeyTest1 = keyof typeof Test1 // "red" | "green" | "yellow" type ValTest1 = `${Test1}` // "0" | "1" | "2" type StrToNum<Str> = Str extends `${infer Num extends number}` ? Num : Str type NumValTest1 = StrToN...
node应用部署到nginx服务器的nginx配置
[ 2021/10/20, 5131阅, 0评 ]
假设website.com和www.website.com需要绑定一个端口为8888的node应用,api.website.com绑定端口为8887的应用,首先需要将这三个域名解析到服务器ip,然后nginx添加配置内容如下: server { listen 80; listen 443 ssl; server_name website.com www.website.com; #SSL-START SSL相关配置 #301-START if ($host ~ '^www.website.com') { r...
使用之前别忘了先安装clipboard(npm i clipboard -S) 1、调用方法 this.$store.commit('emitCopy', '复制内容') 2、App.vue文件中 <template> <div class="app-root"> <router-view /> <!-- 复制面板 --> <ClipboardPanel ref="clipboardRef" /> </div> </template> <script> ...
某日被告知某个系统在低版本火狐浏览器打开时一片空白,要求尽快修复,于是卸载本机firefox,安排上表现异常的版本Firefox 42.0,打开目标系统果然一片空白,然后打开控制台,发现提示如下: SyntaxError: let is a reserved identifier 嗯,看提示是低版本还不支持let语法,按照经验转成 var 就行,于是给安排上babel-polyfill再加上各种转换折腾了一上午,无果emmm,,, 嗯,看来还是想当然了(手动捂脸)。于是换个思路,从抛错点入手,从控制台中打开抛错的文件,发现该function有添加"u...
vue2组件间的各种常用通信方式总结
[ 2020/12/12, 1558阅, 1评 ]
1、vuex 不论是父子关系、兄弟关系、层层嵌套关系还是八竿子打不着的关系,都可以使用vuex来进行数据的传递或是做做中间处理。 vuex是vue的状态管理器,存储的数据是响应式的,但是并不会保存起来,刷新之后就回到了初始状态,一般在vuex里数据改变的时候存一份到localStorage或sessionStorage里面(看项目需求),刷新之后,如果localStorage里有保存的数据,取出来再替换store里的state即可。 ps:vuex最简单、最详细的入门文档 2、事件总线EventBus 通过新建一个js文件event...