前言

这里想要实现一个点击下拉菜单选择时将下拉菜单移动到页面顶部，实现想法是：获取当前dom节点距离屏幕的高度，然后利用transform的translateY属性将下拉菜单从原位移动到顶部，这里要注意向下为正数，向上为负数。

实现

1
2
3
4
5
6
7

// 点击上移
const height = this.$refs.dropdown.$el.offsetTop;
this.$refs.dropdown.$el.style = `transition: all 0.1s linear;transform: translateY(-${height}px)`;
// 要在动画完成后再定位
setTimeout(() => {
  this.$refs.dropdown.$el.style = 'position: fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;';
}, 100)

css属性 2D转换方法

CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。
以下使用方法都是transform: translateX(21px);

1. translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
2. translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
3. translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素
4. scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
5. scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
6. scaleY(n) 定义 2D 缩放转换，改变元素的高度。
7. rotate(angle) 定义 2D 旋转，在参数中规定角度。
8. skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
9. skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
10. skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

前言

做一个项目的时候，我们都会想到要在router的afterEach钩子里处理一下document.title,让我们的浏览器头部显示出自己想要显示的标题。但是当我们想要个性化设置头部，而路由设置不了的头部我们可以用指令来实现。

Vue指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
示例：

// 注册一个全局自定义指令 v-header
Vue.directive('header', {
  update: function (el, binding) {
    // 修改头部
    document.title = binding.value
  }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  header: {
    // 指令的定义
    update: function (el, binding) {
      // 修改头部
      document.title = binding.value
    }
  }
}

指令的使用：
<div v-header="value"></div>

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

• unbind：只调用一次，指令与元素解绑时调用。

接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

钩子函数参数

指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive=”1 + 1” 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive=”1 + 1” 中，表达式为 “1 + 1”。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
  除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

函数简写

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

对象字面量

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

1
2
3
4

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

最后附上Vue官网： https://cn.vuejs.org/v2/guide/custom-directive.html

前言

Vue有很多语法糖，但是我们往往会忽略v-model也是一个语法糖，误以为它只是一个简单的监听绑定数据作用。

v-model实质

<input v-model="something">
实质上等同于
<input v-bind:value="something" v-on:input="something = $event.target.value">

v-model=”something”则表示将value值绑定在something上，当值发生改变时触发绑定的oninput事件。oninput事件绑定的函数是将触发oninput事件的目标（该input）的value值赋值给something这个变量。

遇到的问题

在写父子组件间的传值的时候，在子组件中定义一个props的变量，然后再去给它绑定到一个子组件的model里。其实子组件也是调用的别人的UI框架。代码如下，

1
2
3
4
5
6
7

<md-popup v-model="isPopupShow"></md-popup>
props: {
  isPopupShow: {
    type: String,
    default: false,
  }
}

这时候在点击蒙版关闭掉弹窗时，会报错，不能在子组件里修改props变量。

@import “../imgs/model_error.jpg”;

解决方法：
点击蒙版时向父组件emit一个关闭事件，让父组件去关闭弹窗的属性值。

1
2
3

<md-popup :value="isPopupShow" @input="handleClickMask"></md-popup>

this.$emit('click-mask', true);

父组件接收子组件的事件，修改传给子组件的值

1
2
3
4

<zujian @click-mask="handleClose"></zujian>
handleClose() {
  this.isPopupShow = false;
}

前言

做前端的展示除了交互，图片展示还有一些文字展示，文字的多寡有的时候是我们预想不到的，所以这里整理一些关于文字展示可能用到的知识点。

单行文字省略

只有块状元素才可以设置省略，而且我们需要设置它的宽度。

1
2
3

overflow: hidden;
text-overflow: ellipsis; // 规定当文本溢出时显示省略符号来代表被修剪的文本
white-space: nowrap; // 设置文字在一行显示不能换行

white-space属性属性指定元素内的空白怎样处理。有四个值可选

text-overflow属性规定当文本溢出包含元素时发生的事情。

多行文字省略

1
2
3
4
5
6
7

two-line {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; // 限制块元素显示的文本的行数
  -webkit-box-orient: vertical;
  overflow: hidden;
}

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
注：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

单行文字居中

单行文字居中用到的属性是text-align: center;
当要上下居中时设置行高即可，line-height属性。

多行文字上下左右居中

多行文字上下左右居中用到了盒子的flex布局。

1
2
3

display: flex;
align-items: center; // 弹性盒子元素在该行的侧轴（纵轴）上居中放置
justify-content: center; // 项目位于容器的中心

前言

最近又用到了vue-lazyload来实现图片懒加载，怎么说又呢？是因为之前只是简单引用没有深入了解，都用过这么多次了，那就来个总结吧。

install

$ npm i vue-lazyload -S

Usage

简单使用
main.js

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

new Vue({
  el: 'body',
  components: {
    App
  }
})

template:

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

前言

在每一个项目中都会看到有一个README.md文件，用来说明如何初始化创建这个项目。所以了解和学习一下markdown语法也是有必要的呀。下面是总结的基础md语法。

基本符号 * - +. >

基本上所有的markdown标记都是基于这四个符号或组合，需要注意的是，如果以基本符号开头的标记，注意基本符号后有一个用于分割标记符和内容的空格。

标题

前面带#号，后面带文字，分别表示h1-h6,只到h6。

列表

1. 无序列表
   //形式一
   • a
   • b
   • c
     //形式二
   • d
   • e
   • f
     //形式三
   • g
   • h
   • i
2. 有序列表
   //正常形式
   1. abc
   2. bcd
   3. cde
      //错序效果
   4. fgh
   5. ghi
   6. hij

列表可以嵌套，使用时在嵌套列表前按 tab 或 空格 来缩进,去控制列表的层数

前言

最近在做移动端项目嘛，免不了会有不同尺寸大小的手机端适配，所以总结一下媒体查询。

直接代码啊

@media screen and (orientation: portrait) {
    /*竖屏 css*/
} 
@media screen and (orientation: landscape) {
    /*横屏 css*/
}
@media screen and (min-width:1366px) {
    /*pc端 css*/
}

/*iphone 5/5s/5se */
@media screen and (max-width:569px) {
    top: 7%;
    left: 18%;
}
/*iphone 6/7/8 */
@media screen and (min-width:569px) and (max-width:668px) {
    top: 12%;
    left: 20%;
}
/*iphone 6p/7p/8p */
@media screen and (min-width:668px) and (max-width:737px) {
    top: 14%;
    left: 20%;
}
/*iphone x */
@media screen and (min-width:737px) and (max-width:813px) {
    top: 12%;
    left: 21%;
}
/*ipad*/
@media screen and (min-width:813px) and (max-width:1025px) {
    top: 22%;
    left: 21%;
}
/*ipad pro*/
@media screen and (min-width:1024px) {
    top: 25%;
    left: 21%;
}

参考链接: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

前言

代码规范是对每一个程序员来说非常重要的一个好习惯，所以前端部分采用了Eslint来进行代码规范检验。

/* eslint-disable */
忽略整个文件的warning

/* eslint-disable */
 ...
/* eslint-enable */
用于关闭指定代码块的校验

/* eslint-disable no-new */
禁用no-new的校验

// eslint-disable-next-line
用于忽略下一行的warning

// eslint-disable-line
用于忽略当行的warning

前言

在每一个大型网站中比如百度，阿里妈妈都有自己的图标logo在浏览器左上角，今天我也想要实现类似功能。

步骤1

将自己公司的图标放到vue的static文件目录下，具体路径如下：

步骤2

然后在自己vue项目的index.html添加文件及路径。代码：

<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">

Last

最后将你的代码跑起来就能看到你的图标啦

前言

最近做的移动端项目是与楼层相关的，用户选择时，为了更好的用户体验，需要将楼层按升序情况展示，由于后台返回的数组是字符串类型，JS默认的sort()方法是按照ASCII码进行排序的，所以会发现并没有得到预想的排序结果。琢磨了一番得出另外一种解决方法,仍然会调用sort方法，但是给出参数。具体代码如下文所示。

JS sort()方法原理及使用

sort() 方法用于对数组的元素进行排序，并返回数组。默认排序顺序是根据字符串ASCII码。因为排序是按照字符串ASCII码的顺序进行排序的，所以首先应该把数组元素都转化成字符串（如有必要），以便进行比较。

语法： arrayObject.sort(sortby);

看一下示例，第一种只有一位数字的时候是可以正常排序的，但是当字符串有两位及以上时，并没有得到我们预期得到的结果，这是因为sort方法是默认根据ASCII码进行排序，所以我们需要对它做一些改变。

例子： 
var arr = ['1', '4', '7', '3', '2'];
arr.sort();
==>['1', '2', '3', '4', '7']
var arr = ['12', '41', '71', '31', '2'];
arr.sort();
==>['12', '2', '31', '41', '71']
可以看出第二个例子并没有得到预想的从小到大的排序结果，因为它是按照第一个字符的ASCII码进行排序的。

升序

function sortArray（arr）{
    return arr.sort(function(a, b) {return a-b;});
}

降序

function sortArray（arr）{
    return arr.sort(function(a, b) {return b-a;});
}

根据数组里的某一个属性进行排序

var arr1 = [
    {roomName: '1001', roomId: '33'},
    {roomName: '1002', roomId: '321'},
    {roomName: '1003', roomId: '312'},
]
function compare(prop) {
    return function(a, b) {
        var value1 = a[prop];
        var value2 = b[prop];
        return value1 - value2;
    }
}
arr1.sort(compare('age'));

根据参数来确定是升序还是降序

function sortBy(attr, rev) {
    // 第二个参数没有传递，默认升序排列
    if (rev === undefined) {
        rev = 1;
    } else {
        rev = rev ? 1 : -1;
    }
    return function (a, b) {
        a = a[attr];
        b = b[attr];
        if (a < b) {
            return rev * -1;
        }
        if (a > b) {
            return rev * 1;
        }
        return 0;
    }
}