diff --git a/build/genExamples.js b/build/genExamples.js index d59b81681..156effb99 100644 --- a/build/genExamples.js +++ b/build/genExamples.js @@ -4,7 +4,8 @@ var fs = require('fs'); var path = require('path'); var cheerio = require('cheerio'); var striptags = require('./strip-tags'); -var Components = require('../components.json'); +var navs = require('../docs/nav.config.json'); +navs = navs['zh-CN']; var parser = markdownIt('default', { html: true @@ -69,17 +70,32 @@ parser.use(markdownItContainer, 'demo', { }); var docsDir = path.resolve(__dirname, '../docs'); -for (var item in Components) { - var itemMdFile = `${docsDir}/examples-docs/${item}.md`; +var components = []; +for (var i = 0; i < navs.length; i++) { + var navItem = navs[i]; + + if (!navItem.showInMobile) continue; + + if (!navItem.groups) { + components.push(navs[i]); + } else { + for (var j = 0; j < navItem.groups.length; j++) { + components = components.concat(navItem.groups[j].list); + } + } +} +for (var i = 0; i < components.length; i++) { + var item = components[i]; + var itemMdFile = `${docsDir}/examples-docs${item.path}.md`; if (!fs.existsSync(itemMdFile)) { continue; } - var itemMd = fs.readFileSync(`${docsDir}/examples-docs/${item}.md`).toString(); + var itemMd = fs.readFileSync(`${docsDir}/examples-docs${item.path}.md`).toString(); var content = parser.render(itemMd); - var result = renderVueTemplate(content, item); + var result = renderVueTemplate(content, item.path.slice(1)); - var exampleVueName = `${docsDir}/examples-dist/${item}.vue`; + var exampleVueName = `${docsDir}/examples-dist/${item.path}.vue`; // 新建一个文件 if (!fs.existsSync(exampleVueName)) { diff --git a/docs/examples-dist/cell.vue b/docs/examples-dist/cell.vue index a7dd6798d..21497667a 100644 --- a/docs/examples-dist/cell.vue +++ b/docs/examples-dist/cell.vue @@ -27,28 +27,14 @@ - \ No newline at end of file diff --git a/docs/examples-dist/loading.vue b/docs/examples-dist/loading.vue index d6a92785a..8f761de57 100644 --- a/docs/examples-dist/loading.vue +++ b/docs/examples-dist/loading.vue @@ -24,7 +24,10 @@ .demo-loading__example--with-bg { background-color: rgba(0, 0, 0, 0.5); - margin-bottom: 10px; + margin: 0 auto; + width: 80px; + padding: 25px 0; + border-radius: 10px; } } } diff --git a/docs/examples-dist/search.vue b/docs/examples-dist/search.vue index a94a4eb5a..725fa0555 100644 --- a/docs/examples-dist/search.vue +++ b/docs/examples-dist/search.vue @@ -1,5 +1,11 @@ @@ -13,6 +19,9 @@ export default { }, handleChange(value) { console.log(value); + }, + handleCancel() { + alert('cancel'); } } }; diff --git a/docs/examples-dist/tab.vue b/docs/examples-dist/tab.vue index 68383b102..abf38569f 100644 --- a/docs/examples-dist/tab.vue +++ b/docs/examples-dist/tab.vue @@ -7,17 +7,27 @@ 内容五 - + 内容一 - 内容二 + 内容二 + 内容三 + 内容四 + 内容五 + + + + + 内容一 + 内容二 内容三 内容四 内容五 - + + 内容一 内容二 @@ -26,8 +36,8 @@ 内容五 - - + + 内容一 内容二 内容三 @@ -36,6 +46,7 @@ + 内容一 @@ -55,21 +66,31 @@ background-color: #fff; padding: 20px; } + + .zan-tabs--card .zan-tab__pane { + background-color: transparent; + } + + .custom-tabwrap .zan-tab-active { + color: #20a0ff; + } + .custom-tabwrap .zan-tabs-nav-bar { + background: #20a0ff; + } + .custom-pane { + text-align: center; + height: 50px; + line-height: 50px; + } } } - +``` +::: + ### API | 参数 | 说明 | 类型 | 默认值 | 必须 | |-----------|-----------|-----------|-------------|-------------| | placeholder | `input`的`placeholder`文案 | `string` | | | + +### Event + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| change | `input`输入框每次`change`时触发，适用于实时搜索等 | value：当前`input`输入框的值 | +| cancel | 取消搜索 | | +| search | 确定搜索 | value：当前`input`输入框的值 | diff --git a/packages/search/src/search.vue b/packages/search/src/search.vue index 82c045813..fb70d53cf 100644 --- a/packages/search/src/search.vue +++ b/packages/search/src/search.vue @@ -2,7 +2,13 @@
- +
取消
@@ -14,19 +20,21 @@ export default { name: 'zan-search', + components: { ZanIcon }, + props: { - placeholder: { - type: String - } + placeholder: String }, + watch: { value(val) { this.$emit('change', val); } }, + data() { return { value: '', @@ -34,32 +42,47 @@ isFocus: false }; }, + directives: { refocus: { update: function(el, state) { - if (state.value) { el.focus(); } + if (state.value) { + el.focus(); + } } } }, + methods: { + /** + * 进入input焦点，出现close和取消 + */ handleFocus() { - // 进入input焦点，出现close和取消 this.isFocus = true; }, + + /** + * 点击close后清空vlaue后，再聚焦input框 + */ handleClean() { - // 点击close后清空vlaue后，再聚焦input框 this.value = ''; this.focusStatus = true; }, + + /** + * 点击取消后，清空所有回复最初状态 + */ handleBack() { - // 点击取消后，清空所有回复最初状态 this.value = ''; this.focusStatus = false; this.isFocus = false; this.$emit('cancel'); }, + + /** + * input输入回车后，发送回调 + */ handleSearch() { - // input输入回车后，发送回调 this.$emit('search', this.value); } } diff --git a/packages/zanui-css/src/cell.css b/packages/zanui-css/src/cell.css index 4f763f920..b29e716c4 100644 --- a/packages/zanui-css/src/cell.css +++ b/packages/zanui-css/src/cell.css @@ -1,5 +1,6 @@ @import './common/var.css'; @import './mixins/border_retina.css'; +@import './icon.css'; @component-namespace zan { @b cell-group { diff --git a/packages/zanui-css/src/search.css b/packages/zanui-css/src/search.css index f97abffba..d5991096a 100644 --- a/packages/zanui-css/src/search.css +++ b/packages/zanui-css/src/search.css @@ -1,69 +1,70 @@ @import './common/var.css'; +@import './icon.css'; @component-namespace zan { - @b search { - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: center; - position: relative; - box-sizing: border-box; - padding: 4px 15px; - background-color: #F2F2F2; + @b search { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + position: relative; + box-sizing: border-box; + padding: 4px 15px; + background-color: #F2F2F2; - @m focus { - .zan-search__input-wrap { - width: 82%; - } - .zan-icon-clear { - display: inline-block; - } - } - - @e input-wrap { - position: relative; - width: 90%; - padding: 8px 24px 8px 35px; - border: 1px solid $c-gray-light; - border-radius: 4px; - background-color: $c-white; - - input { - width: 100%; - height: 14px; - font-size: 14px; - color: $c-gray-dark; - border: none; - outline: none; - } - } - - @e cancel { - display: none; - color: #44BB00; - font-size: 14px; - white-space: nowrap; - margin-left: 5px; - - @m focus { - display: block; - } - } - - .zan-icon-search { - color: $c-gray-darker; - position: absolute; - top: 9px; - left: 10px; - font-size: 16px; - } - - .zan-icon-clear { - display: none; - position: absolute; - right: 5px; - top: 8px; - color: #888; - } + @m focus { + .zan-search__input-wrap { + width: 82%; + } + .zan-icon-clear { + display: inline-block; + } } + + @e input-wrap { + position: relative; + width: 90%; + padding: 8px 24px 8px 35px; + border: 1px solid $c-gray-light; + border-radius: 4px; + background-color: $c-white; + + input { + width: 100%; + height: 14px; + font-size: 14px; + color: $c-gray-dark; + border: none; + outline: none; + } + } + + @e cancel { + display: none; + color: #44BB00; + font-size: 14px; + white-space: nowrap; + margin-left: 5px; + + @m focus { + display: block; + } + } + + .zan-icon-search { + color: $c-gray-darker; + position: absolute; + top: 9px; + left: 10px; + font-size: 16px; + } + + .zan-icon-clear { + display: none; + position: absolute; + right: 5px; + top: 8px; + color: #888; + } + } } \ No newline at end of file diff --git a/packages/zanui-css/src/steps.css b/packages/zanui-css/src/steps.css index 0a509d67c..87e2cb72a 100644 --- a/packages/zanui-css/src/steps.css +++ b/packages/zanui-css/src/steps.css @@ -1,5 +1,6 @@ @import './common/var.css'; @import './mixins/ellipsis.css'; +@import './icon.css'; @component-namespace zan { @b steps {