button.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <script>
  2. export default {
  3. name: "LemonButton",
  4. props: {
  5. color: {
  6. type: String,
  7. default: "default"
  8. },
  9. disabled: Boolean
  10. },
  11. render() {
  12. return (
  13. <button
  14. class={["lemon-button", `lemon-button--color-${this.color}`]}
  15. disabled={this.disabled}
  16. type="button"
  17. on-click={this._handleClick}
  18. >
  19. {this.$slots.default}
  20. </button>
  21. );
  22. },
  23. methods: {
  24. _handleClick(e) {
  25. this.$emit("click", e);
  26. }
  27. }
  28. };
  29. </script>
  30. <style lang="stylus">
  31. @import '~styles/utils/index'
  32. +b(lemon-button)
  33. outline none
  34. line-height 1.499
  35. display inline-block
  36. font-weight 400
  37. text-align center
  38. touch-action manipulation
  39. cursor pointer
  40. background-image none
  41. border 1px solid #ddd
  42. box-sizing border-box
  43. white-space nowrap
  44. padding 0 15px
  45. font-size 14px
  46. border-radius 4px
  47. height 32px
  48. user-select none
  49. transition all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)
  50. color rgba(0, 0, 0, 0.65)
  51. background-color #fff
  52. box-shadow 0 2px 0 rgba(0, 0, 0, 0.015)
  53. text-shadow 0 -1px 0 rgba(0, 0, 0, 0.12)
  54. +m(color-default)
  55. &:hover:not([disabled])
  56. border-color #666
  57. color #333
  58. &:active
  59. background-color #ddd
  60. &[disabled]
  61. cursor not-allowed
  62. color #aaa
  63. background #eee
  64. +m(color-grey)
  65. background #e1e1e1
  66. border-color #e1e1e1
  67. color #666
  68. &:hover:not([disabled])
  69. border-color #bbb
  70. </style>