06 2020 档案
摘要：转载：https://www.jianshu.com/p/d207a94eed87 xgplayer github: https://github.com/bytedance/xgplayer 文档地址：http://h5player.bytedance.com/en/ 对于video标签，我们一查
阅读全文
摘要：实现原理 1. 可以在vuex中维护一个isLoading 的变量 2. 在 router.beforeEach 钩子中 设置 isLoading = true , 在 router.afterEach 中 设置 isLoading = false Vuex： actions.js： export
阅读全文
摘要：DOM：input <el-input @click.native="onClickInput" @input="onInput" @keypress.native.enter="onEnterPress" placeholder="搜索" prefix-icon="el-icon-search"
阅读全文
摘要：var a = new Boolean(""); // false var b = new Boolean("a"); // true var c = new Boolean(0); // false var c2 = new Boolean(1); // true var d = new Bool
阅读全文
摘要：在学习网易云音乐项目的时候，有一个历史搜索记录的功能， 就是你点击的关键词被记录下来，然后显示在搜索历史记录里； 主要实现方法： 项目中使用的是 'good-storage' : https://www.npmjs.com/package/good-storage 1、npm i good-stor
阅读全文
摘要：//1.定义focus事,绑定属性 <el-input v-model="headerInput" @focus="onInputFocus" @blur="onInputBlur":style="thisStyle"> </el-input> thisStyle:'',//2.获得焦点事件 onI
阅读全文
摘要：用第三方组件或者UI框架会自带自身封装的事件，如keyup等，会覆盖原生的组件而无法起效果 .native 修饰符就是用来注册元素的原生事件而不是组件自定义事件的 如elementUI的：<el-input v-model="QueryText" placeholder="可输入如ab34" id=
阅读全文
摘要：在common.js中： // 全屏 export function requestFullScreen(element) { const docElm = element; if (docElm.requestFullscreen) { docElm.requestFullscreen(); }
阅读全文
摘要：让外层的盒子占位置，盒子的宽高比设置： // 防止图片加载的过程中，页面抖动 .wrapper width: 100% height: 0 overflow: hidden padding-botton: 100% .wrapper (浏览器兼容问题) width: 100 height: 100v
阅读全文
摘要：https://blog.csdn.net/edc3001/article/details/86833558 可以参考
阅读全文
摘要：官网链接：https://cn.vuejs.org/v2/guide/components-slots.html 项目中具名插槽使用的较多。 封装的通用提示组件，如： 上图截的是注销提示，有的时候不同的情况下提示组件的提示内容不一样，这就要根据具体情况更改 组件中的text内容： 首先父组件使用Pr
阅读全文
摘要：效果图： DOM部分： 子组件，也就是封装的Dialog.vue DOM部分： <template> <transition name="fade"> <div class="dialog-wrap" v-show="showMask"> <div class="dialog-mask"></div
阅读全文
摘要：https://www.cnblogs.com/jiayeyuan/p/10595215.html
阅读全文
摘要：父组件： DOM部分 <el-table-column prop="img" :label="label" width="180"> <template slot-scope="scope"> <div class="img-wrap"> <img v-lazy="scope.row.album.p
阅读全文
摘要：不足2位补'0'： 也有个函数padStart()，padEnd() https://blog.csdn.net/ixygj197875/article/details/79090578 export function pad(num, n = 2) { let len = num.toString
阅读全文
摘要：实现点击分页器，平滑到对应的dom组件 主要用到的方法：Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。 参考网址：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoV
阅读全文
摘要：外面的盒子div包裹着里面的图片； 通常情况下，会给外面的盒子一个padding-top: 100%， 相当于占位符，当图片还没有加载出来的时候，占住位置，防止白屏 <div class="img-wrap"> <img :src="img" alt /> </div> .img-wrap { po
阅读全文
摘要：<PlayListCard class="card-item" v-for="item in playlists" :key="item.id" :id="item.id" :img="item.coverImgUrl" :name="item.name" :desc="`播放量：${item.pl
阅读全文
摘要：https://www.jianshu.com/p/8350b611e5bb
阅读全文
摘要：DOM部分： <el-dialog title="登录" :visible.sync="loginDialogVisible" width="30%"> <!-- 登录方式 --> <div class="login-type"> <div v-for="item in loginType" :ke
阅读全文
摘要：参考链接： https://blog.csdn.net/ddx2019/article/details/104972089/
阅读全文
摘要：@mixin text-ellipsis() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @mixin text-ellipsis-multi($line) { display: -webkit-box; o
阅读全文
摘要：cli-4的脚手架配置 因为组件的引用，经常会遇到import * from '../../../components/common/***.vue‘这样的引入格式，太复杂了，所以可以在vue里面配置路径别名 首先在最外层，和package.json同级目录里面新建一个vue.config.js作为
阅读全文
摘要：position: absolute; top: 0; left: 0; bottom: 0 overflow: hidden;
阅读全文
摘要：click 类型：Boolean 默认值：false 作用：better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件，我们会给派发的 event 参数加一个私有属性 _constructed，值为 true。
阅读全文
摘要：https://www.cnblogs.com/HSHS/p/7943161.html
阅读全文
摘要：实现效果： 代码：第一张图的效果 <transition name="fold"> <div class="shopcart-list" v-show="listShow"> <div class="list-header"> <h1>购物车</h1> <span>清空</span> </div>
阅读全文
摘要：为了实现过渡的效果，如图： 主要用到Vue 的 transition: DOM结构部分： <transition name="fade"> <div class="detail" v-show="showDetail" @click="closeDetail"></div> </transition
阅读全文
摘要：https://www.jianshu.com/p/e53b5a791670
阅读全文
摘要：https://rain120.github.io/2018/08/11/cascade-menu/
阅读全文
摘要：在学习仿饿了吗项目的时候，遇到了一个渲染的问题： 意思就是说模板在渲染的时候，读取这个对象的属性的时候，这个对象不存在，是undefined，所以就会报错， 查找了很多博客，找到了问题： 异步调用显示，然后vue渲染机制中： 异步数据先显示初始数据，再显示带数据的数据， 所以上来加载info时候还是
阅读全文
摘要：1、首先在iconfont添加图标 https://www.iconfont.cn/ 2、把要添加的图标添加至购物车 3、点击右上角的购物车，点击添加至项目。没有项目的话就点击旁边的 + 加号建立项目 4、点击下载至本地 5、下载完毕后，解压，在你的项目下的assets文件夹里建立一个fonts文件
阅读全文
摘要：首先 npm install sass-loader node-sass --save 1、配置alias 在vue.config.js里：红色部分 const path = require('path'); module.exports = { configureWebpack: { resolv
阅读全文
