vue
关注
分享
扫一扫
粥粥_
这个作者很懒，什么都没留下…
展开
-
H5解决移动端rem加载瞬间页面错乱的方法（放大或者缩小）
页面在加载未完成前会出现瞬间错乱的现象，虽然时间不算长，但是肉眼可见，必须解决我们知道页面加载顺序通常是”从上往下”加载的，所以在内容区域，也就是body以及body包含的DOM还未被浏览器遍历之前，我们就应该将html的font-size计算好。所以我们应当把计算字体的js放在body之前<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport"原创 2021-06-10 09:48:44 · 918 阅读 · 0 评论 -
websocket心跳监测和重连机制
data(){ return { timeout: 28*1000,//30秒一次心跳 timeoutObj: null,//心跳心跳倒计时 serverTimeoutObj: null,//心跳倒计时 timeoutnum: null,//断开 重连倒计时 surpriseNums: null, surpriseReconnect: false,//是否真正建立连接 }},mounted(){ this.surpriseNum()原创 2021-06-09 17:05:07 · 323 阅读 · 1 评论 -
viewerjs图片查看器使用
安装npm install viewerjs --save在main.js中引入（也可只在使用的组件中引入）import ‘viewerjs/dist/viewer.css’import Viewer from ‘viewerjs’<div class="left" id="mycontent"> <div v-if="textContent" v-html="textContent"></div> <div class=".原创 2021-06-07 14:01:51 · 398 阅读 · 0 评论 -
echart 世界地图、中国地图
世界地图，封装组件第一步，下载echartscnpm install echarts --save-dev第二步，在main.js中全局引入//引入echartsimport echarts from ‘echarts’Vue.prototype.$echarts = echarts<template> <div> <div :class="className" :id="id" :style="{height:height,widt原创 2021-06-04 12:02:40 · 896 阅读 · 0 评论 -
vue 封装axios方法
npm install axios --saveimport axios from 'axios'import { MessageBox, Message } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'// create an axios instanceconst service = axios.create({ baseURL: process.env.VUE_A翻译 2021-06-03 15:37:02 · 232 阅读 · 0 评论 -
使用西瓜视频xgplayer播放MP4、m3u8、flv（直播、点播）；videojs
vue中使用xgplayer安装npm install --save xgplayer 使用<script type="text/ecmascript-6">import Player from "xgplayer";export default { data(){ return{ videoPlayer: null } }, mounted() { this.getVideo() }, methods: { getVideo(){ t原创 2021-05-10 11:39:05 · 25671 阅读 · 7 评论 -
$nextTick使用场景和原理
为什么使用nextTick由于Vue DOM更新是异步执行的，即修改数据时，视图不会立即更新，而是会监听数据变化，并缓存在同一事件循环中，等同一数据循环中的所有数据变化完成之后，再统一进行视图更新。为了确保得到更新后的DOM，所以设置了nextTick()方法。使用场景1.获取数据更新之后的DOM2.created()中进行DOM操作3.获取元素宽度<template> <section> <div ref="hello"> <h原创 2021-04-09 14:01:14 · 2421 阅读 · 0 评论 -
输入手机号格式344展示形式（只允许数字）
我的项目中有多出需要输入手机号，我封装mixins里telphone.js，控制手机号344展示格式，代码如下：export const telphone = { data(){ return { threephone: '', userInfo:{ phone } } }, watch: { threephone (newValue,原创 2020-11-17 09:35:43 · 1655 阅读 · 1 评论 -
vue 中 自定义视频video
自定义视频进度条、音量、选集、全屏功能利用HTML5 Audio/Video 事件给出的事件<video :src= videoingurl ref="myvideo" @canplay="getTotal" @timeupdate="timeupdate"></video>timeupdate：监控视频当前播放的时间控制进度条timeupdate() { if(this.myvideo.currentTime == this.myvideo.duration){原创 2020-10-27 15:22:04 · 2639 阅读 · 2 评论 -
vue 混合机制 mixins(混入)
一.定义混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。二.用法eg:1.定义一个混入对象 mixins.jsexport const tabStatechange = { data(){ return{ } }, created(){ this.stateClick(); }, methods: { // tab切换原创 2020-09-25 11:27:00 · 268 阅读 · 0 评论 -
computed和 watch 的区别
一、computer当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。<p id="app"> {{fullName}} </p><script> var vm = new Vue({ el: '#app', data: { firstName: 'Foo', lastName: 'Bar', }, co转载 2020-06-08 17:14:09 · 3466 阅读 · 0 评论 -
quill-editor的使用和自定义
我的项目中有很多地方要用到，所以我封装了一个组件1.安装vue-quill-editornpm install vue-quill-editor -S2.安装vue-quill-editornpm install quill -S安装后在main.js中引入import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/quill.bubble.css'import Vue原创 2020-06-02 18:29:10 · 2200 阅读 · 1 评论 -
对element-ui的分页进行二次封装成组件
因为我的项目风格要统一，所以对el-pagination中的样式做修改<template> <div class="pagea"> <el-pagination layout="prev, pager, next" background :total="pager[props.total]" :current-page.sync="pager[props.p原创 2020-06-02 18:07:25 · 597 阅读 · 0 评论