分类: 前端研究预览模式: 普通 | 列表
例题,比如,有这样一个对象:
Javascript代码
  1. let arr = [  
  2.   {id:1,tit:'ttt1'},  
  3.   {id:2,tit:'ttt2',bb:{ cc:{dd:12} }},  
  4.   {id:3,tit:'ttt3',bb:{}},  
  5.   {id:5,tit:'ttt5',bb:{ cc:{dd:''}}},  
  6.   {id:6,tit:'ttt6',bb:{ cc:{dd:null}}},  
  7.   {id:7,tit:'ttt7'},  
  8. ]  
分支内的数据不太规范,有的分支多,有的少。现在要求:输出所有含有dd属性的一级分支(dd如为空值也要排除掉)
想想,怎么写?
 
直接给答案吧,lodash大法好,清晰优美,而且是带变量的写法,不管有多深,一探到底:
Javascript代码
  1. _.each(arr, item=>{  
  2.   let flag = _.get(item, [ 'bb''cc''dd' ])  
  3.   if(flag){  
  4.     console.log(item)  
  5.   }  
  6. })  
另外,_.isEmpty这个函数也很好用,用于空值判断,可以判断各种不同的空值,比如对象空,数组空,字符空。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 41

 vue项目中的一个小需求如题,代码整理如下:

Javascript代码
  1. <template>  
  2.   <el-container class="about">  
  3.     <el-main>  
  4.       <section class="bgBox">  
  5.           <h1>在诗句上任意位置点击,再点击“插入字符”按钮,即可在光标处插入字符</h1>  
  6.           <div class="h20"></div>  
  7.         <el-button type="primary" @click="insertChar">插入字符</el-button>  
  8.         <div class="h30"></div>  
  9.         <div class="edit" contenteditable>  
  10.           <p  
  11.             v-for="(item, index) in sentenses"  
  12.             :key="item"  
  13.             @click="getCurrentSent(index)"  
  14.           >  
  15.             {{ item }}  
  16.           </p>  
  17.         </div>  
  18.       </section>  
  19.     </el-main>  
  20.   </el-container>  
  21. </template>  
  22.   
  23. <script>  
  24. const insertStr = (soure, start, newStr)=>{     
  25.    return soure.slice(0, start) + newStr + soure.slice(start);  
  26. }  
  27.   
  28. import { getTableList, uploadFile } from "@/api/system/api_user";  
  29. export default {  
  30.   data() {  
  31.     return {  
  32.       current_sent: null,  
  33.       sentenses: [  
  34.         "凌波不过横塘路。但目送、芳尘去。",  
  35.         "锦瑟华年谁与度。月桥花院,琐窗朱户。只有春知处。 ",  
  36.         "飞云冉冉蘅皋暮。彩笔新题断肠句。若问闲情都几许。",  
  37.         "一川烟草,满城风絮。梅子黄时雨。"  
  38.       ]  
  39.     };  
  40.   },  
  41.   computed: {  },  
  42.   methods: {  
  43.     getCurrentSent(index) {  
  44.       // 获取当前句子  
  45.       this.current_sent = index;  
  46.     },  
  47.     insertChar() {  
  48.       // 获取getSelection对象,这个对象有很多内容,自己找到有用的数据  
  49.       let select = window.getSelection();  
  50.   
  51.       // 利用insertStr函数,在光标位置插入###三个字符  
  52.       let newSent = insertStr(  
  53.         this.sentenses[this.current_sent],  
  54.         select.anchorOffset - 1,  
  55.         "###"  
  56.       );  
  57.   
  58.       // 更新sentenses数组视图  
  59.       Vue.set(this.sentenses, this.current_sent, newSent);  
  60.     }  
  61.   }  
  62. };  
  63. </script>  
  64. <style lang="scss"></style>  

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 166

纯CSS实现文字水波动画

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 381

 moment('2021-1')这种格式定义一个日期时,安卓机可以通过,苹果机不行,显示NaN,

因此必须统一使用:moment('2021-01')这样的标准格式。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 954

