modal-dialog 相关问题

在父级中，您可以看到单击时更改消息文本的按钮 .. 首先在父级中，您可以看到单击时更改消息文本的按钮 <template> .. <button @click="msg_modal = 'hightasd'">first</button> <button @click="msg_modal = 'brord'">another</button>  <DashboardUsedMsgModal where="bottom-left" :msg="msg_modal" :show="false" /> .. </template> <script> let msg_modal = ref(''); </script> 在子组件（消息模态）中 <template> <Transition name="fade"> <div v-if="showMsg" class="fixed min-w-[150px] h-max p-2 bg-[var(--back-dash)] flex justify-center items-center z-[20000]" :class="whereMod, parentStyle"> <span class="text-white">{{ msg }}</span> </div> </Transition> </template> <script setup> const props = defineProps({ msg: String, show: Boolean, where: String, // bottom, up, right, left, bottom-left, bottom-right, up-left, up-right (where in the page to display) parentStyle: String, }) let { msg, parentStyle, show, where } = toRefs(props); let whereMod = ref(null); let showMsg = ref(show.value); watch(msg.value, (newVal) => { // console.log(newVal); showMsg.value = true; setTimeout(() => showMsg.value = false, 1500); }, { immediate: true, deep: true, }) </script> 我想做的是当msg改变时，动态显示消息模式并在几秒钟后再次隐藏它问题是watch仅在第一次有效，之后就不再有效。我想观看 prop (msg) 并在更改时显示模态，然后在 1500 毫秒后隐藏它。我该如何解决它？ Vue 应该在控制台中向你发出警告无效的监视源：监视源只能是 getter/effect 函数、ref、反应对象或这些类型的数组。要正确使用watch，您应该观看参考msg，而不是内部值msg.value watch(msg, () => { // changed from msg.value showMsg.value = true; setTimeout(() => showMsg.value = false, 1500); }, { immediate: true, deep: true, }) Vue Playground 简化示例

vue.js nuxt.js modal-dialog

回答 1 投票 0

带有reacjs的模态得到空值

我有这样的家长：函数 ViewBudgetPage() { const 路径名 = useParams(); const [plate, setPlate] = useState(""); const [bikeDataModal, setBikeDataModal] = useState(false...

reactjs modal-dialog bootstrap-modal

回答 1 投票 0

NgbModal关闭后刷新页面

我有一个使用 ngbModal 向我的数据库添加一些内容的组件，问题是当 Modal 关闭并且发生 POST 操作时，我找不到刷新数据显示的方法...

angular modal-dialog bootstrap-modal

回答 2 投票 0

Bootstrap Modal + PHP + AJAX

所以我可以证明我是个白痴/新手/。我正在寻找一种简单的方法让 ajax 将 ID 传输到模态。然后采用具有 php 的模态并提供必要的变量...

php ajax twitter-bootstrap modal-dialog

回答 2 投票 0

移动设备上 Nette 中模式对话框应用 css 样式的最佳选项

如何在移动设备上用 PHP 和 Nette 编写的模式对话框应用 css 中的此类样式？模式对话框必须至少在整个显示屏上可见，并且不能在屏幕外看到...

html css mobile modal-dialog nette

回答 1 投票 0

LARAVEL：如何显示引导模式中的数据？

我在显示模态数据时遇到问题。它在模态之外工作，但在模态内部它只迭代 1 个数据。 @foreach ($addresses->sortByDesc('status') as $address) ...

laravel modal-dialog laravel-blade

回答 1 投票 0

类型错误：无法设置未定义的属性（设置“钩子”）

TypeError：无法设置未定义的属性（设置“hook”）我正在开发 Nextjs 应用程序，但使用 antd 库时出现此错误。我正在使用模态组件和工具提示组件

reactjs next.js modal-dialog tooltip antd

回答 3 投票 0

固定div不会被键盘上推

我正在尝试放置一个底部div，正如其名称所示，固定在div的最底部，并且当键盘打开时它应该被向上推（在键盘上方，因为现在视口高度应该是。 ..

javascript html css modal-dialog

回答 1 投票 0

解决 Ant Design 3x 模态确认中“否”和模态关闭（X）不同的值

我正在使用 Ant Design 3X 模式确认来在我的 React 应用程序中显示确认模式。我需要根据用户与模式的交互来解析具有不同值的 Promise：

reactjs modal-dialog antd

回答 1 投票 0

如何在 Angular 16 中重新启动时重置 html 普通对话框

我正在使用带有 mat-button-toggle-group 的 html 普通对话框元素，当我关闭对话框时，我需要重置选择。 <... 我正在使用带有 mat-button-toggle-group 的 html 普通对话框元素，当我关闭对话框时，我需要重置选择。 <button (click)="fildialog.showModal()"><mat-icon class="filter-icon" >filter_list</mat-icon></button> <dialog id="fildialog" #fildialog> <div class="fil-container" > <div> <div> <mat-button-toggle-group #filter="matButtonToggleGroup" [value]="locaFilter" multiple (change)="onValueChange(filter.value)" > <mat-button-toggle class="first-toggle-element" value="fly">Fly</mat-button-toggle> <mat-button-toggle class="second-toggle-element" value="route">On Route</mat-button-toggle> <mat-button-toggle class="third-toggle-element" value="water">Water</mat-button-toggle> </mat-button-toggle-group> </div> </div> <div class="command-buttons-container"> <button id="closebutton" type="reset (click)="closeClicked()">Close</button> <button id="applybutton" (click)="applyClicked()">Apply</button> </div> </div> </dialog> 在打字稿中，我将在调用对话框的 apply 和 close 方法之前处理一些逻辑。当我重新打开对话框时，我只需要以前应用的选择。假设当用户第一次打开时，我选择了“飞行”选项，然后用户选择所有选项并单击关闭按钮并再次打开，它必须仅显示所选的“飞行”选项。所以，如果我理解正确，那么保存用户设置的设置时会遇到问题。您有一些选择：内存（RAM）构建一个简单的 Angular Service并保留设置 // Service ... public mySettings: {all: boolean, flight: boolean} = { all: true, flight: false}; setSettings(all: boolean, flight: boolean) { this.mySettings = { all, flight } } getSettings() { return mySettings; } // Component constructor(private myService: MyService) {} openDialog() { .... dialog.settings = this.myService.getSettings(); // your logic.. // dialog closed this.myService.setSettings(dialog.settings); } 如果浏览器刷新，也使用 localStorage 来保存数据同样的场景。您也可以使用服务。 // Service setSettings(all: boolean, flight: boolean) { localStorage.setItem("data", JSON.stringify({ all, flight }); } getSettings() { return JSON.parse(localStorage.getItem("data")); } // Component same like before 第三种方法是使用数据库和后端在这里，您可以使用 Angulars 发送 http 请求 httpClient 并将设置保存在数据库中。每次加载带有对话框的组件时加载它（ngOnInit作为示例）

html angular modal-dialog angular16

回答 1 投票 0

Drupal-8 Modal 不处理登录错误

我使用了“use-ajax”类在模式中呈现登录表单。我想在同一模式上处理验证错误而不关闭它。成功登录时，它会正确重定向，但是当出现错误时

modal-dialog drupal-8 drupal-ajax

回答 2 投票 0

modal-dialog 相关问题

最新问题