标签：img 消息 username 验证 user router 成功 需要 改变
1 注册
在 src/components 下新建 index.js 文件，复制贴入以下代码：
注册全局组件需要使用 Vue.component，第一个参数 ‘Message‘ 是组件名称，第二个参数 Message 是一个对象或者函数，我们这里是一个对象。（vue-cli模板下）
import Message from ‘./Message‘
Vue.component(‘Message‘, Message)
2 引用
打开 src/main.js 文件，引入 ./components：
import Vue from ‘vue‘ import App from ‘./App‘ import router from ‘./router‘ import ‘./directives‘ import ‘./components‘
我们通过引入 ./components/index.js，执行其中代码，就可以使用其内部注册的所有组件了。
3 使用
在目标组件的 data 中添加了 3 个消息组件相关的属性 msg、msgType 和 msgShow
<script> import createCaptcha from ‘@/utils/createCaptcha‘ import ls from ‘@/utils/localStorage‘ export default { name: ‘Register‘, data() { return { captchaTpl: ‘‘, // 验证码模板 username: ‘‘, // 用户名 password: ‘‘, // 密码 cpassword: ‘‘, // 确认密码 captcha: ‘‘, // 验证码 msg: ‘‘, // 消息 msgType: ‘‘, // 消息类型 msgShow: false // 是否显示消息，默认不显示 } },
然后在 methods 中添加了一个 showMsg 的方法用来改变当前的消息；
methods: { login(user) { ls.setItem(‘user‘, user) this.showMsg(‘注册成功‘, ‘success‘) }, showMsg(msg, type = ‘warning‘) { this.msg = msg this.msgType = type this.msgShow = false this.$nextTick(() => { this.msgShow = true }) } } } </script>
标签：img 消息 username 验证 user router 成功 需要 改变
原文地址：https://www.cnblogs.com/KulaAi/p/10280168.html
