bmui
Version:
Bluemoon Moon Components
2 lines • 47.6 kB
JavaScript
!function(t){var e={};function n(l){if(e[l])return e[l].exports;var i=e[l]={i:l,l:!1,exports:{}};return t[l].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,l){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:l})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var l=Object.create(null);if(n.r(l),Object.defineProperty(l,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(l,i,function(e){return t[e]}.bind(null,i));return l},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=16)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var l,i=n(8),r=(l=i)&&l.__esModule?l:{default:l};e.default={computed:{anchor:function(){return this.$route.path?this.$route.path.slice(1):""}},watch:{anchor:function(t){this.doUpdateScroll()}},mounted:function(){this.doUpdateScroll()},methods:{doUpdateScroll:function(){var t=this.$route.path.slice(1);if(t){var e=this.$el.querySelector("#"+t);e&&(this.$el.scrollTop=e.offsetTop-e.clientTop)}}},template:"<div>"+r.default+"</div>"}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var l,i=n(11),r=(l=i)&&l.__esModule?l:{default:l};e.default={components:{Readme:r.default},data:function(){return{currHash:"",radioModel:"",radioListModel:"",checkListLeftModel:[],checkListRightModel:[],selectorChecked:!1,fieldText1Model:"",fieldText2Model:"",fieldParagraph:"",fieldBtn:"",fieldBtnStatus:"",searchbox:"searchbox",searchboxEmpty:!1}},computed:{anchor:function(){return this.$route.path?this.$route.path.slice(1):""}},created:function(){},methods:{selectorClick:function(t){this.selectorChecked=t.checked},fieldBtnSubmit:function(){var t=this;this.fieldBtnStatus="loading",setTimeout(function(){t.fieldBtnStatus="success"},1e3),setTimeout(function(){t.fieldBtnStatus="warning"},2e3),setTimeout(function(){t.fieldBtnStatus="fail"},3e3),setTimeout(function(){t.fieldBtnStatus=""},4e3)},segmentChange:function(t){console.log(t)},pickerOpen:function(){this.$bmuiPicker.open([["a",{name:1234,value:4321,sub:["b","bb","bbb"]},"c"]],void 0,{container:this.$refs.picker,type:"TIME"})}}}},function(t,e,n){"use strict";function l(t,e,n,l,i,r,a,d){var o=typeof(t=t||{}).default;"object"!==o&&"function"!==o||(t=t.default);var c,s="function"==typeof t?t.options:t;if(e&&(s.render=e,s.staticRenderFns=n,s._compiled=!0),l&&(s.functional=!0),r&&(s._scopeId=r),a?(c=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},s._ssrRegister=c):i&&(c=d?function(){i.call(this,this.$root.$options.shadowRoot)}:i),c)if(s.functional){s._injectStyles=c;var u=s.render;s.render=function(t,e){return c.call(e),u(t,e)}}else{var h=s.beforeCreate;s.beforeCreate=h?[].concat(h,c):[c]}return{exports:t,options:s}}n.d(e,"a",function(){return l})},function(t,e,n){"use strict";n.d(e,"a",function(){return l}),n.d(e,"b",function(){return i});var l=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"m_page"},[n("div",{staticClass:"m_category"},[n("h2",[t._v("组件目录")]),t._v(" "),n("ul",[n("li",[n("button",{on:{click:function(e){t.$router.replace("cell")}}},[t._v("Cell")])]),t._v(" "),n("li",[n("button",{on:{click:function(e){t.$router.replace("choice")}}},[t._v("Choice")])]),t._v(" "),n("li",[n("button",{on:{click:function(e){t.$router.replace("field")}}},[t._v("Field")])]),t._v(" "),n("li",[n("button",{on:{click:function(e){t.$router.replace("searchbox")}}},[t._v("Searchbox")])]),t._v(" "),n("li",[n("button",{on:{click:function(e){t.$router.replace("segment")}}},[t._v("Segment")])]),t._v(" "),n("li",[n("button",{on:{click:function(e){t.$router.replace("empty")}}},[t._v("Empty")])]),t._v(" "),n("li",[n("button",{on:{click:function(e){t.$router.replace("picker")}}},[t._v("Picker")])])])]),t._v(" "),n("readme",{staticClass:"m_readme"}),t._v(" "),n("div",{staticClass:"m_preview"},[t.anchor?t._e():n("p",[t._v("请选择最左列目录的组件")]),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:"cell"===t.anchor,expression:"anchor === 'cell'"}],staticClass:"wrap"},[n("bmui-cell-arrow1",{attrs:{title:"cell-arrow1",content:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt ut magni perferendis rem hic quam, sunt cum, culpa inventore obcaecati at harum nam eaque fugit fuga perspiciatis. Illum, nihil voluptatibus."}}),t._v(" "),n("bmui-cell-arrow2",{attrs:{title:"cell-arrow2"}}),t._v(" "),n("bmui-cell-text",{attrs:{title:"cell-text",content:"Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur aut debitis nihil distinctio dolorum repudiandae laborum aliquid sapiente, totam culpa sint reiciendis modi dolor quasi dolorem iusto atque error qui."}}),t._v(" "),n("bmui-cell-paragraph",{attrs:{title:"cell-paragraph",content:"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit commodi corporis repellendus ipsum aliquid asperiores rerum quos. Aliquam, non nam alias eveniet, voluptate, maxime facere dolor provident rem recusandae excepturi."}})],1),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:"choice"===t.anchor,expression:"anchor === 'choice'"}],staticClass:"wrap"},[n("bmui-radio",{attrs:{title:"radio",items:["111",{name:"选项2",value:"222"},{name:"禁用选项",value:"333",disabled:!0},"444","555"]},model:{value:t.radioModel,callback:function(e){t.radioModel=e},expression:"radioModel"}}),t._v(" "),n("bmui-radio-list",{attrs:{items:["radio-list",{name:"选项",value:"222"},"选项很长很长很长很长很长很长很长很长很长很长很长很长很长"]},model:{value:t.radioListModel,callback:function(e){t.radioListModel=e},expression:"radioListModel"}}),t._v(" "),n("bmui-check-list-left",{attrs:{items:["check-list-left","222",{name:"选项名称",value:"333",disabled:!0}]},model:{value:t.checkListLeftModel,callback:function(e){t.checkListLeftModel=e},expression:"checkListLeftModel"}}),t._v(" "),n("bmui-check-list-right",{attrs:{items:["check-list-right","222",{name:"选项名称超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长",value:"333",disabled:!0}]},model:{value:t.checkListRightModel,callback:function(e){t.checkListRightModel=e},expression:"checkListRightModel"}}),t._v(" "),n("bmui-selector",{attrs:{item:"test",checked:t.selectorChecked},on:{click:t.selectorClick}}),t._v(" "),n("bmui-selector",{attrs:{item:{name:"选项2的名称",value:"222"},disabled:!0}})],1),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:"field"===t.anchor,expression:"anchor === 'field'"}],staticClass:"wrap"},[n("bmui-field-arrow1",{attrs:{title:"field-arrow1",content:"已选择"}}),t._v(" "),n("bmui-field-arrow2",{attrs:{title:"field-arrow2"}}),t._v(" "),n("bmui-field-text1",{attrs:{title:"field-text1",placeholder:"自定义占位符"},model:{value:t.fieldText1Model,callback:function(e){t.fieldText1Model=e},expression:"fieldText1Model"}}),t._v(" "),n("bmui-field-text1",{attrs:{title:"field-text1-readonly",readonly:"",placeholder:"自定义占位符"},model:{value:t.fieldText1Model,callback:function(e){t.fieldText1Model=e},expression:"fieldText1Model"}}),t._v(" "),n("bmui-field-text1",{attrs:{title:"field-text1-selectable",placeholder:"自定义占位符",selectable:""},model:{value:t.fieldText1Model,callback:function(e){t.fieldText1Model=e},expression:"fieldText1Model"}}),t._v(" "),n("bmui-field-text1",{attrs:{title:"field-text1-with-slot"},model:{value:t.fieldText1Model,callback:function(e){t.fieldText1Model=e},expression:"fieldText1Model"}},[n("div",[t._v("i'm a slot")])]),t._v(" "),n("bmui-field-text2",{attrs:{title:"field-text2"},model:{value:t.fieldText2Model,callback:function(e){t.fieldText2Model=e},expression:"fieldText2Model"}}),t._v(" "),n("bmui-field-text2",{attrs:{title:"field-text2-selectable",selectable:""},model:{value:t.fieldText2Model,callback:function(e){t.fieldText2Model=e},expression:"fieldText2Model"}}),t._v(" "),n("bmui-field-paragraph",{attrs:{title:"field-paragraph"},model:{value:t.fieldParagraph,callback:function(e){t.fieldParagraph=e},expression:"fieldParagraph"}}),t._v(" "),n("bmui-field-btn",{attrs:{title:"field-btn",btn:"按钮文字",status:t.fieldBtnStatus},on:{submit:t.fieldBtnSubmit},model:{value:t.fieldBtn,callback:function(e){t.fieldBtn=e},expression:"fieldBtn"}})],1),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:"searchbox"===t.anchor,expression:"anchor === 'searchbox'"}],staticClass:"wrap"},[n("bmui-searchbox",{on:{submit:function(e){t.searchboxEmpty=!0}},model:{value:t.searchbox,callback:function(e){t.searchbox=e},expression:"searchbox"}}),t._v(" "),t.searchboxEmpty?n("bmui-searchbox-empty"):t._e()],1),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:"segment"===t.anchor,expression:"anchor === 'segment'"}],staticClass:"wrap"},[n("bmui-segment",{attrs:{items:[{name:"选项1",value:"1",mark:100},{name:"选项2",value:"1",mark:1},"3","4"],index:1}})],1),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:"empty"===t.anchor,expression:"anchor === 'empty'"}],staticClass:"wrap"},[n("bmui-empty",{attrs:{title:"空页面",btn:"按钮要监听组件click.native事件"}})],1),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:"picker"===t.anchor,expression:"anchor === 'picker'"}],ref:"picker",staticClass:"wrap"},[n("button",{on:{click:t.pickerOpen}},[t._v("点击打开picker")])])])],1)},i=[];l._withStripped=!0},function(t,e,n){"use strict";function l(t,e){for(var n=[],l={},i=0;i<e.length;i++){var r=e[i],a=r[0],d={id:t+":"+i,css:r[1],media:r[2],sourceMap:r[3]};l[a]?l[a].parts.push(d):n.push(l[a]={id:a,parts:[d]})}return n}n.r(e),n.d(e,"default",function(){return g});var i="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!i)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var r={},a=i&&(document.head||document.getElementsByTagName("head")[0]),d=null,o=0,c=!1,s=function(){},u=null,h="data-vue-ssr-id",m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function g(t,e,n,i){c=n,u=i||{};var a=l(t,e);return p(a),function(e){for(var n=[],i=0;i<a.length;i++){var d=a[i];(o=r[d.id]).refs--,n.push(o)}e?p(a=l(t,e)):a=[];for(i=0;i<n.length;i++){var o;if(0===(o=n[i]).refs){for(var c=0;c<o.parts.length;c++)o.parts[c]();delete r[o.id]}}}}function p(t){for(var e=0;e<t.length;e++){var n=t[e],l=r[n.id];if(l){l.refs++;for(var i=0;i<l.parts.length;i++)l.parts[i](n.parts[i]);for(;i<n.parts.length;i++)l.parts.push(f(n.parts[i]));l.parts.length>n.parts.length&&(l.parts.length=n.parts.length)}else{var a=[];for(i=0;i<n.parts.length;i++)a.push(f(n.parts[i]));r[n.id]={id:n.id,refs:1,parts:a}}}}function x(){var t=document.createElement("style");return t.type="text/css",a.appendChild(t),t}function f(t){var e,n,l=document.querySelector("style["+h+'~="'+t.id+'"]');if(l){if(c)return s;l.parentNode.removeChild(l)}if(m){var i=o++;l=d||(d=x()),e=v.bind(null,l,i,!1),n=v.bind(null,l,i,!0)}else l=x(),e=function(t,e){var n=e.css,l=e.media,i=e.sourceMap;l&&t.setAttribute("media",l);u.ssrId&&t.setAttribute(h,e.id);i&&(n+="\n/*# sourceURL="+i.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */");if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,l),n=function(){l.parentNode.removeChild(l)};return e(t),function(l){if(l){if(l.css===t.css&&l.media===t.media&&l.sourceMap===t.sourceMap)return;e(t=l)}else n()}}var y,b=(y=[],function(t,e){return y[t]=e,y.filter(Boolean).join("\n")});function v(t,e,n,l){var i=n?"":l.css;if(t.styleSheet)t.styleSheet.cssText=b(e,i);else{var r=document.createTextNode(i),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(r,a[e]):t.appendChild(r)}}},function(t,e){t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n=t[1]||"",l=t[3];if(!l)return n;if(e&&"function"==typeof btoa){var i=(a=l,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),r=l.sources.map(function(t){return"/*# sourceURL="+l.sourceRoot+t+" */"});return[n].concat(r).concat([i]).join("\n")}var a;return[n].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var l={},i=0;i<this.length;i++){var r=this[i][0];"number"==typeof r&&(l[r]=!0)}for(i=0;i<t.length;i++){var a=t[i];"number"==typeof a[0]&&l[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(t,e){t.exports=bmui},function(t,e){t.exports=VueRouter},function(t,e){t.exports='<p>请在1024宽度的窗口下获得更好的预览效果</p>\n<p>Please view this page with at least 1024px width screen.</p>\n<h2 id="cell">Cell</h2>\n<blockquote>\n<p>仅具备展示功能，文本展示区域没有状态改变，大部分的Cell都具有slot的功能，即放置自定义元素充当content</p>\n</blockquote>\n<hr>\n<h3 id="bmui-cell-arrow1">bmui-cell-arrow1</h3>\n<h4 id="-">布局方式：块</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">title</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">"TITLE"</td>\n</tr>\n<tr>\n<td style="text-align:center">content</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">""</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"> <bmui-cell-arrow1\n title="标题"\n content="内容"/>\n</code></pre>\n<hr>\n<h3 id="bmui-cell-arrow2">bmui-cell-arrow2</h3>\n<h4 id="-">布局方式：块</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">title</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">"TITLE"</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"> <bmui-cell-arrow2\n title="标题"/>\n</code></pre>\n<hr>\n<h3 id="bmui-cell-text">bmui-cell-text</h3>\n<h4 id="-">布局方式：块</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">title</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">"TITLE"</td>\n</tr>\n<tr>\n<td style="text-align:center">content</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">""</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"> <bmui-cell-text\n title="标题"\n content="内容"/>\n</code></pre>\n<hr>\n<h3 id="bmui-cell-paragraph">bmui-cell-paragraph</h3>\n<h4 id="-">布局方式：块</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">title</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">"TITLE"</td>\n</tr>\n<tr>\n<td style="text-align:center">content</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">""</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"> <bmui-cell-paragraph\n title="标题"\n content="内容"/>\n</code></pre>\n<hr>\n<h2 id="choice">Choice</h2>\n<blockquote>\n<p>基于表单单元格的扩展形态，有单选，多选形态</p>\n</blockquote>\n<hr>\n<h3 id="bmui-radio">bmui-radio</h3>\n<h4 id="-">布局方式：块</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">title</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">"TITLE"</td>\n<td style="text-align:center">暂无</td>\n</tr>\n<tr>\n<td style="text-align:center">items</td>\n<td style="text-align:center">Array(String or Object)</td>\n<td style="text-align:center">[]</td>\n<td style="text-align:center">如果items项为Object，其格式应符合{ name, value, disabled? }结构，name为空时默认'ITEM'</td>\n</tr>\n<tr>\n<td style="text-align:center">v-model</td>\n<td style="text-align:center">Any</td>\n<td style="text-align:center">null</td>\n<td style="text-align:center">如果items项为Object，返回其value</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"> <bmui-radio\n title="标题"\n :items="['选项1', { name: '选项2', value: '2', disabled: true }"\n v-model="绑定对象"/>\n</code></pre>\n<hr>\n<h3 id="bmui-radio-list">bmui-radio-list</h3>\n<h4 id="-">布局方式：块</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">items</td>\n<td style="text-align:center">Array(String or Object)</td>\n<td style="text-align:center">[]</td>\n<td style="text-align:center">如果items项为Object，其格式应符合{ name, value, disabled? }结构，name为空是默认'ITEM'</td>\n</tr>\n<tr>\n<td style="text-align:center">v-model</td>\n<td style="text-align:center">Any</td>\n<td style="text-align:center">null</td>\n<td style="text-align:center">如果items项为Object，返回其value</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"> <bmui-radio-list\n :items="['选项1', { name: '选项2', value: '2', disabled: true }"\n v-model="绑定对象"/>\n</code></pre>\n<hr>\n<h3 id="bmui-check-list-left-bmui-check-list-right">bmui-check-list-left与bmui-check-list-right</h3>\n<h4 id="-">布局方式：块</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">items</td>\n<td style="text-align:center">Array(String or Object)</td>\n<td style="text-align:center">[]</td>\n<td style="text-align:center">如果items项为Object，其格式应符合{ name, value, disabled? }结构，name为空是默认'ITEM'</td>\n</tr>\n<tr>\n<td style="text-align:center">v-model</td>\n<td style="text-align:center">[Any]</td>\n<td style="text-align:center">[]</td>\n<td style="text-align:center">如果items项为Object，返回其value</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"> <bmui-check-list-left\n :items="['选项1', { name: '选项2', value: '2', disabled: true }"\n v-model="绑定对象"/>\n</code></pre>\n<hr>\n<h3 id="bmui-selector">bmui-selector</h3>\n<h4 id="-">布局方式：行内块</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">item</td>\n<td style="text-align:center">String or Object</td>\n<td style="text-align:center">'ITEM'</td>\n<td style="text-align:center">如果item为Object，其格式应符合{ name, value }结构</td>\n</tr>\n<tr>\n<td style="text-align:center">disabled</td>\n<td style="text-align:center">Any</td>\n<td style="text-align:center">undefined</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">checked</td>\n<td style="text-align:center">Any</td>\n<td style="text-align:center">false</td>\n<td style="text-align:center">/</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">行为</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center">Event</th>\n<th style="text-align:center">Args</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">click</td>\n<td style="text-align:center">Object（点击的响应）</td>\n<td style="text-align:center">返回结构为{ item, checked }</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"> <bmui-selector\n :item="{ name: '选项名称', value: '选项值' }"\n :checked="selector === '选项值'"\n :disabled="true"\n @click="selectorChange"/>\n</code></pre>\n<hr>\n<h2 id="field">Field</h2>\n<blockquote>\n<p>有交互的表单控件，该目录下的控件共享大部分input固有的属性，像maxlength，disable等，但一般不具备@change功能，只能通过v-model监听变化</p>\n</blockquote>\n<hr>\n<h3 id="bmui-field-arrow1">bmui-field-arrow1</h3>\n<h4 id="-">布局方式：块</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">title</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">'TITLE'</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">content</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">''</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">placeholder</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">'请选择'</td>\n<td style="text-align:center">/</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"> <bmui-field-arrow1\n title="field-arrow1"\n content="已选择"/>\n</code></pre>\n<hr>\n<h3 id="bmui-field-arrow2">bmui-field-arrow2</h3>\n<h4 id="-">布局方式：块</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">title</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">'TITLE'</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">content</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">''</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">placeholder</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">'请选择'</td>\n<td style="text-align:center">/</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"> <bmui-field-arrow2 title="field-arrow2"/>\n</code></pre>\n<hr>\n<h3 id="bmui-field-text1">bmui-field-text1</h3>\n<h4 id="-">布局方式：块</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">title</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">'TITLE'</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">v-model</td>\n<td style="text-align:center">Any</td>\n<td style="text-align:center">null</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">selectable</td>\n<td style="text-align:center">Boolean</td>\n<td style="text-align:center">false</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">placeholder</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">'请输入'</td>\n<td style="text-align:center">/</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"> <bmui-field-text1\n title="field-text1"\n placeholder="自定义占位符"\n v-model="绑定对象"/>\n</code></pre>\n<hr>\n<h3 id="bmui-field-text2">bmui-field-text2</h3>\n<h4 id="-">布局方式：块</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">title</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">'TITLE'</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">v-model</td>\n<td style="text-align:center">Any</td>\n<td style="text-align:center">null</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">selectable</td>\n<td style="text-align:center">Boolean</td>\n<td style="text-align:center">false</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">placeholder</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">'请输入'</td>\n<td style="text-align:center">/</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"> <bmui-field-text2\n title="field-text2"\n v-model="绑定对象"/>\n</code></pre>\n<hr>\n<h3 id="bmui-field-paragraph">bmui-field-paragraph</h3>\n<h4 id="-">布局方式：块</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">title</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">'TITLE'</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">maxlength</td>\n<td style="text-align:center">Number</td>\n<td style="text-align:center">100</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">v-model</td>\n<td style="text-align:center">Any</td>\n<td style="text-align:center">null</td>\n<td style="text-align:center">/</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"> <bmui-field-paragraph\n title="field-paragraph"\n maxlength="100"\n v-model="绑定对象"/>\n</code></pre>\n<hr>\n<h3 id="bmui-field-btn">bmui-field-btn</h3>\n<h4 id="-">布局方式：块</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">title</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">'TITLE'</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">btn</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">'BUTTON'</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">v-model</td>\n<td style="text-align:center">Any</td>\n<td style="text-align:center">null</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">status</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">''</td>\n<td style="text-align:center">目前有4种状态：loading，success，warning，fail</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">行为</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center">Event</th>\n<th style="text-align:center">Args</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">submit</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">/</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"> <bmui-field-btn\n title="field-btn"\n v-model="绑定对象"\n @submit="回调事件"\n :status="loading"/>\n</code></pre>\n<hr>\n<h2 id="searchbox">Searchbox</h2>\n<blockquote>\n<p>跟搜索有关的一些组件</p>\n</blockquote>\n<hr>\n<h3 id="searchbox">searchbox</h3>\n<h4 id="-">布局方式：块</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">v-model</td>\n<td style="text-align:center">Any</td>\n<td style="text-align:center">null</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">placeholder</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">'请输入关键字'</td>\n<td style="text-align:center">/</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">行为</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center">Event</th>\n<th style="text-align:center">Args</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">submit</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">/</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"><bmui-searchbox\n v-model="searchbox"\n @submit="按确定的回调"/>\n</code></pre>\n<hr>\n<h3 id="searchbox-empty">searchbox-empty</h3>\n<h4 id="-44px-">布局方式：块（距上一块约合44px）</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">title</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">'查找不到结果'</td>\n<td style="text-align:center">/</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"><bmui-searchbox-empty/>\n</code></pre>\n<hr>\n<h2 id="segment">Segment</h2>\n<blockquote>\n<p>1、每个项目宽度等分屏幕，最多等分4格，超出项宽度=25%屏幕\n2、项目格子达到最小内边距，字段过长需要显示“…”（建议每项中文字数2～6个）\n3、选中项目时，如能滑动，则自动把选中项滑动到屏幕中间（<strong>尚未实现</strong>）</p>\n</blockquote>\n<hr>\n<h3 id="segment">segment</h3>\n<h4 id="-34px-">布局方式：块（设计图默认高34px）</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">items</td>\n<td style="text-align:center">[String 或 Object]</td>\n<td style="text-align:center">[]</td>\n<td style="text-align:center">如果item是Object，需满足{ name: String, value: Any, mark: Number }这种格式，name为空时默认'ITEM'，mark大于99时显示99+</td>\n</tr>\n<tr>\n<td style="text-align:center">index</td>\n<td style="text-align:center">Number</td>\n<td style="text-align:center">null</td>\n<td style="text-align:center">/</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">行为</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center">Event</th>\n<th style="text-align:center">Args</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">change</td>\n<td style="text-align:center">Index</td>\n<td style="text-align:center">被选中的项数，之所以不用value，是因为value可能重复</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"><bmui-segment\n :items="[{ name: '选项1', value: '1', mark: 999 }, '选项2']"\n :index="1"/>\n</code></pre>\n<hr>\n<h2 id="empty">Empty</h2>\n<blockquote>\n<p>公用的空页面</p>\n</blockquote>\n<hr>\n<h3 id="empty">empty</h3>\n<h4 id="-20-">布局方式：绝对定位（距离上方20%）</h4>\n<h4 id="-">参数</h4>\n<table>\n<thead>\n<tr>\n<th style="text-align:center"></th>\n<th style="text-align:center">Type</th>\n<th style="text-align:center">Default</th>\n<th style="text-align:center">Remark</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style="text-align:center">title</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">'暂无数据'</td>\n<td style="text-align:center">/</td>\n</tr>\n<tr>\n<td style="text-align:center">btn</td>\n<td style="text-align:center">String</td>\n<td style="text-align:center">''</td>\n<td style="text-align:center">因为没有点击事件，所以要手动绑定@click.native进行监听</td>\n</tr>\n</tbody>\n</table>\n<h4 id="-">用法</h4>\n<pre><code class="lang-html"> <bmui-empty\n title="空页面"\n btn="按钮要监听组件click.native事件"/>\n</code></pre>\n<hr>\n'},function(t,e,n){(t.exports=n(5)(!0)).push([t.i,'\nh2[data-v-51a34a38] {\n color: #1fb8ff;\n font-weight: bold;\n}\nh2[data-v-51a34a38]:before {\n content: "# ";\n}\ntable[data-v-51a34a38] {\n min-width: 50%;\n}\nth[data-v-51a34a38], td[data-v-51a34a38] {\n border: 1px solid #ccc;\n padding: 5px;\n}\n',"",{version:3,sources:["/Users/hesiying/work/bmui/docs/docs/readme.vue"],names:[],mappings:";AAgCA;EACA,eAAA;EACA,kBAAA;CACA;AACA;EACA,cAAA;CACA;AACA;EACA,eAAA;CACA;AACA;EACA,uBAAA;EACA,aAAA;CACA",file:"readme.vue",sourcesContent:["<script>\nimport Readme from './readme.md'\n\nexport default {\n computed: {\n anchor () {\n return this.$route.path ? this.$route.path.slice(1) : ''\n }\n },\n watch: {\n anchor (v) {\n this.doUpdateScroll()\n }\n },\n mounted () {\n this.doUpdateScroll()\n },\n methods: {\n doUpdateScroll () {\n let id = this.$route.path.slice(1)\n if (id) {\n let target = this.$el.querySelector('#' + id)\n if (target) {\n this.$el.scrollTop = target.offsetTop - target.clientTop\n }\n }\n }\n },\n template: '<div>' + Readme + '</div>'\n}\n<\/script>\n<style scoped>\n h2 {\n color: #1fb8ff;\n font-weight: bold;\n }\n h2:before {\n content: \"# \";\n }\n table {\n min-width: 50%;\n }\n th, td {\n border: 1px solid #ccc;\n padding: 5px;\n }\n</style>\n"],sourceRoot:""}])},function(t,e,n){var l=n(9);"string"==typeof l&&(l=[[t.i,l,""]]),l.locals&&(t.exports=l.locals);(0,n(4).default)("bc9ab41a",l,!1,{})},function(t,e,n){"use strict";n.r(e);var l=n(0),i=n.n(l);for(var r in l)"default"!==r&&function(t){n.d(e,t,function(){return l[t]})}(r);var a=n(2),d=!1;var o=function(t){d||n(10)},c=Object(a.a)(i.a,void 0,void 0,!1,o,"data-v-51a34a38",null);c.options.__file="docs/readme.vue",e.default=c.exports},function(t,e,n){(t.exports=n(5)(!0)).push([t.i,"\n@media screen and (max-width: 1024px) {\n.m_category[data-v-07da210c] {\n display: none;\n}\n.m_readme[data-v-07da210c] {\n position: static;\n}\n.m_preview[data-v-07da210c] {\n display: none;\n}\n}\n@media screen and (min-width: 1024px) {\n.m_category[data-v-07da210c] {\n position: absolute;\n left: 0;\n top: 0;\n width: 150px;\n height: 100%;\n overflow: auto;\n}\n.m_readme[data-v-07da210c] {\n position: absolute;\n top: 0;\n left: 150px;\n right: 320px;\n height: 100%;\n overflow: auto;\n}\n.m_preview[data-v-07da210c] {\n position: absolute;\n right: 0;\n top: 0;\n height: 568px;\n width: 320px;\n overflow: auto;\n}\n}\n.m_page[data-v-07da210c] {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n overflow-y: auto;\n}\n.m_category[data-v-07da210c] {\n position: absolute;\n height: 100%;\n overflow: auto;\n}\n.m_readme[data-v-07da210c] {\n position: absolute;\n overflow: auto;\n}\n.m_preview[data-v-07da210c] {\n background-color: #f8f8f8;\n border: 1px solid #f00;\n}\n.m_preview .wrap[data-v-07da210c] {\n position: relative;\n min-height: 100%;\n}\n","",{version:3,sources:["/Users/hesiying/work/bmui/docs/docs/index.vue"],names:[],mappings:";AAyMA;AACA;IACA,cAAA;CACA;AACA;IACA,iBAAA;CACA;AACA;IACA,cAAA;CACA;CACA;AACA;AACA;IACA,mBAAA;IACA,QAAA;IACA,OAAA;IACA,aAAA;IACA,aAAA;IACA,eAAA;CACA;AACA;IACA,mBAAA;IACA,OAAA;IACA,YAAA;IACA,aAAA;IACA,aAAA;IACA,eAAA;CACA;AACA;IACA,mBAAA;IACA,SAAA;IACA,OAAA;IACA,cAAA;IACA,aAAA;IACA,eAAA;CACA;CACA;AACA;EACA,mBAAA;EACA,OAAA;EACA,QAAA;EACA,YAAA;EACA,aAAA;EACA,iBAAA;EACA,iBAAA;CACA;AACA;EACA,mBAAA;EACA,aAAA;EACA,eAAA;CACA;AACA;EACA,mBAAA;EACA,eAAA;CACA;AACA;EACA,0BAAA;EACA,uBAAA;CACA;AACA;EACA,mBAAA;EACA,iBAAA;CACA",file:"index.vue",sourcesContent:['<template>\n <div class="m_page">\n <div class="m_category">\n <h2>组件目录</h2>\n <ul>\n <li><button @click="$router.replace(\'cell\')">Cell</button></li>\n <li><button @click="$router.replace(\'choice\')">Choice</button></li>\n <li><button @click="$router.replace(\'field\')">Field</button></li>\n <li><button @click="$router.replace(\'searchbox\')">Searchbox</button></li>\n <li><button @click="$router.replace(\'segment\')">Segment</button></li>\n <li><button @click="$router.replace(\'empty\')">Empty</button></li>\n <li><button @click="$router.replace(\'picker\')">Picker</button></li>\n </ul>\n </div>\n <readme class="m_readme"/>\n <div class="m_preview">\n <p v-if="!anchor">请选择最左列目录的组件</p>\n <div\n class="wrap"\n v-show="anchor === \'cell\'">\n <bmui-cell-arrow1\n title="cell-arrow1"\n content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt ut magni perferendis rem hic quam, sunt cum, culpa inventore obcaecati at harum nam eaque fugit fuga perspiciatis. Illum, nihil voluptatibus."/>\n <bmui-cell-arrow2 title="cell-arrow2"/>\n <bmui-cell-text\n title="cell-text"\n content="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur aut debitis nihil distinctio dolorum repudiandae laborum aliquid sapiente, totam culpa sint reiciendis modi dolor quasi dolorem iusto atque error qui."/>\n <bmui-cell-paragraph\n title="cell-paragraph"\n content="Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit commodi corporis repellendus ipsum aliquid asperiores rerum quos. Aliquam, non nam alias eveniet, voluptate, maxime facere dolor provident rem recusandae excepturi."/>\n </div>\n <div\n class="wrap"\n v-show="anchor === \'choice\'">\n <bmui-radio\n title="radio"\n :items="[\'111\', { name: \'选项2\', value: \'222\' }, { name: \'禁用选项\', value: \'333\', disabled: true }, \'444\', \'555\']"\n v-model="radioModel"/>\n <bmui-radio-list\n :items="[\'radio-list\', { name: \'选项\', value: \'222\' }, \'选项很长很长很长很长很长很长很长很长很长很长很长很长很长\']"\n v-model="radioListModel"/>\n <bmui-check-list-left\n :items="[\'check-list-left\', \'222\', { name: \'选项名称\', value: \'333\', disabled: true }]"\n v-model="checkListLeftModel"/>\n <bmui-check-list-right\n :items="[\'check-list-right\', \'222\', { name: \'选项名称超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长\', value: \'333\', disabled: true }]"\n v-model="checkListRightModel"/>\n <bmui-selector\n item="test"\n :checked="selectorChecked"\n @click="selectorClick"/>\n <bmui-selector\n :item="{ name: \'选项2的名称\', value: \'222\' }"\n :disabled="true"/>\n </div>\n <div\n class="wrap"\n v-show="anchor === \'field\'">\n <bmui-field-arrow1\n title="field-arrow1"\n content="已选择"/>\n <bmui-field-arrow2 title="field-arrow2"/>\n <bmui-field-text1\n title="field-text1"\n placeholder="自定义占位符"\n v-model="fieldText1Model"/>\n <bmui-field-text1\n title="field-text1-readonly"\n readonly\n placeholder="自定义占位符"\n v-model="fieldText1Model"/>\n <bmui-field-text1\n title="field-text1-selectable"\n placeholder="自定义占位符"\n selectable\n v-model="fieldText1Model"/>\n <bmui-field-text1\n title="field-text1-with-slot"\n v-model="fieldText1Model">\n <div>i\'m a slot</div>\n </bmui-field-text1>\n <bmui-field-text2\n title="field-text2"\n v-model="fieldText2Model"/>\n <bmui-field-text2\n title="field-text2-selectable"\n selectable\n v-model="fieldText2Model"/>\n <bmui-field-paragraph\n title="field-paragraph"\n v-model="fieldParagraph"/>\n <bmui-field-btn\n title="field-btn"\n btn="按钮文字"\n v-model="fieldBtn"\n @submit="fieldBtnSubmit"\n :status="fieldBtnStatus"/>\n </div>\n <div\n class="wrap"\n v-show="anchor === \'searchbox\'">\n <bmui-searchbox\n v-model="searchbox"\n @submit="searchboxEmpty = true"/>\n <bmui-searchbox-empty v-if="searchboxEmpty"/>\n </div>\n <div\n class="wrap"\n v-show="anchor === \'segment\'">\n <bmui-segment\n :items="[{ name: \'选项1\', value: \'1\', mark: 100 },{ name: \'选项2\', value: \'1\', mark: 1 }, \'3\', \'4\']"\n :index="1"/>\n </div>\n <div\n class="wrap"\n v-show="anchor === \'empty\'">\n <bmui-empty\n title="空页面"\n btn="按钮要监听组件click.native事件"/>\n </div>\n <div\n class="wrap"\n v-show="anchor === \'picker\'"\n ref="picker">\n <button @click="pickerOpen">点击打开picker</button>\n </div>\n </div>\n </div>\n</template>\n<script>\nimport CompReadme from \'./readme.vue\'\nexport default {\n components: {\n \'Readme\': CompReadme\n },\n data () {\n return {\n currHash: \'\',\n radioModel: \'\',\n radioListModel: \'\',\n checkListLeftModel: [],\n checkListRightModel: [],\n selectorChecked: false,\n fieldText1Model: \'\',\n fieldText2Model: \'\',\n fieldParagraph: \'\',\n fieldBtn: \'\',\n fieldBtnStatus: \'\',\n searchbox: \'searchbox\',\n searchboxEmpty: false\n }\n },\n computed: {\n anchor () {\n return this.$route.path ? this.$route.path.slice(1) : \'\'\n }\n },\n created () {\n },\n methods: {\n selectorClick (res) {\n this.selectorChecked = res.checked\n },\n fieldBtnSubmit () {\n this.fieldBtnStatus = \'loading\'\n setTimeout(() => {\n this.fieldBtnStatus = \'success\'\n }, 1000)\n setTimeout(() => {\n this.fieldBtnStatus = \'warning\'\n }, 2000)\n setTimeout(() => {\n this.fieldBtnStatus = \'fail\'\n }, 3000)\n setTimeout(() => {\n this.fieldBtnStatus = \'\'\n }, 4000)\n },\n segmentChange (index) {\n console.log(index)\n },\n pickerOpen () {\n this.$bmuiPicker.open(\n [\n [\n \'a\',\n { name: 1234, value: 4321, sub: [\'b\', \'bb\', \'bbb\'] },\n \'c\'\n ]\n ],\n undefined,\n {\n container: this.$refs.picker,\n type: \'TIME\'\n }\n )\n }\n }\n}\n<\/script>\n<style scoped>\n @media screen and (max-width: 1024px) {\n .m_category {\n display: none;\n }\n .m_readme {\n position: static;\n }\n .m_preview {\n display: none;\n }\n }\n @media screen and (min-width: 1024px) {\n .m_category {\n position: absolute;\n left: 0;\n top: 0;\n width: 150px;\n height: 100%;\n overflow: auto;\n }\n .m_readme {\n position: absolute;\n top: 0;\n left: 150px;\n right: 320px;\n height: 100%;\n overflow: auto;\n }\n .m_preview {\n position: absolute;\n right: 0;\n top: 0;\n height: 568px;\n width: 320px;\n overflow: auto;\n }\n }\n .m_page {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow: hidden;\n overflow-y: auto;\n }\n .m_category {\n position: absolute;\n height: 100%;\n overflow: auto;\n }\n .m_readme {\n position: absolute;\n overflow: auto;\n }\n .m_preview {\n background-color: #f8f8f8;\n border: 1px solid #f00;\n }\n .m_preview .wrap {\n position: relative;\n min-height: 100%;\n }\n</style>\n'],sourceRoot:""}])},function(t,e,n){var l=n(12);"string"==typeof l&&(l=[[t.i,l,""]]),l.locals&&(t.exports=l.locals);(0,n(4).default)("1b268219",l,!1,{})},function(t,e,n){"use strict";n.r(e);var l=n(1),i=n.n(l);for(var r in l)"default"!==r&&function(t){n.d(e,t,function(){return l[t]})}(r);var a=n(3),d=n(2),o=!1;var c=function(t){o||n(13)},s=Object(d.a)(i.a,a.a,a.b,!1,c,"data-v-07da210c",null);s.options.__file="docs/index.vue",e.default=s.exports},function(t,e){t.exports=Vue},function(t,e,n){"use strict";var l=d(n(15)),i=d(n(14)),r=d(n(7)),a=d(n(6));function d(t){return t&&t.__esModule?t:{default:t}}l.default.use(r.default),l.default.use(a.default);var o=new r.default;new l.default({el:"#app",router:o,render:function(t){return t(i.default)}})}]);
//# sourceMappingURL=index.build.js.map