Button.mjs 3.5 KB

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