song-ui-u
Version:
vue3 + js的PC前端组件库
1 lines • 4.15 kB
Source Map (JSON)
{"version":3,"file":"index.vue.cjs","sources":["../../../../../packages/components/button/src/index.vue"],"sourcesContent":["<template>\n <button\n :disabled=\"disabled || loading || _loading\"\n :class=\"[\n ns.b(),\n ns.m(type),\n ns.m('size', controlSize),\n ns.is('round', round),\n ns.is('disabled', disabled),\n ns.is('loading', loading || _loading),\n ns.is('text', text),\n ns.is('link', link),\n ns.is('border', border),\n ns.is('block', block),\n ns.is('dashed', dashed),\n ns.is('circle', circle),\n ns.is('button-group', isGroup),\n ]\"\n @click=\"handlerChange\"\n type=\"button\"\n >\n <template v-if=\"loading || _loading\">\n <x-icon\n ><Loader\n :class=\"[`${ns.is('loading-transition', loading || _loading)}`]\"\n /></x-icon>\n </template>\n <template v-else>\n <x-icon v-if=\"icon || iconfont\">\n <i v-if=\"iconfont\" class=\"iconfont\" :class=\"iconfont\"></i>\n <component v-if=\"icon\" :is=\"icon\" />\n </x-icon>\n </template>\n <span v-if=\"$slots.default\"><slot /></span>\n </button>\n</template>\n<script>\nexport default { name: \"x-button\" };\n</script>\n<script setup>\nimport { ref, computed } from \"vue\";\nimport { useNamespace, useParent } from \"@ui-library/hook\";\nimport { useFormItem, XIcon } from \"@ui-library/components\";\nimport { Loader } from \"song-ui-pro-icon\";\n// useFormItem\nconst { formContent, fromItemContent } = useFormItem();\nconst ns = useNamespace(\"button\");\nconst parent = useParent(\"button-group\");\n/** emit */\nconst emit = defineEmits([\"click\"]);\n/** props */\nconst props = defineProps({\n type: {\n type: String,\n default: \"default\",\n },\n size: {\n type: String,\n default: \"default\",\n },\n icon: {\n type: [String, Object],\n default: \"\",\n },\n iconfont: {\n type: String,\n default: \"\",\n },\n round: Boolean, // 圆形按钮\n disabled: Boolean, // 禁用按钮\n text: Boolean, // 文字按钮\n link: Boolean, // 链接按钮\n border: Boolean, // 边框按钮\n dashed: Boolean, // 虚线边框按钮\n block: Boolean, // 块级按钮\n circle: Boolean, // 圆形按钮\n loading: Boolean, // 加载按钮\n beforeChange: Function,\n});\n/** computed */\nconst isGroup = parent.group();\nconst isGroupSize = parent.props(\"size\");\nconst controlSize = computed(\n () => isGroupSize || formContent?.size?.value || props.size\n);\n/** loading */\nconst _loading = ref(false);\n/**\n * 点击事件\n */\nconst handlerChange = (ev) => {\n const isFunction =\n Object.prototype.toString.call(props.beforeChange) === \"[object Function]\";\n if (!isFunction) {\n emit(\"click\", ev);\n return false;\n }\n // 启用加载\n _loading.value = true;\n props.beforeChange().finally(() => (_loading.value = false));\n};\n</script>\n"],"names":["useFormItem","useNamespace","useParent","computed","ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA;;AAPA,MAAA,WAAA,GAAe,EAAE,IAAI,EAAE,UAAU,EAAE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQnC,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,GAAGA,uBAAW,EAAE,CAAA;AACtD,MAAM,EAAE,GAAGC,oBAAY,CAAC,QAAQ,CAAC,CAAA;AACjC,MAAM,MAAM,GAAGC,eAAS,CAAC,cAAc,CAAC,CAAA;AACxC;AACA,MAAM,IAAI,GAAG,MAAsB,CAAA;AACnC;AACA,MAAM,KAAK,GAAG,OA2BZ,CAAA;AACF;AACA,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,EAAE,CAAA;AAC9B,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;AACxC,MAAM,WAAW,GAAGC,YAAQ;AAC5B,EAAE,MAAM,WAAW,IAAI,WAAW,EAAE,IAAI,EAAE,KAAK,IAAI,KAAK,CAAC,IAAG;AAC5D,CAAC,CAAA;AACD;AACA,MAAM,QAAQ,GAAGC,OAAG,CAAC,KAAK,CAAC,CAAA;AAC3B;AACA;AACA;AACA,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK;AAC9B,EAAE,MAAM,UAAU;AAClB,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,mBAAmB,CAAA;AAC9E,EAAE,IAAI,CAAC,UAAU,EAAE;AACnB,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;AACrB,IAAI,OAAO,KAAK,CAAA;AAChB,GAAE;AACF;AACA,EAAE,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAA;AACvB,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC,OAAO,CAAC,OAAO,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAA;AAC9D,CAAC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}