- 博客(97)
- 收藏
- 关注
RSS订阅转载 uniapp的$emit,$on,$once,$off的简单使用
uni.$emit('selectAddress',{ //选择地址完成后，触发全局的地址改变事件，并传递参数给监听器即uni.$on。1、$off提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器。uni.$on('selectAddress',(info)=>{ //开启监听全局的地址改变事件。uni.$off('selectAddress') //在此生命周期里销毁地址改变事件的监听。场景：用户点外卖要改地址，订单页-->地址选择页-->更改地址-->返回订单页-->地址改变了。
2024-03-12 15:18:42
799
原创 苹果电脑启动webstorm报错
rm -rf /Users/{你的电脑登陆用户名}/Library/LaunchAgents/jetbrains.vmoptions.plist。
2023-02-28 16:20:44
1268
原创 uni-app学习（1）
一、前言uni-app介绍uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到IOS、Android、H5、以及各种小程序（微信、支付宝、百度、头条、QQ、钉钉）等多个平台二、环境搭建（1）安装HbuilderX (2) 安装微信开发者工具三、为什么使用uniapp1、同一套代码编译多端2、接近原生、效果更好3、开发效率高4、开发（人力、维护、时间）成本低5、学习成本低6、支持npm与自定义组件7、社区活跃、版本迭代快.
2022-06-23 11:16:15
747
原创 ant design vue的使用过程，遇到问题记录
1、异步TreeSelect 树型选择控件，回显问题解决思路，记录各个节点的分支的所有ID，从第一层开始遍历，判断是否包含选中的ID，不断补充children代码如下<a-form-model-item label="中图法分类号"> <a-tree-select ref="tree_select" :replaceFields="replaceFields" v-model="fo
2021-09-30 17:36:46
803
原创 koa学习
一、搭建本地服务器（1）创建项目（2）执行npm init创建packag.json文件（3）安装依赖 cnpm install koa koa-router --save（4）安装自动监测代码变更的工具cnpm install -g nodemon（5）代码示例package.json{ "name": "koa01", "version": "1.0.0", "description": "", "main": "app.js", "scripts":.
2021-09-13 22:46:46
228
原创 nginx配置使用
记录工作中遇到的需要配置nginx的地方。1、nginx配置访问密码，让用户输入用户名密码才能访问(basicAuth)如果我们在 nginx 下搭建了一些站点，但是由于站点内容或者流量的关系，我们并不想让所有人都能正常访问，那么我们可以设置访问认证。只有让用户输入正确的用户名和密码才能正常访问。效果如下：在 nginx 下，提供了 ngx_http_auth_basic_module 模块实现让用户只有输入正确的用户名密码才允许访问web内容。默认情况下，nginx 已经安装了该模块。所.
2021-09-06 16:21:02
132
原创 vue项目使用electron开发过程记录
1、首先全局安装安装包，也可以使用过程中单独安装npm install -g electronnpm install -g electron-packager2、vue项目配置vue.config.js,需要使用相对路径3、vue项目确认路由文件，删除mode4、在vue项目下新建electron目录，目录结构如下5、electron目录结构如下6、electron下的文件内容main.js文件内容如下const { app, BrowserWin...
2021-09-03 14:25:07
1099
原创 vue项目使用@ffmpeg/ffmpeg在客户端上传本地视频并处理的开发记录
1、安装包2、页面上传方法功能vue页面 <input v-show="false" id="pop_video" type="file" accept="video/mp4" capture="camcorder" @change="getVideo" name="fileTrans" ref="file" value="">对应方法 getVideo (event) { if (this.player) { this.pl..
2021-07-27 13:41:57
11411
25
原创 ffmpeg直播加水印、拉流等任务
直播流加水印ffmpeg -i https://outbound-production.explore.org/stream-production-319/.m3u8 -vf "movie=black_water.png[watermark]; [in][watermark] overlay=main_w-overlay_w-20:main_h-overlay_h-10 [out]" -c:v libx264 -c:a copy -f flv "rtmp://livepush.gonature..
2021-06-30 21:35:13
1284
原创 wangeditor富文本编辑器集成vod超级播放器
<template lang="html"> <div class="editor" ><!-- <SelectFile></SelectFile>--> <el-dialog append-to-body title="选择要插入的文件" :visible.sync="dialogVisible" width="60%"> <SelectFile .
2021-06-29 13:21:08
644
转载 vue中使用canvas添加各类水印
1、写watermarker.js文件/** 水印添加方法 */const setWatermark = (str1, str2) => { const id = '1.23452384164.123412415' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)) } const can = document.cr
2021-05-24 21:55:14
1764
原创 vue项目播放音频实例
一次只播放一个音频，可以切换，播放停止自动恢复<template> <div> <div v-for="item in list" :key="item.name"> <div>{{item.name}}</div> <div @click="play(item)">play-{{item.status}}</div> <div @click="pause(item
2021-05-10 22:18:41
647
原创 腾讯点播云，上传视频实例， 使用点播云播放器实例
上传方法如下在elementui自定义上传方法中必须写成promise的形式，其他的可以参考官网使用 async up ({ commit, state }, params) { let originDomain = null return new Promise((resolve, reject) => { const tcVod = new TcVod({ getSignature: getSignature // 前文中所
2021-04-26 17:04:11
709
原创 使用vue-video-player播放视频
1、npm安装vue-video-playervideojs-contrib-hls2、在main.js中引入import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import VideoPlayer from 'vue-video-player'import 'vue-video-player/src/custom-the
2021-03-21 15:31:00
1070
原创 使用RGBaster获得图片的主题色，从而判断文字颜色深浅
1.首先引入RGBaster.js;(function(window, undefined) { "use strict"; // Helper functions. var getContext = function(width, height) { var canvas = document.createElement("canvas"); canvas.setAttribute('width', width); canvas.setAttribute('height',
2021-03-19 14:03:28
1107
原创 比较友好的vue模拟双向锚点的功能
1、methods里面加上 jump (index, type) { this.nowType = type document.querySelector('#' + type).scrollIntoView({ behavior: 'smooth' }) }, onScroll () { const scrollTop = document.documentElement.scrollTop || document.b
2021-03-19 13:23:56
313
原创 vue写模态框，同时禁止页面滚动
父组件<template> <div class="text-center"> <div v-for=" i in 100" :key="i">{{i}}</div> <Modal v-show="showModal" v-on:closeme="closeme"></Modal> </div></template><script>import Modal fro
2021-03-17 13:55:28
723
转载 vue项目，页面边滚动边播放动画 wow.js + Animate.css
在页面添加初始动画特效在页面添加初始动画特效的时候无意接触到wow.js 这个动画库配合Animate.css可以按照模板快速创建动画效果，虽然动画效果就像ppt里面的动画效果一样。。。环境设置添加动画效果，首先要设置环境，第一步就是先要引入相应的js 和css需要引入的js：wow.js本案例中建议在头部引入这个js不然可能会出现页面先加载然后动画再出现的情况，这样显得动画是多余的哈哈哈，在head部分中加入当然也可以在头部引入animate.css 在最后引入wow.js<h
2021-03-08 20:07:08
632
转载 vue项目监听滚动事件，实现动态锚点
前几天做项目的时候，需要实现一个动态锚点的效果如果是传统项目，这个效果就非常简单。但是放到 Vue 中，就有两大难题：1. 在没有 jQuery 的 animate() 方法的情况下，如何实现平滑滚动？2. 如何监听页面滚动事件？在浏览了大量文章、进行多次尝试之后，终于解决了这些问题期间主要涉及到了setTimeout 的递归用法，和 Vue 生命周期中的mounted一、锚点实现在实现平滑滚动之前，得先确保基本的锚点功能如果没有其他要求，直接用 <a h...
2021-03-08 20:01:48
1377
原创 git学习
1、 git status 检查git状态2、git checkout -b login 创建一个login分支，并切换到login3、git branch 查看所有分支，以及当前所在的分支4、将本地的仓库提交给码云 依次执行 git status git add . 提交到暂存区 git commit -m '完成了***操作' ...
2021-03-03 17:40:33
229
原创 vue项目优化策略
一、vue项目优化策略1、生成打包报告2、第三方库启动CDN3、element-ui 组件按需加载4、路由懒加载5、首页内容定制优化1：通过nprogress添加进度条效果安装插件：npm install --save nprogress使用方式： NProgress.start() NProgress.done()在main.js中导入NProgressimport NProgress from 'nprogress'import...
2021-02-17 21:28:27
458
原创 常用css样式日常集锦
1、文字长度超出，追加省略号显示一行white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;显示两行，多了追加省略号 text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:
2021-01-30 10:35:12
275
原创 css3动画学习
1、浏览器私有化前缀2、圆角3、阴影（文字阴影）文字阴影，可以给文字添加多个阴影（盒子阴影）4、渐变（线性渐变）（径向渐变）5、transform2D转换translate():水平垂直方向移动函数，支持一个参数，代表水平移动6、transform3D需要结合透视，呈现出伪3D的效果7、过度属性8、animation动画...
2021-01-27 20:34:38
153
原创 小程序学习记录1
观看学习视频地址https://www.bilibili.com/video/BV1WQ4y1T7D8?p=6学习参考文档地址https://developers.weixin.qq.com/miniprogram/dev/component/image.html学习顺序及内容如下1.view 块级元素，相当于div2.text 显示文本3.image 显示图片4.navigator 导航 块元素小程序之间也是可以用来跳转的，只能跳转小程序经常使用的是open-typ
2021-01-17 17:11:17
2203
原创 小程序学习（组件）
1、组件（1）创建如下组件目录，对组件页面进行页面编辑（2） 在页面调用位置的json文件中进行配置并且调用（3）在wxml页面进行调用2、自定义组件的属性传值
2020-12-18 20:32:54
119
原创 vuecli3,刷新保持state,记录用户登录状态，路由拦截
1、刷新保持state在 app.vue中的created函数中写如下代码：localstorage和sessionStorage都可以//在页面加载时读取sessionStorage里的状态信息if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem("store"))))}.
2020-11-20 11:04:28
680
原创 小程序学习基础（20201113）框架
1、小程序配置（全局配置）快捷键的使用Alt + ↑/↓把当前行上线移动全局配置学习windowtabBar2、单页面设置3、WXML数据绑定
2020-11-14 08:36:07
143
原创 vue中深拷贝浅拷贝实际测试
单层的使用{...}和Object.assign复杂的对象使用JSON.parse(JSON.stringify(........))export default { name: 'HelloWorld', data () { return { a: '', b: '', c: '' } }, methods: { test1 () { const a = { aa: '11' } this.
2020-11-12 16:09:59
186
原创 小程序学习基础（2020/11/11）基本组件
1、view,块级元素视图容器属性:hover-class hover-start-time hover-stay-time// 盒子的嵌套,使用hover-stop-propagation放在子元素里面组织冒泡事件<view hover-class="out" > <view hover-class='inner' hover-stop-propagation></view</view><view class=...
2020-11-11 10:32:07
202
原创 vue变更数据，监听更新成功，单个对象，数组
1、使用this.$set(obj, key, value)/vue.set(obj, key, value)<script>export default { data() { return { student: { name: '张三', } } }, methods: { setMessage() { this.$set(this.student, 'age', 15) console.log(this.s
2020-11-04 16:42:16
454
原创 ELEMENT-UI 更新TABLEDATA 中 ROW的某一个属性时，没有更新视图的问题
在一个报警音管理的页面中，每次点击试听的时候，需要把‘试听’ 更新为 ‘停止’，起初我们给row.play=0时，显示为 试听，row.play=1时显示为停止，但是在代码中每次为row.play赋值时，虽然代码运行，但是页面视图并没有更新。经过多种资料的参考，发现table表格数据，每次只能监听整个row的变化，row中某个属性变化时，是无法追中的。所以在改变row.play时，我们先设置row.play=1， 再this.$set(tableData,index,row) 来更新ta
2020-10-27 14:08:20
697
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人