前端
文章平均质量分 59
Study_Live_Sun
这个作者很懒,什么都没留下…
展开
-
使用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 · 1074 阅读 · 0 评论 -
比较友好的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 · 317 阅读 · 0 评论 -
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 · 740 阅读 · 0 评论 -
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 · 634 阅读 · 0 评论 -
vue项目监听滚动事件,实现动态锚点
前几天做项目的时候,需要实现一个动态锚点的效果如果是传统项目,这个效果就非常简单。但是放到 Vue 中,就有两大难题:1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动?2. 如何监听页面滚动事件?在浏览了大量文章、进行多次尝试之后,终于解决了这些问题期间主要涉及到了setTimeout 的递归用法,和 Vue 生命周期中的mounted一、锚点实现在实现平滑滚动之前,得先确保基本的锚点功能如果没有其他要求,直接用 <a h...转载 2021-03-08 20:01:48 · 1380 阅读 · 0 评论 -
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 · 463 阅读 · 0 评论 -
常用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 · 278 阅读 · 0 评论 -
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 · 190 阅读 · 0 评论 -
各种数组方法集锦
数组方法--map的实现map参考地址https://www.cnblogs.com/yizhilin/p/12918559.htmlmap()经常用来遍历数据。map()的作用就是“映射”,也就是原数组被“映射”成对应新数组。1. 方法概述map() 方法返回一个新数组,这个新数组:由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。 map() 不会对空数组进行检测。 map() 不会改变原始数组。var arr = ["a","b","c","d...原创 2020-07-28 17:21:00 · 242 阅读 · 0 评论 -
vue学习基础(7)路由
一、来源main.js通过router实例化时传递的router对象。其中router对象来源于import引入router.jsrouter.js1、首先引入vue-router2、导出router的实例化对象三部分:mode为使用什么方式切换路由mode:‘history’//html5的history api或 mode:'hash'//以哈希...原创 2020-02-06 22:05:28 · 996 阅读 · 0 评论 -
vue学习基础(6)生命周期钩子函数、slot插槽的使用、动态组件和缓存
一、生命周期如下图,所有红色的函数为钩子函数二、slot插槽的使用基本用法如下:父组件在子组件中插入内容子组件,通过<slot>标签显示复杂使用在App.vue中使用slot进行占位、子组件中使用name来进行区分三、动态组件和缓存,component,keep-alive子组件子组件 FormHelpe...原创 2020-02-06 20:14:59 · 506 阅读 · 0 评论 -
vue学习基础(5)组件属性传值/传值和传引用、注册事件
一、组件属性传值从父组件把值传递给子组件1、父组件绑定内容。传递父组件data中的参数值2、子组件获得属性值子组件接收值的其他写法二、传值和传引用属性传值,值有两种情况:1、传值 2、传引用(对象、数组)Users.vue里面操作对象的删除,template里面增加一个删除按钮,调用删除方法。App.vue里面使用两次该组件效果图如下,点...原创 2020-02-05 22:12:31 · 443 阅读 · 0 评论 -
vue学习基础(2)脚手架安装、项目创建、介绍目录
1、VueCli3.x小白入门-安装脚手架工作中很少使用cdn的形式开发,一般都使用脚手架开发(1)安装node.js参考网址https://nodejs.org/zh-cn/,下载当前发布版进行安装安装完成后执行node -vnpm -vnpmjs.com有各式各样的插件脚手架的好处:1、脚手架可以大大的提高开发效率;2、可使用最主流的ecmascri...原创 2020-02-05 15:31:35 · 369 阅读 · 0 评论 -
vue学习基础(1)
1、使用vscode编辑器需要安装live server(热更新) 和 vetur(vue关键字高亮)插件,配置setting如下,对所写的代码进行格式化{ "editor.formatOnType":true, "editor.formatOnSave":true}2、el和data的使用3、methods方法,使用es6的表达形式methods:{ ...原创 2020-02-04 16:44:26 · 467 阅读 · 0 评论 -
将base64的图片转成文件上传至服务器
1、首先将base64字符串转成图片,filename为文件名称,用户自定义function dataURLtoFile(dataurl, filename) { var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]; var bstr = atob(arr[1]); var n...原创 2019-12-17 11:06:28 · 1713 阅读 · 0 评论 -
动画封装animate和scroll,广告跟随完整代码案例
function animate(ele,target) { //要用定时器,先清定时器 //一个萝卜一个坑儿,一个元素对应一个定时器 clearInterval(ele.timer); //定义定时器 ele.timer = setInterval(function () {...原创 2019-12-12 11:04:20 · 293 阅读 · 0 评论 -
flex
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。1. 父元素属性1. display:flex;一个容器设置了display:flex;属性就定义了一个...转载 2019-12-06 10:38:37 · 184 阅读 · 0 评论 -
textarea根据内容自动增加高度
2017-07-20 22:55:08xiaoqiu_net阅读数 11479收藏更多分类专栏:Web版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。本文链接:https://blog.csdn.net/q646926099/article/details/75579079<textarea v-mo...转载 2019-12-06 09:59:54 · 411 阅读 · 0 评论 -
jq计算两个日期之间的时间差,多少年多少月
// JS日期系列:根据出传入的日期 ,得到当前日期与传入日期的差,返回的格式是“y年m月” // 传入参数strKeyDate要求格式为“yyyy年mm月dd日”这样的日期字符串,如果不是自行先转换,或者调整下方“传入的日期,将其产分为年、月、日”的拆分方法 // 后续再增加相关的如日期判断等JS关于日期处理的相关方法 function jsGetYears(strKey...原创 2019-09-18 11:08:43 · 4953 阅读 · 0 评论 -
解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况;但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overflow:hidden;属性也不行;最后找的的解决方案如下:table{ table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。...转载 2019-05-30 15:57:31 · 1477 阅读 · 0 评论 -
CSS3实现三种切角效果
CSS3实现三种切角效果2018年09月10日 19:10:44小萌丹阅读数:1757效果一:代码:<div class="cornerCut">corner cutcorner cutcorner cutcorner cut</div>CSS:.cornerCut{width:200px;margin: 10px 20px;hei...转载 2019-05-20 14:40:07 · 713 阅读 · 0 评论 -
checkbox回显
function SetCheck(tempArray) { /*$.each($('input:checkbox'), function () { for (var j = 0; j < tempArray.length; j++) { var nowval = $(this).val(); if ($(this).val(...原创 2019-04-25 12:46:11 · 1626 阅读 · 0 评论 -
iframe高度自适应
原文链接:http://caibaojian.com/iframe-adjust-content-height.htmliframe内容未知,高度可预测这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用JavaScript改变高度。常用的兼容代码有:·//code from http://caibaojian.com/iframe-adjust-cont...原创 2018-12-13 15:09:46 · 121 阅读 · 0 评论