Button.mjs 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
  1. import { defineComponent, createVNode as _createVNode } from "vue";
  2. import { extend, numericProp, preventDefault, makeStringProp, createNamespace, BORDER_SURROUND } from "../utils/index.mjs";
  3. import { useRoute, routeProps } from "../composables/use-route.mjs";
  4. import { Icon } from "../icon/index.mjs";
  5. import { Loading } from "../loading/index.mjs";
  6. const [name, bem] = createNamespace("button");
  7. const buttonProps = extend({}, routeProps, {
  8. tag: makeStringProp("button"),
  9. text: String,
  10. icon: String,
  11. type: makeStringProp("default"),
  12. size: makeStringProp("normal"),
  13. color: String,
  14. block: Boolean,
  15. plain: Boolean,
  16. round: Boolean,
  17. square: Boolean,
  18. loading: Boolean,
  19. hairline: Boolean,
  20. disabled: Boolean,
  21. iconPrefix: String,
  22. nativeType: makeStringProp("button"),
  23. loadingSize: numericProp,
  24. loadingText: String,
  25. loadingType: String,
  26. iconPosition: makeStringProp("left")
  27. });
  28. var stdin_default = defineComponent({
  29. name,
  30. props: buttonProps,
  31. emits: ["click"],
  32. setup(props, {
  33. emit,
  34. slots
  35. }) {
  36. const route = useRoute();
  37. const renderLoadingIcon = () => {
  38. if (slots.loading) {
  39. return slots.loading();
  40. }
  41. return _createVNode(Loading, {
  42. "size": props.loadingSize,
  43. "type": props.loadingType,
  44. "class": bem("loading")
  45. }, null);
  46. };
  47. const renderIcon = () => {
  48. if (props.loading) {
  49. return renderLoadingIcon();
  50. }
  51. if (slots.icon) {
  52. return _createVNode("div", {
  53. "class": bem("icon")
  54. }, [slots.icon()]);
  55. }
  56. if (props.icon) {
  57. return _createVNode(Icon, {
  58. "name": props.icon,
  59. "class": bem("icon"),
  60. "classPrefix": props.iconPrefix
  61. }, null);
  62. }
  63. };
  64. const renderText = () => {
  65. let text;
  66. if (props.loading) {
  67. text = props.loadingText;
  68. } else {
  69. text = slots.default ? slots.default() : props.text;
  70. }
  71. if (text) {
  72. return _createVNode("span", {
  73. "class": bem("text")
  74. }, [text]);
  75. }
  76. };
  77. const getStyle = () => {
  78. const {
  79. color,
  80. plain
  81. } = props;
  82. if (color) {
  83. const style = {
  84. color: plain ? color : "white"
  85. };
  86. if (!plain) {
  87. style.background = color;
  88. }
  89. if (color.includes("gradient")) {
  90. style.border = 0;
  91. } else {
  92. style.borderColor = color;
  93. }
  94. return style;
  95. }
  96. };
  97. const onClick = (event) => {
  98. if (props.loading) {
  99. preventDefault(event);
  100. } else if (!props.disabled) {
  101. emit("click", event);
  102. route();
  103. }
  104. };
  105. return () => {
  106. const {
  107. tag,
  108. type,
  109. size,
  110. block,
  111. round,
  112. plain,
  113. square,
  114. loading,
  115. disabled,
  116. hairline,
  117. nativeType,
  118. iconPosition
  119. } = props;
  120. const classes = [bem([type, size, {
  121. plain,
  122. block,
  123. round,
  124. square,
  125. loading,
  126. disabled,
  127. hairline
  128. }]), {
  129. [BORDER_SURROUND]: hairline
  130. }];
  131. return _createVNode(tag, {
  132. "type": nativeType,
  133. "class": classes,
  134. "style": getStyle(),
  135. "disabled": disabled,
  136. "onClick": onClick
  137. }, {
  138. default: () => [_createVNode("div", {
  139. "class": bem("content")
  140. }, [iconPosition === "left" && renderIcon(), renderText(), iconPosition === "right" && renderIcon()])]
  141. });
  142. };
  143. }
  144. });
  145. export {
  146. buttonProps,
  147. stdin_default as default
  148. };