<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.input-large {
height: 30px;
font-size: 25px;
}
.input-small {
height: 15px;
font-size: 12px;
padding: 0;
}
</style>
</head>
<body>
<div id="app">
<!-- <input type="text" v-model="msg"> -->
<dh-input v-model="msg" size="large" placeholder="请输入内容" @focus="fh"></dh-input>
<dh-input v-model="msg" size="small"></dh-input>
<dh-input v-model="msg"></dh-input>
{{msg}}
<!-- 相当于 -->
<!-- <dh-input :value="msg" @input="xxx"></dh-input> -->
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
/*
v-model
*/
const DhInput = {
// 这里的input事件,是一个自定义事件,在我们对应db-input上因为v-model的缘故,已经监听了这个事件
template: `
<div>
<!-- 这个标签上的input是原生事件, $emit里的input是自定义事件 -->
<input @focus="focusHandle($event)" @blur="blurHandle($event)" :placeholder="placeholder" :class="[size ? 'input-' + size : '']" :value="value" @input="$emit('input', $event.target.value)"/>
</div>
`,
// 自动的在组件上回去添加 value属性,就是我们对应传递过来的msg值
props: {
value: String,
size: String,
placeholder: String
},
methods: {
focusHandle (e) {
this.$emit('focus', e)
},
blurHandle (e) {
this.$emit('blur', e)
}
}
}
Vue.component('DhInput', DhInput)
const app = new Vue({
el: "#app",
data: {
msg: "xxx"
},
methods: {
fh () {
console.log("获取焦点")
}
}
})
</script>
</body>
</html>
封装input组件 使用 v-model
最新推荐文章于 2024-06-20 19:50:45 发布