<div id="app">
<form @submit.prevent="submitForm()" v-form="tel" class="p-5">
<input type="tel" v-model="tel" placeholder="請輸入手機（10碼）" class="form-control mb-3" />
<button type="submit" id="submit" class="btn btn-primary" disabled>送出表單</button>
</form>
</div>input {
max-width: 300px;
}const app = Vue.createApp({
data() {
return {
tel: ''
}
}
});
app.directive('form', {
mounted(el) {
el.querySelector('input').focus();
},
updated(el, binding) {
if (binding.value.length === 10) {
el.querySelector('#submit').disabled = false;
} else {
el.querySelector('#submit').disabled = true;
}
}
});
app.mount('#app');