1 line
19 KiB
Plaintext
1 line
19 KiB
Plaintext
|
{"version":3,"file":"su-tabs.js","sources":["../../../../../../src/sheep/ui/su-tabs/su-tabs.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC91aS9zdS10YWJzL3N1LXRhYnMudnVl"],"sourcesContent":["<template>\r\n <view class=\"u-tabs\">\r\n <view class=\"u-tabs__wrapper\">\r\n <slot name=\"left\" />\r\n <view class=\"u-tabs__wrapper__scroll-view-wrapper\">\r\n <scroll-view\r\n :scroll-x=\"scrollable\"\r\n :scroll-left=\"scrollLeft\"\r\n scroll-with-animation\r\n enable-flex\r\n class=\"u-tabs__wrapper__scroll-view white-space\"\r\n :show-scrollbar=\"false\"\r\n ref=\"u-tabs__wrapper__scroll-view\"\r\n >\r\n <view class=\"u-tabs__wrapper__nav\" ref=\"u-tabs__wrapper__nav\">\r\n <view\r\n class=\"u-tabs__wrapper__nav__item\"\r\n v-for=\"(item, index) in list\"\r\n :key=\"index\"\r\n @tap=\"clickHandler(item, index)\"\r\n :ref=\"`u-tabs__wrapper__nav__item-${index}`\"\r\n :style=\"[addStyle(itemStyle), { flex: scrollable ? '' : 1 }]\"\r\n :class=\"[\r\n `u-tabs__wrapper__nav__item-${index}`,\r\n item.disabled && 'u-tabs__wrapper__nav__item--disabled',\r\n ]\"\r\n >\r\n <text\r\n :class=\"[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']\"\r\n class=\"u-tabs__wrapper__nav__item__text\"\r\n :style=\"[textStyle(index)]\"\r\n >\r\n {{ item[keyName] }}\r\n </text>\r\n </view>\r\n <!-- #ifdef APP-NVUE -->\r\n <view\r\n class=\"u-tabs__wrapper__nav__line\"\r\n ref=\"u-tabs__wrapper__nav__line\"\r\n :style=\"[\r\n {\r\n width: addUnit(lineWidth),\r\n height: addUnit(lineHeight),\r\n background: lineColor ? lineColor : 'var(--ui-BG-Main)',\r\n backgroundSize: lineBgSize,\r\n },\r\n ]\"\r\n ></view>\r\n <!-- #endif -->\r\n <!-- #ifndef APP-NVUE -->\r\n <view\r\n class=\"u-tabs__wrapper__nav__line\"\r\n ref=\"u-tabs__wrapper__nav__line\"\r\n :style=\"[\r\n {\r\n width: addUnit(lineWidth),\r\n transform: `translate(${lineOffsetLeft}px)`,\r\n transitionDuration: `${firstTime ? 0 : duration}ms`,\r\n height: addUnit(lineHeight),\r\n background: lineColor ? lineColor : 'var(--ui-BG-Main)',\r\n backgroundSize: lineBgSize,\r\n },\r\n ]\"\r\n ></view>\r\n <!-- #endif -->\r\n </view>\r\n </scroll-view>\r\n </view>\r\n <slot name=\"right\" />\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script>\r\nimport { deepMerge, addStyle, addUnit, sleep, getPx, sys } from '@/sheep/helper'\r\n// #ifdef APP-NVUE\r\nconst animation = uni.requireNativePlugin('animation')\r\nconst dom = uni.requireNativePlugin('dom')\r\n// #endif\r\n\r\n/**\r\n * Tabs 标签\r\n * @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。\r\n * @tutorial https://www.uviewui.com/components/tabs.html\r\n * @property {String | Number}\tduration\t\t\t滑块移动一次所需的时间，单位秒（默认 200 ）\r\n * @property {String | Number}\tswierWidth\t\t\tswiper的宽度（默认 '750rpx' ）\r\n * @property {String}\tkeyName\t 从`list`元素对象中读取的键名（默认 'name' ）\r\n * @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab，索引从0开始\r\n * @event {Function(index)} click 点击标签时触发
|