1 line
9.8 KiB
Plaintext
1 line
9.8 KiB
Plaintext
|
{"version":3,"file":"su-tabbar-item.js","sources":["../../../../../../src/sheep/ui/su-tabbar-item/su-tabbar-item.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC91aS9zdS10YWJiYXItaXRlbS9zdS10YWJiYXItaXRlbS52dWU"],"sourcesContent":["<!-- 自定义底部导航项 -->\r\n<template>\r\n <view class=\"u-tabbar-item\" :style=\"[addStyle(customStyle)]\">\r\n <view v-if=\"isCenter\" class=\"tabbar-center-item\">\r\n <image class=\"center-image\" :src=\"centerImage\" mode=\"aspectFill\"></image>\r\n </view>\r\n <template v-else>\r\n <view class=\"u-tabbar-item__icon\">\r\n <image\r\n v-if=\"icon\"\r\n :name=\"icon\"\r\n :color=\"isActive ? parentData.activeColor : parentData.color\"\r\n :size=\"20\"\r\n ></image>\r\n <block v-else>\r\n <slot v-if=\"isActive\" name=\"active-icon\" />\r\n <slot v-else name=\"inactive-icon\" />\r\n </block>\r\n <!-- <u-badge\r\n\t\t\t\t\tabsolute\r\n\t\t\t\t\t:offset=\"[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']\"\r\n\t\t\t\t\t:customStyle=\"badgeStyle\"\r\n\t\t\t\t\t:isDot=\"dot\"\r\n\t\t\t\t\t:value=\"badge || (dot ? 1 : null)\"\r\n\t\t\t\t\t:show=\"dot || badge > 0\"\r\n\t\t\t\t></u-badge> -->\r\n </view>\r\n\r\n <slot name=\"text\">\r\n <text\r\n class=\"u-tabbar-item__text\"\r\n :style=\"{\r\n color: isActive ? parentData.activeColor : parentData.color,\r\n }\"\r\n >\r\n {{ text }}\r\n </text>\r\n </slot>\r\n </template>\r\n </view>\r\n</template>\r\n\r\n<script>\r\n/**\r\n * TabbarItem 底部导航栏子组件\r\n * @description 此组件提供了自定义tabbar的能力。\r\n * @property {String | Number}\tname\t\titem标签的名称，作为与u-tabbar的value参数匹配的标识符\r\n * @property {String}\t\t\ticon\t\tuView内置图标或者绝对路径的图片\r\n * @property {String | Number}\tbadge\t\t右上角的角标提示信息\r\n * @property {Boolean}\t\t\tdot\t\t\t是否显示圆点，将会覆盖badge参数（默认 false ）\r\n * @property {String}\t\t\ttext\t\t描述文本\r\n * @property {Object | String}\tbadgeStyle\t控制徽标的位置，对象或者字符串形式，可以设置top和right属性（默认 'top: 6px;right:2px;' ）\r\n * @property {Object}\t\t\tcustomStyle\t定义需要用到的外部样式\r\n *\r\n */\r\nimport { deepMerge, addStyle, sleep, $parent } from '@/sheep/helper'\r\nexport default {\r\n name: 'su-tabbar-item',\r\n props: {\r\n customStyle: {\r\n type: [Object, String],\r\n default: () => ({}),\r\n },\r\n customClass: {\r\n type: String,\r\n default: '',\r\n },\r\n // 跳转的页面路径\r\n url: {\r\n type: String,\r\n default: '',\r\n },\r\n // 页面跳转的类型\r\n linkType: {\r\n type: String,\r\n default: 'navigateTo',\r\n },\r\n // item标签的名称，作为与u-tabbar的value参数匹配的标识符\r\n name: {\r\n type: [String, Number, null],\r\n default: '',\r\n },\r\n // uView内置图标或者绝对路径的图片\r\n icon: {\r\n icon: String,\r\n default: '',\r\n },\r\n // 右上角的角标提示信息\r\n badge: {\r\n type: [String, Number, null],\r\n default: '',\r\n },\r\n // 是否显示圆点，将会覆盖badge参数\r\n dot: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n // 描述文本\r\n text: {\r\n type: String,\r\n default: '',\r\n },\r\n // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性\r\n badgeStyle: {\r\n type: [Object, String],\r\n default: '',\r\n },\r\n isCenter: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n centerImage: {\r\n type: String,\r\n default: '',\r\n },\r\n },\r\n data() {\r\n return {\r\n isActive: false, // 是否处于激活状态\r\n addStyle,\r\n parentData: {\r\n
|