diff --git a/build/webpack.config.js b/build/webpack.config.js index 0c8682c2e..dc769f7d2 100644 --- a/build/webpack.config.js +++ b/build/webpack.config.js @@ -118,6 +118,27 @@ if (process.env.NODE_ENV === 'production') { slugify: slugify, permalink: true, permalinkBefore: true + }], + [require('markdown-it-container'), 'demo', { + validate: function(params) { + return params.trim().match(/^demo\s*(.*)$/); + }, + + render: function(tokens, idx) { + var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/); + if (tokens[idx].nesting === 1) { + var description = (m && m.length > 1) ? m[1] : ''; + var content = tokens[idx + 1].content; + var html = convert(striptags.strip(content, ['script', 'style'])); + var script = striptags.fetch(content, 'script'); + var style = striptags.fetch(content, 'style'); + + return ` +
${html}
+
`; + } + return '
\n'; + } }] ], preprocess: function(MarkdownIt, source) { diff --git a/docs/ExamplesDocsApp.vue b/docs/ExamplesDocsApp.vue index 7c38f8cc9..454ec1d6c 100644 --- a/docs/ExamplesDocsApp.vue +++ b/docs/ExamplesDocsApp.vue @@ -4,7 +4,6 @@
- @@ -68,26 +67,11 @@ export default { } .page-content { - width: 52%; box-sizing: border-box; - float: left; - padding: 0 15px; overflow: auto; height: inherit; - } - - .mobile-wrapper { - float: left; - width: 30%; - height: 300px; - position: relative; - } - - .mobile { - margin: 20px 20px 0; - height: 100%; - box-sizing: border-box; - width: 365px; + margin-left: 320px; + padding: 0 20px; } .demo-page { diff --git a/docs/components/demo-block.vue b/docs/components/demo-block.vue new file mode 100644 index 000000000..b32daf996 --- /dev/null +++ b/docs/components/demo-block.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/docs/components/mobile.vue b/docs/components/mobile.vue deleted file mode 100644 index 8685d2452..000000000 --- a/docs/components/mobile.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/docs/components/side-nav.vue b/docs/components/side-nav.vue index 17e0c9f01..17a1c0f6d 100644 --- a/docs/components/side-nav.vue +++ b/docs/components/side-nav.vue @@ -62,7 +62,7 @@ + ## Button组件 ### 按钮功能 只接受primary, default, danger三种类型，默认default。 +:::demo ```html -
-
- default -
-
- primary -
-
- danger -
-
+ + + default + + + primary + + + danger + + ``` +::: ### 禁用状态 +:::demo ```html -
-
- diabled -
-
+ + + diabled + + ``` +::: ### 按钮尺寸 只接受large, normal, small, mini四种尺寸，默认normal。 +:::demo ```html -
-
+ + large -
-
-
-
- normal -
-
- small -
-
- mini -
-
- + + + + + normal + + + small + + + mini + + ``` +::: ### 自定义按钮标签 按钮默认是button标签，可以使用tag属性修改为一个a标签。 +:::demo ```html -
-
+ + a标签按钮 -
-
+ + ``` +::: ### loading按钮 表示loading状态 +:::demo ```html -
-
- 111 -
-
- 222 -
-
+ + + loading + + + + + ``` +::: ### button group 一组按钮。 +:::demo ```html -
+
确认付款 确认收货 取消订单
``` +::: ### API diff --git a/docs/index.js b/docs/index.js index 976f42fd7..d8d4a5f0b 100644 --- a/docs/index.js +++ b/docs/index.js @@ -4,11 +4,15 @@ import App from './ExamplesDocsApp'; import navConfig from './nav.config.json'; import routes from './router.config'; import SideNav from './components/side-nav'; -import Mobile from './components/mobile'; +import DemoBlock from './components/demo-block'; +import ZanUI from 'src/index.js'; + +import 'packages/zanui-css/src/index.css'; Vue.use(VueRouter); +Vue.use(ZanUI); Vue.component('side-nav', SideNav); -Vue.component('mobile', Mobile); +Vue.component('demo-block', DemoBlock); let routesConfig = routes(navConfig); routesConfig.push({ diff --git a/src/index.js b/src/index.js index babeffe75..2ca73b9b7 100644 --- a/src/index.js +++ b/src/index.js @@ -24,6 +24,7 @@ import Step from '../packages/step/index.js'; import ImagePreview from '../packages/image-preview/index.js'; import Col from '../packages/col/index.js'; import Row from '../packages/row/index.js'; +import Actionsheet from '../packages/actionsheet/index.js'; const install = function(Vue) { if (install.installed) return; @@ -49,9 +50,9 @@ const install = function(Vue) { Vue.component(Badge.name, Badge); Vue.component(Search.name, Search); Vue.component(Step.name, Step); - Vue.component(ImagePreview.name, ImagePreview); Vue.component(Col.name, Col); Vue.component(Row.name, Row); + Vue.component(Actionsheet.name, Actionsheet); }; // auto install @@ -87,5 +88,6 @@ module.exports = { Step, ImagePreview, Col, - Row + Row, + Actionsheet };