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行,下载源码查看