github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
ant-design-vue/bad734c0.async.js

1 line
81 KiB
JavaScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{1216:function(t,s,a){},1312:function(t,s,a){"use strict";var n=a(1216);a.n(n).a},1455:function(t,s,a){"use strict";a.r(s);var n=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-popover title="Title">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <a-button type="primary">Hover me</a-button>\n </a-popover>\n',script:null,style:null,us:"\n#### Basic\nThe most basic example. The size of the floating layer depends on the contents region.\n",cn:"\n#### 基本\n最简单的用法，浮层的大小由内容区域决定。\n",sourceCode:'<template>\n <a-popover title="Title">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <a-button type="primary">Hover me</a-button>\n </a-popover>\n</template>\n'}}},[a("template",{slot:"component"},[a("a-popover",{attrs:{title:"Title"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("a-button",{attrs:{type:"primary"}},[t._v("Hover me")])],2)],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"基本"}},[t._v("基本 "),a("a",{staticClass:"anchor",attrs:{href:"#基本"}},[t._v("#")])]),t._v(" "),a("p",[t._v("最简单的用法，浮层的大小由内容区域决定。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Basic"}},[t._v("Basic "),a("a",{staticClass:"anchor",attrs:{href:"#Basic"}},[t._v("#")])]),t._v(" "),a("p",[t._v("The most basic example. The size of the floating layer depends on the contents region.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"primary"')]),t._v(">")]),t._v("Hover me"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n")])])])],2)]],2)};n._withStripped=!0;var l=a(31),e=Object(l.a)({},n,[],!1,null,null,null);e.options.__file="components/popover/demo/basic.md";var v=e.exports,p=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-popover placement="topLeft">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <span slot="title">Title</span>\n <a-button>Align edge / 边缘对齐</a-button>\n </a-popover>\n <a-popover placement="topLeft" arrowPointAtCenter="">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <span slot="title">Title</span>\n <a-button>Arrow points to center / 箭头指向中心</a-button>\n </a-popover>\n </div>\n',script:null,style:null,us:"\n#### Arrow pointing\nThe arrow points to the center of the target element, which set `arrowPointAtCenter`.\n",cn:"\n#### 箭头指向\n设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。\n",sourceCode:'<template>\n <div>\n <a-popover placement="topLeft">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <span slot="title">Title</span>\n <a-button>Align edge / 边缘对齐</a-button>\n </a-popover>\n <a-popover placement="topLeft" arrowPointAtCenter>\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <span slot="title">Title</span>\n <a-button>Arrow points to center / 箭头指向中心</a-button>\n </a-popover>\n </div>\n</template>\n'}}},[a("template",{slot:"component"},[a("div",[a("a-popover",{attrs:{placement:"topLeft"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Title")]),t._v(" "),a("a-button",[t._v("Align edge / 边缘对齐")])],2),t._v(" "),a("a-popover",{attrs:{placement:"topLeft",arrowPointAtCenter:""}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("span",{attrs:{slot:"title"},slot:"title"},[t._v("Title")]),t._v(" "),a("a-button",[t._v("Arrow points to center / 箭头指向中心")])],2)],1)]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"箭头指向"}},[t._v("箭头指向 "),a("a",{staticClass:"anchor",attrs:{href:"#箭头指向"}},[t._v("#")])]),t._v(" "),a("p",[t._v("设置了 "),a("code",[t._v("arrowPointAtCenter")]),t._v(" 后，箭头将指向目标元素的中心。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Arrow-pointing"}},[t._v("Arrow pointing "),a("a",{staticClass:"anchor",attrs:{href:"#Arrow-pointing"}},[t._v("#")])]),t._v(" "),a("p",[t._v("The arrow points to the center of the target element, which set "),a("code",[t._v("arrowPointAtCenter")]),t._v(".")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"topLeft"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("Title"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("Align edge / 边缘对齐"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"topLeft"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("arrowPointAtCenter")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("Title"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("Arrow points to center / 箭头指向中心"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n")])])])],2)]],2)};p._withStripped=!0;var _=Object(l.a)({},p,[],!1,null,null,null);_.options.__file="components/popover/demo/arrow-point-at-center.md";var i=_.exports,o=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-popover title="Title" trigger="click" v-model="visible">\n <a @click="hide" slot="content">Close</a>\n <a-button type="primary">Click me</a-button>\n </a-popover>\n',script:"\n export default {\n data() {\n return {\n visible: false,\n };\n },\n methods: {\n hide() {\n console.log(111);\n this.visible = false;\n },\n },\n };\n",style:null,us:"\n#### Controlling the close of the dialog\nUse `visible` prop to control the display of the card.\n",cn:"\n#### 从浮层内关闭\n使用 `visible` 属性控制浮层显示。\n",sourceCode:'<template>\n <a-popover title="Title" trigger="click" v-model="visible">\n <a @click="hide" slot="content">Close</a>\n <a-button type="primary">Click me</a-button>\n </a-popover>\n</template>\n\n<script>\n export default {\n data() {\n return {\n visible: false,\n };\n },\n methods: {\n hide() {\n console.log(111);\n this.visible = false;\n },\n },\n };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("a-popover",{attrs:{title:"Title",trigger:"click"},model:{value:t.visible,callback:function(s){t.visible=s},expression:"visible"}},[a("a",{attrs:{slot:"content"},on:{click:t.hide},slot:"content"},[t._v("Close")]),t._v(" "),a("a-button",{attrs:{type:"primary"}},[t._v("Click me")])],1)],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"从浮层内关闭"}},[t._v("从浮层内关闭 "),a("a",{staticClass:"anchor",attrs:{href:"#从浮层内关闭"}},[t._v("#")])]),t._v(" "),a("p",[t._v("使用 "),a("code",[t._v("visible")]),t._v(" 属性控制浮层显示。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Controlling-the-close-of-the-dialog"}},[t._v("Controlling the close of the dialog "),a("a",{staticClass:"anchor",attrs:{href:"#Controlling-the-close-of-the-dialog"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Use "),a("code",[t._v("visible")]),t._v(" prop to control the display of the card.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Title"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("trigger")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"click"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("v-model")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"visible"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"hide"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("Close"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"primary"')]),t._v(">")]),t._v("Click me"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("visible")]),t._v(": "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(",\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n hide() {\n "),a("span",{staticClass:"hljs-built_in"},[t._v("console")]),t._v(".log("),a("span",{staticClass:"hljs-number"},[t._v("111")]),t._v(");\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".visible = "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};o._withStripped=!0;var c={data:function(){return{visible:!1}},methods:{hide:function(){console.log(111),this.visible=!1}}},h=Object(l.a)(c,o,[],!1,null,null,null);h.options.__file="components/popover/demo/control.md";var C=h.exports,r=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div id="components-popover-demo-placement">\n <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: \'nowrap\' }">\n <a-popover placement="topLeft">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>TL</a-button>\n </a-popover>\n <a-popover placement="top">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>Top</a-button>\n </a-popover>\n <a-popover placement="topRight">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>TR</a-button>\n </a-popover>\n </div>\n <div :style="{ width: `${buttonWidth}px`, float: \'left\' }">\n <a-popover placement="leftTop">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>LT</a-button>\n </a-popover>\n <a-popover placement="left">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>Left</a-button>\n </a-popover>\n <a-popover placement="leftBottom">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>LB</a-button>\n </a-popover>\n </div>\n <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">\n <a-popover placement="rightTop">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>RT</a-button>\n </a-popover>\n <a-popover placement="right">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>Right</a-button>\n </a-popover>\n <a-popover placement="rightBottom">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>RB</a-button>\n </a-popover>\n </div>\n <div :style="{ marginLeft: `${buttonWidth}px`, clear: \'both\', whiteSpace: \'nowrap\' }">\n <a-popover placement="bottomLeft">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>BL</a-button>\n </a-popover>\n <a-popover placement="bottom">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>Bottom</a-button>\n </a-popover>\n <a-popover placement="bottomRight">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>BR</a-button>\n </a-popover>\n </div>\n </div>\n',script:"\n export default {\n data() {\n return {\n buttonWidth: 70,\n };\n },\n };\n",style:"\n #components-popover-demo-placement .ant-btn {\n width: 70px;\n text-align: center;\n padding: 0;\n margin-right: 8px;\n margin-bottom: 8px;\n }\n",us:"\n#### Placement\nThere are 12 `placement` options available.\n",cn:"\n#### 位置\n位置有十二个方向。\n",sourceCode:'<template>\n <div id="components-popover-demo-placement">\n <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: \'nowrap\' }">\n <a-popover placement="topLeft">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>TL</a-button>\n </a-popover>\n <a-popover placement="top">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>Top</a-button>\n </a-popover>\n <a-popover placement="topRight">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>TR</a-button>\n </a-popover>\n </div>\n <div :style="{ width: `${buttonWidth}px`, float: \'left\' }">\n <a-popover placement="leftTop">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>LT</a-button>\n </a-popover>\n <a-popover placement="left">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>Left</a-button>\n </a-popover>\n <a-popover placement="leftBottom">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>LB</a-button>\n </a-popover>\n </div>\n <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">\n <a-popover placement="rightTop">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>RT</a-button>\n </a-popover>\n <a-popover placement="right">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>Right</a-button>\n </a-popover>\n <a-popover placement="rightBottom">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>RB</a-button>\n </a-popover>\n </div>\n <div :style="{ marginLeft: `${buttonWidth}px`, clear: \'both\', whiteSpace: \'nowrap\' }">\n <a-popover placement="bottomLeft">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>BL</a-button>\n </a-popover>\n <a-popover placement="bottom">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>Bottom</a-button>\n </a-popover>\n <a-popover placement="bottomRight">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <template slot="title">\n <span>Title</span>\n </template>\n <a-button>BR</a-button>\n </a-popover>\n </div>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n buttonWidth: 70,\n };\n },\n };\n<\/script>\n<style>\n #components-popover-demo-placement .ant-btn {\n width: 70px;\n text-align: center;\n padding: 0;\n margin-right: 8px;\n margin-bottom: 8px;\n }\n</style>\n'}}},[a("template",{slot:"component"},[a("div",{attrs:{id:"components-popover-demo-placement"}},[a("div",{style:{marginLeft:t.buttonWidth+"px",whiteSpace:"nowrap"}},[a("a-popover",{attrs:{placement:"topLeft"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("template",{slot:"title"},[a("span",[t._v("Title")])]),t._v(" "),a("a-button",[t._v("TL")])],2),t._v(" "),a("a-popover",{attrs:{placement:"top"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("template",{slot:"title"},[a("span",[t._v("Title")])]),t._v(" "),a("a-button",[t._v("Top")])],2),t._v(" "),a("a-popover",{attrs:{placement:"topRight"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("template",{slot:"title"},[a("span",[t._v("Title")])]),t._v(" "),a("a-button",[t._v("TR")])],2)],1),t._v(" "),a("div",{style:{width:t.buttonWidth+"px",float:"left"}},[a("a-popover",{attrs:{placement:"leftTop"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("template",{slot:"title"},[a("span",[t._v("Title")])]),t._v(" "),a("a-button",[t._v("LT")])],2),t._v(" "),a("a-popover",{attrs:{placement:"left"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("template",{slot:"title"},[a("span",[t._v("Title")])]),t._v(" "),a("a-button",[t._v("Left")])],2),t._v(" "),a("a-popover",{attrs:{placement:"leftBottom"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("template",{slot:"title"},[a("span",[t._v("Title")])]),t._v(" "),a("a-button",[t._v("LB")])],2)],1),t._v(" "),a("div",{style:{width:t.buttonWidth+"px",marginLeft:4*t.buttonWidth+24+"px"}},[a("a-popover",{attrs:{placement:"rightTop"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("template",{slot:"title"},[a("span",[t._v("Title")])]),t._v(" "),a("a-button",[t._v("RT")])],2),t._v(" "),a("a-popover",{attrs:{placement:"right"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("template",{slot:"title"},[a("span",[t._v("Title")])]),t._v(" "),a("a-button",[t._v("Right")])],2),t._v(" "),a("a-popover",{attrs:{placement:"rightBottom"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("template",{slot:"title"},[a("span",[t._v("Title")])]),t._v(" "),a("a-button",[t._v("RB")])],2)],1),t._v(" "),a("div",{style:{marginLeft:t.buttonWidth+"px",clear:"both",whiteSpace:"nowrap"}},[a("a-popover",{attrs:{placement:"bottomLeft"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("template",{slot:"title"},[a("span",[t._v("Title")])]),t._v(" "),a("a-button",[t._v("BL")])],2),t._v(" "),a("a-popover",{attrs:{placement:"bottom"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("template",{slot:"title"},[a("span",[t._v("Title")])]),t._v(" "),a("a-button",[t._v("Bottom")])],2),t._v(" "),a("a-popover",{attrs:{placement:"bottomRight"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("template",{slot:"title"},[a("span",[t._v("Title")])]),t._v(" "),a("a-button",[t._v("BR")])],2)],1)])]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"位置"}},[t._v("位置 "),a("a",{staticClass:"anchor",attrs:{href:"#位置"}},[t._v("#")])]),t._v(" "),a("p",[t._v("位置有十二个方向。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Placement"}},[t._v("Placement "),a("a",{staticClass:"anchor",attrs:{href:"#Placement"}},[t._v("#")])]),t._v(" "),a("p",[t._v("There are 12 "),a("code",[t._v("placement")]),t._v(" options available.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("id")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"components-popover-demo-placement"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v("\"{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }\"")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"topLeft"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("Title"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("TL"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"top"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("Title"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("Top"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"topRight"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("Title"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("TR"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v("\"{ width: `${buttonWidth}px`, float: 'left' }\"")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"leftTop"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("Title"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("LT"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"left"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("Title"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("Left"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"leftBottom"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("Title"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("LB"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"rightTop"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("Title"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("RT"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"right"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("Title"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("Right"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"rightBottom"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("Title"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("RB"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v("\"{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }\"")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"bottomLeft"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("Title"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("BL"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"bottom"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("Title"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("Bottom"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("placement")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"bottomRight"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("Title"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("BR"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("buttonWidth")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("70")]),t._v(",\n };\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),a("span",{staticClass:"css"},[t._v("\n "),a("span",{staticClass:"hljs-selector-id"},[t._v("#components-popover-demo-placement")]),t._v(" "),a("span",{staticClass:"hljs-selector-class"},[t._v(".ant-btn")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("width")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("70px")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("text-align")]),t._v(": center;\n "),a("span",{staticClass:"hljs-attribute"},[t._v("padding")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("margin-right")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("8px")]),t._v(";\n "),a("span",{staticClass:"hljs-attribute"},[t._v("margin-bottom")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("8px")]),t._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};r._withStripped=!0;var m={data:function(){return{buttonWidth:70}}},j=(a(1312),Object(l.a)(m,r,[],!1,null,null,null));j.options.__file="components/popover/demo/placement.md";var g=j.exports,d=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-popover title="Title" trigger="hover">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <a-button type="primary">Hover me</a-button>\n </a-popover>\n <a-popover title="Title" trigger="focus">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <a-button type="primary">Focus me</a-button>\n </a-popover>\n <a-popover title="Title" trigger="click">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <a-button type="primary">Click me</a-button>\n </a-popover>\n </div>\n',script:null,style:null,us:"\n#### Three ways to trigger\nMouse to click, focus and move in.\n",cn:"\n#### 三种触发方式\n鼠标移入、聚集、点击。\n",sourceCode:'<template>\n <div>\n <a-popover title="Title" trigger="hover">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <a-button type="primary">Hover me</a-button>\n </a-popover>\n <a-popover title="Title" trigger="focus">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <a-button type="primary">Focus me</a-button>\n </a-popover>\n <a-popover title="Title" trigger="click">\n <template slot="content">\n <p>Content</p>\n <p>Content</p>\n </template>\n <a-button type="primary">Click me</a-button>\n </a-popover>\n </div>\n</template>\n'}}},[a("template",{slot:"component"},[a("div",[a("a-popover",{attrs:{title:"Title",trigger:"hover"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("a-button",{attrs:{type:"primary"}},[t._v("Hover me")])],2),t._v(" "),a("a-popover",{attrs:{title:"Title",trigger:"focus"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("a-button",{attrs:{type:"primary"}},[t._v("Focus me")])],2),t._v(" "),a("a-popover",{attrs:{title:"Title",trigger:"click"}},[a("template",{slot:"content"},[a("p",[t._v("Content")]),t._v(" "),a("p",[t._v("Content")])]),t._v(" "),a("a-button",{attrs:{type:"primary"}},[t._v("Click me")])],2)],1)]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"三种触发方式"}},[t._v("三种触发方式 "),a("a",{staticClass:"anchor",attrs:{href:"#三种触发方式"}},[t._v("#")])]),t._v(" "),a("p",[t._v("鼠标移入、聚集、点击。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Three-ways-to-trigger"}},[t._v("Three ways to trigger "),a("a",{staticClass:"anchor",attrs:{href:"#Three-ways-to-trigger"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Mouse to click, focus and move in.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Title"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("trigger")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"hover"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"primary"')]),t._v(">")]),t._v("Hover me"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Title"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("trigger")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"focus"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"primary"')]),t._v(">")]),t._v("Focus me"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Title"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("trigger")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"click"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("Content"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"primary"')]),t._v(">")]),t._v("Click me"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n")])])])],2)]],2)};d._withStripped=!0;var u=Object(l.a)({},d,[],!1,null,null,null);u.options.__file="components/popover/demo/triggerType.md";var b=u.exports,f=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-popover style="width: 500px" title="Hover title" trigger="hover" :visible="hovered" @visibleChange="handleHoverChange">\n <div slot="content">This is hover content.</div>\n <a-popover title="Click title" trigger="click" :visible="clicked" @visibleChange="handleClickChange">\n <div slot="content">\n <div>This is click content.</div>\n <a @click="hide">Close</a>\n </div>\n <a-button>Hover and click / 悬停并单击</a-button>\n </a-popover>\n </a-popover>\n',script:"\n export default {\n data() {\n return {\n clicked: false,\n hovered: false,\n };\n },\n methods: {\n hide() {\n this.clicked = false;\n this.hovered = false;\n },\n handleHoverChange(visible) {\n this.clicked = false;\n this.hovered = visible;\n },\n handleClickChange(visible) {\n this.clicked = visible;\n this.hovered = false;\n },\n },\n };\n",style:null,us:"\n#### Hover with click popover\nThe following example shows how to create a popover which can be hovered and clicked.\n",cn:"\n#### 悬停点击弹出窗口\n以下示例显示如何创建可悬停和单击的弹出窗口。\n",sourceCode:'<template>\n <a-popover\n style="width: 500px"\n title="Hover title"\n trigger="hover"\n :visible="hovered"\n @visibleChange="handleHoverChange"\n >\n <div slot="content">This is hover content.</div>\n <a-popover\n title="Click title"\n trigger="click"\n :visible="clicked"\n @visibleChange="handleClickChange"\n >\n <div slot="content">\n <div>This is click content.</div>\n <a @click="hide">Close</a>\n </div>\n <a-button>Hover and click / 悬停并单击</a-button>\n </a-popover>\n </a-popover>\n</template>\n<script>\n export default {\n data() {\n return {\n clicked: false,\n hovered: false,\n };\n },\n methods: {\n hide() {\n this.clicked = false;\n this.hovered = false;\n },\n handleHoverChange(visible) {\n this.clicked = false;\n this.hovered = visible;\n },\n handleClickChange(visible) {\n this.clicked = visible;\n this.hovered = false;\n },\n },\n };\n<\/script>\n'}}},[a("template",{slot:"component"},[a("a-popover",{staticStyle:{width:"500px"},attrs:{title:"Hover title",trigger:"hover",visible:t.hovered},on:{visibleChange:t.handleHoverChange}},[a("div",{attrs:{slot:"content"},slot:"content"},[t._v("This is hover content.")]),t._v(" "),a("a-popover",{attrs:{title:"Click title",trigger:"click",visible:t.clicked},on:{visibleChange:t.handleClickChange}},[a("div",{attrs:{slot:"content"},slot:"content"},[a("div",[t._v("This is click content.")]),t._v(" "),a("a",{on:{click:t.hide}},[t._v("Close")])]),t._v(" "),a("a-button",[t._v("Hover and click / 悬停并单击")])],1)],1)],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"悬停点击弹出窗口"}},[t._v("悬停点击弹出窗口 "),a("a",{staticClass:"anchor",attrs:{href:"#悬停点击弹出窗口"}},[t._v("#")])]),t._v(" "),a("p",[t._v("以下示例显示如何创建可悬停和单击的弹出窗口。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Hover-with-click-popover"}},[t._v("Hover with click popover "),a("a",{staticClass:"anchor",attrs:{href:"#Hover-with-click-popover"}},[t._v("#")])]),t._v(" "),a("p",[t._v("The following example shows how to create a popover which can be hovered and clicked.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"width: 500px"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Hover title"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("trigger")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"hover"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":visible")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"hovered"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("@visibleChange")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"handleHoverChange"')]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("This is hover content."),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"Click title"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("trigger")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"click"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v(":visible")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"clicked"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("@visibleChange")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"handleClickChange"')]),t._v("\n >")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"content"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("This is click content."),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"hide"')]),t._v(">")]),t._v("Close"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("Hover and click / 悬停并单击"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-popover")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("clicked")]),t._v(": "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("hovered")]),t._v(": "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(",\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n hide() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".clicked = "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".hovered = "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n },\n handleHoverChange(visible) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".clicked = "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".hovered = visible;\n },\n handleClickChange(visible) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".clicked = visible;\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".hovered = "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n")])])])],2)]],2)};f._withStripped=!0;var T={data:function(){return{clicked:!1,hovered:!1}},methods:{hide:function(){this.clicked=!1,this.hovered=!1},handleHoverChange:function(t){this.clicked=!1,this.hovered=t},handleClickChange:function(t){this.clicked=t,this.hovered=!1}}},y=Object(l.a)(T,f,[],!1,null,null,null);y.options.__file="components/popover/demo/hover-with-click.md";var k=y.exports,w=function(){var t=this.$createElement;this._self._c;return this._m(0)};w._withStripped=!0;var x=Object(l.a)({},w,[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[a("h2",{attrs:{id:"API"}},[t._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("参数")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("content")]),t._v(" "),a("td",[t._v("卡片内容")]),t._v(" "),a("td",[t._v("string|slot|VNode")]),t._v(" "),a("td",[t._v("无")])]),t._v(" "),a("tr",[a("td",[t._v("title")]),t._v(" "),a("td",[t._v("卡片标题")]),t._v(" "),a("td",[t._v("string|slot|VNode")]),t._v(" "),a("td",[t._v("无")])])])]),t._v(" "),a("p",[t._v("更多属性请参考 "),a("a",{attrs:{href:"/components/tooltip-cn/#API"}},[t._v("Tooltip")]),t._v("。")]),t._v(" "),a("h2",{attrs:{id:"注意"}},[t._v("注意 "),a("a",{staticClass:"anchor",attrs:{href:"#注意"}},[t._v("#")])]),t._v(" "),a("p",[t._v("请确保 "),a("code",{pre:!0},[t._v("Popover")]),t._v(" 的子元素能接受 "),a("code",{pre:!0},[t._v("mouseenter")]),t._v("、"),a("code",{pre:!0},[t._v("mouseleave")]),t._v("、"),a("code",{pre:!0},[t._v("focus")]),t._v("、"),a("code",{pre:!0},[t._v("click")]),t._v(" 事件。")])])}],!1,null,null,null);x.options.__file="components/popover/index.zh-CN.md";var L=x.exports,B=function(){var t=this.$createElement;this._self._c;return this._m(0)};B._withStripped=!0;var A=Object(l.a)({},B,[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[a("h2",{attrs:{id:"API"}},[t._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Param")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Default value")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("content")]),t._v(" "),a("td",[t._v("Content of the card")]),t._v(" "),a("td",[t._v("string|slot|vNode")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("title")]),t._v(" "),a("td",[t._v("Title of the card")]),t._v(" "),a("td",[t._v("string|slot|VNode")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("p",[t._v("Consult "),a("a",{attrs:{href:"/components/tooltip/#API"}},[t._v("Tooltip's documentation")]),t._v(" to find more APIs.")]),t._v(" "),a("h2",{attrs:{id:"Note"}},[t._v("Note "),a("a",{staticClass:"anchor",attrs:{href:"#Note"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Please ensure that the child node of "),a("code",{pre:!0},[t._v("Popover")]),t._v(" accepts "),a("code",{pre:!0},[t._v("onMouseenter")]),t._v(", "),a("code",{pre:!0},[t._v("onMouseleave")]),t._v(", "),a("code",{pre:!0},[t._v("onFocus")]),t._v(", "),a("code",{pre:!0},[t._v("onClick")]),t._v(" events.")])])}],!1,null,null,null);A.options.__file="components/popover/index.en-US.md";var P=A.exports,H="# Popover\n\n 点击/鼠标移入元素，弹出气泡式的卡片浮层。\n\n## 何时使用\n\n当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。\n\n和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。\n ## 代码演示",R="# Popover\n\n The floating card popped by clicking or hovering.\n\n## When To Use\n\nA simple popup menu to provide extra information or operations.\n\nComparing with `Tooltip`, besides information `Popover` card can also provide action elements like links and buttons.\n## Examples\n ",W={category:"Components",subtitle:"气泡卡片",type:"Data Display",title:"Popover",render:function(){var t=arguments[0];return t("div",[t("md",{attrs:{cn:H,us:R}}),t(v),t(i),t(C),t(g),t(b),t(k),t("api",[t("template",{slot:"cn"},[t(L)]),t(P)])])}},$=Object(l.a)(W,void 0,void 0,!1,null,null,null);$.options.__file="components/popover/demo/index.vue";s.default=$.exports}}]);
Reference in New Issue View Git Blame Copy Permalink