fix(theme): select-dropdown's wrap dom add overflow = auto (#4015)

* fix(theme): select-dropdown's wrap dom add overflow = auto

* fix(icon): add icon's demo description

* fix(icon): add icon's demo descriptions

Author: shenjunjian

examples/sites/demos/pc/app/icon/webdoc/icon.js

@@ -12,25 +12,27 @@ export default {
       },
       desc: {
         'zh-CN': `
-          从 <code>@opentiny/vue-icon</code> 图标库中引入图标函数。图标函数执行后生成一个有效的 <code> Vue </code> 图标组件，可以在模板中使用。<br>
+          从 <code>@opentiny/vue-icon</code> 图标库中引入图标函数，图标函数执行后生成一个有效的 <code> Vue </code> 图标组件，可以在模板中使用。在组件内应该保存图标组件的变量用于绑定，要避免在模板上直接绑定图标函数的执行。<br>
           通过修改图标的 <code>font-size</code> 的样式，指定图标的大小，通过修改<code>fill</code> 的样式指定图标的颜色。
           <div class="tip custom-block">
             <p class="custom block title"> 常见的图标使用方式 </p>
             以 <code>Shared</code>图标组件为例：<br>
             1、在模板中通过标签式引入。比如 <code> &lt;tiny-shared /&gt; </code> <br>
             2、在模板中通过<code> &lt;component&gt; </code> 组件引入。比如 <code> &lt;component :is="tinyShared" /&gt; </code> <br>
             3、在组件属性中传入。比如 <code> &lt;tiny-button :icon="tinyShared" &gt; </code> <br>
+            4、避免模板绑定图标函数的执行。不建议 <code> &lt;component :is="IconShared()" /&gt; </code> 
           </div>
         `,
         'en-US': `
-          Introduce icon functions from the <code>@opentiny/vue-icon</code> icon library. The execution of the icon function generates a valid <code> Vue </code> icon component that can be used in the template. <br>
+          Introduce icon functions from the <code>@opentiny/vue-icon</code> icon library. The execution of the icon function generates a valid <code> Vue </code> icon component that can be used in the template.Save the icon component variables for binding within the component. Avoid directly binding the icon function execution on the template. <br>
           Specify the size of the icon by modifying the <code>font-size</code> style, and specify the color of the icon by modifying <code>fill</code>.
           <div class="tip custom-block">
             <p class="custom block title"> Common icon usage </p>
             Take the <code>Shared</code> icon component as an example: <br>
             1. Import labels in the template. For example, <code> &lt; tiny-shared /&gt;  </code> <br>
             2, in the template by <code> &lt; component&gt;  The </code> component is introduced. For example, <code> &lt; component :is="tinyShared" /&gt;  </code> <br>
             3. Pass in component properties. For example, <code> &lt; tiny-button :icon="tinyShared" &gt;  </code> <br>
+            4. Avoid executing template-bound icon functions.Not recommended <code> &lt;component :is="IconShared()" /&gt; </code> 
           </div>
           `
       },

packages/theme-saas/src/select-dropdown/index.less

@@ -146,6 +146,7 @@
 }
 
 .@{select-prefix-cls}__popper-maxh-50 {
+  overflow: auto;
   max-height: 50%;
 }
 

packages/theme/src/select-dropdown/index.less

@@ -197,5 +197,6 @@
 }
 
 .@{select-prefix-cls}__popper-maxh-50 {
+  overflow: auto;
   max-height: 50%;
 }