button

button 按钮,和基础组件button略有不同,支持设置任意大小

组件结构

  1. <template>
  2. <buttonclass="tui-btn-class tui-btn" :class="[plain?'tui-'+type+'-outline':'tui-btn-'+(type || 'primary'),getDisabledClass(disabled,type),getShapeClass(shape,plain),getShadowClass(type,shadow,plain)]"
  3. :hover-class="getHoverClass(disabled,type,plain)" :style="{width:width,height:height,lineHeight:height,fontSize:size+'rpx'}"
  4. :loading="loading" :disabled="disabled" @tap="handleClick">
  5. <slot></slot>
  6. </button>
  7. </template>

组件脚本

  1. <script>
  2. exportdefault{
  3. name:"tuiButton",
  4. props:{
  5. //样式类型 primary, white, danger, warning, green,blue, gray
  6. type:{
  7. type:String,
  8. default:'primary'
  9. },
  10. //是否加阴影 type =primary和 danger有效
  11. shadow:{
  12. type:Boolean,
  13. default:false
  14. },
  15. // 宽度 rpx或 %
  16. width:{
  17. type:String,
  18. default:'100%'
  19. },
  20. //高度 rpx
  21. height:{
  22. type:String,
  23. default:'94rpx'
  24. },
  25. //字体大小 rpx
  26. size:{
  27. type:Number,
  28. default:32
  29. },
  30. //形状 circle(圆角), square(默认方形),rightAngle(平角)
  31. shape:{
  32. type:String,
  33. default:'square'
  34. },
  35. plain:{
  36. type:Boolean,
  37. default:false
  38. },
  39. disabled:{
  40. type:Boolean,
  41. default:false
  42. },
  43. loading:{
  44. type:Boolean,
  45. default:false
  46. }
  47. },
  48. methods:{
  49. handleClick(){
  50. if(this.disabled){
  51. returnfalse;
  52. }
  53. this.$emit('click',{})
  54. },
  55. getShadowClass:function(type, shadow,plain){
  56. let className ='';
  57. if(shadow && type !='white'&&!plain){
  58. className ='tui-shadow-'+ type;
  59. }
  60. return className;
  61. },
  62. getDisabledClass:function(disabled, type){
  63. let className ='';
  64. if(disabled && type !='white'&& type !='gray'){
  65. className ='tui-dark-disabled';
  66. }
  67. return className;
  68. },
  69. getShapeClass:function(shape, plain){
  70. let className ='';
  71. if(shape =='circle'){
  72. className = plain ?'tui-outline-fillet':'tui-fillet';
  73. }elseif(shape =="rightAngle"){
  74. className = plain ?'tui-outline-rightAngle':'tui-rightAngle';
  75. }
  76. return className;
  77. },
  78. getHoverClass:function(disabled, type, plain){
  79. let className ='';
  80. if(!disabled){
  81. className = plain ?'tui-outline-hover':('tui-'+(type ||'primary')+'-hover');
  82. }
  83. return className;
  84. }
  85. }
  86. }
  87. </script>

组件样式

... 此处省略n行

脚本说明

 props: 
     "type" : 样式类型,可传入[primary, white, danger, warning, green,blue, gray] 类型:"String",默认值:"primary"    
     "shadow":否加阴影 ,默认false
     "width":按钮宽度 rpx或 % ,默认100%
     "height":按钮高度 rpx ,默认94rpx
     "size" :按钮字体大小 rpx
     "shape" :按钮形状,可传入[circle(圆角), square(默认方形),rightAngle(平角)],类型:"String",默认值:"square"
     "plain":是否空心,类型:"Boolean",默认值:false
     "disabled":是否禁用,类型:"Boolean",默认值:false
     "loading":是否显示加载图标,类型:"Boolean",默认值:false

 methods:
   "handleClick":按钮点击事件
   "getShadowClass":获取阴影样式
   "getDisabledClass":禁用样式class获取
   "getShapeClass":按钮形状class获取
   "getHoverClass":点击效果 class获取

示例

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

extend-alert extend-tips