foreverplay

##solutions:

<el-dropdown-item @click.native="function($index)">item</el-dropdown-item>

foreverplay

vue 动态渲染时，需要将多个变量设置为class
解决办法：
使用Array数组传入多个类名

v-bind:class="[obj1,obj2]"

v-bind:class="[((istrue)?'string1':'string2'),obj2]"

foreverplay

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':''

foreverplay

因为sass在windows上容易安装失败，而且还容易被墙
所以将sass转换成less
具体步骤
yarn remove node-sass && sass-loader

yarn add less && less-loader

vue.config.js内部配置
module.exports = {
  css: {

foreverplay

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

foreverplay

父元素设置min-height，子元素高度设置100%，取不到值
只有当父级元素满足min-height:1000px;设置的条件才触发；浏览器默认是不会触发的，所以子元素的100%的高度继承就失效了。
min-height 是在 height 计算之后再套用的.

解决方法：给父元素加绝对定位，然后子元素加相对定位，这样子元素的高度就会根据父元素的高度进行计算

foreverplay

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

foreverplay

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() */
        );
    }

foreverplay

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

foreverplay

# *{
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