- 博客(19)
- 收藏
- 关注
RSS订阅原创 前端卡片列表布局 自适应铺满
试过很多种方法，有一种是 外层用flex布局，然后justant-items:space-bettwen ，list 元素多加几个空的占位使其 2端对其时不会间隔很大 保持不同行之前的对齐，虽然可以，但是不同屏大小元素之间的间隔是不固定的 有时会很大 并不是很理想。方法就是用百分比来控制宽度，用@media 根据不同的屏 设置卡片的宽的百分比，这样能保证一行是铺满的 并达到自适应 上下行排列对齐。项目中遇到卡片式列表，根据UI图的宽高实现 在不同屏宽的电脑上 就会出现右边有很多空白的现象，感觉不是很好。
2024-08-21 15:17:19
213
原创 iframe 内嵌页面全屏、下载、打印功能配置
项目中遇到一种场景，有一个内嵌的iframe 页面，页面里有全屏功能，还有用a.click的下载、window.print() 打印功能。但是在iframe里没有反应 不生效，后面翻阅资料终于解决了。3、打印功能，iframe 里sandbox 加 allow-modals 即可调取print 打印。2、下载功能，iframe 里 sandbox 加 allow-downloads 允许下载。在iframe里需要加 allowfullscreen="true"，即可生效。
2024-07-03 17:46:39
466
原创 video 标签参数，禁用画中画、投屏
（由于浏览器机制，对首次用户未交互的页面，拦截了视频的有声自动播放，autoplay：true 并不会自动播放）: 布尔属性，用于在使用有线（HDMI、DVI 等）和无线技术（Miracast、Chromecast、DLNA、AirPlay 等）连接设备时，禁用远程播放功能。8、playsinline: 布尔属性 指明视频将内联（inline）播放，即在元素的播放区域内。2、controls : 加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。
2024-04-08 15:59:33
2212
原创 video 播放字幕，解决hls导致的字幕播放问题
hls 是1.4.0版本，阻止了原生的video 字幕播放 导致播不出来，看了下hls的代码，他内部也有subtitle字幕的播放，由于video的textTrack 的mode 没有设置当前播放的 导致被hls内部的subtitle给覆盖了，所以只要设置当前的。我这边用的是metadata，原因是需要统一字幕的样式，位置，大小等，用到的方法是获取textTrack，trak的oncuechange 方法。video 播放字幕的方法是 播放字幕webvtt文件，video 原生自带播放功能, 只需要加。
2023-12-18 14:41:54
431
2
原创 实现视频小窗口播放-画中画
实现逻辑：同一个视频，运用监听方法，当原视频未出现在窗口内时，视频容器增加一个css类，并poisiton: fixed 定位，调整容器的大小以及样式，待原视频出现在窗口内，就移除相关css类即可。IntersectionObserver.unobserve(document.querySelector(".videoplayer")) 取消监听。IntersectionObserver.observe(document.querySelector(".videoplayer")) 监听方法。
2023-11-08 15:39:10
292
1
原创 h5 视频全屏-横屏实现，遇到问题以及解决方案
最近需要实现h5 视频全屏也就是横屏，横屏后需要将相关视频展现在侧边栏。考虑到h5是不能让手机强制横屏的，只能考虑用css 样式上横屏显示video
2022-10-14 17:27:52
6626
1
原创 element-ui iconfont乱码问题处理
一、问题 使用element-UI的项目，打包部署以后，偶尔会出现iconfont显示乱码，但是刷新后又会好。研究后，查看打包后的css,图标字体的content经过scss编译以后变成了这样 不过正常情况下图标还是会显示的，但是偶尔进入页面后，所有的iconfont图标会变成乱码。二、原因 1、主要原因是sass 编译问题，针对iconfont 编译后会乱码， 2、项目中引用e...
2022-01-19 11:53:56
6880
原创 video 播放器自动播放问题, video视频截图
最近在写9宫格视频播放的功能，需要自动播放，但是发现一个问题，有些浏览器是禁止自动播放带音频的视频的，即使有的可以自动播放，但是页面刷新后，视频不会自动播放。后面查找资料，因为是禁止有音频的视频播放，所以把视频进行静音就可以了。video 有个属性 muted 表示是否静音播放，设置muted=muted 就可以自动播放了，不管在什么浏览器或者刷新都会自动播放<video width="100%" height="100%" :src="video.v
2021-10-13 17:54:46
2883
原创 window.open,打开窗口与打开新标签页,刷新父窗口数据
window.open(url, [name], [configuration])url， 为要新打开页面的urlname，为新打开窗口的名字，可以通过此名字获取该窗口对象configuration，为新打开窗口的一些配置项，比如是否有菜单栏、滚动条、长高等等信息1、name 为打开窗口的名字，可以自定义，如果name名称相同，多次打开只会打开一个窗口； 也可以为以下值，若为以下值就是打开多个窗口不管页面是否相同name 描述 _blank 默认的，在新窗口打...
2021-09-10 14:40:34
5364
原创 移动端适配，iphonex兼容性处理
记录下开发项目中遇到的问题1、移动端用的插件是 vant，解决vant适配，采用了rem布局，用的是postcss-pxtorem 插件自动转换为rem。安装postcss-pxtorem 版本为5.1.1，版本要大于5.0.0，才会生效，配置就跟vant官网一样// postcss.config.jsmodule.exports = { plugins: { // postcss-pxtorem 插件的版本需要 >= 5.0.0 'postcss-pxtorem'
2021-07-26 10:26:42
1113
原创 最近用到的相关插件
1、富文本编辑器tinymcehttp://tinymce.ax-z.cn/tinymce-vue vue版2、裁剪组件 vue-cropperjshttps://github.com/Agontuk/vue-cropperjs3、上传插件 支持分片，断点续传vue-simple-uploader 是simple-uploader.js的vue 封装版vue-simple-uploaderhttps://www.npmjs.com/packa......
2021-07-23 18:29:20
795
原创 file、Blob、dataUrl 相互转化
一、file 、blob 转化成dataurlfunction fileToDataURL(file) { let reader = new FileReader() reader.readAsDataURL(file) // reader 读取文件成功的回调 reader.onload = function(e) { return reader.result }}比如，上传图片功能，用input选取图片后可用该方法获取文件的base64url
2021-07-23 09:51:01
2118
原创 vue2.0 根据不同环境配置编译不同包
1.项目安装cross-env。cross-env是node的一个设置和使用环境变量的脚本：npm install cross-env -D2.在根目录的package.json文件中，把scripts对象的build字段的值改为以下代码。"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev",
2021-05-26 18:23:34
716
原创 找出数组中重复元素，并按重复的次数由少到多排序 es6
最近在面试的时候出现的一个考题，当时做出来了，回来验证后发现有点小问题，现在把这个记录下来供自己以后参考。自己写的，用的es6的写法。 repeat(arr) { let e = [] arr.forEach(item => { let num = arr.filter(n => n === item).length if (
2021-05-18 17:34:03
1132
原创 vue 指令实现 窗口的拖动
直接上代码，directives: { /*自定义拖拽*/ drag: { inserted: function (el, binding, vnode) { var odiv = el.parentNode // 获取元素的父级 也就是这个移动的窗口 el.onmousedown = function (eve) { eve = eve || window.event va
2021-03-26 16:09:49
882
原创 uni-app app端用highcharts绘制图表，并生成海报保存到手机相册
uni-app 打包app后 highcharts图表绘制不成功，不支持该方法，所以就考虑在app中嵌入webview h5页面，实现图表的绘制。首先引用安装highcharts,封装成一个组件npm install highcharts --save<template> <view class="highcharts-container" style="min-width: 250px;" :style="{height:height}"></view>
2021-03-16 16:37:27
1420
原创 手机端课程表的实现——仿超级课程表
在开发项目时，有一个页面是我的课程表，想到超级课程表app，觉的它的那个我的课程表页面非常好，简单直观，把纸质的课程表在手机端展现出来了。 后来自己研究了一下，照着它的样式也写了一个，并且也能添加课程。 其实它的原理很简单，就是一张表格，我们需要把这张表格的样式写好，后面就是数据想对应了。/*课程表*/
2017-08-26 17:39:13
11784
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人