button.907d9785cec538974819.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{246:function(t,e,n){"use strict";n.r(e);var s=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"content ecode-doc"},[n("h1",[t._v("按钮")]),t._v(" "),t._m(0),t._v(" "),n("demo-block",[n("div",[n("p",[t._v("主要按钮、次要按钮、虚线按钮、文字按钮。")])]),t._v(" "),n("template",{slot:"source"},[n("element-demo0")],1),t._v(" "),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="button-demo">\n    <e-button type="primary"> 主要按钮</e-button> \n    <e-button type="default"> 次要按钮</e-button> \n    <e-button type="dashed"> 虚线按钮</e-button> \n    <e-button type="text"> 文字按钮</e-button>\n</div>\n\n')])])])],2),t._m(1),t._v(" "),n("demo-block",[n("div",[n("p",[t._v("当需要在按钮中加入图标可以设置icon属性,shape属性可以指定按钮形状。")])]),t._v(" "),n("template",{slot:"source"},[n("element-demo1")],1),t._v(" "),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="button-demo">\n    <e-button icon="ecode-search"> 查询</e-button> \n    <e-button icon="ecode-search" icon-position="right"> 查询</e-button> \n    <e-button icon="ecode-search" type="primary" shape="circle"></e-button> \n    <e-button icon="ecode-search" type="primary" shape="round"></e-button> \n    <e-button icon="ecode-search" type="primary" shape="round">查询</e-button> \n</div>\n\n')])])])],2),t._m(2),t._v(" "),n("demo-block",[n("div",[n("p",[t._v("通过 size 属性设置按钮尺寸。按钮有大（large）、中(normal)、小(small)三种尺寸。")])]),t._v(" "),n("template",{slot:"source"},[n("element-demo2")],1),t._v(" "),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="button-demo">\n    <e-button  size="large"> 大按钮</e-button> \n    <e-button  > 中等按钮</e-button> \n    <e-button  size="small"> 小按钮</e-button> \n</div>\n\n')])])])],2),t._m(3),t._v(" "),n("demo-block",[n("div",[n("p",[t._v("在有色背景中显示的按钮。")])]),t._v(" "),n("template",{slot:"source"},[n("element-demo3")],1),t._v(" "),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="button-demo-ghost">\n    <e-button ghost type="primary" > 主要</e-button> \n    <e-button  ghost > 次要</e-button> \n    <e-button ghost  type="dashed"> 虚线</e-button> \n</div>\n\n')])])])],2),t._m(4),t._v(" "),n("demo-block",[n("div",[n("p",[t._v("给按钮设置disabled 属性让按钮不可用。")])]),t._v(" "),n("template",{slot:"source"},[n("element-demo4")],1),t._v(" "),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="button-demo">\n    <e-button disabled type="primary" > 主要</e-button> \n    <e-button  disabled > 次要</e-button> \n    <e-button disabled  type="dashed"> 虚线</e-button> \n</div>\n\n')])])])],2),t._m(5),t._v(" "),n("demo-block",[n("div",[n("p",[t._v("给按钮设置disabled 属性让按钮不可用。")])]),t._v(" "),n("template",{slot:"source"},[n("element-demo5")],1),t._v(" "),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="button-demo">\n    <e-button danger  type="primary" > 主要</e-button> \n    <e-button  danger > 次要</e-button> \n    <e-button danger  type="dashed"> 虚线</e-button> \n    <e-button danger  type="text"> 文字</e-button> \n</div>\n\n')])])])],2),t._m(6),t._v(" "),n("demo-block",[n("div",[n("p",[t._v("给按钮设置loading按钮。")])]),t._v(" "),n("template",{slot:"source"},[n("element-demo6")],1),t._v(" "),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<div class="button-demo">\n    <e-button loading  type="primary" > 主要</e-button> \n    <e-button  danger  loading> 次要</e-button> \n</div>\n\n')])])])],2),t._m(7),t._v(" "),n("p",[t._v("通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> shape -> size -> loading -> disabled。")]),t._v(" "),t._m(8)],1)};s._withStripped=!0;var r=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(t[s]=n[s])}return t},i={name:"component-doc",components:{"element-demo0":function(){var t=function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("div",{staticClass:"button-demo"},[e("e-button",{attrs:{type:"primary"}},[this._v(" 主要按钮")]),this._v(" "),e("e-button",{attrs:{type:"default"}},[this._v(" 次要按钮")]),this._v(" "),e("e-button",{attrs:{type:"dashed"}},[this._v(" 虚线按钮")]),this._v(" "),e("e-button",{attrs:{type:"text"}},[this._v(" 文字按钮")])],1)])};t._withStripped=!0;return r({render:t,staticRenderFns:[]},{})}(),"element-demo1":function(){var t=function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("div",{staticClass:"button-demo"},[e("e-button",{attrs:{icon:"ecode-search"}},[this._v(" 查询")]),this._v(" "),e("e-button",{attrs:{icon:"ecode-search","icon-position":"right"}},[this._v(" 查询")]),this._v(" "),e("e-button",{attrs:{icon:"ecode-search",type:"primary",shape:"circle"}}),this._v(" "),e("e-button",{attrs:{icon:"ecode-search",type:"primary",shape:"round"}}),this._v(" "),e("e-button",{attrs:{icon:"ecode-search",type:"primary",shape:"round"}},[this._v("查询")])],1)])};t._withStripped=!0;return r({render:t,staticRenderFns:[]},{})}(),"element-demo2":function(){var t=function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("div",{staticClass:"button-demo"},[e("e-button",{attrs:{size:"large"}},[this._v(" 大按钮")]),this._v(" "),e("e-button",[this._v(" 中等按钮")]),this._v(" "),e("e-button",{attrs:{size:"small"}},[this._v(" 小按钮")])],1)])};t._withStripped=!0;return r({render:t,staticRenderFns:[]},{})}(),"element-demo3":function(){var t=function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("div",{staticClass:"button-demo-ghost"},[e("e-button",{attrs:{ghost:"",type:"primary"}},[this._v(" 主要")]),this._v(" "),e("e-button",{attrs:{ghost:""}},[this._v(" 次要")]),this._v(" "),e("e-button",{attrs:{ghost:"",type:"dashed"}},[this._v(" 虚线")])],1)])};t._withStripped=!0;return r({render:t,staticRenderFns:[]},{})}(),"element-demo4":function(){var t=function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("div",{staticClass:"button-demo"},[e("e-button",{attrs:{disabled:"",type:"primary"}},[this._v(" 主要")]),this._v(" "),e("e-button",{attrs:{disabled:""}},[this._v(" 次要")]),this._v(" "),e("e-button",{attrs:{disabled:"",type:"dashed"}},[this._v(" 虚线")])],1)])};t._withStripped=!0;return r({render:t,staticRenderFns:[]},{})}(),"element-demo5":function(){var t=function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("div",{staticClass:"button-demo"},[e("e-button",{attrs:{danger:"",type:"primary"}},[this._v(" 主要")]),this._v(" "),e("e-button",{attrs:{danger:""}},[this._v(" 次要")]),this._v(" "),e("e-button",{attrs:{danger:"",type:"dashed"}},[this._v(" 虚线")]),this._v(" "),e("e-button",{attrs:{danger:"",type:"text"}},[this._v(" 文字")])],1)])};t._withStripped=!0;return r({render:t,staticRenderFns:[]},{})}(),"element-demo6":function(){var t=function(){var t=this.$createElement,e=this._self._c||t;return e("div",[e("div",{staticClass:"button-demo"},[e("e-button",{attrs:{loading:"",type:"primary"}},[this._v(" 主要")]),this._v(" "),e("e-button",{attrs:{danger:"",loading:""}},[this._v(" 次要")])],1)])};t._withStripped=!0;return r({render:t,staticRenderFns:[]},{})}()}},a=n(0),o=Object(a.a)(i,s,[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"%E5%9F%BA%E7%A1%80%E6%8C%89%E9%92%AE"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#%E5%9F%BA%E7%A1%80%E6%8C%89%E9%92%AE"}},[this._v("¶")]),this._v(" 基础按钮")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"%E5%B8%A6%E6%9C%89%E5%9B%BE%E6%A0%87"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#%E5%B8%A6%E6%9C%89%E5%9B%BE%E6%A0%87"}},[this._v("¶")]),this._v(" 带有图标")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"%E6%8C%89%E9%92%AE%E5%B0%BA%E5%AF%B8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#%E6%8C%89%E9%92%AE%E5%B0%BA%E5%AF%B8"}},[this._v("¶")]),this._v(" 按钮尺寸")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"%E5%B9%BD%E7%81%B5%E6%8C%89%E9%92%AE"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#%E5%B9%BD%E7%81%B5%E6%8C%89%E9%92%AE"}},[this._v("¶")]),this._v(" 幽灵按钮")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"%E4%B8%8D%E5%8F%AF%E7%94%A8%E7%8A%B6%E6%80%81"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#%E4%B8%8D%E5%8F%AF%E7%94%A8%E7%8A%B6%E6%80%81"}},[this._v("¶")]),this._v(" 不可用状态")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"%E5%8D%B1%E9%99%A9%E6%8C%89%E9%92%AE"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#%E5%8D%B1%E9%99%A9%E6%8C%89%E9%92%AE"}},[this._v("¶")]),this._v(" 危险按钮")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"loading%E6%8C%89%E9%92%AE"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#loading%E6%8C%89%E9%92%AE"}},[this._v("¶")]),this._v(" loading按钮")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"api"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api"}},[this._v("¶")]),this._v(" API")])},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("table",[n("thead",[n("tr",[n("th",[t._v("参数")]),t._v(" "),n("th",[t._v("说明")]),t._v(" "),n("th",[t._v("类型")]),t._v(" "),n("th",[t._v("可选值")]),t._v(" "),n("th",[t._v("默认值")])])]),t._v(" "),n("tbody",[n("tr",[n("td",[t._v("type")]),t._v(" "),n("td",[t._v("按钮类型")]),t._v(" "),n("td",[t._v("string")]),t._v(" "),n("td",[t._v("—")]),t._v(" "),n("td",[t._v("primary default dashed text")])]),t._v(" "),n("tr",[n("td",[t._v("shape")]),t._v(" "),n("td",[t._v("按钮形状")]),t._v(" "),n("td",[t._v("string")]),t._v(" "),n("td",[t._v("rect circle round")]),t._v(" "),n("td",[t._v("rect")])]),t._v(" "),n("tr",[n("td",[t._v("size")]),t._v(" "),n("td",[t._v("按钮大小")]),t._v(" "),n("td",[t._v("string")]),t._v(" "),n("td",[t._v("normal large small")]),t._v(" "),n("td",[t._v("normal")])]),t._v(" "),n("tr",[n("td",[t._v("loading")]),t._v(" "),n("td",[t._v("加载按钮")]),t._v(" "),n("td",[t._v("boolean")]),t._v(" "),n("td",[t._v("true false")]),t._v(" "),n("td",[t._v("false")])]),t._v(" "),n("tr",[n("td",[t._v("ghost")]),t._v(" "),n("td",[t._v("幽灵按钮")]),t._v(" "),n("td",[t._v("boolean")]),t._v(" "),n("td",[t._v("true false")]),t._v(" "),n("td",[t._v("false")])]),t._v(" "),n("tr",[n("td",[t._v("icon")]),t._v(" "),n("td",[t._v("按钮图标")]),t._v(" "),n("td",[t._v("string")]),t._v(" "),n("td",[t._v("-")]),t._v(" "),n("td",[t._v("-")])]),t._v(" "),n("tr",[n("td",[t._v("iconPosition")]),t._v(" "),n("td",[t._v("按钮图标位置")]),t._v(" "),n("td",[t._v("string")]),t._v(" "),n("td",[t._v("left right")]),t._v(" "),n("td",[t._v("left")])]),t._v(" "),n("tr",[n("td",[t._v("wave")]),t._v(" "),n("td",[t._v("是否显示波浪效果")]),t._v(" "),n("td",[t._v("boolean")]),t._v(" "),n("td",[t._v("false true")]),t._v(" "),n("td",[t._v("true")])])])])}],!1,null,null,null);o.options.__file="doc/pages/button.md";e.default=o.exports}}]);