不吃草的羊

数据分类并展示（基于 vant） 在一些数据列表展示的需要分成几大类，例如：动物：猴子、河马。水果：香蕉、苹果。后端往往是直接返回给你一个数组，里面是一条条奖品数据，只有对应的level可以进行区分该条数据是什么种类。但往往前端展示但时候只需要展示如下效果，这时候就需要前端自己进行数据分类： 效果图： 代码实现,里面主要是引用了lodash里面的’groupBy’方法 123456789101112131415161718192021222324252627282930// mock数据 let data = [ { cover: 'https://xxx', describe: '我是狗狗', id: 1, level: '动物', name: '狗狗1号' }, { ...

动态表单（基于 Ant Design Vue 1.x） 1.实现以下效果 2.示例代码如下：123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 <a-button type="primary" class="page-work-create-btn" @click="addDomain" > 创建 </a-button> <a-form-mode ...

最近项目里用到一导出功能，但是后端并没有做文件流，只给我了json数据，所以是纯前端导出excel表格，其中有一个需求是根据总条数来做成以一个特定基数为准的递增数组区间，如下图所示： 感谢小组长大大哥帮我优化代码！！！牛逼！！特此记录一下！！ 代码实现： （注：total 为数据总条数，limit 为区分基数，上图是以total为7、limit为3的效果） 1234567891011121314 spiltItems () { const limit = 3; const total = 7; const arr = [] const items = Math.ceil(total / limit) const remain = total % limit for (let i = 0; i < items; i++) { arr.push({ index: i + 1, label:1 + i * li ...

我之前看Promise，里面有个方法叫all，因为接口是异步的，当你的业务必须拿到几个不同接口的所有数据后，再进行比较或者逻辑操作，这个时候就可以用到这个方法。此处贴上示例代码，是以Vue2为框架的背景下： 123456789101112131415161718192021222324252627282930 // 搭配async await 进一步优化 // 接口1 async getA(){ // return一个Promise实例对象 return await new Promise((resolve,reject)=>{ this.API1().then(res=>{ resolve(res) }) }).catch(error => { console.log(error) }) } // 接口2 async getB(){ // return一个Promise实例对象 return await ...

for与for…in的区别:1、相同点:for 能遍历有固定长度和固定次数的数组等。for...in 也能遍历数组,但也能遍历对象。for(var k in 数组名) //k=key(下标)2、不同点:for 是根据数据的长度来执行次数,empty(空)也会执行。而for..in则会根据数据内容来执行次数,empty会跳过不执行。遍历数组或对象时优先使用for...in1.for each只做遍历,无返回值,打印是undifined,仅仅只是做遍历功能;2.map也可以用于数组遍历,可以返回一个数组,但是一定要return;//for of 遍历数组,不能遍历对象 for let k of arr.keys() //获得键; for let v of arr.values()//获得值; for let[k,v] of arr.entries//同时获得键和值; //for of 遍历对象 for (let k of object.keys(obj))//获得对象的键; for (let v of object.values(obj)) //获得对象的值; for (let v of ...

前言接手前同事留下来的项目，发现不少需要继承的 bug（坚强），其中有一个是需要点击按钮，将里面的文字自动填充到输入框里面，跟产品、测试再（斗）三（智）确（斗）认（勇）后，撸起袖子干吧，以下是完成后的效果： 基于vue2和antdUI1、先准备好两个按钮（可以改成遍历，更方便）123<a-button type="dashed" class="variable" @click="onCheckVar('{出生年月}')">{出生年月}</a-button><a-button type="dashed" class="variable" @click="onCheckVar('{姓名}')">{姓名}</a-button> 2、准备好几个输入框1234567891011121314151617181 ...

之前在做公司flutter项目时候，与后端联调中，发现有一段代码逻辑并没有进入执行，但是终端也没报 错，然后打点debug发现是建立模型序列化的时候，flutter对BigDecima类型不支持识别，自动为int类型。解决方法：把int类型换成num类型就完美解决，但是后端要跟前端标明此类型是BigDecima，一般涉及到计算的数字都会使用这个类型

export 与 export default export在同一个文件中可存在多个： export default在同一个文件中只可存在一个（一个模块只能有一个默认输出）：* 引入的区别 引入的时候 export加{} 而export default可定义为随便一个名称 还可以import a,{arr,obj} from './test.js'

近段时间从window换到mac系统，随之而来的问题接踵而来：全局安装了yarn、webpack等全局包，从开始没权限到安装成功，以为成功了，但是一执行yarn等相关命令却报 zsh: command not found: xx，到网上看了n多教程，终于尝试n次成功了，如果你试了网上n多教程没用，看看这篇比较详细又简单的教程，说不定能帮到你： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475MAC bookPro出现zsh: command not found: xxx解决方法：把 bash shell 中.bash_profile 全部环境变量加入zsh shell里就好step1:Term执行open .zshrcstep2:在弹出的编辑器最下面加入source ~/.bash_profile或者source .bash_profile看哪个奏效，这一 ...

因为iphoneX等机型最下面会有条黑色等线，导致按钮等元素被遮住部分，所以设置安全区边距会往上提，如果不是刘海屏则保持原来样式。（注：在小程序模拟器上不生效，以真机为准。） iOS方案一：使用原生占位（仅App端支持） 1234567manifest.json 文件 app-plus 节点下配下 safearea"safearea": { "background": "#CCCCCC", "bottom": { "offset": "auto" } } iOS方案二：不使用原生占位（非App端可以不配置manifest 12345"safearea": { "bottom": { "offset": "none" } } ...