SVG异形边框及路径动画+CSS动画演示

演示地址:

http://contactu.cn/2021/vue_svg_tweenmax_demo/index.html

- 根据窗体的width/height参数,自动计算生成SVG的path路径

- tweenmax+MorphSVGPlugin生成小光点绕路径环游的动画,tweenmax的CSS动画生成右下角的色彩变化

- VUE组件化,方便复用

查看更多...

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1420

snap.svg+vue实现圆形导航

查看案例请点击此处:
 
使用的技术框架:
1、snap.svg实现Svg
2、数据与视图双向交互由vue-cli3实现
 
功能点:
1、图形与数组双向互动。可点击“添加”按钮添加数组中的对象。
2、算法实现path环状节点,角度、弧度、边长的逻辑关系。下图中所有不同颜色的线段,都是通过CSS定义得到的。可以把一个圆环分成3份,也可以分成50份,得到不同的视觉效果。
3、Snap.animate 实现动画、transform用法
4、stroke-dasharray实现线条间隙,比如下例中的白色间隔。
5、viewBox改变Svg中心。
6、textPath路径文字,实现跟随弧度变化的文字
 
通过这个案例,了解了两种方式,来实现SVG线条。用HTML+CSS方式、或使用snap.svg的JS方式,都可以实现。
 
 
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1599
做为正当的做法,应该使用
Javascript代码
  1. npm install snapsvg  
  2. import Snap from 'snapsvg'  
来使用svap.svg
 
但事实上这样是不行的,会报红字错:
vue-router.min.js:6 TypeError: Cannot read property 'on' of undefined
 
 
找了很多百度、github issue的很多资料,发现很多人都碰到了这个问题,也提供了Webpack及改写vue-cli3( vue.config.js)的办法,但实验发现都解决不了问题。

最终在stackoverflow.com找到了最简便的解决办法:
Javascript代码
  1. npm install snapsvg-cjs  
  2. import "snapsvg-cjs"  
经我验证可行。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2254

某大屏展示项目中,要实现“点击乡级区划,显示出相应的数据”,

最终效果,链接:http://258754.cn/2020/guidong/demo.html

 

经过几天的学习,解决了一些疑难问题,特汇总如下以供参考:

 

 

难点 解决方法 参考文章或链接
echarts地理图的基础实现-基于geojson 参考了百度官方示例-香港地图 https://echarts.apache.org/examples/zh/editor.html?c=map-HK
外框发光效果实现 geo--itemStyle  
得到县一级的geojson数据 很多方法得到,本处给出一个很方便的工具 https://gallery.echartsjs.com/editor.html?c=x4snrWXFGe
网上公开的geojson数据,免费只到县一级,没有乡镇一级地图

1、自己手工绘制,比较粗糙,边界不准

2、找到了精确边界数据的购买渠道,很便宜

geojson.io这个网站可以手工绘制区块
买到的 geojson数据比较旧,今年度新的区划已经发生了合并。

使用mapshaper.org提供的工具,对区划进行了合并,完美解决了问题。

 

合并操作及控制台语法花了点时间。

工具:mapshaper.org

 

解析贴:

https://segmentfault.com/q/1010000013001601

同一页面展示多个图表 vue组件将地图封装了一下 查看本文源码

 

解决了以上主要问题,绘制类似地图,就只剩一些细节问题了。

 

 

本文同时发布到两处:

本人博客:http://www.contactu.cn

知乎专栏《低水平前端》:https://zhuanlan.zhihu.com/c_1040198727197237248

Tags: echart geojson

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3181

SVG制作不规则链接热点的最简版演示

一朋友要做一个“战国地图”,不会做“不规则热点”。我给他做了这个最简版演示。SVG是我用ps描的,很粗略。响应用的是vue.js,其实用jquery也是一样的。

这就是个最简演示,其它常用技术就不解释了。

演示地址 :
http://www.contactu.cn/2016/svg/qg.html

查看更多...

分类:前端研究 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 7757

VUE+TWEENMAX+SVG动画,用来模拟流程控制

