- 博客(68)
- 收藏
- 关注
RSS订阅原创 Vue组件通信大全
1.$emit 和 props2.$emit 和 $on（事件总线eventBus）3.$parent 和 $children4.$root 和 $refs5.inject 和 provide6.v-model7.Vuex
2020-04-21 11:36:24
158
原创 vue的事件总线--eventBus用法
容器新建store/eventBus.jsimport Vue from 'vue'const eventBus = new Vue()export default eventBus引入import eventBus from "../store/eventBus";监听(接收)eventBus.$on("search", val => { });触发(发送)eve...
2020-04-21 11:10:20
184
原创 使用screenfull.js在vue中实现浏览器全屏显示
1.安装npm install --save screenfull2.引入import screenfull from 'screenfull'3.调用screenfull.toggle()示例<template> <div class="home"> <button @click="open">全屏</button>...
2020-04-06 10:22:23
578
原创 微信小程序排坑总结(更新中)
1.样式动态绑定class，不能用对象的写法，得用三目运算wrong：<view class="{current: tabCurrentIndex === index}"></view>right：<view class="{{tabCurrentIndex === index?'current':''}}"></view>2.事件传参要...
2020-03-12 15:44:03
392
原创 花里胡哨css玩法
1.css禁用鼠标事件.disabled { pointer-events: none; cursor: default; opacity: 0.6;}2.实现条纹网格的方式.row:nth-child(odd){ background: #eee;}.row:nth-child(even){ background: #fff;}3.c...
2019-11-11 17:40:43
171
原创 element-ui表头错位
//App.vue中<style> body .el-table th.gutter{ display: table-cell!important; } body .el-table colgroup.gutter{ display: table-cell!important; }</style...
2019-10-30 16:51:52
98
原创 小程序map组件不显示坐标解决
前提场景：在使用map组件时，经纬度属性(latitude，longitude)使用数据绑定，在onLoad里获取用户的地理位置，然后再setData，这时往往map组件拿不到获取的值。原因：map组件的组件渲染是优先于接口setData的异步赋值的，导致map的渲染过程中实际上longitude和latitude值都为空，且map只渲染一次。解决方式：使用wx:if<map l...
2019-10-18 09:51:19
1761
原创 改变对象的属性值-微信小程序
1.改变直属data的对象属性：data:{ person:{ name:'小白' }}传统方式：updateName(){ this.person.name = '小黑' this.setData({ person: this.person })}小技巧：updateName(){ this.setData({ ['person.name']: '小黑...
2019-10-18 09:36:57
181
原创 watch的初始立即执行
摘自掘金_Dreams的《6个有用的Vue开发技巧》传送门当 watch 一个变量的时候，初始化时并不会执行，如下面的例子，你需要在created的时候手动调用一次。created() { this.fetchUserList();},watch: { searchText: 'fetchUserList',}上面这样的做法可以使用，但很麻烦，我们可以添加immediat...
2019-10-11 17:19:53
5393
原创 Vue监听组件的生命周期
通过监听组件的生命周期从而进行某些操作常规做法 // Parent.vue<Child @mounted="doSomething"/>// Child.vuemounted() { this.$emit("mounted");}简易做法<Child @hook:mounted="doSomething"/><Child @hook:up...
2019-10-11 17:14:47
292
1
原创 UI调试黑科技
打开谷歌浏览器书签栏右键添加书签名称随意，网址粘贴以下代码在需要调试的网站点击刚刚新建的书签为元素自动加上outline属性，便于调试，观察位置尺寸等...
2019-10-11 15:50:10
126
原创 常见的正则表达式
引用自any-rule vscode插件，作者是铁皮饭盒，感谢分享。https://github.com/any86/any-rule迅雷链接/^thunder:\/\/[a-zA-Z0-9]+=$/ed2k链接(宽松匹配)/^ed2k:\/\/|file|.+|\/$/磁力链接(宽松匹配)/^magnet:\?xt=urn:btih:[0-9a-fA-F]{40,}.*$/...
2019-10-10 15:56:52
916
原创 实现深拷贝的两种方式
1.JSON的序列化和反序列化可以满足大部分的需求；缺点：不支持函数和 undefinedfunction deepClone() { return JSON.parse(JSON.stringify(obj))}2.递归function deepClone(obj) { function isClass(o) { if (o === null) ret...
2019-10-10 15:10:14
232
1
原创 实现一个new
function _new(fn, ...arg) { const obj = Object.create(fn.prototype); const ret = fn.apply(obj, arg); return ret instanceof Object ? ret : obj;}
2019-09-02 09:17:06
126
原创 Js实现冒泡排序、选择排序和插入排序
1.冒泡排序描述： 两两比大小，换位置时间复杂度：O(n²)bubbleSort(arr) { for (var i = 0; i < arr.length - 1; i++) { //每一次遍历，最大值都会被放在最后的位置，所以不用再判断最后两位，故：arr.length-1-i for (var j = 0; j < arr.length -...
2019-08-29 14:25:33
232
原创 ES6中的set，weakset，map，weakmap
转载自linkSetES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。// 例一var set = new Set([1, 2, 3, 4, 4]);[...set]// [1, 2, 3, 4]var s = new Set();[2, 3, 5, 4, 5, 2, 2...
2019-08-27 14:59:34
110
原创 uni-app自定义loading组件
参考uni-app插件商城<ThorUI组件库>ThorUI<template> <!-- visible控制toast的显隐，text为提示文本 --> <view class="loading-toast" v-if="visible"> <view class="toast-mask"></view>...
2019-08-22 10:32:55
4586
原创 Js工具方法--生成不同的随机数
function generateRandom(count, max) { var arr = []; for(var i=0;i<count;i++){ do { var flag = true let item = Math.round(Math.random() * max); if (arr.indexOf(item) == -1) { arr.pu...
2019-06-13 09:00:02
829
原创 Js工具方法--秒数变历时
function translateSecondToWhen(second) { var releaseTimeMsg; var releaseHours = parseInt((Date.parse(new Date()) - second) / 1000 / 60 / 60); if (releaseHours === 0) { releaseTimeMsg = '刚刚'; } e...
2019-06-13 08:59:06
165
原创 uni-app或小程序图片视频上传至七牛云
//上传至七牛云 uploadFile(user_id, path, success, fail) { console.log('开始上传') let time = new Date() let name = user_id + String(time.getTime()); //获取token return new Promise((resolve, reject) =&g...
2019-06-13 08:57:33
3662
原创 uni-app事件修饰符失效
要用.native配合使用：<image @click.native.stop="navBack" src=""></image>
2019-06-13 08:53:15
3384
原创 文本溢出省略号
多行：.multi-line{ word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow: hidden; text-overflow:ellipsis;}单行：.one-line{ overflow: hidden; wh...
2019-05-10 16:37:25
108
原创 根据图片形状计算图片尺寸
/*计算图片尺寸*/function caculateImgSize(url) { //限制最大尺寸 let max_width = 690; let max_height = 600; let results; return new Promise((resolve, reject)=>{ uni.getImageInfo({ src: url, success...
2019-05-09 16:49:29
752
原创 uni-app开发环境搭建
安装node.jshttp://cdn.npm.taobao.org/dist/node/v10.15.3/node-v10.15.3-x64.msi安装HBuilderX代码编辑器https://download.dcloud.net.cn/HBuilderX.1.9.3.20190422.zip新建项目1.打开HBuilderX，文件->新建->项目2.选择uni-a...
2019-04-23 10:11:19
2087
原创 前端面试题汇总(vue.js)
原生JS操作DOM节点三列布局HTML5/CSS3新特性webStoragevue父子组件传值，兄弟组件传值vue生命周期，应该在哪个生命周期中请求数据v-text和v-html单页面实现原理前端三大异步ES6vue项目中页面的加载顺序vue路由的两种模式xml和json的区别get请求和post请求的差别...
2018-10-26 13:16:56
142
原创 微信小程序获取元素高度宽度
1.创建节点var query = wx.createSelectorQuery();2.绑定DOMquery.select('#box').boundingClientRect()3.获取元素信息query.exec(function (res) { //console.log(res); console.log(res[0].height);})...
2018-10-11 09:45:11
3984
2
原创 calc()
。。。。。。。。才知道CSS有一个可以计算的函数 calc()calc() 函数用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算；calc()函数支持 “+”, “-”, “*”, “/” 运算；calc()函数使用标准的数学运算优先级规则；#div1 { wi...
2018-09-26 15:34:28
590
原创 小程序各种滚动与滑动效果实现
1.滚动选项卡小程序内提供scroll-view组件，可以实现此效果，将scroll-x设置为true.2.滑动切换页面swiper组件，不同的页面写在不同的swiper-item里。通过左右滑动或者点击上方的选项卡，改变当前的索引值。<swiper indicator-dots="false" current="{{currentIndex}}"> <swipe...
2018-09-25 14:00:19
5350
原创 微信小程序面板移入移出
begin(){ var that=this; if(that.data.animationData==''){ var animation = wx.createAnimation({ duration: 300, timingFunction: 'ease-out', }) this.animation = ...
2018-09-21 15:18:06
1734
原创 Vuex基础
安装npm n install vuex --save新建仓库新建vuex文件夹新建store.js文件写入内容import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({ const state={ count:1 }, ...
2018-09-20 09:32:32
120
原创 Vue常用第三方模块
1.Element-ui安装 npm install element-ui -S全局引入（main.js） import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);按需引入1.首先安装插件babel-plugin-component...
2018-09-19 13:57:28
573
原创 Vue2.0webpakc打包注意
1.静态资源路径config – index.js – build – assetsPublicPath改为：assetsPublicPath: './'2.如果使用了box-orient属性build – webpack.prod.conf.js注释掉下面这段代码 new OptimizeCSSPlugin({ cssProcessorOptions: con...
2018-09-19 11:16:18
226
原创 小程序中使用字体图标
安装npm install vuex -S引入在main.js中：import Vuex from 'vuex'import store from './vuex/store'Vue.use(Vuex)创建仓库在src目录下创建vuex文件目录，并在目录内创建store.js文件。 在store中：import Vue from 'vue'i...
2018-09-17 16:26:18
155
原创 转化时间戳方法
timestampToTime: function (t) { var time = new Date(t); var y = time.getFullYear(); var m = time.getMonth() + 1; var d = time.getDate(); ...
2018-09-09 16:34:24
124
原创 发布时间算法
** * 获取发布时间字符串 */ function getReleaseTimeMsg(time) { var releaseTimeMsg; var releaseHours = parseInt((Date.parse(new Date()) - time) / 1000 / 60 / 60); if (...
2018-09-09 16:34:00
172
原创 vue-quill-editor富文本编辑器
安装：npm install vue-quill-editor --savemain.js：import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubb...
2018-09-05 19:45:53
168
原创 在Vue中实现打字机的效果
前一段时间找工作做网页简历,想实现打字机的效果。按理说像打字机这种动画效果的实现首选是jquery，毕竟jquery还是以操作dom为主，而vue是数据驱动，但是jquery并没有能狗满足我设想的功能的插件，又偷懒不想自己实现双向绑定，只好自己用vue实现。代码写的不是很漂亮，希望大家不喜勿喷，这里只是提供一个思路。最终效果： I‘m ByPunk! I‘m looking for...
2018-09-05 19:17:08
7710
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人