;

1.问题描述 404页面本身来源复杂,通过this.$router.go(-1)及this.$router.go(-2)或者history.back()都很难覆盖所有场景, 而且上面的方案很容易导致死循环-上一个页面出错跳到404,返回回去又继续跳到404。 2.问题根源 此时问题关键点,上一个路由到底是什么,此时就需要用到组件内的路由守卫 3.知识点 beforeRouteEnter中无法通过this获取到组件实例,但是可以在回调函数next中访问组件实例 4.相关代码 页面返回上一级按钮绑定back事件 data () { return { fromPathName: ” } }, beforeRouteEnter: (to, from, next) => { next(vm => { vm.fromPathName = from.name }) }, methods: { back: function () { if (this.fromPathName === ‘details’ || this.fromPathName === ‘video’) { this.$router.push({name: ‘library’}) } else { this.$router.push({name: this.fromPathNa…

vue中404页面获取页面来源 10 天前
;

关键点:饼图传入两份数据,一份设置label在外显示,一份在内显示,设置不同信息,位置叠加 /*饼图:项目状态*/ var myChart = echarts.init(document.getElementById(‘echarts-pie’)); // 指定图表的配置项和数据 var option = { title : { text: ‘项目状态’, x:’center’ }, color:[‘#477dea’, ‘#9a9a9a’,’#f2b644′], tooltip : { trigger: ‘item’, formatter: "{a} <br/>{b} : {c} ({d}%)" }, normal:{ show: true, position: ‘inside’, formatter: ‘{d}%’ }, legend: { orient: ‘vertical’, left: ‘left’, data: [‘已签单’,’实施中’,’已完成’] }, series : [ { name: ”, type: ‘pie’, radius: ‘55%’, center: [‘50%’, ‘50%’], data:[ {value:335, name:’已签单’}, {value:310, name:…

echarts饼图同时显示指示线和百分比 11 天前
;

stack相同的数据会在Y轴叠加。 如果是相同的值,则会叠加在一起。取不同的值,Y轴的数据就不会叠加在一起; 或者删除掉,默认为不叠加。

echart折线图不叠加 11 天前
;

title: { text: ‘天气情况统计’, //标题 subtext: ‘虚构数据’, //副标题 left: ‘center’ //标题位置 }, tooltip: { trigger: ‘item’, formatter: "{a} <br/>{b} : {c} ({d}%)" //鼠标移上去显示的内容 }, normal: { show: true, position: ‘inside’, //图形里显示(比如在饼图块上显示百分比) formatter: ‘{d}%’ //显示的内容 }, textStyle: { fontWeight: ‘normal’, //显示字体粗细等 fontSize: 10 }, legend: { //图例 // top: ‘middle’, // bottom: 10, // left: ‘center’, icon: "circle", //圆点形图例(默认是官网上的圆角矩形) itemWidth: 10, //这几个是图例宽高位置等的设置 itemHeight: 10, itemGap: 20, left: 100, top: 110, bottom: 20, textStyle: { // fontSize: 5 color: "…

echart:配置注释 11 天前
;

1.问题描述 父元素设置display:flex,此时两个子元素无论如何设置都会放置在一行中

父元素设置flex后会导致子元素换行失效 13 天前
;

1.原因分析 因为容器在初始化时被设置成display:none; 2.解决方案 元素隐藏通过设置opacity: 0来实现

swiper报错‘Cannot read property ‘indexOf’ of undefined swiper’ 13 天前
;

1,父容器需要设置高度才能生效。

css设置calc不生效 13 天前
;

画布的大小是根据background属性所传的图片尺寸决定的

mcanvas.js中画布大小如何设置 15 天前
;

外层容器添加类名swiper-no-swiping

swiper禁止通过鼠标滑动 19 天前
;

destroyed: function () { // code }

vue中在浏览器后退按钮后执行代码 22 天前
;

1.原因 每次调用都会产生不同的ID,单次调用clearInterval并不能全部清除 2.解决方案 每次调用setInterval后,将ID存入一个数组,然后需要清除时候,遍历数组进行清除 3.相关代码 let id= setInterval(() => {}, 1000) this.idList.push(id) for (let i = 0; i < this.idList.length; i++) { clearInterval(this.timerId[i]) }

setInterval多次调用后,clearInterval无效 23 天前
;

mounted: function () { window.addEventListener(‘scroll’, () => { let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop if (scrollTop > 60) { // 1 } else { // 2 } }) }

vue中监听scroll事件 25 天前
;

问题原因: name: ‘myFooter’, components: { myFooter } name部分和components部分重名导致,修改不同即可

vue报错:‘RangeError: Maximum call stack size exceeded’ 25 天前
;
三仙归洞 26 天前
;

问题原因: img标签为行内元素(inline),默认对其方式为vertical-align: baseline(基线对齐) 四种解决方法: 1.将img设置为block,这样就不再受行内基线的影响。 2.设置img的竖直对齐方式v-align:bottom。 3.设置父div的font-size,需要一个较大的值,原理未知。 4.设置外层的div的line-height:0,这样基线下方的位置基本可以忽略。

div中包含img标签,下方出现空白 2019年2月21日
;

@-moz-document url-prefix(){ body{color:red;} } supports:https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

针对firefox的css设置 2019年2月18日
;

1.问题描述 直接修改数组某一项的值,数据变化后ui并不跟着变化 2.解决方案,要用到,数组更新检测 错误的代码 setOptionVal: function (index, val) { this.SubjectListData[index].optionIdStringResult = val } 正确的代码 setOptionVal: function (index, val) { let tempVal = this.SubjectListData[index] tempVal.optionIdStringResult = val this.$set(this.SubjectListData, index, tempVal) } 相关链接:https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B

vue数据变化ui不刷新 2019年2月14日
;

1.相关文件 src/App.vue 2.相关代码 <template> <div id="app" class="loading"> <router-view/> </div> </template> mounted: function () { let ele = document.getElementById(‘app’) setTimeout(function () { ele.classList.remove(‘loading’) }, 1500) } #app{ height: 100%; } .loading:before{ content: ”; position: fixed; width: 100%; height: 100%; left:0; top:0; background:#fff url(/static/img/loading.gif) center center no-repeat; z-index: 99999999; }

vue首屏添加loading 2019年2月13日
;

1.实现原理 外层添加容器,设置overflow: hidden; 内部容器,设置overflow-y: scroll; 对内部容器进行偏移,使得滚动条刚好被上层容器遮挡 2.相关代码 <div class="outer"> <div class="inner"></div> </div> .outer{height: 75px;overflow:hidden;} .inner{height: 100%;padding-right: 25px;position: relative;left: 21px;overflow-y: scroll;}

内容区域可滚动,但不显示滚动条 2019年2月13日
;

1.问题描述 轮播处于子组件中,数据通过props从父组件异步获取,父组件中用了async函数 2.问题所在及解决方案 后来发现是因为,data部分list数组中写入了静态的数据,删除后空白轮播消失,但是loop无效 父组件中引用子组件的地方的加入判断v-if="swiperBannerData.length>0",问题消失

vue-awesome-swiper轮播出现空白 2019年2月13日
;

player.on( ‘durationchange’, function( e ) { window.console.log( ‘videoJS: durationchange’ ); }); player.on( ‘ended’, function( e ) { window.console.log( ‘videoJS: ended’ ); }); player.on( ‘error’, function( e ) { window.console.log( ‘videoJS: error’ ); }); player.on( ‘firstplay’, function( e ) { window.console.log( ‘videoJS: firstplay’ ); }); player.on( ‘loadedalldata’, function( e ) { window.console.log( ‘videoJS: loadedalldata’ ); }); player.on( ‘loadeddata’, function( e ) { window.console.log( ‘videoJS: loadeddata’ ); }); player.on( ‘loadedmetadata’, function( e ) { win…

videojs 播放的各个生命周期callback 2019年2月12日
;

1.安装 npm i js-cookie 相关链接:https://www.npmjs.com/package/js-cookie

vue中使用js-cookie 2019年1月26日
;

目录 声明:词条人人可编辑,创建、修改和认证均免费 详情 沉默的螺旋 新闻传播学概念 本词条是多义词,共2个义项 展开 沉默的螺旋(The Spiral Of Silence)是一个政治学和大众传播理论。理论基本描述了这样一个现象:人们在表达自己想法和观点的时候,如果看到自己赞同的观点受到广泛欢迎,就会积极参与进来,这类观点就会越发大胆地发表和扩散;而发觉某一观点无人或很少有人理会(有时会有群起而攻之的遭遇),即使自己赞同它,也会保持沉默。意见一方的沉默造成另一方意见的增势,如此循环往复,便形成一方的声音越来越强大,另一方越来越沉默下去的螺旋发展过程。理论是基于这样一个假设:大多数个人会力图避免由于单独持有某些态度和信念而产生的孤立。

沉默的螺旋 2019年1月26日
;

1.安装 npm install videojs-hotkeys 2.main.js中引入 import videojshotkeys from ‘videojs-hotkeys’ Vue.use(videojshotkeys) 3.videojs中使用 let player = videojs(‘#my-player’, { autoplay: true, preload: ‘auto’, // aspectRatio: ’16:9′, playbackRates: [1, 1.25, 1.5, 1.75, 2], controlBar: { volumePanel: { inline: false }, fullscreenToggle: true, customControlSpacer: false } }, function () { this.addClass(‘test666’) this.hotkeys({ volumeStep: 0.1, seekStep: 5, enableModifiersForNumbers: false }) })

vue中使用videojs-hotkeys 2019年1月23日