$prompt是Vue的一種自定義指令,可以方便地在模板中彈出對話框以接收用戶輸入的值。
在使用$prompt之前,需要先在Vue對象中注冊該指令:
Vue.directive('prompt', {
bind: function (el, binding) {
el.addEventListener('click', function () {
var value = prompt(binding.value.message, binding.value.defaultValue);
binding.value.callback(value);
});
}
});
這個自定義指令接受一個對象作為參數,包含message、defaultValue和callback三個屬性:
{
message: '請輸入值:',
defaultValue: '',
callback: function (value) {
console.log('用戶輸入的值為:', value);
}
}
message屬性表示彈出框中的提示信息,defaultValue屬性表示文本框中的默認值,callback屬性是一個回調函數,接收用戶輸入的值作為參數。
在模板中使用$prompt指令:
<button v-prompt="{ message: '請輸入您的名字:', defaultValue: '張三', callback: function (value) { console.log('您的名字是:', value); } }">點擊輸入</button>
上面的代碼會在按鈕點擊時彈出對話框,用戶輸入后會把輸入的值傳遞給回調函數。