u-subsection.vue 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. <template>
  2. <view
  3. class="u-subsection"
  4. ref="u-subsection"
  5. :class="[`u-subsection--${mode}`]"
  6. :style="[$u.addStyle(customStyle), wrapperStyle]"
  7. >
  8. <view
  9. class="u-subsection__bar"
  10. ref="u-subsection__bar"
  11. :style="[barStyle]"
  12. :class="[
  13. mode === 'button' && 'u-subsection--button__bar',
  14. current === 0 &&
  15. mode === 'subsection' &&
  16. 'u-subsection__bar--first',
  17. current > 0 &&
  18. current < list.length - 1 &&
  19. mode === 'subsection' &&
  20. 'u-subsection__bar--center',
  21. current === list.length - 1 &&
  22. mode === 'subsection' &&
  23. 'u-subsection__bar--last',
  24. ]"
  25. ></view>
  26. <view
  27. class="u-subsection__item"
  28. :class="[
  29. `u-subsection__item--${index}`,
  30. index < list.length - 1 &&
  31. 'u-subsection__item--no-border-right',
  32. index === 0 && 'u-subsection__item--first',
  33. index === list.length - 1 && 'u-subsection__item--last',
  34. ]"
  35. :ref="`u-subsection__item--${index}`"
  36. :style="[itemStyle(index)]"
  37. @tap="clickHandler(index)"
  38. v-for="(item, index) in list"
  39. :key="index"
  40. >
  41. <text
  42. class="u-subsection__item__text"
  43. :style="[textStyle(index)]"
  44. >{{ getText(item) }}</text
  45. >
  46. </view>
  47. </view>
  48. </template>
  49. <script>
  50. // #ifdef APP-NVUE
  51. const dom = uni.requireNativePlugin("dom");
  52. const animation = uni.requireNativePlugin("animation");
  53. // #endif
  54. import props from "./props.js";
  55. /**
  56. * Subsection 分段器
  57. * @description 该分段器一般用于用户从几个选项中选择某一个的场景
  58. * @tutorial https://www.uviewui.com/components/subsection.html
  59. * @property {Array} list tab的数据
  60. * @property {String | Number} current 当前活动的tab的index(默认 0 )
  61. * @property {String} activeColor 激活时的颜色(默认 '#3c9cff' )
  62. * @property {String} inactiveColor 未激活时的颜色(默认 '#303133' )
  63. * @property {String} mode 模式选择,mode=button为按钮形式,mode=subsection时为分段模式(默认 'button' )
  64. * @property {String | Number} fontSize 字体大小,单位px(默认 12 )
  65. * @property {Boolean} bold 激活选项的字体是否加粗(默认 true )
  66. * @property {String} bgColor 组件背景颜色,mode为button时有效(默认 '#eeeeef' )
  67. * @property {Object} customStyle 定义需要用到的外部样式
  68. * @property {String} keyName 从`list`元素对象中读取的键名(默认 'name' )
  69. *
  70. * @event {Function} change 分段器选项发生改变时触发 回调 index:选项的index索引值,从0开始
  71. * @example <u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
  72. */
  73. export default {
  74. name: "u-subsection",
  75. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  76. data() {
  77. return {
  78. // 组件尺寸
  79. itemRect: {
  80. width: 0,
  81. height: 0,
  82. },
  83. };
  84. },
  85. watch: {
  86. list(newValue, oldValue) {
  87. this.init();
  88. },
  89. current: {
  90. immediate: true,
  91. handler(n) {
  92. // #ifdef APP-NVUE
  93. // 在安卓nvue上,如果通过translateX进行位移,到最后一个时,会导致右侧无法绘制圆角
  94. // 故用animation模块进行位移
  95. const ref = this.$refs?.["u-subsection__bar"]?.ref;
  96. // 不存在ref的时候(理解为第一次初始化时,需要渲染dom,进行一定延时再获取ref),这里的100ms是经过测试得出的结果(某些安卓需要延时久一点),勿随意修改
  97. uni.$u.sleep(ref ? 0 : 100).then(() => {
  98. animation.transition(this.$refs["u-subsection__bar"].ref, {
  99. styles: {
  100. transform: `translateX(${
  101. n * this.itemRect.width
  102. }px)`,
  103. transformOrigin: "center center",
  104. },
  105. duration: 300,
  106. });
  107. });
  108. // #endif
  109. },
  110. },
  111. },
  112. computed: {
  113. wrapperStyle() {
  114. const style = {};
  115. // button模式时,设置背景色
  116. if (this.mode === "button") {
  117. style.backgroundColor = this.bgColor;
  118. }
  119. return style;
  120. },
  121. // 滑块的样式
  122. barStyle() {
  123. const style = {};
  124. style.width = `${this.itemRect.width}px`;
  125. style.height = `${this.itemRect.height}px`;
  126. // 通过translateX移动滑块,其移动的距离为索引*item的宽度
  127. // #ifndef APP-NVUE
  128. style.transform = `translateX(${
  129. this.current * this.itemRect.width
  130. }px)`;
  131. // #endif
  132. if (this.mode === "subsection") {
  133. // 在subsection模式下,需要动态设置滑块的圆角,因为移动滑块使用的是translateX,无法通过父元素设置overflow: hidden隐藏滑块的直角
  134. style.backgroundColor = this.activeColor;
  135. }
  136. return style;
  137. },
  138. // 分段器item的样式
  139. itemStyle(index) {
  140. return (index) => {
  141. const style = {};
  142. if (this.mode === "subsection") {
  143. // 设置border的样式
  144. style.borderColor = this.activeColor;
  145. style.borderWidth = "1px";
  146. style.borderStyle = "solid";
  147. }
  148. return style;
  149. };
  150. },
  151. // 分段器文字颜色
  152. textStyle(index) {
  153. return (index) => {
  154. const style = {};
  155. style.fontWeight =
  156. this.bold && this.current === index ? "bold" : "normal";
  157. style.fontSize = uni.$u.addUnit(this.fontSize);
  158. // subsection模式下,激活时默认为白色的文字
  159. if (this.mode === "subsection") {
  160. style.color =
  161. this.current === index ? "#fff" : this.inactiveColor;
  162. } else {
  163. // button模式下,激活时文字颜色默认为activeColor
  164. style.color =
  165. this.current === index
  166. ? this.activeColor
  167. : this.inactiveColor;
  168. }
  169. return style;
  170. };
  171. },
  172. },
  173. mounted() {
  174. this.init();
  175. },
  176. methods: {
  177. init() {
  178. uni.$u.sleep().then(() => this.getRect());
  179. },
  180. // 判断展示文本
  181. getText(item) {
  182. return typeof item === 'object' ? item[this.keyName] : item
  183. },
  184. // 获取组件的尺寸
  185. getRect() {
  186. // #ifndef APP-NVUE
  187. this.$uGetRect(".u-subsection__item--0").then((size) => {
  188. this.itemRect = size;
  189. });
  190. // #endif
  191. // #ifdef APP-NVUE
  192. const ref = this.$refs["u-subsection__item--0"][0];
  193. ref &&
  194. dom.getComponentRect(ref, (res) => {
  195. this.itemRect = res.size;
  196. });
  197. // #endif
  198. },
  199. clickHandler(index) {
  200. this.$emit("change", index);
  201. },
  202. },
  203. };
  204. </script>
  205. <style lang="scss" scoped>
  206. @import "../../libs/css/components.scss";
  207. .u-subsection {
  208. @include flex;
  209. position: relative;
  210. overflow: hidden;
  211. /* #ifndef APP-NVUE */
  212. width: 100%;
  213. box-sizing: border-box;
  214. /* #endif */
  215. &--button {
  216. height: 32px;
  217. background-color: rgb(238, 238, 239);
  218. padding: 3px;
  219. border-radius: 3px;
  220. align-items: stretch;
  221. &__bar {
  222. background-color: #ffffff;
  223. border-radius: 3px !important;
  224. }
  225. }
  226. &--subsection {
  227. height: 30px;
  228. }
  229. &__bar {
  230. position: absolute;
  231. /* #ifndef APP-NVUE */
  232. transition-property: transform, color;
  233. transition-duration: 0.3s;
  234. transition-timing-function: ease-in-out;
  235. /* #endif */
  236. &--first {
  237. border-top-left-radius: 3px;
  238. border-bottom-left-radius: 3px;
  239. border-top-right-radius: 0px;
  240. border-bottom-right-radius: 0px;
  241. }
  242. &--center {
  243. border-top-left-radius: 0px;
  244. border-bottom-left-radius: 0px;
  245. border-top-right-radius: 0px;
  246. border-bottom-right-radius: 0px;
  247. }
  248. &--last {
  249. border-top-left-radius: 0px;
  250. border-bottom-left-radius: 0px;
  251. border-top-right-radius: 3px;
  252. border-bottom-right-radius: 3px;
  253. }
  254. }
  255. &__item {
  256. @include flex;
  257. flex: 1;
  258. justify-content: center;
  259. align-items: center;
  260. // vue环境下,需要设置相对定位,因为滑块为绝对定位,item需要在滑块的上面
  261. position: relative;
  262. &--no-border-right {
  263. border-right-width: 0 !important;
  264. }
  265. &--first {
  266. border-top-left-radius: 3px;
  267. border-bottom-left-radius: 3px;
  268. }
  269. &--last {
  270. border-top-right-radius: 3px;
  271. border-bottom-right-radius: 3px;
  272. }
  273. &__text {
  274. font-size: 12px;
  275. line-height: 12px;
  276. @include flex;
  277. align-items: center;
  278. transition-property: color;
  279. transition-duration: 0.3s;
  280. }
  281. }
  282. }
  283. </style>