From a6c919f7799628f65ba80a9692fa3ccb79c74a75 Mon Sep 17 00:00:00 2001 From: tjz <415800467@qq.com> Date: Thu, 22 Mar 2018 22:17:35 +0800 Subject: [PATCH] add tabs and tag docs --- components/auto-complete/demo/index.vue | 51 ---------- components/index.js | 15 ++- components/modal/demo/index.vue | 19 ---- components/switch/index.en-US.md | 4 +- components/switch/index.zh-CN.md | 2 +- components/tabs/demo/basic.md | 39 ++++++++ components/tabs/demo/basic.vue | 31 ------- .../tabs/demo/{card-top.vue => card-top.md} | 34 ++++--- components/tabs/demo/card.md | 33 +++++++ components/tabs/demo/card.vue | 25 ----- ...-add-trigger.vue => custom-add-trigger.md} | 26 ++++-- components/tabs/demo/disabled.md | 19 ++++ components/tabs/demo/disabled.vue | 16 ---- .../{editable-card.vue => editable-card.md} | 27 ++++-- components/tabs/demo/extra.md | 20 ++++ components/tabs/demo/extra.vue | 31 ------- components/tabs/demo/icon.md | 30 ++++++ components/tabs/demo/icon.vue | 43 --------- components/tabs/demo/index.vue | 93 +++++++++++-------- components/tabs/demo/position.md | 42 +++++++++ components/tabs/demo/position.vue | 38 -------- components/tabs/demo/size.md | 35 +++++++ components/tabs/demo/size.vue | 30 ------ components/tabs/demo/slide.md | 48 ++++++++++ components/tabs/demo/slide.vue | 44 --------- components/tabs/index.en-US.md | 35 +++++++ components/tabs/index.zh-CN.md | 41 +++----- components/tag/demo/basic.md | 34 +++++++ components/tag/demo/basic.vue | 25 ----- components/tag/demo/checkable.md | 37 ++++++++ components/tag/demo/checkable.vue | 28 ------ components/tag/demo/colorful.md | 35 +++++++ components/tag/demo/colorful.vue | 29 ------ .../tag/demo/{control.vue => control.md} | 37 +++++--- .../tag/demo/{hot-tags.vue => hot-tags.md} | 21 +++-- components/tag/demo/index.vue | 62 +++++++++---- components/tag/index.en-US.md | 27 ++++++ components/tag/index.zh-CN.md | 27 ++++++ webpack.base.config.js | 15 ++- 39 files changed, 688 insertions(+), 560 deletions(-) create mode 100644 components/tabs/demo/basic.md delete mode 100644 components/tabs/demo/basic.vue rename components/tabs/demo/{card-top.vue => card-top.md} (71%) create mode 100644 components/tabs/demo/card.md delete mode 100644 components/tabs/demo/card.vue rename components/tabs/demo/{custom-add-trigger.vue => custom-add-trigger.md} (78%) create mode 100644 components/tabs/demo/disabled.md delete mode 100644 components/tabs/demo/disabled.vue rename components/tabs/demo/{editable-card.vue => editable-card.md} (75%) create mode 100644 components/tabs/demo/extra.md delete mode 100644 components/tabs/demo/extra.vue create mode 100644 components/tabs/demo/icon.md delete mode 100644 components/tabs/demo/icon.vue create mode 100644 components/tabs/demo/position.md delete mode 100644 components/tabs/demo/position.vue create mode 100644 components/tabs/demo/size.md delete mode 100644 components/tabs/demo/size.vue create mode 100644 components/tabs/demo/slide.md delete mode 100644 components/tabs/demo/slide.vue create mode 100644 components/tabs/index.en-US.md create mode 100644 components/tag/demo/basic.md delete mode 100644 components/tag/demo/basic.vue create mode 100644 components/tag/demo/checkable.md delete mode 100644 components/tag/demo/checkable.vue create mode 100644 components/tag/demo/colorful.md delete mode 100644 components/tag/demo/colorful.vue rename components/tag/demo/{control.vue => control.md} (62%) rename components/tag/demo/{hot-tags.vue => hot-tags.md} (82%) create mode 100644 components/tag/index.en-US.md create mode 100644 components/tag/index.zh-CN.md diff --git a/components/auto-complete/demo/index.vue b/components/auto-complete/demo/index.vue index d3cb981ec..8cf58f7e2 100644 --- a/components/auto-complete/demo/index.vue +++ b/components/auto-complete/demo/index.vue @@ -46,55 +46,4 @@ export default { }, } - diff --git a/components/index.js b/components/index.js index 116ea51af..5b19a3170 100644 --- a/components/index.js +++ b/components/index.js @@ -40,13 +40,24 @@ export { default as Tooltip } from './tooltip' export { default as Pagination } from './pagination' -export { default as Tag } from './tag' +import Tag from './tag' +const CheckableTag = Tag.CheckableTag + +export { + Tag, + CheckableTag, +} export { default as Avatar } from './avatar' export { default as Badge } from './badge' -export { default as Tabs } from './tabs' +import Tabs from './tabs' +const TabPane = Tabs.TabPane +export { + Tabs, + TabPane, +} import Input from './input' diff --git a/components/modal/demo/index.vue b/components/modal/demo/index.vue index cd8a107f0..15d9c1606 100644 --- a/components/modal/demo/index.vue +++ b/components/modal/demo/index.vue @@ -61,23 +61,4 @@ export default { #components-modal-demo .ant-btn { margin-right: 8px; } -.vertical-center-modal { - text-align: center; - white-space: nowrap; -} - -.vertical-center-modal:before { - content: ''; - display: inline-block; - height: 100%; - vertical-align: middle; - width: 0; -} - -.vertical-center-modal .ant-modal { - display: inline-block; - vertical-align: middle; - top: 0; - text-align: left; -} diff --git a/components/switch/index.en-US.md b/components/switch/index.en-US.md index 6fd737aa7..11011f5e8 100644 --- a/components/switch/index.en-US.md +++ b/components/switch/index.en-US.md @@ -11,10 +11,10 @@ | size | the size of the `Switch`, options: `default` `small` | string | default | | unCheckedChildren | content to be shown when the state is unchecked | string\|slot | | -### events +### Events | Events Name | Description | Arguments | | --- | --- | --- | -| change | a callback function, can be executed when the checked state is changing | Function(checked:Boolean) | | +| change | a callback function, can be executed when the checked state is changing | Function(checked:Boolean) | ## Methods diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md index 99fe6f63c..5d750acd4 100644 --- a/components/switch/index.zh-CN.md +++ b/components/switch/index.zh-CN.md @@ -14,7 +14,7 @@ ### 事件 | 事件名称 | 说明 | 回调参数 | | --- | --- | --- | -| change | 变化时回调函数 | Function(checked:Boolean) | | +| change | 变化时回调函数 | Function(checked:Boolean) | ## 方法 diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md new file mode 100644 index 000000000..b50da8086 --- /dev/null +++ b/components/tabs/demo/basic.md @@ -0,0 +1,39 @@ + +#### 基本用法 +默认选中第一项。 + + + +#### basic Usage +Default activate first tab. + + +```html + + + +``` diff --git a/components/tabs/demo/basic.vue b/components/tabs/demo/basic.vue deleted file mode 100644 index c73b2eab3..000000000 --- a/components/tabs/demo/basic.vue +++ /dev/null @@ -1,31 +0,0 @@ - - diff --git a/components/tabs/demo/card-top.vue b/components/tabs/demo/card-top.md similarity index 71% rename from components/tabs/demo/card-top.vue rename to components/tabs/demo/card-top.md index cd41e5faa..7f4e85cb0 100644 --- a/components/tabs/demo/card-top.vue +++ b/components/tabs/demo/card-top.md @@ -1,26 +1,37 @@ + +#### 卡片式页签容器 +用于容器顶部，需要一点额外的样式覆盖。 + + + +#### Container of card type Tab +Should be used at the top of container, needs to override styles. + + +```html + +``` diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md new file mode 100644 index 000000000..e7593a911 --- /dev/null +++ b/components/tabs/demo/card.md @@ -0,0 +1,33 @@ + +#### 卡片式页签 +另一种样式的页签，不提供对应的垂直样式。 + + + +#### Card type tab +Another type Tabs, which doesn't support vertical mode. + + +```html + + + +``` diff --git a/components/tabs/demo/card.vue b/components/tabs/demo/card.vue deleted file mode 100644 index cbe619b5f..000000000 --- a/components/tabs/demo/card.vue +++ /dev/null @@ -1,25 +0,0 @@ - - diff --git a/components/tabs/demo/custom-add-trigger.vue b/components/tabs/demo/custom-add-trigger.md similarity index 78% rename from components/tabs/demo/custom-add-trigger.vue rename to components/tabs/demo/custom-add-trigger.md index f991744d7..8268c48fe 100644 --- a/components/tabs/demo/custom-add-trigger.vue +++ b/components/tabs/demo/custom-add-trigger.md @@ -1,23 +1,33 @@ + +#### 自定义新增页签触发器 +隐藏默认的页签增加图标，给自定义触发器绑定事件。 + + + +#### Customized trigger of new tab +Hide default plus icon, and bind event for customized trigger. + + +```html +``` \ No newline at end of file diff --git a/components/tabs/demo/disabled.md b/components/tabs/demo/disabled.md new file mode 100644 index 000000000..d89d03cad --- /dev/null +++ b/components/tabs/demo/disabled.md @@ -0,0 +1,19 @@ + +#### 禁用 +禁用某一项。 + + + +#### Disabled +Disabled a tab. + + +```html + +``` \ No newline at end of file diff --git a/components/tabs/demo/disabled.vue b/components/tabs/demo/disabled.vue deleted file mode 100644 index 5b0db4e41..000000000 --- a/components/tabs/demo/disabled.vue +++ /dev/null @@ -1,16 +0,0 @@ - - diff --git a/components/tabs/demo/editable-card.vue b/components/tabs/demo/editable-card.md similarity index 75% rename from components/tabs/demo/editable-card.vue rename to components/tabs/demo/editable-card.md index 483d161fe..d7294de2d 100644 --- a/components/tabs/demo/editable-card.vue +++ b/components/tabs/demo/editable-card.md @@ -1,16 +1,28 @@ + +#### 新增和关闭页签 +只有卡片样式的页签支持新增和关闭选项。 +使用 `closable={false}` 禁止关闭。 + + + +#### Add & close tab +Only card type Tabs support adding & closable. ++Use `closable={false}` to disable close. + + +```html +``` diff --git a/components/tabs/demo/extra.md b/components/tabs/demo/extra.md new file mode 100644 index 000000000..3b06ce3f1 --- /dev/null +++ b/components/tabs/demo/extra.md @@ -0,0 +1,20 @@ + +#### 附加内容 +可以在页签右边添加附加操作。 + + + +#### Extra content +You can add extra actions to the right of Tabs. + + +```html + +``` diff --git a/components/tabs/demo/extra.vue b/components/tabs/demo/extra.vue deleted file mode 100644 index 33b7bf6b1..000000000 --- a/components/tabs/demo/extra.vue +++ /dev/null @@ -1,31 +0,0 @@ - - diff --git a/components/tabs/demo/icon.md b/components/tabs/demo/icon.md new file mode 100644 index 000000000..de684420f --- /dev/null +++ b/components/tabs/demo/icon.md @@ -0,0 +1,30 @@ + +#### 图标 +有图标的标签。 + + + +#### Icon +The Tab with Icon. + + +```html + +``` diff --git a/components/tabs/demo/icon.vue b/components/tabs/demo/icon.vue deleted file mode 100644 index 1d367d1a5..000000000 --- a/components/tabs/demo/icon.vue +++ /dev/null @@ -1,43 +0,0 @@ - - diff --git a/components/tabs/demo/index.vue b/components/tabs/demo/index.vue index 4259c8bc0..d72c1be1f 100644 --- a/components/tabs/demo/index.vue +++ b/components/tabs/demo/index.vue @@ -1,29 +1,3 @@ - diff --git a/components/tabs/demo/position.md b/components/tabs/demo/position.md new file mode 100644 index 000000000..942fea2f4 --- /dev/null +++ b/components/tabs/demo/position.md @@ -0,0 +1,42 @@ + +#### 位置 +有四个位置，`tabPosition="left|right|top|bottom"`。 + + + +#### Position +Tab's position: left, right, top or bottom. + + +```html + + +``` diff --git a/components/tabs/demo/position.vue b/components/tabs/demo/position.vue deleted file mode 100644 index 19a299268..000000000 --- a/components/tabs/demo/position.vue +++ /dev/null @@ -1,38 +0,0 @@ - - diff --git a/components/tabs/demo/size.md b/components/tabs/demo/size.md new file mode 100644 index 000000000..75c2ce80b --- /dev/null +++ b/components/tabs/demo/size.md @@ -0,0 +1,35 @@ + +#### 大小 +大号页签用在页头区域，小号用在弹出框等较狭窄的容器内。 + + + +#### Size +Large size tabs are usally used in page header, and small size could be used in Modal. + + +```html + + +``` diff --git a/components/tabs/demo/size.vue b/components/tabs/demo/size.vue deleted file mode 100644 index c0c9c3284..000000000 --- a/components/tabs/demo/size.vue +++ /dev/null @@ -1,30 +0,0 @@ - - diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md new file mode 100644 index 000000000..1a1f6d5e8 --- /dev/null +++ b/components/tabs/demo/slide.md @@ -0,0 +1,48 @@ + +#### 滑动 +可以左右、上下滑动，容纳更多标签。 + + + +#### Slide +Tab can be slide to left or right(up or down), which is used for a lot of tabs. + + +```html + + +``` diff --git a/components/tabs/demo/slide.vue b/components/tabs/demo/slide.vue deleted file mode 100644 index d810b4686..000000000 --- a/components/tabs/demo/slide.vue +++ /dev/null @@ -1,44 +0,0 @@ - - diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md new file mode 100644 index 000000000..072889d6d --- /dev/null +++ b/components/tabs/index.en-US.md @@ -0,0 +1,35 @@ + +## API + +### Tabs + +| Property | Description | Type | Default | +| -------- | ----------- | ---- | ------- | +| activeKey | Current TabPane's key | string | - | +| animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` | +| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set. | string | - | +| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` | +| size | preset tab bar size | `large` \| `default` \| `small` | `default` | +| tabBarExtraContent | Extra content in tab bar | slot | - | +| tabBarStyle | Tab bar style object | object | - | +| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` | +| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` | +| tabBarGutter | The gap between tabs | number | - | + +### Events +| Events Name | Description | Arguments | +| --- | --- | --- | +| change | Callback executed when active tab is changed | Function(activeKey) {} | +| edit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (targetKey, action): void | +| nextClick | Callback executed when next button is clicked | Function | +| prevClick | Callback executed when prev button is clicked | Function | +| tabClick | Callback executed when tab is clicked | Function | + + +### Tabs.TabPane + +| Property | Description | Type | Default | +| -------- | ----------- | ---- | ------- | +| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false | +| key | TabPane's key | string | - | +| tab | Show text in TabPane's head | string\|slot | - | diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 4e5bddc36..62b60261d 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -1,22 +1,3 @@ ---- -category: Components -subtitle: 标签页 -type: Data Display -title: Tabs -cols: 1 ---- - -选项卡切换组件。 - -## 何时使用 - -提供平级的区域将大块内容进行收纳和展现，保持界面整洁。 - -Ant Design 依次提供了三级选项卡，分别用于不同的场景。 - -- 卡片式的页签，提供可关闭的样式，常用于容器顶部。 -- 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。 -- [RadioButton](#/cn/components/radio/components-radio-demo-radiobutton) 可作为更次级的页签来使用。 ## API @@ -28,21 +9,21 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false | | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 | | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | -| size | 大小，提供 `large` `default` 和 `small` 三种大小，仅当 `type="line"` 时生效。 | string | 'default' | -| tabBarExtraContent | tab bar 上额外的元素 | string\|Function\|slot | 无 | +| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | 'default' | +| tabBarExtraContent | tab bar 上额外的元素 | slot | 无 | | tabBarStyle | tab bar 的样式对象 | object | - | | tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | 'top' | | type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | 'line' | | tabBarGutter | tabs 之间的间隙 | number | 无 | - -### 事件 emit -| 参数 | 说明 | 类型 | 默认值 | -| change | 切换面板的回调 | Function | 无 | -| edit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | 无 | -| nextClick | next 按钮被点击的回调 | Function | 无 | -| prevClick | prev 按钮被点击的回调 | Function | 无 | -| tabClick | tab 被点击的回调 | Function | 无 | +### 事件 +| 事件名称 | 说明 | 回调参数 | +| --- | --- | --- | +| change | 切换面板的回调 | Function(activeKey) {} | +| edit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | +| nextClick | next 按钮被点击的回调 | Function | +| prevClick | prev 按钮被点击的回调 | Function | +| tabClick | tab 被点击的回调 | Function | ### Tabs.TabPane @@ -50,4 +31,4 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | --- | --- | --- | --- | | forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | | key | 对应 activeKey | string | 无 | -| tab | 选项卡头显示文字 | string\|Function\|slot | 无 | +| tab | 选项卡头显示文字 | string\|slot | 无 | diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md new file mode 100644 index 000000000..32f4635aa --- /dev/null +++ b/components/tag/demo/basic.md @@ -0,0 +1,34 @@ + +#### 基本用法 +基本标签的用法，可以通过添加 `closable` 变为可关闭标签。可关闭标签具有 `onClose` `afterClose` 两个事件。 + + + +#### basic Usage +Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `onClose` `afterClose` events. + + +```html + + +``` + diff --git a/components/tag/demo/basic.vue b/components/tag/demo/basic.vue deleted file mode 100644 index dd4d12e00..000000000 --- a/components/tag/demo/basic.vue +++ /dev/null @@ -1,25 +0,0 @@ - - diff --git a/components/tag/demo/checkable.md b/components/tag/demo/checkable.md new file mode 100644 index 000000000..17969a34a --- /dev/null +++ b/components/tag/demo/checkable.md @@ -0,0 +1,37 @@ + +#### 可选择 +可通过 `CheckableTag` 实现类似 Checkbox 的效果，点击切换选中效果。 +> 该组件为完全受控组件，不支持非受控用法。 + + + +#### Checkable +`CheckableTag` works like Checkbox, click it to toggle checked state. +> it is an absolute controlled component and has no uncontrolled mode. + + +```html + + +``` diff --git a/components/tag/demo/checkable.vue b/components/tag/demo/checkable.vue deleted file mode 100644 index c37e55486..000000000 --- a/components/tag/demo/checkable.vue +++ /dev/null @@ -1,28 +0,0 @@ - - diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md new file mode 100644 index 000000000..bfa183f9d --- /dev/null +++ b/components/tag/demo/colorful.md @@ -0,0 +1,35 @@ + +#### 多彩标签 +我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。 + + + +#### Colorful Tag +We preset a series of colorful tag style for different situation usage. +And you can always set it to a hex color string for custom color. + + +```html + + +``` diff --git a/components/tag/demo/colorful.vue b/components/tag/demo/colorful.vue deleted file mode 100644 index 5ed5cde25..000000000 --- a/components/tag/demo/colorful.vue +++ /dev/null @@ -1,29 +0,0 @@ - - diff --git a/components/tag/demo/control.vue b/components/tag/demo/control.md similarity index 62% rename from components/tag/demo/control.vue rename to components/tag/demo/control.md index 1f81d908a..2c04ef110 100644 --- a/components/tag/demo/control.vue +++ b/components/tag/demo/control.md @@ -1,14 +1,26 @@ + +#### 动态添加和删除 +用数组生成一组标签，可以动态添加和删除，通过监听删除动画结束的事件 `afterClose` 实现。 + + + +#### Add & Remove Dynamically +Generating a set of Tags by array, you can add and remove dynamically. +It's based on `afterClose` event, which will be triggered while the close animation end. + + +```html +``` diff --git a/components/tag/demo/hot-tags.vue b/components/tag/demo/hot-tags.md similarity index 82% rename from components/tag/demo/hot-tags.vue rename to components/tag/demo/hot-tags.md index 7546913df..fd3c197a3 100644 --- a/components/tag/demo/hot-tags.vue +++ b/components/tag/demo/hot-tags.md @@ -1,19 +1,29 @@ + +#### 热门标签 +选择你感兴趣的话题。 + + + +#### Hot Tags +Select your favourite topics. + + +```html +``` \ No newline at end of file diff --git a/components/tag/demo/index.vue b/components/tag/demo/index.vue index 9466040df..f047d6b86 100644 --- a/components/tag/demo/index.vue +++ b/components/tag/demo/index.vue @@ -1,34 +1,56 @@ - diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md new file mode 100644 index 000000000..e50829294 --- /dev/null +++ b/components/tag/index.en-US.md @@ -0,0 +1,27 @@ + + +## API + +### Tag + +| Property | Description | Type | Default | +| -------- | ----------- | ---- | ------- | +| afterClose | Callback executed when close animation is completed | () => void | - | +| closable | Whether Tag can be closed | boolean | `false` | +| color | Color of the Tag | string | - | + +### Tag Events +| Events Name | Description | Arguments | +| --- | --- | --- | +| close | Callback executed when tag is closed | (e) => void | + +### Tag.CheckableTag + +| Property | Description | Type | Default | +| -------- | ----------- | ---- | ------- | +| checked | Checked status of Tag | boolean | `false` | + +### Tag.CheckableTag Events +| Events Name | Description | Arguments | +| --- | --- | --- | +| change | Callback executed when Tag is checked/unchecked | (checked) => void | diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md new file mode 100644 index 000000000..ee0ea8796 --- /dev/null +++ b/components/tag/index.zh-CN.md @@ -0,0 +1,27 @@ + + +## API + +### Tag + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| afterClose | 关闭动画完成后的回调 | () => void | - | +| closable | 标签是否可以关闭 | boolean | false | +| color | 标签色 | string | - | + +### 事件 +| 事件名称 | 说明 | 回调参数 | +| --- | --- | --- | +| close | 关闭时的回调 | (e) => void | + +### Tag.CheckableTag + +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| checked | 设置标签的选中状态 | boolean | false | + +### 事件 +| 事件名称 | 说明 | 回调参数 | +| --- | --- | --- | +| change | 点击标签时触发的回调 | (checked) => void | diff --git a/webpack.base.config.js b/webpack.base.config.js index 7e63c8b11..5e8c719df 100644 --- a/webpack.base.config.js +++ b/webpack.base.config.js @@ -7,10 +7,12 @@ const babelConfig = getBabelCommonConfig(false) babelConfig.plugins.push(require.resolve('babel-plugin-syntax-dynamic-import')) -const fetch = (str, tag) => { +const fetch = (str, tag, scoped) => { const $ = cheerio.load(str, { decodeEntities: false, xmlMode: true }) if (!tag) return str - + if (tag === 'style') { + return scoped ? $(`${tag}[scoped]`).html() : $(`${tag}`).not(`${tag}[scoped]`).html() + } return $(tag).html() } @@ -53,6 +55,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) { let template = '' let script = '' let style = '' + let scopedStyle = '' let code = '' tokens.forEach(token => { if (token.type === 'html_block') { @@ -70,6 +73,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) { template = fetch(token.content, 'template') script = fetch(token.content, 'script') style = fetch(token.content, 'style') + scopedStyle = fetch(token.content, 'style', true) token.content = '' token.type = 'html_block' } @@ -98,10 +102,15 @@ md.core.ruler.push('update_template', function replace ({ tokens }) { ` : '' newContent += style ? ` - ` : '' + newContent += scopedStyle ? ` + + ` : '' const t = new Token('html_block', '', 0) t.content = newContent tokens.push(t)