vue1.0.x 仿照饿了么改写mvvm方式

文章导航

×
  1. 1. 自定义组件提示
  2. 2. 自定义组件的编写规则

vue版本饿了么vue全家桶实现。这个模拟数据的地址必须放在src同级的static目录下
this.$http.get(‘./static/data/goods.json’)
还可以使用 express 作为通信路由来获取数据,可自己实现

自定义组件提示

  • 载入自定义的组件import Show from './libs/show'Vue.use(Show),并注册在入口js文件中
    1
    2
    3
    4
    5
    ......main.js
    import Show from './libs/show'
    Vue.use(Show)

    .....

自定义组件的编写规则

  • 调用this.$show("this is a test")
  • ./libs/show.js内容如下
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
import Vue from 'vue';
/**
* 全局注册提示
*/
export default {
install() {
let timer = null;
let index = 0; //防止重复append
Vue.prototype.$show = (msg) => {
index++;
if(index >=2){
return
}
clearTimeout(timer);
let newDiv = document.createElement("div");
newDiv.id = 'totalAlert';
newDiv.setAttribute('class','total-alert')
newDiv.innerHTML = msg;
newDiv.setAttribute('class','total-alert alert-show')
document.querySelector("#app").appendChild(newDiv);
timer = setTimeout(() => {
newDiv.parentNode.removeChild(newDiv);
index = 0
}, 2000);
};
}
};

版权声明: 本文章采用 知识共享署名 2.5 中国大陆许可协议 进行许可,欢迎转载,但转载请注明来自李立冬博客,并保持转载后文章内容的完整。本人保留所有版权相关权利。
本文链接:http://www.lilidong.cn/2017/01/03/vue1-0-x-仿照饿了么改写mvvm方式/

分享到: 更多