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} dot
|