index.js 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import { VantComponent } from '../common/component';
  2. import { button } from '../mixins/button';
  3. import { openType } from '../mixins/open-type';
  4. VantComponent({
  5. mixins: [button, openType],
  6. classes: ['hover-class', 'loading-class'],
  7. data: {
  8. style: ''
  9. },
  10. props: {
  11. icon: String,
  12. plain: Boolean,
  13. block: Boolean,
  14. round: Boolean,
  15. square: Boolean,
  16. loading: Boolean,
  17. hairline: Boolean,
  18. disabled: Boolean,
  19. loadingText: String,
  20. customStyle: String,
  21. loadingType: {
  22. type: String,
  23. value: 'circular'
  24. },
  25. type: {
  26. type: String,
  27. value: 'default'
  28. },
  29. size: {
  30. type: String,
  31. value: 'normal'
  32. },
  33. loadingSize: {
  34. type: String,
  35. value: '20px'
  36. },
  37. color: {
  38. type: String,
  39. observer(color) {
  40. let style = '';
  41. if (color) {
  42. style += `color: ${this.data.plain ? color : 'white'};`;
  43. if (!this.data.plain) {
  44. // Use background instead of backgroundColor to make linear-gradient work
  45. style += `background: ${color};`;
  46. }
  47. // hide border when color is linear-gradient
  48. if (color.indexOf('gradient') !== -1) {
  49. style += 'border: 0;';
  50. }
  51. else {
  52. style += `border-color: ${color};`;
  53. }
  54. }
  55. if (style !== this.data.style) {
  56. this.setData({ style });
  57. }
  58. }
  59. }
  60. },
  61. methods: {
  62. onClick() {
  63. if (!this.data.disabled && !this.data.loading) {
  64. this.$emit('click');
  65. }
  66. }
  67. }
  68. });