doc_project/2x.antv.design/assets/faq.en-US.93c2f4d1.js

import{_ as o,a as t,n,k as i}from"./index.c1b9962e.js";const a={pageData:{title:"FAQ",description:"",frontmatter:{},headers:[{level:3,title:"Are you going to provide Sass/Stylus(etc...) style file?",slug:"are-you-going-to-provide-sass-stylus-etc-style-file",content:"No, actually, you can convert Less to Sass/Stylus(etc...) with tools (which you can Google)."},{level:3,title:"How to use DatePicker with dayjs",slug:"how-to-use-datepicker-with-dayjs",content:"We also provide another implementation, which we provide with antd-dayjs-webpack-plugin, replacing momentjs with Day.js directly without changing a line of existing code. More info can be found at [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin)."},{level:3,title:"Internationalization does not take effect?",slug:"internationalization-does-not-take-effect",content:"The language pack provided by the component does not affect date formatting. You need to import the moment language pack and apply it. Refer to the `ConfigProvider` component. If you use Vite as a build tool, because Vite is not yet complete, you need to additionally execute `npm i --save moment` in your project to install it."},{level:3,title:"Select Dropdown DatePicker TimePicker Popover Popconfirm disappear when I click another popup component inside it, How to resolve it?",slug:"select-dropdown-datepicker-timepicker-popover-popconfirm-disappear-when-i-click-another-popup-component-inside-it-how-to-resolve-it",content:'Use `<a-select :getPopupContainer="trigger => trigger.parentNode">` to render component inside Popover. (Or other getXxxxContainer props)'},{level:3,title:"Select Dropdown DatePicker TimePicker Popover Popconfirm scroll with the page?",slug:"select-dropdown-datepicker-timepicker-popover-popconfirm-scroll-with-the-page",content:'Use `<a-select :getPopupContainer="trigger => trigger.parentNode">` to render component inside the scroll area. (Or other getXxxxContainer props).'},{level:3,title:"How to modify the default theme of Ant Design Vue?",slug:"how-to-modify-the-default-theme-of-ant-design-vue",content:"See [Customize Theme](/docs/vue/customize-theme/)."},{level:3,title:"How to optimize momentjs bundle size with webpack?",slug:"how-to-optimize-momentjs-bundle-size-with-webpack",content:"See: https://github.com/jmblog/how-to-optimize-momentjs-with-webpack"},{level:3,title:"It doesn't work when I change defaultValue,defaultOpenKeys, initialValue dynamically.",slug:"it-doesn-t-work-when-i-change-defaultvalue-defaultopenkeys-initialvalue-dynamically",content:"The `defaultXxxx` (like `defaultValue`) of `Input`/`Select`(etc...) only works in first render. This feature is referenced from [React](https://facebook.github.io/react/docs/forms.html#controlled-components)."},{level:3,title:"I set the value of Input/Select(etc...), and then, it cannot be changed by user's action.",slug:"i-set-the-value-of-input-select-etc-and-then-it-cannot-be-changed-by-user-s-action",content:"Try `defaultValue` or `change` or `v-model` to change `value`."},{level:3,title:"ant-design-vue override my global styles!",slug:"ant-design-vue-override-my-global-styles",content:"Yes, ant-design-vue is designed to develop a complete background application, we override some global styles for styling convenience, and it can't be removed now. More info trace https://github.com/ant-design/ant-design/issues/4331 ."},{level:3,title:"ant-design-vue makes only poor user experience on mobile.",slug:"ant-design-vue-makes-only-poor-user-experience-on-mobile",content:"`ant-design-vue` is not designed for mobile."},{level:3,title:"When I set mode to DatePicker/RangePicker, I cannot select year or month anymore?",slug:"when-i-set-mode-to-datepicker-rangepicker-i-cannot-select-year-or-month-anymore",content:"In a real world development, you may need a YearPicker, MonthRangePicker or WeekRangePicker. You are trying to add `mode` to DatePicker/RangePicker expected to implement those pickers. However, the DatePicker/RangePicker cannot be selected and the panels won't close now."}],relativePath:"src/vueDocs/faq.en-US.md",content:"# FAQ\n\nHere are the frequently asked questions about Ant Design Vue that you should look up before you ask in community or create new issue.\n\n### Are you going to provide Sass/Stylus(etc...) style file?\n\nNo, actually, you can convert Less to Sass/Stylus(etc...) with tools (which you can Google).\n\n### How to use DatePicker with dayjs\n\nWe also provide another implementation, which we provide with antd-dayjs-webpack-plugin, replacing momentjs with Day.js directly without changing a line of existing code. More info can be found at [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin).\n\n### Internationalization does not take effect?\n\nThe language pack provided by the component does not affect date formatting. You need to import the moment language pack and apply it. Refer to the `ConfigProvider` component. If you use Vite as a build tool, because Vite is not yet complete, you need to additionally execute `npm i --save moment` in your project to install it.\n\n### `Select Dropdown DatePicker TimePicker Popover Popconfirm` disappear when I click another popup component inside it, How to resolve it?\n\nUse `&lt;a-select :getPopupContainer=&quot;trigger =&gt; trigger.parentNode&quot;&gt;` to render component inside Popover. (Or other getXxxxContainer props)\n\n### `Select Dropdown DatePicker TimePicker Popover Popconfirm` scroll with the page?\n\nUse `&lt;a-select :getPopupContainer=&quot;trigger =&gt; trigger.parentNode&quot;&gt;` to render component inside the scroll area. (Or other getXxxxContainer props).\n\n### How to modify the default theme of Ant Design Vue?\n\nSee [Customize Theme](/docs/vue/customize-theme/).\n\n### How to optimize momentjs bundle size with webpack?\n\nSee: https://github.com/jmblog/how-to-optimize-momentjs-with-webpack\n\n### It doesn&#39;t work when I change `defaultValue`,`defaultOpenKeys`, `initialValue` dynamically.\n\nThe `defaultXxxx` (like `defaultValue`) of `Input`/`Select`(etc...) only works in first render. This feature is referenced from [React](https://facebook.github.io/react/docs/forms.html#controlled-components).\n\n### I set the `value` of `Input`/`Select`(etc...), and then, it cannot be changed by user&#39;s action.\n\nTry `defaultValue` or `change` or `v-model` to change `value`.\n\n### ant-design-vue override my global styles!\n\nYes, ant-design-vue is designed to develop a complete background application, we override some global styles for styling convenience, and it can&#39;t be removed now. More info trace https://github.com/ant-design/ant-design/issues/4331 .\n\nOr, follow the instructions in [How to avoid modifying global styles?](docs/react/customize-theme#How-to-avoid-modifying-global-styles-?)\n\n### `ant-design-vue` makes only poor user experience on mobile.\n\n`ant-design-vue` is not designed for mobile.\n\n### When I set `mode` to DatePicker/RangePicker, I cannot select year or month anymore?\n\nIn a real world development, you may need a YearPicker, MonthRangePicker or WeekRangePicker. You are trying to add `mode` to DatePicker/RangePicker expected to implement those pickers. However, the DatePicker/RangePicker cannot be selected and the panels won&#39;t close now.\n\nThat is because `&lt;DatePicker mode=&quot;year&quot; /&gt;` do not equal to `YearPicker`, `&lt;RangePicker mode=&quot;month&quot; /&gt;` do not equal to `MonthRangePicker` either. The `mode` property was added to support [showing time picker panel in DatePicker](https://github.com/ant-design/ant-design/issues/5190), which simply control the displayed panel and won&#39;t change the original date picking behavior of `DatePicker/RangePicker` (for instance you still need to click date cell to finish selection in a DatePicker, whatever the `mode` is).\n\n##### Solution\n\nThe following articles are the implementation articles of the react version, the ideas are the same. In [one article](https://juejin.im/post/5cf65c366fb9a07eca6968f9) or [another article](https://www.cnblogs.com/zyl-Tara/p/10197177.html) approach, using methods `mode` and `panelChange` to encapsulate a component such as `YearPicker`. We plan to add more date related components directly in ant-design-vue@2.0 to support these needs.\n",html:`<h1 id="faq">FAQ</h1>
<p>Here are the frequently asked questions about Ant Design Vue that you should look up before you ask in community or create new issue.</p>
<h3 id="are-you-going-to-provide-sass-stylus-etc-style-file">Are you going to provide Sass/Stylus(etc...) style file?</h3>
<p>No, actually, you can convert Less to Sass/Stylus(etc...) with tools (which you can Google).</p>
<h3 id="how-to-use-datepicker-with-dayjs">How to use DatePicker with dayjs</h3>
<p>We also provide another implementation, which we provide with antd-dayjs-webpack-plugin, replacing momentjs with Day.js directly without changing a line of existing code. More info can be found at <a href="https://github.com/ant-design/antd-dayjs-webpack-plugin" target="_blank" rel="noopener noreferrer">antd-dayjs-webpack-plugin</a>.</p>
<h3 id="internationalization-does-not-take-effect">Internationalization does not take effect?</h3>
<p>The language pack provided by the component does not affect date formatting. You need to import the moment language pack and apply it. Refer to the <code>ConfigProvider</code> component. If you use Vite as a build tool, because Vite is not yet complete, you need to additionally execute <code>npm i --save moment</code> in your project to install it.</p>
<h3 id="select-dropdown-datepicker-timepicker-popover-popconfirm-disappear-when-i-click-another-popup-component-inside-it-how-to-resolve-it"><code>Select Dropdown DatePicker TimePicker Popover Popconfirm</code> disappear when I click another popup component inside it, How to resolve it?</h3>
<p>Use <code>&lt;a-select :getPopupContainer=&quot;trigger =&gt; trigger.parentNode&quot;&gt;</code> to render component inside Popover. (Or other getXxxxContainer props)</p>
<h3 id="select-dropdown-datepicker-timepicker-popover-popconfirm-scroll-with-the-page"><code>Select Dropdown DatePicker TimePicker Popover Popconfirm</code> scroll with the page?</h3>
<p>Use <code>&lt;a-select :getPopupContainer=&quot;trigger =&gt; trigger.parentNode&quot;&gt;</code> to render component inside the scroll area. (Or other getXxxxContainer props).</p>
<h3 id="how-to-modify-the-default-theme-of-ant-design-vue">How to modify the default theme of Ant Design Vue?</h3>
<p>See <a href="/docs/vue/customize-theme/">Customize Theme</a>.</p>
<h3 id="how-to-optimize-momentjs-bundle-size-with-webpack">How to optimize momentjs bundle size with webpack?</h3>
<p>See: <a href="https://github.com/jmblog/how-to-optimize-momentjs-with-webpack" target="_blank" rel="noopener noreferrer">https://github.com/jmblog/how-to-optimize-momentjs-with-webpack</a></p>
<h3 id="it-doesn-t-work-when-i-change-defaultvalue-defaultopenkeys-initialvalue-dynamically">It doesn't work when I change <code>defaultValue</code>,<code>defaultOpenKeys</code>, <code>initialValue</code> dynamically.</h3>
<p>The <code>defaultXxxx</code> (like <code>defaultValue</code>) of <code>Input</code>/<code>Select</code>(etc...) only works in first render. This feature is referenced from <a href="https://facebook.github.io/react/docs/forms.html#controlled-components" target="_blank" rel="noopener noreferrer">React</a>.</p>
<h3 id="i-set-the-value-of-input-select-etc-and-then-it-cannot-be-changed-by-user-s-action">I set the <code>value</code> of <code>Input</code>/<code>Select</code>(etc...), and then, it cannot be changed by user's action.</h3>
<p>Try <code>defaultValue</code> or <code>change</code> or <code>v-model</code> to change <code>value</code>.</p>
<h3 id="ant-design-vue-override-my-global-styles">ant-design-vue override my global styles!</h3>
<p>Yes, ant-design-vue is designed to develop a complete background application, we override some global styles for styling convenience, and it can't be removed now. More info trace <a href="https://github.com/ant-design/ant-design/issues/4331" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design/issues/4331</a> .</p>
<p>Or, follow the instructions in <a href="./docs/react/customize-theme.html#How-to-avoid-modifying-global-styles-?">How to avoid modifying global styles?</a></p>
<h3 id="ant-design-vue-makes-only-poor-user-experience-on-mobile"><code>ant-design-vue</code> makes only poor user experience on mobile.</h3>
<p><code>ant-design-vue</code> is not designed for mobile.</p>
<h3 id="when-i-set-mode-to-datepicker-rangepicker-i-cannot-select-year-or-month-anymore">When I set <code>mode</code> to DatePicker/RangePicker, I cannot select year or month anymore?</h3>
<p>In a real world development, you may need a YearPicker, MonthRangePicker or WeekRangePicker. You are trying to add <code>mode</code> to DatePicker/RangePicker expected to implement those pickers. However, the DatePicker/RangePicker cannot be selected and the panels won't close now.</p>
<p>That is because <code>&lt;DatePicker mode=&quot;year&quot; /&gt;</code> do not equal to <code>YearPicker</code>, <code>&lt;RangePicker mode=&quot;month&quot; /&gt;</code> do not equal to <code>MonthRangePicker</code> either. The <code>mode</code> property was added to support <a href="https://github.com/ant-design/ant-design/issues/5190" target="_blank" rel="noopener noreferrer">showing time picker panel in DatePicker</a>, which simply control the displayed panel and won't change the original date picking behavior of <code>DatePicker/RangePicker</code> (for instance you still need to click date cell to finish selection in a DatePicker, whatever the <code>mode</code> is).</p>
<h5 id="solution">Solution</h5>
<p>The following articles are the implementation articles of the react version, the ideas are the same. In <a href="https://juejin.im/post/5cf65c366fb9a07eca6968f9" target="_blank" rel="noopener noreferrer">one article</a> or <a href="https://www.cnblogs.com/zyl-Tara/p/10197177.html" target="_blank" rel="noopener noreferrer">another article</a> approach, using methods <code>mode</code> and <code>panelChange</code> to encapsulate a component such as <code>YearPicker</code>. We plan to add more date related components directly in ant-design-vue@2.0 to support these needs.</p>
`,lastUpdated:1748059052828}},r={class:"markdown"};function c(d,e,s,l,p,h){return i(),t("article",r,e[0]||(e[0]=[n('<h1 id="faq">FAQ</h1><p>Here are the frequently asked questions about Ant Design Vue that you should look up before you ask in community or create new issue.</p><h3 id="are-you-going-to-provide-sass-stylus-etc-style-file">Are you going to provide Sass/Stylus(etc...) style file?</h3><p>No, actually, you can convert Less to Sass/Stylus(etc...) with tools (which you can Google).</p><h3 id="how-to-use-datepicker-with-dayjs">How to use DatePicker with dayjs</h3><p>We also provide another implementation, which we provide with antd-dayjs-webpack-plugin, replacing momentjs with Day.js directly without changing a line of existing code. More info can be found at <a href="https://github.com/ant-design/antd-dayjs-webpack-plugin" target="_blank" rel="noopener noreferrer">antd-dayjs-webpack-plugin</a>.</p><h3 id="internationalization-does-not-take-effect">Internationalization does not take effect?</h3><p>The language pack provided by the component does not affect date formatting. You need to import the moment language pack and apply it. Refer to the <code>ConfigProvider</code> component. If you use Vite as a build tool, because Vite is not yet complete, you need to additionally execute <code>npm i --save moment</code> in your project to install it.</p><h3 id="select-dropdown-datepicker-timepicker-popover-popconfirm-disappear-when-i-click-another-popup-component-inside-it-how-to-resolve-it"><code>Select Dropdown DatePicker TimePicker Popover Popconfirm</code> disappear when I click another popup component inside it, How to resolve it?</h3><p>Use <code>&lt;a-select :getPopupContainer=&quot;trigger =&gt; trigger.parentNode&quot;&gt;</code> to render component inside Popover. (Or other getXxxxContainer props)</p><h3 id="select-dropdown-datepicker-timepicker-popover-popconfirm-scroll-with-the-page"><code>Select Dropdown DatePicker TimePicker Popover Popconfirm</code> scroll with the page?</h3><p>Use <code>&lt;a-select :getPopupContainer=&quot;trigger =&gt; trigger.parentNode&quot;&gt;</code> to render component inside the scroll area. (Or other getXxxxContainer props).</p><h3 id="how-to-modify-the-default-theme-of-ant-design-vue">How to modify the default theme of Ant Design Vue?</h3><p>See <a href="/docs/vue/customize-theme/">Customize Theme</a>.</p><h3 id="how-to-optimize-momentjs-bundle-size-with-webpack">How to optimize momentjs bundle size with webpack?</h3><p>See: <a href="https://github.com/jmblog/how-to-optimize-momentjs-with-webpack" target="_blank" rel="noopener noreferrer">https://github.com/jmblog/how-to-optimize-momentjs-with-webpack</a></p><h3 id="it-doesn-t-work-when-i-change-defaultvalue-defaultopenkeys-initialvalue-dynamically">It doesn&#39;t work when I change <code>defaultValue</code>,<code>defaultOpenKeys</code>, <code>initialValue</code> dynamically.</h3><p>The <code>defaultXxxx</code> (like <code>defaultValue</code>) of <code>Input</code>/<code>Select</code>(etc...) only works in first render. This feature is referenced from <a href="https://facebook.github.io/react/docs/forms.html#controlled-components" target="_blank" rel="noopener noreferrer">React</a>.</p><h3 id="i-set-the-value-of-input-select-etc-and-then-it-cannot-be-changed-by-user-s-action">I set the <code>value</code> of <code>Input</code>/<code>Select</code>(etc...), and then, it cannot be changed by user&#39;s action.</h3><p>Try <code>defaultValue</code> or <code>change</code> or <code>v-model</code> to change <code>value</code>.</p><h3 id="ant-design-vue-override-my-global-styles">ant-design-vue override my global styles!</h3><p>Yes, ant-design-vue is designed to develop a complete background application, we override some global styles for styling convenience, and it can&#39;t be removed now. More info trace <a href="https://github.com/ant-design/ant-design/issues/4331" target="_blank" rel="noopener noreferrer">https://github.com/ant-design/ant-design/issues/4331</a> .</p><p>Or, follow the instructions in <a href="./docs/react/customize-theme.html#How-to-avoid-modifying-global-styles-?">How to avoid modifying global styles?</a></p><h3 id="ant-design-vue-makes-only-poor-user-experience-on-mobile"><code>ant-design-vue</code> makes only poor user experience on mobile.</h3><p><code>ant-design-vue</code> is not designed for mobile.</p><h3 id="when-i-set-mode-to-datepicker-rangepicker-i-cannot-select-year-or-month-anymore">When I set <code>mode</code> to DatePicker/RangePicker, I cannot select year or month anymore?</h3><p>In a real world development, you may need a YearPicker, MonthRangePicker or WeekRangePicker. You are trying to add <code>mode</code> to DatePicker/RangePicker expected to implement those pickers. However, the DatePicker/RangePicker cannot be selected and the panels won&#39;t close now.</p><p>That is because <code>&lt;DatePicker mode=&quot;year&quot; /&gt;</code> do not equal to <code>YearPicker</code>, <code>&lt;RangePicker mode=&quot;month&quot; /&gt;</code> do not equal to <code>MonthRangePicker</code> either. The <code>mode</code> property was added to support <a href="https://github.com/ant-design/ant-design/issues/5190" target="_blank" rel="noopener noreferrer">showing time picker panel in DatePicker</a>, which simply control the displayed panel and won&#39;t change the original date picking behavior of <code>DatePicker/RangePicker</code> (for instance you still need to click date cell to finish selection in a DatePicker, whatever the <code>mode</code> is).</p><h5 id="solution">Solution</h5><p>The following articles are the implementation articles of the react version, the ideas are the same. In <a href="https://juejin.im/post/5cf65c366fb9a07eca6968f9" target="_blank" rel="noopener noreferrer">one article</a> or <a href="https://www.cnblogs.com/zyl-Tara/p/10197177.html" target="_blank" rel="noopener noreferrer">another article</a> approach, using methods <code>mode</code> and <code>panelChange</code> to encapsulate a component such as <code>YearPicker</code>. We plan to add more date related components directly in ant-design-vue@2.0 to support these needs.</p>',30)]))}var m=o(a,[["render",c]]);export{m as default};