fix(layout-sider): width prop can't be string, closes #607

CHANGELOG.en-US.md

@@ -11,6 +11,7 @@
 ### Fixes
 
 - Fix `n-carousel` arrow buttons cannot be displayed in a specific browser, closes [#625](https://github.com/TuSimple/naive-ui/issues/625).
+- Fix `n-layout-sider`'s `width` prop can't be string, closes [#607](https://github.com/TuSimple/naive-ui/issues/607).
 
 ## 2.15.6 (2021-07-23)
 

CHANGELOG.zh-CN.md

@@ -10,7 +10,8 @@
 
 ### Fixes
 
-- 修复 `n-carousel` 中箭头按钮在特定浏览器下无法显示问题，关闭 `https://github.com/TuSimple/naive-ui/issues/625`
+- 修复 `n-carousel` 中箭头按钮在特定浏览器下无法显示问题，关闭 [#625](https://github.com/TuSimple/naive-ui/issues/625)
+- 修复 `n-layout-sider` `width` 不能为字符串，关闭 [#607](https://github.com/TuSimple/naive-ui/issues/607)
 
 ## 2.15.6 (2021-07-23)
 

src/layout/demos/enUS/index.demo-entry.md

@@ -23,7 +23,7 @@ show-sider-content
 scroll-to
 ```
 
-## Props
+## API
 
 ### Layout, Layout Content Props
 
@@ -67,19 +67,15 @@ scroll-to
 | show-collapsed-content | `boolean` | `true` | Whether to show content in sider after it is collapsed. |
 | show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | Whether to show the built-in trigger button on sider. |
 | trigger-style | `string \| Object` | `undefined` |  |
-| width | `number` | `272` |  |
+| width | `number \| string` | `272` |  |
 | on-update:collapsed | `(collapsed: boolean) => void` | `undefined` |  |
 
-## Slots
-
 ### Layout, Layout Content, Layout Sider, Layout Header, Layout Footer Slots
 
 | Name    | Parameters | Description |
 | ------- | ---------- | ----------- |
 | default | `()`       |             |
 
-## Methods
-
 ### Layout, Layout Content, Layout Sider Methods
 
 | Name | Type | Description |

src/layout/demos/zhCN/index.demo-entry.md

@@ -23,7 +23,7 @@ show-sider-content
 scroll-to
 ```
 
-## Props
+## API
 
 ### Layout, Layout Content Props
 
@@ -67,19 +67,15 @@ scroll-to
 | show-collapsed-content | `boolean` | `true` | 是否在 sider 折叠后展示内部内容 |
 | show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | 内置的触发按钮是否展示 |
 | trigger-style | `string \| Object` | `undefined` |  |
-| width | `number` | `272` |  |
+| width | `number \| string` | `272` |  |
 | on-update:collapsed | `(collapsed: boolean) => void` | `undefined` |  |
 
-## Slots
-
 ### Layout, Layout Content, Layout Sider, Layout Header, Layout Footer Slots
 
 | 名称    | 参数 | 说明 |
 | ------- | ---- | ---- |
 | default | `()` |      |
 
-## Methods
-
 ### Layout, Layout Content, Layout Sider Methods
 
 | 名称 | 类型 | 说明 |

src/layout/src/LayoutSider.tsx

@@ -9,6 +9,7 @@ import {
   inject,
   provide
 } from 'vue'
+import { useMergedState } from 'vooks'
 import { useConfig, useTheme } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
 import { formatLength, call, warn } from '../../_utils'
@@ -25,7 +26,6 @@ import {
   LayoutSiderInst,
   positionProp
 } from './interface'
-import { useMergedState } from 'vooks'
 import { layoutInjectionKey } from './Layout'
 
 const layoutSiderProps = {
@@ -36,7 +36,7 @@ const layoutSiderProps = {
     default: 48
   },
   width: {
-    type: Number,
+    type: [Number, String] as PropType<string | number>,
     default: 272
   },
   contentStyle: {