function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document. documentElement.clientWidth) /*or $(window).width() */
);
}
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
rename 's/\.mtn$/\.exp.json/' *.mtn 批量修改.mtn为.exp.json格式 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# *{ | |
webkit-tap-highlight-color:rgba(0,0,0,0);//去掉点击高亮 | |
-webkit-appearance: none;//消除输入框和按钮的原生外观 | |
-webkit-user-select: none; //禁止页面文字选择,此属性不继承,一般加在body上规定整个body的文字都不会自动调整 | |
-webkit-text-size-adjust: none; //禁止文字自动调整大小 | |
-webkit-touch-callout:none; // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加 | |
pointer-events: none;//禁止长按图片 | |
} | |
# -webkit-overflow-scrolling: touch;与position: absolute;莫名冲突导致样式混乱,暂用fixed |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ | |
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/ | |
electron_mirror=https://npm.taobao.org/mirrors/electron/ | |
registry=https://registry.npm.taobao.org |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Button, Notification, Row, Col, Collapse, CollapseItem } from 'element-ui' | |
Vue.component(Button.name, Button) | |
Vue.component(Notification.name, Notification) | |
Vue.component(Row.name, Row) | |
Vue.component(Col.name, Col) | |
Vue.component(CollapseItem.name, CollapseItem) | |
Vue.component(Collapse.name, Collapse) | |
Vue.prototype.$notify = Notification |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
父元素设置min-height,子元素高度设置100%,取不到值 | |
只有当父级元素满足min-height:1000px;设置的条件才触发;浏览器默认是不会触发的,所以子元素的100%的高度继承就失效了。 | |
min-height 是在 height 计算之后再套用的. | |
解决方法:给父元素加绝对定位,然后子元素加相对定位,这样子元素的高度就会根据父元素的高度进行计算 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
vue-cli 3脚手架创建的项目,选项中使用了ESLint; | |
在Mac上使用一直没有问题,但是clone到windows pc上就出现了 | |
Expected linebreaks to be 'LF' but found 'CRLF' linebreak-style | |
这个bug | |
具体解决办法: | |
修改.eslintrc 文件 | |
rules:{ | |
"linebreak-style": ["error", "unix"],//非windows pc | |
"linebreak-style": ["error", "windows"],// windows |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
因为sass在windows上容易安装失败,而且还容易被墙 | |
所以将sass转换成less | |
具体步骤 | |
yarn remove node-sass && sass-loader | |
yarn add less && less-loader | |
vue.config.js内部配置 | |
module.exports = { | |
css: { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
vue设置Active选中状态 | |
v-for 循环构建dom的过程中,可以对选择的value进行判断是否为被选中的value | |
<li v-for="(m,index) in menus" :key="index" :class="(activeValue===m)?'m-active':''"> | |
{{m}} | |
</li> | |
class类执行条件判断,进行赋值 | |
:class="(activeValue===s)?'s-active':'' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
vue 动态渲染时,需要将多个变量设置为class | |
解决办法: | |
使用Array数组传入多个类名 | |
v-bind:class="[obj1,obj2]" | |
v-bind:class="[((istrue)?'string1':'string2'),obj2]" |
OlderNewer