vue 自定义功能封装

Posted 2021-01-30 imsjw

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();