Vue自定义组件--输入框的双向绑定--自动切换输入法的录入框

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

Vue自定义组件--输入框的双向绑定--自动切换输入法的录入框相关推荐

Vue自定义组件数组型双向绑定
実践发现,对于数组类型,使用.sync不能実现双向绑定. 只能通过@方法的方式来実现.
Vue之组件间的双向绑定
何为组件间双向绑定我们都知道当父组件改变了某个值后,如果这个值传给了子组件,那么子组件也会自动跟着改变,但是这是单向的,使用v-bind的方式,即子组件可以使用父组件的值,但是不能改变这个值.组件间 ...
Angular自定义组件实现ngModel双向绑定
1.自定义组件ts @Component({selector: 'app-custom-tree',templateUrl: './custom-tree.component.html',styles ...
vue 自定义组件切换时刷新
我们在使用vue自定义组件时,常常会遇到切换组件的操作,但是切换组件的时候,如果没有处理好,组件内容就不会刷新.如:标签页下放自定义组件,切换标签时,组件里面的内容不刷新,导致页面停留在上一次的操作. ...
vue 自定义组件双向数据绑定
文章目录序属性&事件传值双向绑定 v-model组件双向绑定 .sync修饰符双向绑定总结 !!!这边文章记录的是 vue2 的概念,vue3 对双向绑定进行了改动,不要把一下代码放到 ...
vue 父链和子组件索引_解决Vue2.x父组件与子组件之间的双向绑定问题
最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex, ...
组件间的双向绑定、如何自己定制双向绑定
1.组件间的双向绑定 1.1 组件的双向绑定的介绍由于vue中的单项数据流,一般来说,父组件通过自定义属性传输数据,子组件通过props字段接受数据,如果子组件想要更改父组件传过来的数据,可以通过t ...
vue自定义组件的v-model
vue对于原生的表单元素都支持v-model进行双向绑定,同样的,自定义组件也可以使用v-model实现双向绑定(这个个人觉得主要用于自定义组件内部存在表单元素时用的比较多). 对于原生表单元素比如 ...
Vue自定义组件并引入
今天,bug菌为大家带来一期帝王级干货,有关于前端vue的组件教学,深入指引大家在vue中如何创建自定义的组件,并且在vue中引入你自定义的组件: 具有很好的教学价值,希望小伙伴们根据这篇文章可以有所 ...

Vue自定义组件--输入框的双向绑定--自动切换输入法的录入框

最简单的Input的封装

使用示例

封装一个强制英文输入法的录入框

Vue自定义组件--输入框的双向绑定--自动切换输入法的录入框相关推荐

最新文章

热门文章