预览模式: 普通 | 列表

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

作者:admin  日期:2022-04-20

 父组件调用：（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双向移动的例子

作者:admin  日期:2022-03-25

 点击查看DEMO

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

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

作者:admin  日期:2022-03-25

 点击查看DEMO

 

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

一个帧动画--仿做

作者:admin  日期:2022-03-25

 

点击此处查看DEMO

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

json-server+mock.js构建vue/小程序均可用的mock体系

作者:admin  日期:2022-03-03

前端开发经常在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

lodash的get函数来判断对象深处的空值，太有用了！

作者:admin  日期:2022-01-21
例题，比如，有这样一个对象：
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