ivue-material-plus
Version:
A high quality UI components Library with Vue.js
1 lines • 4.96 kB
Source Map (JSON)
{"version":3,"file":"panel.mjs","sources":["../../../../../src/components/ivue-collapse/panel.vue"],"sourcesContent":["<template>\r\n <div :class=\"classes\">\r\n <!-- 头部 -->\r\n <div :class=\"headerClasses\" @click=\"handleToggle\">\r\n <slot name=\"title\">{{ title }}</slot>\r\n <!-- icon -->\r\n <slot name=\"header-icon\" v-if=\"!hideArrow\">\r\n <ivue-icon>keyboard_arrow_right</ivue-icon>\r\n </slot>\r\n </div>\r\n <!-- transition -->\r\n <collapse-transition v-if=\"data.mounted\">\r\n <div :class=\"`${prefixCls}--content`\" v-show=\"data.isActive\">\r\n <div :class=\"`${prefixCls}--content-box`\">\r\n <slot name=\"content\"></slot>\r\n </div>\r\n </div>\r\n </collapse-transition>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n defineComponent,\r\n reactive,\r\n computed,\r\n inject,\r\n getCurrentInstance,\r\n onMounted,\r\n onBeforeUnmount,\r\n} from 'vue';\r\nimport IvueIcon from '../ivue-icon/index.vue';\r\nimport CollapseTransition from '../../utils/collapse-transition';\r\n\r\n// type\r\nimport { CascaderContextKey } from './types/collapse';\r\nimport type { Data, PanelInstance } from './types/panel';\r\n\r\nconst prefixCls = 'ivue-collapse-panel';\r\n\r\nexport default defineComponent({\r\n name: prefixCls,\r\n props: {\r\n /**\r\n * 标题\r\n *\r\n * @type {String}\r\n */\r\n title: {\r\n type: String,\r\n default: '',\r\n },\r\n /**\r\n * 用于设置激活 panel\r\n *\r\n * @type {String}\r\n */\r\n name: {\r\n type: String,\r\n },\r\n /**\r\n * 隐藏箭头\r\n *\r\n * @type {Boolean}\r\n */\r\n hideArrow: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n },\r\n setup(props: any) {\r\n const IvueCollapse = inject(CascaderContextKey);\r\n\r\n // 支持访问内部组件实例\r\n const vm = getCurrentInstance() as PanelInstance;\r\n\r\n // data\r\n const data = reactive<Data>({\r\n /**\r\n * 是否激活\r\n *\r\n * @type Boolean\r\n */\r\n isActive: false,\r\n /**\r\n * 下标\r\n *\r\n * @type {Number}\r\n */\r\n index: 0,\r\n /**\r\n * 是否初始化完成\r\n *\r\n * @type {Boolean}\r\n */\r\n mounted: false,\r\n });\r\n\r\n // onMounted\r\n onMounted(() => {\r\n // 初始化完成\r\n data.mounted = true;\r\n\r\n IvueCollapse.pushExpandable(vm);\r\n });\r\n\r\n // onBeforeUnmount\r\n onBeforeUnmount(() => {\r\n IvueCollapse.removeExpandable(vm);\r\n });\r\n\r\n // computed\r\n\r\n // 外层样式\r\n const classes = computed(() => {\r\n return [\r\n `${prefixCls}`,\r\n {\r\n [`${prefixCls}--active`]: data.isActive,\r\n },\r\n ];\r\n });\r\n\r\n // 头部 class\r\n const headerClasses = computed(() => {\r\n return [`${prefixCls}--header`];\r\n });\r\n\r\n // methods\r\n\r\n const handleToggle = () => {\r\n IvueCollapse.toggle({\r\n name: props.name || data.index,\r\n isActive: data.isActive,\r\n });\r\n };\r\n\r\n return {\r\n prefixCls,\r\n\r\n // data\r\n data,\r\n\r\n // computed\r\n classes,\r\n headerClasses,\r\n\r\n // methods\r\n handleToggle,\r\n };\r\n },\r\n components: {\r\n IvueIcon,\r\n CollapseTransition,\r\n },\r\n});\r\n</script>\r\n"],"names":["_resolveComponent","_normalizeClass","_createCommentVNode","_createElementVNode","_createTextVNode","_toDisplayString","_renderSlot","_createVNode","_withCtx","_openBlock","_createBlock","_withDirectives"],"mappings":";;;;;;yCACEA,iBAiBM,qBAAA,CAAA,CAAA;;IAhBJ,KAAA,EAAWC,cAAA,CAAA,IAAA,CAAA,OAAA,CAAA;AAAA,GACX,EAAA;AAAA,IAAAC,mBAAW,gBAAE,CAAA;AAAA,IAAqBC,mBAAA,KAAA,EAAA;AAAA,MAAA,KAAA,EAAAF,cAAA,CAAA,IAAA,CAAA,aAAA,CAAA;AAAA,MAChC,OAAqC,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,YAAA,IAAA,IAAA,CAAA,YAAA,CAAA,GAAA,IAAA,CAAA,CAAA;AAAA,KAAA,EAAA;AAAA;QACrCG,eAAa,CAAAC,eAAA,CAAA,IAAA,CAAA,KAAA,GAAA,CAAA,CAAA;AAAA,OAAA,CAAA;AAAA,MAGNH,mBAAA,QAAA,CAAA;AAAA,MAAA,CAAA,IADL,CAAA,SAAA,GAA+BI,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,EAAA,MAAA;AAAA,QAApBC,WAAA,CAAA,sBAAA,IAAA,EAAA;AAAA,UAAA,OAAA,EAAAC,QAAA,MAAA;AAAA;;;;WAGfN,kBAAmB,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,OACQ,CAAK,CAAA;AAAA,IAAAA,mBAAhC,cAMsB,CAAA;AAAA,IAAA,IAAA,CAAA,IAAA,CAAA,OAAA,IAAAO,SAAA,EAAA,EAAAC,YALpB,8BAIM,EAAA,EAAA,GAAA,EAAA,CAAA,EAAA,EAAA;AAAA,MAJK,OAAA,EAAAF,QAAA,MAAA;AAAA,QAAAG,cAAA,CAAAR,mBAAA,KAAA,EAAA;AAAA,UACT,KAEM,EAAAF,cAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,SAAA,CAAA,CAAA;AAAA,SAAA,EAAA;AAAA;YADJ,KAA4B,EAAAA,cAAA,CAAA,CAAA,EAAA,IAAA,CAAA,SAAA,CAAA,aAAA,CAAA,CAAA;AAAA,WAAA,EAAA;AAAA;aAFc,CAAA,CAAA;AAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAA;;;;;;;;;;;"}