那种工厂中很多个管道、流水线、控制阀门的控制体系,如果用软件来控制的话,会要操作很多的动画。用普通的HTML+IMAGE方式,很难表现一些复杂的控制。早几年的FLASH,是这方面的强手,但现在适用的方案,应该只好用SVG了。

我一直想了解一下SVG的组织结构及动画控制,这次终于实践了一个小demo。

这个演示用到了SVG的symbol/pattern。动画控制用的tweenmax,状态控制用了vue.js。
绘制方面,用了一个ps插件,我用自己熟悉的ps直接导出了svg矢量图形。
 
演示地址 :
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 16149

 使用了https://www.npmjs.com/package/gulp-px2rem-plugin

使用这个gulp插件,可以在Scss中直接使用px单位,然后通过gulp的转换,自动转为rem单位,与我常用的ydui.flexible.js配合,最终完成px2rem的转换。
gulp语法如下:
.pipe(sass().on('error', sass.logError))
            .pipe(px2rem({'width_design':640,'pieces':6.4,'ignore_px':[1,2]}))
            .pipe(gulp.dest(dir+"/css"));

注意width_design与pieces都要与ydui.flexible.js中的设定配合。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 6967

试着用css animation实现的逐帧动画

我的试验: 258754.cn/2018/tyfp/test.html

模仿对象是:http://www.101.com

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4906

开始学写微信小程序

早就有朋友跟我建议:“你应该开始写小程序,很简单,跟VUE的路子很象”。九月份,有一段时间手头没有新单子,于是开始学习。机会不错,从我一个业务关系那里买到了一个慕课的视频,《纯正商业级应用-微信小程序开发实战》。课程不错,我想听的都讲了。我不想听的,基本都没有。
 
花二天时间听完课程,自己写代码实战了一下---果然跟VUE类似。第一感觉就是文件体系拆得太散了。虽然大家都是HTML/CSS/JS/JOSN这几样,但是小程序4个文件分开写,几个页面一起弄的话,感觉我的sublime的标签都不够用了。VUE的单页面组件多么的紧凑。
 
另外,组件的写法跟页面文件,两者有点不一样。比如小程序组件调用的开关还要在josn中定义、小程序的响应函数居然要放在methods:{}中,而页面又不需要。感觉小程序好粗糙。
 
第三方库,我找了有赞出品的vant-weapp,跟vant for vue一脉相承。
js工具库,小程序
 
SCSS写习惯了。可是小程序没有提供支持。在网上找到个由gulp驱动的workflow,还真好用。
 
编辑器这块儿,在Sublime中直接找了个小程序语法插件,配合原来使用的emmet,还挺好用。
 
总体来说,确实难度不大。熟悉VUE体系的不妨多学这一项技能。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3929

跨域时遇到的一个顽症总结

在进行post跨域数据请求时(所有请求均header中带token),碰到一个奇怪的现象,postman测试可以通过,但是用页面进行调用时,总是报错。前后端忙活了大半天时间,最后找出问题。以下是程序员 “灰色头像”写的总结:

总结下今天出现的问题,主要是在跨域CORS的时候出现这个问题
 
首先需要知道一些容易忽略的知识点,浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
具体看
 
http://www.ruanyifeng.com/blog/2016/04/cors.html
 
还有一点需要注意,头部字段只支持
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type
对于自定义的,比如我们头部传的token这个自定义头部会出现下面2种情况
 
1、axios对于跨域CORS正常会发送2次请求,第一次“预检”,我们这边有token自定义头部字段,虽然我们服务器设置了<add name="Access-Control-Allow-Headers" value="*" />但这个*虽然指所有,但只限制于上面所说的支持的,自定义的不会支持,所以就导致预检就失败,不会发送第二次请求
 
2、普通的ajax却可以支持,应该是没有做预检处理(这个还没详细了解)
 
所以主要还是服务器设置<add name="Access-Control-Allow-Headers" value="*" />要改为<add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token" />,增加自定义的token,不能使用*这样的配置。这样对于做预检的,有什么自定义头部字段,这里就要额外增加。
 

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4789