button

button 按钮

组件结构

  1. <template>
  2. <buttonclass="tui-btn-class tui-btn" :class="['tui-btn-'+size,plain?'tui-'+type+'-outline':'tui-'+(type || 'gradual'),getDisabledClass(disabled,type),getShapeClass(shape,plain)]"
  3. :hover-class="getHoverClass(disabled,type,plain)" :loading="loading" :disabled="disabled" :open-type="openType" @tap="handleClick"
  4. @getuserinfo="bindgetuserinfo" :form-type="formType"v-if="!hidden">
  5. <slot></slot>
  6. </button>
  7. </template>

组件脚本

  1. <script>
  2. exportdefault{
  3. name:"tuiButton",
  4. props:{
  5. // primary, white, danger, warning, green, gray,gradual
  6. type:{
  7. type:String,
  8. default:'gradual',
  9. },
  10. // block, mini, small
  11. size:{
  12. type:String,
  13. default:'block',
  14. },
  15. // circle, square,rightAngle
  16. shape:{
  17. type:String,
  18. default:'square'
  19. },
  20. plain:{
  21. type:Boolean,
  22. default:false
  23. },
  24. disabled:{
  25. type:Boolean,
  26. default:false,
  27. },
  28. loading:{
  29. type:Boolean,
  30. default:false,
  31. },
  32. openType:{
  33. type:String,
  34. default:''
  35. },
  36. formType:{
  37. type:String,
  38. default:''
  39. },
  40. hidden:{
  41. type:Boolean,
  42. default:false
  43. },
  44. bottom:{
  45. type:Boolean,
  46. default:false
  47. }
  48. },
  49. methods:{
  50. handleClick(){
  51. if(this.disabled){
  52. returnfalse;
  53. }
  54. this.$emit('click',{})
  55. },
  56. bindgetuserinfo({
  57. detail ={}
  58. }={}){
  59. this.$emit('getuserinfo', detail);
  60. },
  61. getDisabledClass:function(disabled, type){
  62. var className ='';
  63. if(disabled && type !='white'&& type !='gray'){
  64. className = type =='gradual'?'btn-gradual-disabled':'tui-dark-disabled';
  65. }
  66. return className;
  67. },
  68. getShapeClass:function(shape, plain){
  69. var className ='';
  70. if(shape =='circle'){
  71. className = plain ?'tui-outline-fillet':'tui-fillet';
  72. }elseif(shape =="rightAngle"){
  73. className = plain ?'tui-outline-rightAngle':'tui-rightAngle';
  74. }
  75. return className;
  76. },
  77. getHoverClass:function(disabled, type, plain){
  78. var className ='';
  79. if(!disabled){
  80. className = plain ?'tui-outline-hover':('tui-'+(type ||'gradual')+'-hover');
  81. }
  82. return className;
  83. }
  84. }
  85. }
  86. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "type" : 样式类型,可传入[primary, white, danger, warning, green, gray,gradual] 类型:"String",默认值:"gradual"    
     "size" :按钮大小,可传入[block, mini, small] 类型:"String",默认值:"block"
     "shape" :按钮形状,可传入[circle(圆角), square(默认方形),rightAngle(平角)],类型:"String",默认值:"square"
     "plain":是否空心,类型:"Boolean",默认值:false
     "disabled":是否禁用,类型:"Boolean",默认值:false
     "loading":是否显示加载图标,类型:"Boolean",默认值:false
     "openType":开放能力,参考官方文档,类型:"String",默认值:""
     "formType":用于 <form> 组件,参考官方文档,类型:"String",默认值:""
     "hidden":是否移除,建议直接在页面控制,类型:"Boolean",默认值:false

 methods:
   "handleClick":按钮点击事件
   "bindgetuserinfo":获取用户信息,参考官方文档
   "getDisabledClass":禁用样式class获取
   "getShapeClass":按钮形状class获取
   "getHoverClass":点击效果 class获取

示例

... 此处省略n行,下载源码查看