vue框架下的手机验证码组件

/src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

在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 App from './App'
import router from './router'
import store from './store/index'

import Mint from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(Mint)

import {
    Storage } from './assets/js/common'
//接口调用方法
import {
    getuserinfo } from './getData/getData'

// 绑定vue原型链
Vue.prototype.Storage = Storage

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
   
  el: '#app',
  router,
  store,
  components: {
    App },
  template: '<App/>'
})

注意：
1.import store from ‘./store/index’

2.把store放进去
new Vue({
el: ‘#app’,
router,
store,
components: { App },
template: ‘’
})

/src/assets/js/common.js

export const Storage = {
   
  set: function (key, data) {
   
    return window.localStorage.setItem(key, JSON.stringify(data))
  },
  get: function (key) {
   
    return JSON.parse(window.localStorage.getItem(key))
  },
  remove: function (key) {
   
    return window.localStorage.removeItem(key)
  },
  setSession: function (key, data) {
   
    return window.sessionStorage.setItem(key, JSON.stringify(data))
  },
  getSession: function (key) {
   
    return JSON.parse(window.sessionStorage.getItem(key))
  },
  removeSession: function (key) {
   
    return window.sessionStorage.removeItem(key)
  },
  clear: function () {
   
    sessionStorage.clear()
    localStorage.clear()
  }
}

/src/components/phoneVerify.vue

<template>
  <div id="phoneVerify">
    <mt-field v-if="text==1" label="手机号" placeholder="请输入手机号码" v-model="phone"></mt-field>
    <mt-field v-if="text==2" label="新手机号" placeholder="请输入手机号码" v-model="newPhone"></mt-field>
    <mt-field label="验证码" placeholder="请输入验证码" v-model="code">
      <span @click="getCode" :class="disabled==1?'disabled':''">{
   {
   codeText}}</span>
    </mt-field>
  </div>
</template>

<script>
import {
    MessageBox } from 'mint-ui'
export default {
   
  data() {
   
    return {
   
      codeText:'获取验证码'