From 9ab4955166b7b1370fc2a49b152353241ca9e64a Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 16 十月 2023 09:22:23 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-subsection/u-subsection.vue | 299 -----------------------------------------------------------
1 files changed, 0 insertions(+), 299 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-subsection/u-subsection.vue b/minipro_standard/uni_modules/uview-ui/components/u-subsection/u-subsection.vue
index cc4d540..e69de29 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-subsection/u-subsection.vue
+++ b/minipro_standard/uni_modules/uview-ui/components/u-subsection/u-subsection.vue
@@ -1,299 +0,0 @@
-<template>
- <view
- class="u-subsection"
- ref="u-subsection"
- :class="[`u-subsection--${mode}`]"
- :style="[$u.addStyle(customStyle), wrapperStyle]"
- >
- <view
- class="u-subsection__bar"
- ref="u-subsection__bar"
- :style="[barStyle]"
- :class="[
- mode === 'button' && 'u-subsection--button__bar',
- current === 0 &&
- mode === 'subsection' &&
- 'u-subsection__bar--first',
- current > 0 &&
- current < list.length - 1 &&
- mode === 'subsection' &&
- 'u-subsection__bar--center',
- current === list.length - 1 &&
- mode === 'subsection' &&
- 'u-subsection__bar--last',
- ]"
- ></view>
- <view
- class="u-subsection__item"
- :class="[
- `u-subsection__item--${index}`,
- index < list.length - 1 &&
- 'u-subsection__item--no-border-right',
- index === 0 && 'u-subsection__item--first',
- index === list.length - 1 && 'u-subsection__item--last',
- ]"
- :ref="`u-subsection__item--${index}`"
- :style="[itemStyle(index)]"
- @tap="clickHandler(index)"
- v-for="(item, index) in list"
- :key="index"
- >
- <text
- class="u-subsection__item__text"
- :style="[textStyle(index)]"
- >{{ getText(item) }}</text
- >
- </view>
- </view>
-</template>
-
-<script>
-// #ifdef APP-NVUE
-const dom = uni.requireNativePlugin("dom");
-const animation = uni.requireNativePlugin("animation");
-// #endif
-import props from "./props.js";
-/**
- * Subsection 鍒嗘鍣�
- * @description 璇ュ垎娈靛櫒涓�鑸敤浜庣敤鎴蜂粠鍑犱釜閫夐」涓�夋嫨鏌愪竴涓殑鍦烘櫙
- * @tutorial https://www.uviewui.com/components/subsection.html
- * @property {Array} list tab鐨勬暟鎹�
- * @property {String 锝� Number} current 褰撳墠娲诲姩鐨則ab鐨刬ndex锛堥粯璁� 0 锛�
- * @property {String} activeColor 婵�娲绘椂鐨勯鑹诧紙榛樿 '#3c9cff' 锛�
- * @property {String} inactiveColor 鏈縺娲绘椂鐨勯鑹诧紙榛樿 '#303133' 锛�
- * @property {String} mode 妯″紡閫夋嫨锛宮ode=button涓烘寜閽舰寮忥紝mode=subsection鏃朵负鍒嗘妯″紡锛堥粯璁� 'button' 锛�
- * @property {String 锝� Number} fontSize 瀛椾綋澶у皬锛屽崟浣峱x锛堥粯璁� 12 锛�
- * @property {Boolean} bold 婵�娲婚�夐」鐨勫瓧浣撴槸鍚﹀姞绮楋紙榛樿 true 锛�
- * @property {String} bgColor 缁勪欢鑳屾櫙棰滆壊锛宮ode涓篵utton鏃舵湁鏁堬紙榛樿 '#eeeeef' 锛�
- * @property {Object} customStyle 瀹氫箟闇�瑕佺敤鍒扮殑澶栭儴鏍峰紡
- * @property {String} keyName 浠巂list`鍏冪礌瀵硅薄涓鍙栫殑閿悕锛堥粯璁� 'name' 锛�
- *
- * @event {Function} change 鍒嗘鍣ㄩ�夐」鍙戠敓鏀瑰彉鏃惰Е鍙� 鍥炶皟 index锛氶�夐」鐨刬ndex绱㈠紩鍊硷紝浠�0寮�濮�
- * @example <u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
- */
-export default {
- name: "u-subsection",
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- data() {
- return {
- // 缁勪欢灏哄
- itemRect: {
- width: 0,
- height: 0,
- },
- };
- },
- watch: {
- list(newValue, oldValue) {
- this.init();
- },
- current: {
- immediate: true,
- handler(n) {
- // #ifdef APP-NVUE
- // 鍦ㄥ畨鍗搉vue涓婏紝濡傛灉閫氳繃translateX杩涜浣嶇Щ锛屽埌鏈�鍚庝竴涓椂锛屼細瀵艰嚧鍙充晶鏃犳硶缁樺埗鍦嗚
- // 鏁呯敤animation妯″潡杩涜浣嶇Щ
- const ref = this.$refs?.["u-subsection__bar"]?.ref;
- // 涓嶅瓨鍦╮ef鐨勬椂鍊�(鐞嗚В涓虹涓�娆″垵濮嬪寲鏃讹紝闇�瑕佹覆鏌揹om锛岃繘琛屼竴瀹氬欢鏃跺啀鑾峰彇ref)锛岃繖閲岀殑100ms鏄粡杩囨祴璇曞緱鍑虹殑缁撴灉(鏌愪簺瀹夊崜闇�瑕佸欢鏃朵箙涓�鐐�)锛屽嬁闅忔剰淇敼
- uni.$u.sleep(ref ? 0 : 100).then(() => {
- animation.transition(this.$refs["u-subsection__bar"].ref, {
- styles: {
- transform: `translateX(${
- n * this.itemRect.width
- }px)`,
- transformOrigin: "center center",
- },
- duration: 300,
- });
- });
- // #endif
- },
- },
- },
- computed: {
- wrapperStyle() {
- const style = {};
- // button妯″紡鏃讹紝璁剧疆鑳屾櫙鑹�
- if (this.mode === "button") {
- style.backgroundColor = this.bgColor;
- }
- return style;
- },
- // 婊戝潡鐨勬牱寮�
- barStyle() {
- const style = {};
- style.width = `${this.itemRect.width}px`;
- style.height = `${this.itemRect.height}px`;
- // 閫氳繃translateX绉诲姩婊戝潡锛屽叾绉诲姩鐨勮窛绂讳负绱㈠紩*item鐨勫搴�
- // #ifndef APP-NVUE
- style.transform = `translateX(${
- this.current * this.itemRect.width
- }px)`;
- // #endif
- if (this.mode === "subsection") {
- // 鍦╯ubsection妯″紡涓嬶紝闇�瑕佸姩鎬佽缃粦鍧楃殑鍦嗚锛屽洜涓虹Щ鍔ㄦ粦鍧椾娇鐢ㄧ殑鏄痶ranslateX锛屾棤娉曢�氳繃鐖跺厓绱犺缃畂verflow: hidden闅愯棌婊戝潡鐨勭洿瑙�
- style.backgroundColor = this.activeColor;
- }
- return style;
- },
- // 鍒嗘鍣╥tem鐨勬牱寮�
- itemStyle(index) {
- return (index) => {
- const style = {};
- if (this.mode === "subsection") {
- // 璁剧疆border鐨勬牱寮�
- style.borderColor = this.activeColor;
- style.borderWidth = "1px";
- style.borderStyle = "solid";
- }
- return style;
- };
- },
- // 鍒嗘鍣ㄦ枃瀛楅鑹�
- textStyle(index) {
- return (index) => {
- const style = {};
- style.fontWeight =
- this.bold && this.current === index ? "bold" : "normal";
- style.fontSize = uni.$u.addUnit(this.fontSize);
- // subsection妯″紡涓嬶紝婵�娲绘椂榛樿涓虹櫧鑹茬殑鏂囧瓧
- if (this.mode === "subsection") {
- style.color =
- this.current === index ? "#fff" : this.inactiveColor;
- } else {
- // button妯″紡涓嬶紝婵�娲绘椂鏂囧瓧棰滆壊榛樿涓篴ctiveColor
- style.color =
- this.current === index
- ? this.activeColor
- : this.inactiveColor;
- }
- return style;
- };
- },
- },
- mounted() {
- this.init();
- },
- methods: {
- init() {
- uni.$u.sleep().then(() => this.getRect());
- },
- // 鍒ゆ柇灞曠ず鏂囨湰
- getText(item) {
- return typeof item === 'object' ? item[this.keyName] : item
- },
- // 鑾峰彇缁勪欢鐨勫昂瀵�
- getRect() {
- // #ifndef APP-NVUE
- this.$uGetRect(".u-subsection__item--0").then((size) => {
- this.itemRect = size;
- });
- // #endif
-
- // #ifdef APP-NVUE
- const ref = this.$refs["u-subsection__item--0"][0];
- ref &&
- dom.getComponentRect(ref, (res) => {
- this.itemRect = res.size;
- });
- // #endif
- },
- clickHandler(index) {
- this.$emit("change", index);
- },
- },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "../../libs/css/components.scss";
-
-.u-subsection {
- @include flex;
- position: relative;
- overflow: hidden;
- /* #ifndef APP-NVUE */
- width: 100%;
- box-sizing: border-box;
- /* #endif */
-
- &--button {
- height: 32px;
- background-color: rgb(238, 238, 239);
- padding: 3px;
- border-radius: 3px;
- align-items: stretch;
-
- &__bar {
- background-color: #ffffff;
- border-radius: 3px !important;
- }
- }
-
- &--subsection {
- height: 30px;
- }
-
- &__bar {
- position: absolute;
- /* #ifndef APP-NVUE */
- transition-property: transform, color;
- transition-duration: 0.3s;
- transition-timing-function: ease-in-out;
- /* #endif */
-
- &--first {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 0px;
- }
-
- &--center {
- border-top-left-radius: 0px;
- border-bottom-left-radius: 0px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 0px;
- }
-
- &--last {
- border-top-left-radius: 0px;
- border-bottom-left-radius: 0px;
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- }
- }
-
- &__item {
- @include flex;
- flex: 1;
- justify-content: center;
- align-items: center;
- // vue鐜涓嬶紝闇�瑕佽缃浉瀵瑰畾浣嶏紝鍥犱负婊戝潡涓虹粷瀵瑰畾浣嶏紝item闇�瑕佸湪婊戝潡鐨勪笂闈�
- position: relative;
-
- &--no-border-right {
- border-right-width: 0 !important;
- }
-
- &--first {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- }
-
- &--last {
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- }
-
- &__text {
- font-size: 12px;
- line-height: 12px;
- @include flex;
- align-items: center;
- transition-property: color;
- transition-duration: 0.3s;
- }
- }
-}
-</style>
--
Gitblit v1.9.3