[AppleScript]
纯文本查看
复制代码
1 2 3 | - myLogin - index.js - myLogin.vue |
> main.js
[JavaScript]
纯文本查看
复制代码
1 2 3 4 | // 加载插件import myLogin from './assets/myLogin';// 将插件挂载到Vue上Vue.use(myLogin); |
> index.js
[AppleScript]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 10 | // 引入myLogin组件import myLogin from './myLogin';// 对外暴露install方法给Vue.use使用挂载到Vue上export default { install(Vue) { // 在全局注册 myLogin 组件 Vue.component('myLogin', myLogin); }} |
myLogin.vue
[HTML]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | <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]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <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> |
> 这个组件就是一个简单的登录组件。
