feat(typography/text): as prop

demo/documentation/components/typography/enUS/index.md

@@ -23,6 +23,7 @@ text
 |delete|`boolean`|`false`||
 |code|`boolean`|`false`||
 |depth|`'primary' \| 'secondary' \| 'tertiary'`|`null`||
+|as|`string`|`null`|What tag should be this component be rendered as. Won't work when `code` or `del` is set.|
 
 ### P Props
 |Name|Type|Default|Description|

demo/documentation/components/typography/enUS/text.md

@@ -1,23 +1,18 @@
 # Text
 Use different type of text to display different kind of info.
 ```html
-<n-text type="info">Info</n-text>
-<n-text type="success">Success</n-text>
-<n-text type="warning">Warning</n-text>
-<n-text type="error">Error</n-text>
-<n-text strong>Strong</n-text>
-<n-text italic>Italic</n-text>
-<n-text underline>Underline</n-text>
-<n-text delete>Delete</n-text>
-<n-text code>Code</n-text>
-<n-text code delete>Code</n-text>
-<n-text depth="primary">Primary Depth</n-text>
-<n-text depth="secondary">Secondary Depth</n-text>
-<n-text depth="tertiary">Tertiary Depth</n-text>
-```
-```css
-.n-text {
-  display: inline-block;
-  margin: 0 8px 12px 0;
-}
+<n-text type="info">Info</n-text>&nbsp;
+<n-text type="success">Success</n-text>&nbsp;
+<n-text type="warning">Warning</n-text>&nbsp;
+<n-text type="error">Error</n-text>&nbsp;
+<n-text strong>Strong</n-text>&nbsp;
+<n-text italic>Italic</n-text>&nbsp;
+<n-text underline>Underline</n-text>&nbsp;
+<n-text delete>Delete</n-text>&nbsp;
+<n-text code>Code</n-text>&nbsp;
+<n-text code delete>Code</n-text>&nbsp;
+<n-text depth="primary">Primary Depth</n-text>&nbsp;
+<n-text depth="secondary">Secondary Depth</n-text>&nbsp;
+<n-text depth="tertiary">Tertiary Depth</n-text>&nbsp;
+<n-text as="div">As Div</n-text> 
 ```

demo/documentation/components/typography/zhCN/index.md

@@ -22,6 +22,7 @@ text
 |delete|`boolean`|`false`||
 |code|`boolean`|`false`||
 |depth|`'primary' \| 'secondary' \| 'tertiary'`|`null`||
+|as|`string`|`null`|需要被渲染为什么标签，在 `code` 和 `del` 设定的情况下不生效|
 
 ### P Props
 |名称|类型|默认值|说明|

demo/documentation/components/typography/zhCN/text.md

@@ -1,23 +1,18 @@
 # 文本
 用不同类型的文本展示各种信息。
 ```html
-<n-text type="info">Info</n-text>
-<n-text type="success">Success</n-text>
-<n-text type="warning">Warning</n-text>
-<n-text type="error">Error</n-text>
-<n-text strong>Strong</n-text>
-<n-text italic>Italic</n-text>
-<n-text underline>Underline</n-text>
-<n-text delete>Delete</n-text>
-<n-text code>Code</n-text>
-<n-text code delete>Code</n-text>
-<n-text depth="primary">Primary Depth</n-text>
-<n-text depth="secondary">Secondary Depth</n-text>
-<n-text depth="tertiary">Tertiary Depth</n-text>
-```
-```css
-.n-text {
-  display: inline-block;
-  margin: 0 8px 12px 0;
-}
+<n-text type="info">Info</n-text>&nbsp;
+<n-text type="success">Success</n-text>&nbsp;
+<n-text type="warning">Warning</n-text>&nbsp;
+<n-text type="error">Error</n-text>&nbsp;
+<n-text strong>Strong</n-text>&nbsp;
+<n-text italic>Italic</n-text>&nbsp;
+<n-text underline>Underline</n-text>&nbsp;
+<n-text delete>Delete</n-text>&nbsp;
+<n-text code>Code</n-text>&nbsp;
+<n-text code delete>Code</n-text>&nbsp;
+<n-text depth="primary">Primary Depth</n-text>&nbsp;
+<n-text depth="secondary">Secondary Depth</n-text>&nbsp;
+<n-text depth="tertiary">Tertiary Depth</n-text>&nbsp;
+<n-text as="div">作为 Div</n-text> 
 ```

src/Typography/src/text.vue

@@ -29,9 +29,9 @@
       'n-text--underline': underline,
       [`n-text--${depth}-depth`]: depth
     }"
-    v-on="$listeners"
   ><slot /></del>
-  <span
+  <component
+    :is="as || 'span'"
     v-else
     class="n-text"
     :class="{
@@ -45,7 +45,9 @@
       'n-text--underline': underline,
       [`n-text--${depth}-depth`]: depth
     }"
-  ><slot /></span>
+  >
+    <slot />
+  </component>
 </template>
 
 <script>
@@ -89,6 +91,10 @@ export default {
         return ['primary', 'secondary', 'tertiary'].includes(value)
       },
       default: null
+    },
+    as: {
+      type: String,
+      default: null
     }
   }
 }

styles/Typography.scss

@@ -146,7 +146,6 @@
   }
   @include b(text) {
     @include once {
-      display: inline-block;
       transition: color .3s $--n-ease-in-out-cubic-bezier;
       @include m(strong) {
         font-weight: $--n-strong-weight;