ivue-material-plus
Version:
A high quality UI components Library with Vue.js
1 lines • 3.89 kB
Source Map (JSON)
{"version":3,"file":"menu-item.mjs","sources":["../../../../../src/components/ivue-cascader/menu-item.vue"],"sourcesContent":["<template>\r\n <li\r\n :class=\"classes\"\r\n @click.stop=\"handleClickItem\"\r\n @mouseenter.stop=\"handleHoverItem\"\r\n >\r\n {{ item.label }}\r\n <ivue-icon v-show=\"showArrow\">{{ childrenIcon }}</ivue-icon>\r\n <!-- loading -->\r\n <div\r\n :class=\"`${prefixCls}-loading`\"\r\n v-ivue-loading=\"true\"\r\n v-if=\"showLoading\"\r\n ></div>\r\n </li>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, computed } from 'vue';\r\n\r\nimport IvueIcon from '../ivue-icon/index.vue';\r\nimport IvueLoading from '../ivue-loading/directive';\r\n\r\n// type\r\nimport type { Props } from './types/menu-item';\r\n\r\nconst prefixCls = 'ivue-cascader-menu--item';\r\n\r\nexport default defineComponent({\r\n name: prefixCls,\r\n emits: ['click', 'mouseenter'],\r\n directives: {\r\n IvueLoading,\r\n },\r\n props: {\r\n /**\r\n * item\r\n *\r\n * @type {Object}\r\n */\r\n item: {\r\n type: Object,\r\n },\r\n /**\r\n * 临时item\r\n *\r\n * @type {Object}\r\n */\r\n tmpItem: {\r\n type: Object,\r\n },\r\n /**\r\n * 子选项图标\r\n *\r\n * @type {String}\r\n */\r\n childrenIcon: {\r\n type: String,\r\n default: 'keyboard_arrow_right',\r\n },\r\n },\r\n setup(props: Props, { emit }) {\r\n // computed\r\n\r\n // 外层样式\r\n const classes = computed(() => {\r\n return [\r\n `${prefixCls}`,\r\n {\r\n [`${prefixCls}-active`]: props.tmpItem.value === props.item.value,\r\n [`${prefixCls}-disabled`]: props.item.disabled,\r\n },\r\n ];\r\n });\r\n\r\n // 显示右图标\r\n const showArrow = computed(() => {\r\n return (\r\n (props.item.children && props.item.children.length) ||\r\n ('loading' in props.item && !props.item.loading)\r\n );\r\n });\r\n\r\n // loading图标\r\n const showLoading = computed(() => {\r\n return 'loading' in props.item && props.item.loading;\r\n });\r\n\r\n // methods\r\n\r\n // 点击\r\n const handleClickItem = () => {\r\n emit('click', props.item);\r\n };\r\n\r\n // 鼠标移动\r\n const handleHoverItem = () => {\r\n emit('mouseenter', props.item);\r\n };\r\n\r\n return {\r\n prefixCls,\r\n\r\n // computed\r\n classes,\r\n showArrow,\r\n showLoading,\r\n\r\n // methods\r\n handleClickItem,\r\n handleHoverItem,\r\n };\r\n },\r\n components: {\r\n IvueIcon,\r\n },\r\n});\r\n</script>\r\n"],"names":["_resolveDirective","_openBlock","_createElementBlock","_normalizeClass","_withModifiers","_createTextVNode","_toDisplayString","_withDirectives","_createVNode","_withCtx","_vShow","_createCommentVNode"],"mappings":";;;;;;kCACEA,iBAaK,cAAA,CAAA,CAAA;EAXF,OAAAC,SAAA,EAAK,EAAAC,kBAAA,CAAA,IAAA,EAAA;AAAA,IACL,KAAA,EAAUC,cAAA,CAAA,IAAA,CAAA,OAAA,CAAA;AAAA,IAAA,SAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAC,cAAA,CAAA,GAAA,IAAA,KAAA,IAAA,CAAA,eAAA,IAAA,KAAA,eAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,CAAA;AAAA,IAER,cAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAAA,cAAa,CAChB,GAAA,IAAA,KAAA,IAAA,CAAA,eAAA,IAAA,KAAA,eAAA,CAAA,GAAA,IAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,CAAA;AAAA,GAAA,EAAA;AAAA,IAAgDC,gBAAAC,eAAA,CAAA,IAAA,CAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,IAAAC,cAAA,CAAAC,WAAA,CAAA,oBAAA,EAAf,IAAY,EAAA;AAAA,MAAA,OAAA,EAAAC,QAAA,MAAA;AAAA;;;;MAC7C,CAAAC,KAAA,EAAA,IAAA,CAAA,SAAA,CAAA;AAAA,KAIQ,CAAA;AAAA,IAAAC,mBAAA,WAAA,CAAA;AAAA,IAFA,KAAA,WAAA,GAAAJ,cAAA,EAAAN,SAAK,EAAA,EAASC,mBAAA,KAAA,EAAA;AAAA,MAAA,GAAA,EAAA,CAAA;AAAA,6BACJ,EAAA,IAAA,CAAI,SAAA,CAAA,QAAA,CAAA,CAAA;AAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,GAAA;AAAA;;;;;;;;"}