A, Vue plug-what's the use
Plug typically add functionality to the global Vue.
The so-called Global:
That is not like the components that are required to introduce the first time he before each use. For as long as the plug is introduced at the beginning of time, it can be used directly in any component. (Similar to the method attribute we added in the window as any place can be used)
plug-in that can be realized is not limited, but common the following categories:
By plug-in, add global methods or properties
through the plug, adding global resource: command / filter / transition the like
through the plug (using global mixin method), add some component options
through the plug, adding Vue instance method, by adding them to Vue. the prototype realization.
A library, the API provides its own, while providing one or more of the functions mentioned above, such vue-router
Second, the plug-in principle
The so-called plug-vue is actually a simple js objects only, then this plugin object has a public attribute install, his value is a function, which takes two parameters. The first parameter is the constructor Vue, the second parameter is an option selectable objects.
Third, write plugins and examples
1, write plug-ins
// the install function of the let! Valid = {} Valid.install = function (Vue, = {triggEvent Options: " INPUT " }) { // static static properties The props // Vue.t1703C = "Hello the Everyone" // Vue.t1703C = "1703C" // console.log (the this) the this point has been up vue can find, Vue can find new new // All you need to verify composed a list of the let reglist = [{ " of the type " : " Phone " , " RegExp " :/^1[345679]\d{9}$/, "msg": "手机需要11位数字" }, { "type": "pwd", "RegExp": /\w{6,9}/ }, { "type": "code", "RegExp": /\d{4}/ }] Vue.directive("valid", { bind(el, binding) { //el: dom node binding: Object (available value) // the console.log (Binding) // lost focus event el.addEventListener (options.triggEvent, function (E) { // the console.log (e.target.value) // find eligible subjects the let validObj = regList.find (Item => === item.type binding.value) IF (validObj.RegExp.test (e.target.value)) { the console.log ( " verified by " ) e.target.classList.remove (options.errorClass) } the else { // let span = document.createElement("span"); // span.innerText = validObj.msg // e.target.parentNode.appendChild(span) console.log("格式错误") e.target.classList.add(options.errorClass) } }) } }) } export default Valid
2,
using the plug when introduced in the import file main.js inlet, reuse use () method can be used
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';
//引入axios import $http from "@/plugins/$http";
//引入自定义插件插件 v-vaild import Valid from "@/plugins/validator" ; Vue.config.productionTip = to false Vue.use (ElementUI);
// global Axios Vue.use ($ HTTP, {timeout: 2000 });
// custom plug Vue.use (! Valid, { triggEvent: " Blur " , // triggEvent: event value must be a string value, errorClass: " vaild-error " // errorClass: class name }) new new Vue ({ Router, Store, the render: H => H (the App) // Created () { // the console.log (the this) // }, }).$mount('#app')
3, access components
<Template>
<div class = " the Login " >
<header class = " loginheader " > Login / Register </ header>
<main class = " loginMain " >
<div class = " CON " >
// here uses a custom vaild plug-V
<iNPUT V-Valid = " 'Phone' " placeholder = " Please enter the name " V-= Model "user" class="user"/>
<input v-valid="'pwd'" placeholder="请输入密码" v-model="password" show-password class="pwd"/>
<input v-valid="'code'" placeholder="请输入验证码" v-model="code" class="code"/>
<span v-html="this.svg" class="captch" @click="upDataCaptch"></span>
<el-button type="primary" class="btn" @click="handleLogin">登录</el-button>
<router-link to="/register">注册</router-link>
</div>
</main>
</div>
</template>
<script>
export default {
props:{
},
components:{
},
data(){
return {
user:"",
password:"",
code:"",
svg:""
}
},
computed:{
},
methods:{
handleLogin(){
let data={username:this.user,password:this.password,captcha:this.code}
this.$http.post("/api/buyer/user/login",data).then(res=>{
window.sessionStorage.setItem(" Token " ) .then (RES = > {, res.token)
the console.log (RES)
IF (res.code === . 1 ) {
the this . $ router.push ( " / List " )
}
}). the finally (() => {
// login fails again call
the this .upDataCaptch ()
})
},
upDataCaptch () {
// every click request a verification code
the this . $ HTTP. GET ( " / API / Buyer / the User / captcha "
console.log (RES)
the this .svg = res.data
})
}
},
created(){
// 初始化
this.upDataCaptch()
},
mounted(){
}
}
</script>
<style lang="scss">
*{
padding: 0;
margin: 0;
list-style: none;
}
html,body{
width: 100%;
height: 100%;
font-size: calc(100/750*100vw);
}
.login{
width: 100%;
height: 100%;
font-size: calc(.16rem*2);
display: flex;
flex-direction: column;
background: #ebebec;
}
.loginHeader{
width: 100%;
height: calc(.5rem*2);
display: flex;
justify-content: center;
align-items: center;
}
.loginMain{
flex: 1;
overflow: auto;
}
.con{
width: 80%;
height: 80%;
margin: 0 auto;
input{
width: 100%;
height: calc(.3rem*2);
}
.user{
margin-top: 20px;
}
.pwd{
margin-top: 20px;
}
.btn{
width: 100%;
height: 10%;
margin-top: 20px;
}
.code{
margin-top: 20px;
width: 50%;
}
.captch{
margin-top: 20px;
}
}
</style>