Vue自定义组件--自动切换输入法的录入框-屏蔽输入法的录入框

Vue自定义组件: 自动切换输入法的录入框,屏蔽输入法的录入框,屏蔽中文输入法

vue3版本

<template>
	<div class="input-scan">
		<input v-model="modelValue" class="text" :style="style" :class="class" />
		<input v-model="modelValue" class="pass" @keyup.enter.native="keyupEnter" type="password" :style="style"
			:class="class" />
	</div>
</template>
<script lang="ts" setup>
//扫码输入框,通过把一个透明的密码框放在普通输入框的上面,实现强制转换输入法为英文输入法的效果
import { computed } from 'vue'

defineOptions({
	name: 'InputScan'
})

const props = defineProps(['modelValue', 'style', 'class'])
const emit = defineEmits(['update:modelValue', 'keyup-enter'])

// 这里可以用const modelValue = useVModel(props, 'modelValue', emit)代替
const modelValue = computed({
	get() {
		return props.modelValue
	},
	set(value) {
		emit('update:modelValue', value)
	}
})

const keyupEnter = () => {
	emit('keyup-enter', modelValue.value)
}
</script>



<style scoped>
.input-scan {
	position: relative;
}

.text {
	position: absolute;
}

.pass {
	position: absolute;
	z-index: 999999;
	background-color: transparent;
	color: transparent;
}
</style>

vue2版本

利用透明的密码输入框实现自动切换到英文输入法, 在密码输入框下面再放一个文本, 同步显示明文

<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>

Vue2最简单的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>