[AppleScript] 纯文本查看 复制代码 - myLogin
- index.js
- myLogin.vue
> main.js
[JavaScript] 纯文本查看 复制代码 // 加载插件
import myLogin from './assets/myLogin';
// 将插件挂载到Vue上
Vue.use(myLogin);
> index.js
[AppleScript] 纯文本查看 复制代码 // 引入myLogin组件
import myLogin from './myLogin';
// 对外暴露install方法给Vue.use使用挂载到Vue上
export default {
install(Vue) {
// 在全局注册 myLogin 组件
Vue.component('myLogin', myLogin);
}
}
myLogin.vue
[HTML] 纯文本查看 复制代码 <template>
<div class="my_login_box">
<p>
<span> 手机号： </span>
<input type="text" ref="phone" v-model="phone">
<!-- 写一个插槽，插槽名phone 插槽暴露数据phone 提供给slot-scope使用 -->
<slot name="phone" :phone="myProps.phone"></slot>
</p>
<p>
<span> 密码： </span>
<input type="password" ref="password" v-model="word">
<!-- 写一个插槽，插槽名word 插槽暴露数据word 提供给slot-scope使用 -->
<slot name="word" :word="myProps.word"></slot>
</p>
<p>
<button @click="submit"> 确定</button>
</p>
</div>
</template>
<script>
export default {
name: "myLogin",
// 获取父组件传递过来的数据 phoneReg ，wordReg，prompt
/**
*
* phoneReg 手机的正则匹配
* wordReg 密码的正则匹配
* prompt 提示信息
* */
props: {
phoneReg: {
// type 数据类型 , default 默认值 ，不是原始数据类型需要使用函数return出来
type: RegExp,
default: () => /^1[34578]\d{9}$/
},
wordReg: {
type: RegExp,
default: () => /^[\w]{6,12}$/
},
prompt: {
type: Object,
default: () => {
return {phone: '错误', word: '错误'}
}
}
},
data() {
return {
phone: '',
word: '',
myProps: {
phone: '',
word: ''
}
}
},
methods: {
// 点击事件
submit() {
// 一上来清空提示
this.myProps.phone = '';
this.myProps.word = '';
// 判断数据是否符合正则的需求
if (!this.phoneReg.test(this.phone)) return this.myProps.phone = this.prompt.phone;
if (!this.wordReg.test(this.word)) return this.myProps.word = this.prompt.word;
// 信息判断正确之后调用父组件submit方法 ，并且将结果传递过去。
this.$emit('submit', {phone: this.phone, word: this.word});
}
},
// 一上来挂载 input 事件
mounted() {
// 获取this
let _this = this;
// 每一输入的时候触发事件，并且将当前的数据传递过去。
this.$refs['phone'].addEventListener('input', function () {
_this.$emit('phoneJudge', _this.phone)
});
this.$refs['password'].addEventListener('input', function () {
_this.$emit('wordJudge', _this.word)
});
}
}
</script>
<style scoped>
.my_login_box {
width: 300px;
height: 450px;
border: 1px solid #000;
}
</style>
> 引用组件的页面
[HTML] 纯文本查看 复制代码 <template>
<div class="hello">
<!--- 调用my-login 组件 ，传入新的手机验证的正则 -->
<!-- 添加点击事件 ，二个输入框的的输入事件，同时传入新的提示信息 -->
<my-login
:phone-reg="/^[1][3,4,5,7,8][0-9]{9}$/"
@submit="submit"
@phoneJudge="phoneVerify"
@wordJudge="wordVerify"
:prompt="prompt"
>
<template slot-scope="props" slot="phone">
<p>
{{ props.phone }}
</p>
</template>
<template slot-scope="props" slot="word">
<p>
{{ props.word }}
</p>
</template>
</my-login>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
prompt: {phone: '你输入的手机号错误', word: '你输入的密码异常'}
}
},
methods: {
submit(val) {
console.log(`用户点击确定了手机号:${val.phone};密码：${val.word}`)
},
phoneVerify(val) {
console.log(`用户正在操作手机号码输入框${val}`)
},
wordVerify(val) {
console.log(`用户正在操作密码输入框${val}`)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
> 这个组件就是一个简单的登录组件。
| 
收藏
淘帖
踩
