method="dialog" 作用是点击按钮时自动调用父级 的 close() 方法，无需 javascript；需满足：dialog 已通过 showmodal() 或 show() 显示、按钮为 submit 类型且在 dialog 直接子树内、关闭后可通过 dialog.returnvalue 获取按钮 value 值。
dialog 元素里 method="dialog" 是什么作用
它不是表单提交方法，而是告诉浏览器：点击这个 <button></button> 时，自动调用父级 <dialog></dialog> 的 close() 方法，无需写 JS。前提是按钮必须在 <dialog></dialog> 内部，且 type="submit"（默认就是 submit）。
为什么点不了、关不掉？常见失效场景
看似加了 method="dialog" 却没反应，大概率踩了这几个坑：
-
<dialog></dialog>没调用过showModal()或show()—— 只有被“显示”后，内部的method="dialog"才生效；display: none或未插入 DOM 时无效 - 按钮不在
<dialog></dialog>直接子树内 —— 比如套了额外<div> 但忘了设 <code>role="none"或影响事件冒泡，导致浏览器找不到宿主 dialog - 用了
type="button"—— 必须是type="submit"（显式声明或靠默认值），type="button"会直接忽略method属性 - dialog 被
open属性控制但没调用 JS 显示 —— 仅靠open属性打开的 dialog，method="dialog"仍有效，但需确保元素已渲染完成（避免 Vue/React 中节点异步挂载未就绪）
最简可行示例与关键细节
下面这段 HTML 点击 “Close” 就能关闭 dialog，零 JS：
<dialog id="myDialog"><p>Hello, world</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<form method="dialog">
<button type="submit">Close</button>
</form>
</dialog><button onclick="myDialog.showModal()">Open</button>
注意三点：
-
<form method="dialog"></form>是推荐写法 —— 它让整个表单提交行为触发 dialog 关闭，比单个按钮更健壮（支持回车提交） - 按钮必须是
<form></form>的后代，且type="submit"；<input type="submit">同样有效 - 如果不用
<form></form>，直接写<button formmethod="dialog"></button>也行，但兼容性略差（Safari 16.4+ 才支持formmethod）
关闭后如何获取按钮值？
当用户点击 method="dialog" 按钮时，dialog 的 close() 会被调用，并把按钮的 value 作为参数传入。所以你可以这样取值：
myDialog.addEventListener('close', () => {
console.log(myDialog.returnValue); // "cancel" / "confirm" / 自定义 value
});
这意味着：<button type="submit" value="confirm">OK</button> 关闭后，myDialog.returnValue === 'confirm'；没设 value 就是空字符串。这个机制常用来区分“确定”和“取消”操作，但要注意：只有通过 method="dialog" 触发的关闭才带值，JS 调用 close() 不带。
别漏掉 returnValue —— 它不会自动绑定到按钮 click 事件，只存在于 dialog 的 close 事件上下文里。
