美文网首页
vue 自定义功能封装

vue 自定义功能封装

作者: imsjw | 来源:发表于2019-01-29 10:19 被阅读0次

    main.js

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    
    import Vue from 'vue'
    import Vuex from 'vuex'
    import VueResource from 'vue-resource'
    import MintUI from 'mint-ui'
    import router from './router'
    import Comm from './comm'
    import Service from './service'
    import MyContainer from './components/MyContainer'
    import ArticleContainer from './components/ArticleContainer'
    import HeaderContainer from './components/HeaderContainer'
    
    import '../static/css/style.css'
    import '../static/css/font/iconfont.css'
    
    
    Vue.use(VueResource);
    Vue.http.options.root = 'http://127.0.0.1:11111';
    Vue.http.options.emulateJSON = true;
    
    Vue.use(Vuex);
    Vue.use(MintUI);
    Vue.use(Comm);
    Vue.use(Service);
    
    Vue.component('my-container', MyContainer);
    Vue.component('article-container', ArticleContainer);
    Vue.component('header-container', HeaderContainer);
    
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
    
    })
    
    
    

    方式一
    comm.js

    export default {
      install(Vue) {
    
        //判断手机号是否正确
        Vue.prototype.IsPhone = function (phone) {
          var isPhone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/.test(phone);
          return isPhone;
        }
    
      }
    }
    
    

    方式二
    service.js

    var vue;
    
    var UserService = {
      loginSuccess(data) {
        localStorage.setItem("LOGIN_USER", JSON.stringify(data));
      },
      loginout() {
        localStorage.removeItem("LOGIN_USER");
        vue.http.post('user/loginout', {});
      },
      getCurrUser() {
        var userStr = localStorage.getItem("LOGIN_USER")
        if (userStr) {
          return JSON.parse(userStr);
        }
        return undefined;
      }
    }
    
    export default {
      install(Vue) {
        vue = Vue;
        Vue.prototype.UserService = UserService;
      }
    }
    
    

    使用

    this.UserService.loginout();
    

    相关文章

      网友评论

          本文标题:vue 自定义功能封装

          本文链接:https://www.haomeiwen.com/subject/xzgtsqtx.html