1 line
11 KiB
Plaintext
1 line
11 KiB
Plaintext
{"version":3,"file":"s-menu-button.js","sources":["../../../../../../src/sheep/components/s-menu-button/s-menu-button.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC9jb21wb25lbnRzL3MtbWVudS1idXR0b24vcy1tZW51LWJ1dHRvbi52dWU"],"sourcesContent":["<!-- 装修基础组件：菜单导航（金刚区） -->\r\n<template>\r\n <!-- 包裹层 -->\r\n <view\r\n class=\"ui-swiper\"\r\n :class=\"[props.mode, props.ui]\"\r\n :style=\"[bgStyle, { height: swiperHeight + (menuList.length > 1 ? 50 : 0) + 'rpx' }]\"\r\n >\r\n <!-- 轮播 -->\r\n <swiper\r\n :circular=\"props.circular\"\r\n :current=\"state.cur\"\r\n :autoplay=\"props.autoplay\"\r\n :interval=\"props.interval\"\r\n :duration=\"props.duration\"\r\n :style=\"[{ height: swiperHeight + 'rpx' }]\"\r\n @change=\"swiperChange\"\r\n >\r\n <swiper-item\r\n v-for=\"(arr, index) in menuList\"\r\n :key=\"index\"\r\n :class=\"{ cur: state.cur == index }\"\r\n >\r\n <!-- 宫格 -->\r\n <view class=\"grid-wrap\">\r\n <view\r\n v-for=\"(item, index) in arr\"\r\n :key=\"index\"\r\n class=\"grid-item ss-flex ss-flex-col ss-col-center ss-row-center\"\r\n :style=\"[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]\"\r\n hover-class=\"ss-hover-btn\"\r\n @tap=\"sheep.$router.go(item.url)\"\r\n >\r\n <view class=\"menu-box ss-flex ss-flex-col ss-col-center ss-row-center\">\r\n <view\r\n v-if=\"item.badge.show\"\r\n class=\"tag-box\"\r\n :style=\"[{ background: item.badge.bgColor, color: item.badge.textColor }]\"\r\n >\r\n {{ item.badge.text }}\r\n </view>\r\n <image\r\n v-if=\"item.iconUrl\"\r\n class=\"menu-icon\"\r\n :style=\"[\r\n {\r\n width: props.iconSize + 'rpx',\r\n height: props.iconSize + 'rpx',\r\n },\r\n ]\"\r\n :src=\"sheep.$url.cdn(item.iconUrl)\"\r\n mode=\"aspectFill\"\r\n ></image>\r\n <view\r\n v-if=\"data.layout === 'iconText'\"\r\n class=\"menu-title\"\r\n :style=\"[{ color: item.titleColor }]\"\r\n >\r\n {{ item.title }}\r\n </view>\r\n </view>\r\n </view>\r\n </view>\r\n </swiper-item>\r\n </swiper>\r\n <!-- 指示点 -->\r\n <template v-if=\"menuList.length > 1\">\r\n <view class=\"ui-swiper-dot\" :class=\"props.dotStyle\" v-if=\"props.dotStyle != 'tag'\">\r\n <view\r\n class=\"line-box\"\r\n v-for=\"(item, index) in menuList.length\"\r\n :key=\"index\"\r\n :class=\"[state.cur == index ? 'cur' : '', props.dotCur]\"\r\n ></view>\r\n </view>\r\n <view class=\"ui-swiper-dot\" :class=\"props.dotStyle\" v-if=\"props.dotStyle == 'tag'\">\r\n <view class=\"ui-tag radius\" :class=\"[props.dotCur]\" style=\"pointer-events: none\">\r\n <view style=\"transform: scale(0.7)\">{{ state.cur + 1 }} / {{ menuList.length }}</view>\r\n </view>\r\n </view>\r\n </template>\r\n </view>\r\n</template>\r\n\r\n<script setup>\r\n/**\r\n * 轮播menu\r\n *\r\n * @property {Boolean} circular = false \t\t- 是否采用衔接滑动，即播放到末尾后重新回到开头\r\n * @property {Boolean} autoplay = true \t\t- 是否自动切换\r\n * @property {Number} interval = 5000 \t\t\t- 自动切换时间间隔\r\n * @property {Number} duration = 500 \t\t\t- 滑动动画时长,app-nvue不支持\r\n * @property {Array} list = [] \t\t\t\t\t- 轮播数据\r\n * @property {String} ui = '' \t\t\t\t\t- 样式class\r\n * @property {String} mode \t\t\t\t\t- 模式\r\n * @property {String} dotStyle \t\t\t\t- 指示点样式\r\n * @property {String} dotCur= 'ui-BG-Main' \t\t- 当前指示点样式,默认主题色\r\n * @property {String} bg \t\t\t\t\t\t- 背景\r\n *\r\n * @property {String|Number} col = 4 \t\t\t- 一行数量\r\n * @property {String|Number} row = 1 \t\t\t- 几行\r\n * @property {String} hasBorder \t\t\t\t- 是否有边框\r\n * @property {String} borderColor \t\t\t\t- 边框颜色\r\n * @property {String} background\t\t \t\t- 背景\r\n * @property {String} hoverClass \t\t\t\t- 按压样式类\r\n * @property {String} hoverStayTime \t\t \t- 动画时间\r\n *\r\n * @property {Array} list \t\t \t\t\t\t- 导航列表\r\n * @property {Number} iconSize \t\t \t\t\t- 图标大小\r\n * @property {String} color \t\t \t\t\t- 标题颜色\r\n *\r\n */\r\n\r\nimport { reactive, computed } from 'vue'\r\nimport sheep from '@/sheep'\r\n\r\n// 数据\r\nconst state = reactive({\r\n cur: 0,\r\n})\r\n\r\n// 接收参数\r\n\r\nconst props = defineProps({\r\n // 装修数据\r\n data: {\r\n type: Object,\r\n default: () => ({}),\r\n },\r\n // 装修样式\r\n styles: {\r\n type: Object,\r\n default: () => ({}),\r\n },\r\n circular: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n autoplay: {\r\n type: Boolean,\r\n default: false,\r\n },\r\n interval: {\r\n type: Number,\r\n default: 5000,\r\n },\r\n duration: {\r\n type: Number,\r\n default: 500,\r\n },\r\n ui: {\r\n type: String,\r\n default: '',\r\n },\r\n mode: {\r\n // default\r\n type: String,\r\n default: 'default',\r\n },\r\n dotStyle: {\r\n type: String,\r\n default: 'long', // default long tag\r\n },\r\n dotCur: {\r\n type: String,\r\n default: 'ui-BG-Main',\r\n },\r\n height: {\r\n type: Number,\r\n default: 300,\r\n },\r\n // 是否有边框\r\n hasBorder: {\r\n type: Boolean,\r\n default: true,\r\n },\r\n // 边框颜色\r\n borderColor: {\r\n type: String,\r\n default: 'red',\r\n },\r\n background: {\r\n type: String,\r\n default: 'blue',\r\n },\r\n hoverClass: {\r\n type: String,\r\n default: 'ss-hover-class', // 'none'为没有hover效果\r\n },\r\n // 一排宫格数\r\n col: {\r\n type: [Number, String],\r\n default: 3,\r\n },\r\n iconSize: {\r\n type: Number,\r\n default: 80,\r\n },\r\n color: {\r\n type: String,\r\n default: '#000',\r\n },\r\n})\r\n\r\n// 设置背景样式\r\nconst bgStyle = computed(() => {\r\n // 直接从 props.styles 解构\r\n const { bgType, bgImg, bgColor } = props.styles\r\n\r\n // 根据 bgType 返回相应的样式\r\n return {\r\n background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor,\r\n }\r\n})\r\n\r\n// 生成数据\r\nconst menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column))\r\nconst swiperHeight = computed(() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180))\r\nconst windowWidth = sheep.$platform.device.windowWidth\r\n\r\n// current 改变时会触发 change 事件\r\nconst swiperChange = (e) => {\r\n state.cur = e.detail.current\r\n}\r\n\r\n// 重组数据\r\nconst splitData = (oArr = [], length = 1) => {\r\n const arr = []\r\n let minArr = []\r\n oArr.forEach((c) => {\r\n if (minArr.length === length) {\r\n minArr = []\r\n }\r\n if (minArr.length === 0) {\r\n arr.push(minArr)\r\n }\r\n minArr.push(c)\r\n })\r\n\r\n return arr\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n \r\n.grid-wrap {\r\n position: relative;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n width: 100%;\r\n overflow: hidden;\r\n}\r\n\r\n.menu-box {\r\n position: relative;\r\n z-index: 1;\r\n transform: translate(0, 0);\r\n\r\n .tag-box {\r\n position: absolute;\r\n top: 0;\r\n right: -6rpx;\r\n z-index: 2;\r\n padding: 0.4em 0.6em 0.3em;\r\n font-size: 2em;\r\n line-height: 1;\r\n white-space: nowrap;\r\n border-radius: 200rpx;\r\n transform: scale(0.4) translateX(0.5em) translatey(-0.6em);\r\n transform-origin: 100% 0;\r\n }\r\n\r\n .menu-icon {\r\n width: 80rpx;\r\n height: 80rpx;\r\n padding-bottom: 10rpx;\r\n transform: translate(0, 0);\r\n }\r\n\r\n .menu-title {\r\n font-size: 24rpx;\r\n color: #333;\r\n }\r\n}\r\n\r\n::v-deep(.ui-swiper) {\r\n position: relative;\r\n z-index: 1;\r\n\r\n .ui-swiper-dot {\r\n position: absolute;\r\n bottom: 20rpx;\r\n z-index: 2;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 30rpx;\r\n\r\n &.default .line-box {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 6px;\r\n height: 6px;\r\n margin: 0 10rpx;\r\n border: 2px solid transparent;\r\n border-radius: 50rpx;\r\n opacity: 0.3;\r\n\r\n &.cur {\r\n width: 8px;\r\n height: 8px;\r\n border: 0px solid transparent;\r\n opacity: 1;\r\n }\r\n\r\n &.cur::after {\r\n width: 4px;\r\n height: 4px;\r\n content: '';\r\n background-color: #fff;\r\n border-radius: 50rpx;\r\n }\r\n }\r\n\r\n &.long .line-box {\r\n position: relative;\r\n display: inline-block;\r\n width: 6px;\r\n height: 6px;\r\n margin: 0 10rpx;\r\n border-radius: 100rpx;\r\n opacity: 0.3;\r\n\r\n &.cur {\r\n width: 24rpx;\r\n opacity: 1;\r\n }\r\n\r\n &.cur::after {\r\n }\r\n }\r\n\r\n &.line {\r\n bottom: 20rpx;\r\n\r\n .line-box {\r\n position: relative;\r\n display: inline-block;\r\n width: 30px;\r\n height: 3px;\r\n opacity: 0.3;\r\n\r\n &.cur {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n &.tag {\r\n position: absolute;\r\n right: 20rpx;\r\n bottom: 20rpx;\r\n justify-content: flex-end;\r\n }\r\n }\r\n}\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/components/s-menu-button/s-menu-button.vue'\nwx.createComponent(Component)"],"names":["reactive","computed","sheep"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqHA,UAAM,QAAQA,cAAAA,SAAS;AAAA,MACrB,KAAK;AAAA,IACP,CAAC;AAID,UAAM,QAAQ;AAkFd,UAAM,UAAUC,cAAQ,SAAC,MAAM;AAE7B,YAAM,EAAE,QAAQ,OAAO,QAAS,IAAG,MAAM;AAGzC,aAAO;AAAA,QACL,YAAY,WAAW,QAAQ,OAAO,KAAK,uCAAuC;AAAA,MACnF;AAAA,IACH,CAAC;AAGD,UAAM,WAAWA,cAAAA,SAAS,MAAM,UAAU,MAAM,KAAK,MAAM,MAAM,KAAK,MAAM,MAAM,KAAK,MAAM,CAAC;AAC9F,UAAM,eAAeA,cAAQ,SAAC,MAAM,MAAM,KAAK,OAAO,MAAM,KAAK,WAAW,aAAa,MAAM,IAAI;AAC/EC,gBAAAA,MAAM,UAAU,OAAO;AAG3C,UAAM,eAAe,CAAC,MAAM;AAC1B,YAAM,MAAM,EAAE,OAAO;AAAA,IACvB;AAGA,UAAM,YAAY,CAAC,OAAO,IAAI,SAAS,MAAM;AAC3C,YAAM,MAAM,CAAE;AACd,UAAI,SAAS,CAAE;AACf,WAAK,QAAQ,CAAC,MAAM;AAClB,YAAI,OAAO,WAAW,QAAQ;AAC5B,mBAAS,CAAE;AAAA,QACZ;AACD,YAAI,OAAO,WAAW,GAAG;AACvB,cAAI,KAAK,MAAM;AAAA,QAChB;AACD,eAAO,KAAK,CAAC;AAAA,MACjB,CAAG;AAED,aAAO;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/OA,GAAG,gBAAgB,SAAS;"} |