button

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

组件结构

  1. <template>
  2. <button class="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. export default {
  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. return false;
  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. } else if (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行,下载源码查看