最简单的Input的封装
HtmlInput.vue
<template><div><input :value="value" @input="input" type="text" ></div></template><script>export default {props: {// 接收父组件传入的v-model的值value: {default: ''}},methods: {// 推送值给父组件v-model绑定的变量, 实现双向绑定input(e) {this.$emit('input', e.target.value)}}}</script>
使用示例
<template><div><html-input v-model="inputValue" /></div></template><script>import HtmlInput from './HtmlInput.vue'export default {components: {HtmlInput,},data() {return {inputValue: '123',},}</script>
封装一个强制英文输入法的录入框
利用透明的密码输入框实现自动切换到英文输入法, 在密码输入框下面再放一个文本, 同步显示明文
<template><div id="HtmlInputScan"><input :value="value" @input="input" type="text" class="text"><input :value="value" @input="input" type="password" class="pass"></div></template><script>export default {props: {value: {default: undefined}},methods: {// 实现双向绑定input(e) {this.$emit('input', e.target.value)}}}</script><style lang="scss" scoped>#HtmlInputScan {position: relative;.text {position: absolute;top: 10px;left: 10px;width: 100%;font-family: Consolas, Monaco, monospace;}.pass {position: absolute;top: 10px;left: 10px;z-index: 999999; //密码框放上面才能自动切换到英文width: 100%;font-family: Consolas, Monaco, monospace;background-color: transparent;color: transparent;}}</style>
