123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148 |
- import { createVNode as _createVNode } from "vue";
- import { defineComponent } from "vue";
- import { extend, numericProp, preventDefault, makeStringProp, createNamespace, BORDER_SURROUND } from "../utils/index.mjs";
- import { useRoute, routeProps } from "../composables/use-route.mjs";
- import { Icon } from "../icon/index.mjs";
- import { Loading } from "../loading/index.mjs";
- const [name, bem] = createNamespace("button");
- const buttonProps = extend({}, routeProps, {
- tag: makeStringProp("button"),
- text: String,
- icon: String,
- type: makeStringProp("default"),
- size: makeStringProp("normal"),
- color: String,
- block: Boolean,
- plain: Boolean,
- round: Boolean,
- square: Boolean,
- loading: Boolean,
- hairline: Boolean,
- disabled: Boolean,
- iconPrefix: String,
- nativeType: makeStringProp("button"),
- loadingSize: numericProp,
- loadingText: String,
- loadingType: String,
- iconPosition: makeStringProp("left")
- });
- var stdin_default = defineComponent({
- name,
- props: buttonProps,
- emits: ["click"],
- setup(props, {
- emit,
- slots
- }) {
- const route = useRoute();
- const renderLoadingIcon = () => {
- if (slots.loading) {
- return slots.loading();
- }
- return _createVNode(Loading, {
- "size": props.loadingSize,
- "type": props.loadingType,
- "class": bem("loading")
- }, null);
- };
- const renderIcon = () => {
- if (props.loading) {
- return renderLoadingIcon();
- }
- if (slots.icon) {
- return _createVNode("div", {
- "class": bem("icon")
- }, [slots.icon()]);
- }
- if (props.icon) {
- return _createVNode(Icon, {
- "name": props.icon,
- "class": bem("icon"),
- "classPrefix": props.iconPrefix
- }, null);
- }
- };
- const renderText = () => {
- let text;
- if (props.loading) {
- text = props.loadingText;
- } else {
- text = slots.default ? slots.default() : props.text;
- }
- if (text) {
- return _createVNode("span", {
- "class": bem("text")
- }, [text]);
- }
- };
- const getStyle = () => {
- const {
- color,
- plain
- } = props;
- if (color) {
- const style = {
- color: plain ? color : "white"
- };
- if (!plain) {
- style.background = color;
- }
- if (color.includes("gradient")) {
- style.border = 0;
- } else {
- style.borderColor = color;
- }
- return style;
- }
- };
- const onClick = (event) => {
- if (props.loading) {
- preventDefault(event);
- } else if (!props.disabled) {
- emit("click", event);
- route();
- }
- };
- return () => {
- const {
- tag,
- type,
- size,
- block,
- round,
- plain,
- square,
- loading,
- disabled,
- hairline,
- nativeType,
- iconPosition
- } = props;
- const classes = [bem([type, size, {
- plain,
- block,
- round,
- square,
- loading,
- disabled,
- hairline
- }]), {
- [BORDER_SURROUND]: hairline
- }];
- return _createVNode(tag, {
- "type": nativeType,
- "class": classes,
- "style": getStyle(),
- "disabled": disabled,
- "onClick": onClick
- }, {
- default: () => [_createVNode("div", {
- "class": bem("content")
- }, [iconPosition === "left" && renderIcon(), renderText(), iconPosition === "right" && renderIcon()])]
- });
- };
- }
- });
- export {
- stdin_default as default
- };
|