前端页面
ringlot
一个专注前端的女程序员
展开
-
html网页元素灰白效果、禁用拖拽、禁用选择页面内容
元素灰白效果,禁用选择内容,文本内容不可复制。禁用拖拽,禁止页面元素拖拽。原创 2023-04-23 16:23:41 · 350 阅读 · 0 评论 -
h5 视频全屏-横屏实现,遇到问题以及解决方案
最近需要实现h5 视频全屏也就是横屏,横屏后需要将相关视频展现在侧边栏。考虑到h5是不能让手机强制横屏的,只能考虑用css 样式上横屏显示video原创 2022-10-14 17:27:52 · 6457 阅读 · 1 评论 -
video 播放器自动播放问题, video视频截图
最近在写9宫格视频播放的功能,需要自动播放,但是发现一个问题,有些浏览器是禁止自动播放带音频的视频的,即使有的可以自动播放,但是页面刷新后,视频不会自动播放。后面查找资料,因为是禁止有音频的视频播放,所以把视频进行静音就可以了。video 有个属性 muted 表示是否静音播放,设置muted=muted 就可以自动播放了,不管在什么浏览器或者刷新都会自动播放<video width="100%" height="100%" :src="video.v原创 2021-10-13 17:54:46 · 2835 阅读 · 0 评论 -
window.open,打开窗口与打开新标签页,刷新父窗口数据
window.open(url, [name], [configuration])url, 为要新打开页面的urlname,为新打开窗口的名字,可以通过此名字获取该窗口对象configuration,为新打开窗口的一些配置项,比如是否有菜单栏、滚动条、长高等等信息1、name 为打开窗口的名字,可以自定义,如果name名称相同,多次打开只会打开一个窗口; 也可以为以下值,若为以下值就是打开多个窗口不管页面是否相同name 描述 _blank 默认的,在新窗口打...原创 2021-09-10 14:40:34 · 5313 阅读 · 0 评论 -
移动端适配,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 · 1086 阅读 · 0 评论 -
最近用到的相关插件
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 · 784 阅读 · 0 评论 -
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 · 2078 阅读 · 0 评论 -
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 · 870 阅读 · 0 评论 -
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 · 1398 阅读 · 0 评论 -
手机端课程表的实现——仿超级课程表
在开发项目时,有一个页面是我的课程表,想到超级课程表app,觉的它的那个我的课程表页面非常好,简单直观,把纸质的课程表在手机端展现出来了。 后来自己研究了一下,照着它的样式也写了一个,并且也能添加课程。 其实它的原理很简单,就是一张表格,我们需要把这张表格的样式写好,后面就是数据想对应了。/*课程表*/原创 2017-08-26 17:39:13 · 11752 阅读 · 6 评论