leiyun
/
ai_uniapp_v2
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
1 Commit
1 Branch
4.2 MiB
 
 
 
Struktur: 635772c47b
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „635772c47b“
${ noResults }
ai_uniapp_v2/uni_modules/uview-plus/components/u-subsection/u-subsection.vue

459 Zeilen
16 KiB
Originalformat Blame Verlauf 

  1. <template>

  2.     <view

  3.         class="u-subsection"

  4.         ref="u-subsection"

  5.         :class="[`u-subsection--${mode}`]"

  6.         :style="[addStyle(customStyle), wrapperStyle]"

  7.     >

  8.         <view

  9.             class="u-subsection__bar cursor-pointer"

  10.             ref="u-subsection__bar"

  11.             :style="[barStyle]"

  12.             :class="[

  13.                 mode === 'button' && 'u-subsection--button__bar',

  14.                 innerCurrent === 0 &&

  15.                     mode === 'subsection' &&

  16.                     'u-subsection__bar--first',

  17.                 innerCurrent > 0 &&

  18.                 innerCurrent < list.length - 1 &&

  19.                     mode === 'subsection' &&

  20.                     'u-subsection__bar--center',

  21.                 innerCurrent === list.length - 1 &&

  22.                     mode === 'subsection' &&

  23.                     'u-subsection__bar--last',

  24.             ]"

  25.         ></view>

  26.         <view

  27.             class="u-subsection__item cursor-pointer"

  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.                 getTextViewDisableClass(index),

  35.             ]"

  36.             :ref="`u-subsection__item--${index}`"

  37.             :style="[itemStyle(index)]"

  38.             @tap="clickHandler(index)"

  39.             v-for="(item, index) in list"

  40.             :key="index"

  41.         >

  42.             <text

  43.                 class="u-subsection__item__text"

  44.                 :class="[disabled ? 'u-subsection--disabled' : '']"

  45.                 :style="[textStyle(index,item)]"

  46.                 >{{ getText(item) }}</text

  47.             >

  48.         </view>

  49.     </view>

  50. </template>

  51. 

  52. <script>

  53. // #ifdef APP-NVUE

  54. const dom = uni.requireNativePlugin("dom");

  55. const animation = uni.requireNativePlugin("animation");

  56. // #endif

  57. import { props } from "./props.js";

  58. import { mpMixin } from '../../libs/mixin/mpMixin';

  59. import { mixin } from '../../libs/mixin/mixin';

  60. import { addStyle, addUnit, sleep } from '../../libs/function/index';

  61. /**

  62.  * Subsection 分段器

  63.  * @description 该分段器一般用于用户从几个选项中选择某一个的场景

  64.  * @tutorial https://uview-plus.jiangruyi.com/components/subsection.html

  65.  * @property {Array}			list			        tab的数据

  66.  * @property {String ｜ Number}	current			        当前活动的tab的index（默认 0 ）

  67.  * @property {String}			activeColor		        激活时的颜色（默认 '#3c9cff' ）

  68.  * @property {String}			inactiveColor	        未激活时的颜色（默认 '#303133' ）

  69.  * @property {String}			mode			        模式选择，mode=button为按钮形式，mode=subsection时为分段模式（默认 'button' ）

  70.  * @property {String ｜ Number}	fontSize		        字体大小，单位px（默认 12 ）

  71.  * @property {Boolean}			bold			        激活选项的字体是否加粗（默认 true ）

  72.  * @property {String}			bgColor			        组件背景颜色，mode为button时有效（默认 '#eeeeef' ）

  73.  * @property {Object}			customStyle		        定义需要用到的外部样式

  74.  * @property {String}	        keyName	                从`list`元素对象中读取的键名（默认 'name' ）

  75.  * @property {String}	        activeColorKeyName      从`list`元素对象中读取激活时的颜色（默认 'activeColorKey' ）  如果存在字段 优先级大于 activeColor

  76.  * @property {String}	        inactiveColorKeyName    从`list`元素对象中读取未激活时的颜色 （默认 'inactiveColorKey' ）如果存在字段 优先级大于 inactiveColor

  77.  * @property {Boolean}	        disabled                是否禁用分段器 （默认 false ）

  78.  *

  79.  * @event {Function} change		分段器选项发生改变时触发  回调 index：选项的index索引值，从0开始

  80.  * @example <u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>

  81.  */

  82. export default {

  83.     name: "u-subsection",

  84.     mixins: [mpMixin, mixin, props],

  85.     data() {

  86.         return {

  87.             // 组件尺寸

  88.             itemRect: {

  89.                 width: 0,

  90.                 height: 0,

  91.             },

  92.             innerCurrent: '',

  93.             windowResizeCallback: {}

  94.         };

  95.     },

  96.     watch: {

  97.         list(newValue, oldValue) {

  98.             this.init();

  99.         },

  100.         current: {

  101.             immediate: true,

  102.             handler(n) {

  103.                 if (n !== this.innerCurrent) {

  104.                     this.innerCurrent = Number(n)

  105.                 }

  106.                 // #ifdef APP-NVUE

  107.                 // 在安卓nvue上，如果通过translateX进行位移，到最后一个时，会导致右侧无法绘制圆角

  108.                 // 故用animation模块进行位移

  109.                 const ref = this.$refs?.["u-subsection__bar"]?.ref;

  110.                 // 不存在ref的时候(理解为第一次初始化时，需要渲染dom，进行一定延时再获取ref)，这里的100ms是经过测试得出的结果(某些安卓需要延时久一点)，勿随意修改

  111.                 sleep(ref ? 0 : 100).then(() => {

  112.                     animation.transition(this.$refs["u-subsection__bar"].ref, {

  113.                         styles: {

  114.                             transform: `translateX(${

  115.                                 n * this.itemRect.width

  116.                             }px)`,

  117.                             transformOrigin: "center center",

  118.                         },

  119.                         duration: 300,

  120.                     });

  121.                 });

  122.                 // #endif

  123.             },

  124.         },

  125.     },

  126.     computed: {

  127.         isDarkMode() {

  128.             return this.$u?.theme?.mode === 'dark';

  129.         },

  130.         resolvedInactiveColor() {

  131.             if (this.upHasProp('inactiveColor')) return this.inactiveColor;

  132.             return this.upThemeVar(

  133.                 '--up-subsection-inactive-color',

  134.                 this.isDarkMode

  135.                     ? (this.$u?.color?.contentColor || '#d1d5db')

  136.                     : '#303133'

  137.             );

  138.         },

  139.         resolvedButtonBgColor() {

  140.             if (this.upHasProp('bgColor')) return this.bgColor;

  141.             return this.upThemeVar(

  142.                 '--up-subsection-bg-color',

  143.                 this.isDarkMode ? '#2b2c30' : '#eeeeef'

  144.             );

  145.         },

  146.         resolvedButtonBarColor() {

  147.             if (this.disabled) {

  148.                 return this.upThemeVar(

  149.                     '--up-subsection-disabled-bar-color',

  150.                     this.isDarkMode ? '#3a3a3c' : '#f5f5f5'

  151.                 );

  152.             }

  153.             return this.upThemeVar(

  154.                 '--up-subsection-bar-color',

  155.                 this.isDarkMode ? '#3a3b40' : '#ffffff'

  156.             );

  157.         },

  158.         resolvedDisabledTextColor() {

  159.             return this.upThemeVar(

  160.                 '--up-subsection-disabled-text-color',

  161.                 this.isDarkMode

  162.                     ? (this.$u?.color?.lightColor || '#6b7280')

  163.                     : '#c8c9cc'

  164.             );

  165.         },

  166.         resolvedDisabledBorderColor() {

  167.             return this.upThemeVar(

  168.                 '--up-subsection-disabled-border-color',

  169.                 this.isDarkMode

  170.                     ? (this.$u?.color?.borderColor || '#3a3a3c')

  171.                     : '#d4d4d4'

  172.             );

  173.         },

  174.         wrapperStyle() {

  175.             const style = {};

  176.             // button模式时，设置背景色

  177.             if (this.mode === "button") {

  178.                 style.backgroundColor = this.resolvedButtonBgColor;

  179.             }

  180.             return style;

  181.         },

  182.         // 滑块的样式

  183.         barStyle() {

  184.             const style = {};

  185.             style.width = `${this.itemRect.width}px`;

  186.             style.height = `${this.itemRect.height}px`;

  187.             // 通过translateX移动滑块，其移动的距离为索引*item的宽度

  188.             // #ifndef APP-NVUE

  189.             style.transform = `translateX(${

  190.                 this.innerCurrent * this.itemRect.width

  191.             }px)`;

  192.             // #endif

  193.             if (this.mode === "subsection") {

  194.                 // 在subsection模式下，需要动态设置滑块的圆角，因为移动滑块使用的是translateX，无法通过父元素设置overflow: hidden隐藏滑块的直角

  195.                 style.backgroundColor = this.disabled

  196.                     ? this.resolvedDisabledBorderColor

  197.                     : this.activeColor;

  198.             } else {

  199.                 style.backgroundColor = this.resolvedButtonBarColor;

  200.             }

  201.             return style;

  202.         },

  203.         // 分段器item的样式

  204.         itemStyle(index) {

  205.             return (index) => {

  206.                 const style = {};

  207.                 if (this.mode === "subsection") {

  208.                     // 设置border的样式

  209.                     style.borderColor = this.disabled

  210.                         ? this.resolvedDisabledBorderColor

  211.                         : this.activeColor;

  212.                     style.borderWidth = "1px";

  213.                     style.borderStyle = "solid";

  214.                 }

  215.                 return style;

  216.             };

  217.         },

  218.         // 分段器文字颜色

  219.         textStyle(index,item) {

  220.             return (index,item) => {

  221.                 const style = {};

  222.                 if (this.disabled) {

  223.                     style.fontWeight = 'normal';

  224.                     style.fontSize = addUnit(this.fontSize);

  225.                     style.color = this.resolvedDisabledTextColor;

  226.                     return style;

  227.                 }

  228.                 style.fontWeight =

  229.                     this.bold && this.innerCurrent === index ? "bold" : "normal";

  230.                 style.fontSize = addUnit(this.fontSize);

  231. 

  232.                 let activeColorTemp = null;

  233.                 let inactiveColorTemp = null;

  234.                 // 如果是对象并且设置了对应的背景色字段 则优先使用设置的字段

  235.                 if(typeof item === 'object' && item[this.activeColorKeyName]){

  236.                     activeColorTemp = item[this.activeColorKeyName];

  237.                 }

  238.                 if(typeof item === 'object' && item[this.inactiveColorKeyName]){

  239.                     inactiveColorTemp = item[this.inactiveColorKeyName];

  240.                 }

  241. 

  242.                 // subsection模式下，激活时默认为白色的文字

  243.                 if (this.mode === "subsection") {

  244.                     // 判断当前是否激活

  245.                     if(this.innerCurrent === index){

  246.                         // 判断当前是否有自定义的颜色

  247.                         style.color = activeColorTemp ? activeColorTemp : '#FFF'

  248.                         // style.color = activeColorTemp ? activeColorTemp : this.activeColor

  249.                     }

  250.                     else{

  251.                         // 判断当前是否有自定义的颜色

  252.                         style.color = inactiveColorTemp ? inactiveColorTemp : this.resolvedInactiveColor;

  253.                     }

  254.                 }

  255.                 else {

  256.                     // button模式下，激活时文字颜色默认为activeColor

  257.                     if(this.innerCurrent === index){

  258.                         // 判断当前是否有自定义的颜色

  259.                         style.color = activeColorTemp ? activeColorTemp : this.activeColor

  260.                     }

  261.                     else{

  262.                         // 判断当前是否有自定义的颜色

  263.                         style.color = inactiveColorTemp ? inactiveColorTemp : this.resolvedInactiveColor;

  264.                     }

  265.                 }

  266.                 return style;

  267.             };

  268.         },

  269.     },

  270.     mounted() {

  271.         this.init();

  272.         // #ifndef APP || MP-WEIXIN || MP-LARK|| MP-QQ || H5

  273.         this.windowResizeCallback = (res) => {

  274.             this.init();

  275.         }

  276.         uni.onWindowResize(this.windowResizeCallback)

  277.         // #endif

  278.     },

  279.     beforeUnmount() {

  280.         // #ifndef APP || MP-WEIXIN || MP-LARK|| MP-QQ || H5

  281.         uni.offWindowResize(this.windowResizeCallback)

  282.         // #endif

  283.     },

  284. 	emits: ["change", "update:current"],

  285.     methods: {

  286.         addStyle,

  287.         init() {

  288.             this.innerCurrent = this.current

  289.             sleep().then(() => this.getRect());

  290.         },

  291. 		// 判断展示文本

  292. 		getText(item) {

  293. 			return typeof item === 'object' ? item[this.keyName] : item

  294. 		},

  295.         // 获取组件的尺寸

  296.         getRect() {

  297.             // #ifndef APP-NVUE

  298.             this.$uGetRect(".u-subsection__item--0").then((size) => {

  299.                 this.itemRect = size;

  300.             });

  301.             // #endif

  302. 

  303.             // #ifdef APP-NVUE

  304.             const ref = this.$refs["u-subsection__item--0"][0];

  305.             ref &&

  306.                 dom.getComponentRect(ref, (res) => {

  307.                     this.itemRect = res.size;

  308.                 });

  309.             // #endif

  310.         },

  311.         clickHandler(index) {

  312.             // 防止某些平台 css 无法阻止点击事件 在此处拦截

  313.             if(this.disabled){

  314.                 return

  315.             }

  316.             this.innerCurrent = index;

  317. 			this.$emit('update:current', index);

  318.             this.$emit("change", index);

  319.         },

  320.         /**

  321.          * 获取当前文字区域的 class禁用样式

  322.          * @param index

  323.          */

  324.         getTextViewDisableClass(index){

  325.             // 禁用状态下

  326.             if(this.disabled){

  327.                 // 判断模式

  328.                 if(this.mode === 'button'){

  329.                     return 'item-button--disabled'

  330.                 }

  331.                 else{

  332.                     return 'item-subsection--disabled'

  333.                 }

  334.             }

  335.             return '';

  336.         }

  337.     },

  338. };

  339. </script>

  340. 

  341. <style lang="scss">

  342. @import "./theme-vars.scss";

  343. </style>

  344. 

  345. <style lang="scss" scoped>

  346. .u-subsection {

  347.     @include flex;

  348.     position: relative;

  349.     overflow: hidden;

  350. 	/* #ifndef APP-NVUE */

  351. 	width: 100%;

  352. 	box-sizing: border-box;

  353. 	/* #endif */

  354. 

  355.     &--button {

  356.         height: 34px;

  357.         background-color: rgb(238, 238, 239);

  358.         padding: 3px;

  359.         border-radius: 4px;

  360.         align-items: stretch;

  361. 

  362.         &__bar {

  363.             background-color: #ffffff;

  364.             border-radius: 4px !important;

  365.         }

  366.     }

  367. 

  368.     &--subsection {

  369.         height: 32px;

  370.     }

  371. 

  372.     &__bar {

  373.         position: absolute;

  374.         /* #ifndef APP-NVUE */

  375.         transition-property: transform, color;

  376.         transition-duration: 0.3s;

  377.         transition-timing-function: ease-in-out;

  378.         /* #endif */

  379. 

  380.         &--first {

  381.             border-top-left-radius: 4px;

  382.             border-bottom-left-radius: 4px;

  383.             border-top-right-radius: 0px;

  384.             border-bottom-right-radius: 0px;

  385.         }

  386. 

  387.         &--center {

  388.             border-top-left-radius: 0px;

  389.             border-bottom-left-radius: 0px;

  390.             border-top-right-radius: 0px;

  391.             border-bottom-right-radius: 0px;

  392.         }

  393. 

  394.         &--last {

  395.             border-top-left-radius: 0px;

  396.             border-bottom-left-radius: 0px;

  397.             border-top-right-radius: 4px;

  398.             border-bottom-right-radius: 4px;

  399.         }

  400.     }

  401. 

  402.     &__item {

  403.         @include flex;

  404.         flex: 1;

  405.         justify-content: center;

  406.         align-items: center;

  407.         // vue环境下，需要设置相对定位，因为滑块为绝对定位，item需要在滑块的上面

  408.         position: relative;

  409. 

  410.         &--no-border-right {

  411.             border-right-width: 0 !important;

  412.         }

  413. 

  414.         &--first {

  415.             border-top-left-radius: 4px;

  416.             border-bottom-left-radius: 4px;

  417.         }

  418. 

  419.         &--last {

  420.             border-top-right-radius: 4px;

  421.             border-bottom-right-radius: 4px;

  422.         }

  423. 

  424.         &__text {

  425.             font-size: 12px;

  426.             line-height: 14px;

  427.             @include flex;

  428.             align-items: center;

  429.             transition-property: color;

  430.             transition-duration: 0.3s;

  431.         }

  432.     }

  433. 

  434.     // 禁用标志

  435.     //

  436.     //&--subsectio--disabled{

  437.     //    cursor: no-drop;

  438.     //    background: #FFFFFF !important;

  439.     //    color: #BDBDBD !important;

  440.     //    border-color: #BDBDBD !important;

  441.     //}

  442.     //

  443.     //&--button--disabled{

  444.     //    cursor: no-drop;

  445.     //    color: #BDBDBD !important;

  446.     //    border-color: #BDBDBD !important;

  447.     //}

  448. 

  449. }

  450. 

  451. .item-button--disabled{

  452.     cursor: no-drop;

  453. }

  454. .item-subsection--disabled{

  455.     cursor: no-drop;

  456.     background: transparent !important;

  457. }

  458. </style>