预览模式: 普通 | 列表

vue2实现Teleport,用来做跨组件DOM挂载

 父组件调用:(to="#app"的意思是把#divPopup挂载到#app节点上

Javascript代码
  1. <Teleport to="#app">  
  2.         <div id="divPopup" style="z-index:20000;" v-show="dialogVisible">  
  3.           <el-button @click="clickH1">yes</el-button>  
  4.           <el-button @click="clickH2">no</el-button>  
  5.         </div>  
  6. </Teleport>  

子组件:

Javascript代码
  1. <script>  
  2.     export default {  
  3.         name: 'teleport',  
  4.         props: {  
  5.             /* 移动至哪个标签内,最好使用id */  
  6.             to: {  
  7.                 type: String,  
  8.                 required: true  
  9.             }  
  10.         },  
  11.   
  12.         mounted() {  
  13.             document.querySelector(this.to).appendChild(this.$el)  
  14.         },  
  15.   
  16.         destroyed() {  
  17.             document.querySelector(this.to).removeChild(this.$el)  
  18.         },  
  19.   
  20.         render() {  
  21.             return <div>{this.$scopedSlots.default()}</div>  
  22.         }  
  23.     }  
  24. </script>  

 

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

一个swiper双向移动的例子

分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 228

飞机探测地块的一个小演示动画

分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 246

一个帧动画--仿做

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

前端开发经常在vue-cli、小程序中切换,所以要搭建一个独立的mock环境,json-server就很符合我的需要。它就是独立的node程序,使用时用单独的命令行启动。常见使用场景就是, json-server全局安装,每个项目需要的mock配置放在mock目录下,要使用时,只要用单独的命令行启动即可。
 
 
常用的启动命令如下:
json-server --watch --port 53000 ./mock/mock.js --middlewares ./mock/middlewares.js
 
在vue中使用时,可以在package.json中做如下关联:
Javascript代码
  1. "scripts": {  
  2.   "mock""json-server --watch --port 53000 ./mock/mock.js --middlewares ./mock/middlewares.js"...  
  3. },  
这样就可以使用npm run mock来启动了。生成的接口类似这样:
mock.js是项目配置文件,我加了一段函数walkSync,用于遍历mock/api目录,这样复杂点的接口,直接在api目录下写个js文件就可以模拟了(支持mock.js语法)。
 
还是以项目中的login.js为例:
Javascript代码
  1. //login.js  
  2. module.exports = {  
  3.     "token""@guid()",  
  4.     "user_info": {  
  5.         'uid|3333-9999': 100,  
  6.         'organ''@ctitle(2, 3)研究所',  
  7.         'name''@cname',  
  8.         'level|1': [0]  
  9.     }  
  10. }  
简单点的接口,比如那种只要返回个成功信息的接口,我就在mock.js中直接生成了,比如:
Javascript代码
  1. {  
  2.     "code": 200,  
  3.     "data": {flag:true},  
  4.     "msg"''  
  5. }  
 json-server及mock.js的常规用法,网上文档很多,不赘述。

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 324
例题,比如,有这样一个对象:
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 | 查看次数: 495

 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 | 查看次数: 533

用moment.js构造带操作区的VUE个性化日历

 

这次项目需要用到这样一个稍有点特别的日历,每一天有一个“操作区”(根据数据有不同的操作),因为这个形态有点特殊,所以无法直接使用vant的日历 组件。之前这个日历列表是由后端同事提供的。后来我自己对moment.js 的操作比较熟练了,自己构造了一个,主要代码如下。

Javascript代码
  1. initCale(){  
  2.     const NOW = moment('2021-05-16')  
  3.     let _first = _.cloneDeep(NOW).startOf('month')  //月头  
  4.     let _last = _.cloneDeep(NOW).endOf('month')     //月尾  
  5.   
  6.     // 计算本月数据  
  7.     let days = NOW.daysInMonth()    //本月天数  
  8.     let list = []   //最终日期列表,存入这个数组  
  9.     for (let ii = 0; ii < days; ii++) {  
  10.         let dd = _.cloneDeep(_first).add(ii, 'days')    //从月头开始往后推算整月  
  11.         list.push(  
  12.             {  
  13.                 date:dd.format('YYYY-MM-DD'),  
  14.                 sd:dd.format('DD'),  
  15.                 day:dd.day(),       //星期几  
  16.                 used:true,  
  17.                 today:dd.format('YYYY-MM-DD')==NOW.format('YYYY-MM-DD'//今天  
  18.             }  
  19.         )  
  20.     }  
  21.   
  22.     // 补月头(上个月剩下的几天)  
  23.     let lenHead = _first.day()-1    //本月第一天是星期几?从而推算月头天数  
  24.     for (let ii = 1; ii <= lenHead; ii++) {  
  25.         let dddd = _.cloneDeep(_first).add(-ii, 'days')  
  26.         list.unshift(  
  27.             {  
  28.                 date:dddd.format('YYYY-MM-DD'),  
  29.                 sd:dddd.format('DD'),  
  30.                 day:dddd.day(),  
  31.                 used:false  
  32.             }  
  33.         )  
  34.     }  
  35.       
  36.     // 补月尾  
  37.     let lenTail = 7 - _last.day()   //月尾天数  
  38.     for (let ii = 1; ii <= lenTail; ii++) {  
  39.         let dddd = _.cloneDeep(_last).add(ii, 'days')  
  40.         list.push(  
  41.             {  
  42.                 date:dddd.format('YYYY-MM-DD'),  
  43.                 sd:dddd.format('DD'),  
  44.                 day:dddd.day(),  
  45.                 used:false  
  46.             }  
  47.         )  
  48.     }  
  49.     this.caleList = list  //caleList是VUE中用于渲染出日历的变量  
  50. },  
  51. 主要HTML:  
  52.   
  53. <ul class="caleList">  
  54.     <li class="top">一</li>  
  55.     <li class="top">二</li>  
  56.     <li class="top">三</li>  
  57.     <li class="top">四</li>  
  58.     <li class="top">五</li>  
  59.     <li class="top">六</li>  
  60.     <li class="top">日</li>  
  61.     <li v-for="item in caleList" :key="item.date"  
  62.         :class="[{'used':item.used},{'today':item.today}]"  
  63.     >  
  64.         <div class="date">{{item.sd}}</div>  
  65.         <div class="opt" v-if="item.used">操作</div>  
  66.     </li>  
  67. </ul>  
  68. 主要CSS(LESS):  
  69.   
  70. .caleList{  
  71.     display: flex; flex-wrap: wrap;  
  72.     li{  
  73.         flex:1 0 100%/7;  
  74.         border: 1px #fff solid;  
  75.           
  76.           
  77.         background-color: #aaa;  
  78.         color: #777;  
  79.           
  80.         &.top{  
  81.             background-color: #fff; color: #900;  
  82.             border: none;  
  83.             height: 40px; display: flex; align-items: center; justify-content: center;  
  84.         }  
  85.         &.used{  
  86.             background-color: #eee;  
  87.             color: #333;  
  88.         }  
  89.         &.today{  
  90.             background-color: rgb(163, 10, 31); color: #fff;  
  91.         }  
  92.         .date{  
  93.             font-size: 24px;  
  94.             display: flex; align-items: center; justify-content: center;height: 35px;  
  95.         }  
  96.         .opt{  
  97.             font-size: 12px;  
  98.             padding: 0px 15px 10px; text-align: center;  
  99.             color: rgb(112, 11, 11);  
  100.             line-height: 120%;  
  101.         }  
  102.     }  
  103. }  

因为逻辑比较简单,此处并没有抽象成组件,有需要再说。

特别感谢知友的这篇文章:

 

Sail:moment的高频用法总结

Tags: vue 个性化日历

分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 643

一页面试题

 

Javascript代码
  1. // 第1题   
  2. let str = "2434cab"  
  3.     let arr = [...str]  
  4.     console.log(arr)  
  5.     let sss = []  
  6.     do {  
  7.         let rrr = _.takeRight(arr, 2)  
  8.     arr.length = arr.length - 2  
  9.     sss.push(rrr[0]+rrr[1])  
  10.     } while (arr.length>2);  
  11.     sss.push(_.replace(_.toString(arr),',',''))  
  12.     console.log("第1题答案:",sss)  
  13.   
  14. //  第2题  
  15. let sss = []  
  16. for (let i = 1; i < 101; i++) {  
  17.     let flag35 = (i % 3 == 0) && (i % 5 == 0)   
  18.     let flag3 = (i % 3 == 0)   
  19.     let flag5 = (i % 5 == 0)   
  20.     if(flag35){sss.push("bb35");continue;}  
  21.     if(flag3){sss.push("bb3");continue;}  
  22.     if(flag5){sss.push("bb5");continue;}  
  23.     sss.push(i)  
  24. }  
  25. console.log("第2题答案:",sss)  

 

  1. //第3题
  2. let rect = document.getElementById('rect')  
  3. console.log("第3题答案:", [rect.getBoundingClientRect().width,rect.getBoundingClientRect().height])  

 

 

分类:开发心得 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 734

纯CSS实现文字水波动画

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

vite2+vue2.6.12+vant2.12.12提速移动端开发

 试着用网上的一个vite2的脚手架做了个移动端的尝试。vite最大的好处就是--真的快!也可能是我页面比较少,但是每次热更新,基本就是一存盘,浏览器就完成了变更,体验太好了。

换新脚手架,要把所有常用配置都验证一下,并且把原来webpack中的选项都做到在vite中等价实现。

包括:

* px2rem的解决方案,在postcss.config.js中配置,转化为vw单位,比rem方式要先进点。

* vant基础样式定义,在theme.less中。

* lodash及moment全局引入,在/index.html中直接用<script>标签引入的,在vue文件中和.js中直接可用,但是在.ts文件中,如果不做import,会有红色的错误波浪线出现,但不影响使用。

* import后缀为vue的组件时,必须带上vue后缀,但js/ts不用带后缀。

* 有时候大的变化要CTRL+F5强制刷新页面,热更新才会生效。

* 图片引入方式:

<img :src="require('@img/aaa.png')" />

background-image: url("@img/aaa.png");

* 静态资源在/public目录下,在页面中用/images这样的路径引入即可。

* webpack允许的require在此都不能用,要改为import。写法方面,@import "~@/assets/less/_variable.less" vite中要去掉~写成:@import "@/assets/less/_variable.less";

* 控制台过滤。vite会出现一些控制台输出,暂时没有配置方法屏蔽,折中办法,在控制台搜索框输入-vite,可以过滤掉这些输出。

* 运行命令与环境变量。跟webpack略有不同。运行方式看package.json就知道了。环境变量可放在.env.development这样的文件中,跟webpack一致。在所有代码中输出import.meta.env,可以看到环境变量的所有。具体看文档。

 

我本人对于vue3和ts不是很熟悉(学不动了),所以宁愿工作在vue2+js的环境中。在vite脚手架中,这两种方式是可以混用的。所以按自己合适的模式使用就行了。

 

放心去享受vite带来的快速体验吧!

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1182

本次YT项目的一些收获

今年4月1号开始在YT公司参与一个商业管理系统的开发,担任前端开发,跟十几个同事一起工作了二个月时间。

到今天项目已经基本告一段落。写写心得。

一是业务理解能力和抗压能力比较重要。项目刚开始时,碰到比较复杂的逻辑,我心理上有犹豫及抗拒,总觉得理解起来很吃力。尤其是在工期压力下,有时会感到头脑一片空白。
比如第一期开发阶段,需要构造一个自定义的日历。我跟后端同事小刘商量,由他来写算法,我前端只负责渲染。我坦承自己并不擅长日期算法。小刘却认为这个日期运算应该由前端的我来负责,我们两个互不相让,产生了一点分歧。后来组长曾工主动承揽了此算法,他花了较少的时间完成了,解决了这个小矛盾。
后来随着项目的进展,我才逐渐发现项目中有大量的日期运算。我查查文档、问问同事,不知不觉也熟练了这项技能。到二个月后的今天,项目没那么紧张了,我又系统地读了一下moment.js的文档,发现自己居然熟练了大多数常用方法,于是试着重新写一下那个日历,结果只用了大约1小时,就完成了。---这真是一个神奇的变化,也是我此次项目的第一个收获,就是提升了自己面对复杂情况的心理阀值。
 
二、项目进度跟踪。 开发团队有比较成熟的进度管理,每天做了几个页面,调试成功几个接口,都要登记在文档中,早会时组长点评。这样挺好,每个人都会按照工期推进,减少项目风险。我跟其它前端同事的分工也逐渐默契,互相取长补短。
 
三、松散的分工模式。拿前端来说,几个前端同事其实是各写各的,没有公用的规范,也没有共同的JS工具和CSS片段。你愿意怎么写就怎么写,愿意放哪个目录就放哪个目录,只要最终页面逻辑能跑通。--我开始面对这个事实有点吃惊,但后来发现也没啥大问题。这样减少了团队磨合成本,VUE本身的模块化方式,也避免了变量冲突和样式冲突。这样做的缺点,就是每个人的“埋头工作”有时候是重复劳动,写了一大块儿,发现别人早就写过相同的代码了。
另外,有些同事的前端代码效能比较差,对于我这样的"老师傅"来说,总觉得这样做缺乏“工匠精神”,但是事实上并不影响最终使用。将来万一出了问题,会有人去改这些“差代码”,但至少不是我。
当然,这里面少不了梁工这位熟悉全局的神人,他凭一己之力,写了很多公共代码块,经常第二天上班被他告知,几个页面被加上了某个代码块。这家伙简单高效地把帮我们把代码升级了。
 
确实,有些业务逻辑,讲一遍太麻烦,还不如直接帮着写了来得爽快。这种搞法,也适合于我们这种快组快闪的团队。
 
四、隐患。项目交工后,还是要提炼经验,并把一些公共建筑搭建好。比如我们这个项目,我觉得可以固定下一些公共配置及工具,把环境变量的最佳实践方法整理好,写成文档,等等。
当然,我参与的很多外包项目,本来就是雇佣军,打一枪换个地方,成员不固定。既然成员不固定,沉淀经验也就无从谈起。最劳神的,还是公司的留守老员工,象老母亲一样把旧项目缝缝补补,案牍劳形。
 
我自己这次收获颇丰:熟练了GIT操作,深入了VANT组件库,加强了moment运算。最大的收获,是了解了5人以上协作开发的一些普遍做法。
 
当然,团队中坚的年轮人,为了项目做出艰苦赴出:连贯一二个月加班,有人身体出现不适,也还在坚持工作。深夜时他们还在钉钉上提BUG、凌晨时全组人测试跨天逻辑、每天中午所有人都趴在桌上午睡。每当看到这些,我都觉得IT人的谋生不易。

对我这样一个老同志来说,能保证每天按时下班,每天搞搞锻炼,每天中午能在自己的折叠床上小睡一个午觉,真是千金不易的人生甘甜。
分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1299

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

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

演示在此: http://258754.cn/2020/ehs/canvas_and_svg.html

技术要点:

- 异形边框,自适应尺寸。已经做成了VUE标准组件。边框的宽、高可以使用px,也可以使用rem。

- 边框SVG+MASK+路径动画,底部CANVAS动画。

- flexible.js,每个块的宽、高,会根据整个页面的宽度自适应变化 。

查看更多...

分类:我们的作品 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2042