最近新get到的vue新功能

1
2
3
4
5
6
7
8
9
10
// 传统方式
// 子组件在对应的钩子中发布事件  
created(){  
this.$emit('done')  
}  

// 父组件订阅其方发  
<list @done="childDone">
 // 使用 通过`@hook`监听子组件的生命周期
<list @hook:mounted="listMounted" />

1
2
3
4
5
6
7
8
{
    path: 'notice/:tab/:id',
    name: 'user-notice',
    component: UserNotice,
    props: true, //  `route.params` 将会被设置为组件属性。
}
// 组件中
 props: ["id", "tab"],

1
2
3
4
5
6
7
8
9
10
export default {  
mounted() {  
this.timer = setInterval(() => {  
console.log(Date.now())  
}, 1000)  
},  
beforeDestroy() {  
clearInterval(this.timer)  
}  
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {  
mounted() {  
this.creatInterval('hello')  
this.creatInterval('world')  
},  
creatInterval(msg) {  
let timer = setInterval(() => {  
console.log(msg)  
}, 1000)  
this.$once('hook:beforeDestroy', function() {  
clearInterval(timer)  
})  
}  
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Message/index.js
import Vue from "vue";
import message from './message';
const MessageConstructor = Vue.extend(message);
const messageInstance = new MessageConstructor();

messageInstance.$mount();
document.body.appendChild(messageInstance.$el)

const Message = (option = {}) = >{
    messageInstance.add(option);
}
export default Message;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// message/message.vue
<template>
  <div class="wrap">
    <div class="message" :class="item.type" v-for="item in notices" :key="item._name">
      <div class="content"></div></div>
  </div>
</template>
<script>// 默认选项
  const DefaultOptions = {
    duration: 1500,
    type: "info",
    content: "这是一条提示信息！"
  };
  let mid = 0;
  export
default {
    data() {
      return {
        notices:
        [],
        isShow: false
      };
    },
    methods: {
      add(notice = {}) {
        this.isShow = true;
        // name标识 用于移除弹窗
        let _name = this.getName();
        // 合并选项
        notice = Object.assign({
          _name
        },
        DefaultOptions, notice);
        this.notices.push(notice);
        setTimeout(() = >{
          this.removeNotice(_name);
        },
        notice.duration);
      },
      getName() {
        return "msg_" + mid++;
      },
      removeNotice(_name) {
        this.isShow = false;
        let index = this.notices.findIndex(item = >item._name === _name);
        this.notices.splice(index, 1);
      }
    }
  };</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 // comfrim/index.js
 import confirm from './confirm';
import Vue from 'vue';
import {
    pageScroll
}
from '@/utils/assist';

// 构造子类
let confirmConstructor = Vue.extend(confirm);
// 实例化组件
let confirmInstance = new confirmConstructor({
    el: document.createElement('div')
});
// 也可通过此方法
// $mount可以传入选择器字符串，表示挂载到该选择器
// 如果不传入选择器，将渲染为文档之外的的元素，你可以想象成 document.createElement()在内存中生成dom
// confirmInstance.$el获取的是dom元素
// confirmInstance.$mount();
const hashChange = function() {
    pageScroll.unlock();
    const el = confirmInstance.$el;
    el.parentNode && el.parentNode.removeChild(el);
}
confirmConstructor.prototype.closeConfirm = function(stay, callback) {

    let stopClose = true;
    if (typeof callback === 'function') {
        stopClose = callback();
        if (stopClose === undefined) stopClose = true;
    }

    if (!stopClose || stay) return;
    pageScroll.unlock();

    const el = confirmInstance.$el;
    el.parentNode && el.parentNode.removeChild(el);
    window.removeEventListener("hashchange", hashChange);
}

const Confirm = (options = {}) = >{
    confirmInstance.mes = options.mes || '';
    confirmInstance.align = options.align || '';
    confirmInstance.title = options.title || '提示';
    confirmInstance.opts = options.opts;
    window.addEventListener("hashchange", hashChange);
    document.body.appendChild(confirmInstance.$el);
    pageScroll.lock();
}

export default Confirm;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// confirm/confirm.vue
<template>
  <div class="wb-dialog-black-mask">
    <div class="wb-confirm">
      <div class="wb-confirm-hd">
        <strong class="wb-confirm-title" v-html="title"></strong>
      </div>
      <div class="wb-confirm-bd" :class="align ? 'text-'+align :'' " v-html="mes"></div>
      <template v-if="typeof opts == 'function'">
        <div class="wb-confirm-ft">
          <a href="javascript:;" class="wb-confirm-btn default" @click.stop="closeConfirm(false)">取消</a>
          <a href="javascript:;" class="wb-confirm-btn primary" @click.stop="closeConfirm(false, opts)">确定</a></div>
      </template>
      <template v-else>
        <div class="wb-confirm-ft">
          <a href="javascript:;" class="wb-confirm-btn" :key="key" v-for="(item, key) in opts" :class="typeof item.color == 'boolean' ? (item.color ? 'primary' : 'default') : ''" :style="{color: item.color}" @click.stop="closeConfirm(item.stay, item.callback)"></a></div>
      </template>
    </div>
  </div>
</template>
<script type="text/babel">export
default {
    props:
    {
      title:
      String,
      mes: String,
      align: String,
      opts: {
        type: [Array, Function],
      default:
        () = >{}
      }
    }
  };</script>