1

我正在使用 ipyvutify 尝试编写出色的 GUI。它看起来很棒，但对于从未做过 HTML 和 CSS 的人来说有点难。

以下是单击“OPEN DIALOG”按钮时生成浮动对话框的完整代码。

我想了解使用 ipyvuetify 打开和关闭浮动对话框的功能，并且使用以下代码即使代码有效（不足）我也无法弄清楚。

目标是用一个按钮打开一个对话框，并且在对话框内也有一个关闭按钮（与其他按钮一起）

import ipyvuetify as v 
lorum_ipsum= 'loren loren'


#oepn dialog:
v_btn_OTHER   = v.Btn(class_='mx-2 light-blue darken-1', children=['OTHER'])
def on_click_v_btn_OPEN (widget, event, data):
    exampledialog.value = True
    pass
v_btn_OPEN.on_event('click', on_click_v_btn_OPEN)

# CLOSE BUTTON INSIDE THE DIALOG
v_btn_CLOSE   = v.Btn(class_='mx-2 light-blue darken-1', children=['CLOSE'])
def on_click_v_btn_CLOSE (widget, event, data):
    exampledialog.value = False
v_btn_CLOSE.on_event('click', on_click_v_btn_CLOSE)

# ACTION BUTTON INSIDE THE DIALOG
v_btn_OTHER   = v.Btn(class_='mx-2 light-blue darken-1', children=['OTHER'])
def on_click_v_btn_OTHER (widget, event, data):
    # code to open facebook.com in a new tab
    pass
v_btn_OTHER.on_event('click', on_click_v_btn_OTHER)

# THE DIALOG
exampledialog = v.Dialog(width='500',
    v_slots=[{
        'name': 'activator',
        'variable': 'x',
        'children': v.Btn(v_on='x.on', color='success', dark=True, children=[
            'OTHER dialog'
        ]),
    }], 
    children=[
        v.Card(children=[
            v.CardTitle(class_='headline gray lighten-2', primary_title=True, children=[
                "Lorem ipsum"
            ]),
            v.CardText(children=[
                lorum_ipsum,
                v.TextField(label='Label', placeholder='Placeholder'),
                v_btn_CLOSE,
                v_btn_OTHER,
            ]),
    ])
])

# VISUALIZATION
display(v.Layout(children=[v_btn_OPEN,exampledialog]))

如果您将上面的代码粘贴到您的一个单元格中，您将意识到我想理解的以下奇怪行为。

如果您不在可视化部分中显示示例对话框，则其他按钮将不起作用。仅当 exampledialog 是 Layout 的子级的一部分时，该按钮才起作用。此外，对话框本身的按钮在第一次运行时就会消失。

这真是一件奇怪的事情。谁能给个解释。

一般的问题是如何从对话框外的按钮打开和关闭对话框。dialog.value=True 似乎并没有真正起作用

4

1 回答 1

2

除了第一个按钮的变量名称中有一个小错字之外，它看起来都是正确的。

第一个按钮应该是“v_btn_OPEN”而不是“v_btn_OTHER”，因为您在对话框中使用“其他”按钮作为关闭按钮。

现在，针对您的问题：

在可视化部分中包含 exampledialog 的必要性： exampledialog 需要添加到 [DOM][1] 否则对于客户端它们根本不存在。使用 ipyvuetify 这是通过将元素输出到客户端来完成的。仅仅将它们作为 python（服务器端）对象是不够的。

[1]: https://www.w3.org/TR/WD-DOM/introduction.html#:~:text=The%20Document%20Object%20Model%20(DOM,document%20is%20accessed%20and%20manipulated .

对话框本身的按钮在第一次运行时消失：这似乎与 ipyvuetify 中当前插槽行为中的错误有关，如您的情况。在修复此错误之前，您通过在元素外部对接按钮并通过“on_click_v_btn_OPEN”功能链接它们来使用的解决方法目前是建议的解决方案。

于 2020-10-29T07:40:18.593 回答