ivue-material-plus
Version:
A high quality UI components Library with Vue.js
1 lines • 2.69 kB
Source Map (JSON)
{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-bottom-nav-item/index.vue"],"sourcesContent":["<template>\r\n <div :class=\"prefixCls\">\r\n <ivue-button\r\n flat\r\n :color=\"color\"\r\n :index=\"name\"\r\n :isActive=\"data.isActive\"\r\n @click=\"handleClick\"\r\n >\r\n <slot></slot>\r\n </ivue-button>\r\n </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n defineComponent,\r\n inject,\r\n getCurrentInstance,\r\n reactive,\r\n ComponentInternalInstance,\r\n onMounted,\r\n onUnmounted,\r\n} from 'vue';\r\n\r\nimport IvueButton from '../../components/ivue-button/index.vue';\r\n\r\n// type\r\nimport {\r\n BottomNavContextKey,\r\n Props,\r\n Data,\r\n BottomNavItemInstance,\r\n} from './types/bottom-nav-item';\r\n\r\nconst prefixCls = 'ivue-bottom-nav-item';\r\n\r\nexport default defineComponent({\r\n name: prefixCls,\r\n props: {\r\n /**\r\n * 当前下标\r\n *\r\n * @type {Number, String}\r\n */\r\n name: {\r\n type: [Number, String],\r\n required: true,\r\n },\r\n /**\r\n * 颜色\r\n *\r\n * @type {String | Array}\r\n */\r\n color: {\r\n type: [String, Array],\r\n default: '',\r\n },\r\n },\r\n setup(props: Props) {\r\n // 支持访问内部组件实例\r\n const { proxy, uid } = getCurrentInstance() as ComponentInternalInstance;\r\n\r\n // inject\r\n const { addItem, removeItem, updateValue } = inject(BottomNavContextKey);\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 * uid\r\n *\r\n * @type {Number}\r\n */\r\n uid: uid,\r\n });\r\n\r\n // methods\r\n\r\n // 点击选项\r\n const handleClick = () => {\r\n updateValue(props.name);\r\n };\r\n\r\n // onMounted\r\n onMounted(() => {\r\n addItem(proxy as BottomNavItemInstance);\r\n });\r\n\r\n // onUnmounted\r\n onUnmounted(() => {\r\n removeItem(uid);\r\n });\r\n\r\n return {\r\n prefixCls,\r\n\r\n // data\r\n data,\r\n\r\n // methods\r\n handleClick,\r\n };\r\n },\r\n components: {\r\n IvueButton,\r\n },\r\n});\r\n</script>\r\n"],"names":["_resolveComponent","_normalizeClass"],"mappings":";;;;;iCACEA,iBAUM,aAAA,CAAA,CAAA;;IATJ,KAAA,EAQcC,cAAA,CAAA,IAAA,CAAA,SAAA,CAAA;AAAA,GAAA,EAAA;AAAA,gBANJ,sBAAK,EAAA;AAAA,MACZ,IAAK,EAAA,EAAA;AAAA,MACL,OAAU,IAAA,CAAA,KAAA;AAAA,MACV,OAAK,IAAE,CAAA,IAAA;AAAA,MAAA,QAAA,EAAA,KAAA,IAAA,CAAA,QAAA;AAAA;;;;;;;;;;;;;"}