这个范例实作:在 Dialog 内放入表单,确认 submit 後,才关闭 Dialog。
.ui-widget-overlay {
opacity: .7;
}
open() 开启 dialog
close() 关闭 dialog
开启/关闭 dialog 时,就变更 show_content 值,来控制 Dialog 内容是否显示
const jquery_ui_dialog = {
template: `
<div v-bind:id="id"
v-bind:title="title">
<slot name="content"
v-if="show_content"></slot>
</div>
`,
props: {
id : String,
title : String,
width : Number,
height : Number,
},
setup(props, { emit }) {
let dialogDom = null;
const show_content = ref(false);
onMounted(() => {
dialogDom = $( '#' + props.id );
dialogDom.dialog({
autoOpen: false,
height: props.height,
width: props.width,
modal: true
});
})
const open = function() {
dialogDom.dialog( "open" );
show_content.value = true;
$('.ui-widget-overlay').on('click', function()
{
close();
});
}
const close = function() {
show_content.value = false;
dialogDom.dialog( "close" );
}
return {
show_content,
open,
close,
}
},
}
引用上述 component 及 css
原本 vue 指定 mount 的地方上面加上 js script 的引用
</script>
<link rel="stylesheet" href="/lib/jquery-ui-dialog.css?20210611001">
<script src="/lib/jquery-ui-dialog.js?20210611001"></script>
<script>
app.component("jquery-ui-dialog", jquery_ui_dialog);
const vm = app.mount('#app');
</script>
Html
开启 Dialog Button
後,直接呼叫 dialog.open() 来开启 dialog<div id="app"
v-cloak>
<p>
<button type="button"
v-on:click="dialog.open()">开启 Dialog</button>
</p>
<jquery-ui-dialog ref="dialog"
v-bind:id="'dialog'"
v-bind:title="'表单范例'"
v-bind:width="300"
v-bind:height="210" >
<template v-slot:content>
<form autocomplete="off"
v-on:submit.prevent="submit_form">
<p>
<label>编号:</label>
<input type="number"
step="1"
min="0"
v-model="vue_model.Id">
</p>
<p>
<label>姓名:</label>
<input type="text"
v-model="vue_model.Name">
</p>
<p>
<button type="submit">送出</button>
</p>
</form>
</template>
</jquery-ui-dialog>
<p>
<a v-bind:href="prev_url">回上一层</a>
</p>
</div>
这篇先到这里,下一篇来看看轻前端综合版的范例 !
<<: [Day29] Flutter - Presentation Click Game Screen (part13)
连假结束啦,我们目前聊天主要都是以对话方式呈现,那为了让我们的使用者可以同时聊天,也可以传送可爱的...
反弹球 ( 乒乓球 ) 教学原文参考:反弹球 ( 乒乓球 ) 这篇文章会介绍,如何在 Scratch...
今日题目 题目连结:700. Search in a Binary Search Tree 题目主题...
前言 今年已经2021相信不少人都已经听说过electron了 小弟技术不才,希望可以给台湾医疗资讯...
前言 大家好,我是 Leo,这是我第一次参加 IT 铁人,心里满是期待。过去只有在 Medium (...