Initial commit of akmon project
This commit is contained in:
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<picker-view
|
||||
class="l-picker-item__group"
|
||||
:style="{opacity: options.length > 0 ? 1 : 0}"
|
||||
:indicator-style="indicatorStyles"
|
||||
:value="innerIndex"
|
||||
@change="handlePick"
|
||||
indicator-class="l-picker-item__indicator">
|
||||
<picker-view-column class="l-picker-item__wrapper">
|
||||
<text
|
||||
class="l-picker-item__group-item"
|
||||
v-for="(item, i) in options"
|
||||
:style="[itemStyles, curIndex == i ? itemActiveStyles: {}]"
|
||||
:class="{'l-picker-item__group-item--active': curIndex == i}"
|
||||
:key="item.value">{{item.label}}</text>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
// @ts-nocheck
|
||||
/**
|
||||
* PickerItem 选择器子项组件
|
||||
* @description 用于构建多列选择器的单个列项，通常作为 Picker 组件的子组件使用
|
||||
* <br>插件类型：LPickerItemComponentPublicInstance
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?name=lime-picker
|
||||
*
|
||||
* @property {PickerColumnItem[]} options 当前列的选项列表（必填）
|
||||
* @property {PickerValue} value 当前选中值
|
||||
* @property {number} column 列索引标识（从0开始计数）
|
||||
* @property {string | number} name 列名称标识符
|
||||
*/
|
||||
import { defineComponent, getCurrentInstance, inject, ref, computed, watch, onBeforeUnmount } from '@/uni_modules/lime-shared/vue';
|
||||
import { unitConvert } from '@/uni_modules/lime-shared/unitConvert';
|
||||
import { clamp } from '@/uni_modules/lime-shared/clamp'
|
||||
import type { PickerItemProps, ManageChildInList, OnPick, UpdateItems } from './type';
|
||||
import type { PickerColumnItem, PickerValue } from '../l-picker/type';
|
||||
|
||||
import pickerItemProps from './props';
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'l-picker-item',
|
||||
props: pickerItemProps,
|
||||
setup(props, {expose}) {
|
||||
const instance = getCurrentInstance()!;
|
||||
const picker = inject<LPickerComponentPublicInstance|null>('limePicker', null);
|
||||
const pickerItemInstanceArray = inject<Ref<LPickerItemComponentPublicInstance[]>|null>('limePickerItems', null);
|
||||
const manageChildInList = inject<ManageChildInList|null>('limePickerManageChildInList', null);
|
||||
manageChildInList?.(instance.proxy! as LPickerItemComponentPublicInstance , true)
|
||||
|
||||
const onPick = inject<OnPick|null>('limePickerOnPick', null);
|
||||
const updateItems = inject<UpdateItems|null>('limePickerUpdateItems', null);
|
||||
|
||||
const curIndex = ref(-1)
|
||||
const curValue = ref<PickerValue|null>(null);
|
||||
const column = computed(() : number => props.column != -1 ? props.column : pickerItemInstanceArray?.value.indexOf(instance.proxy! as LPickerItemComponentPublicInstance) ?? props.column);
|
||||
|
||||
const elementPosition = computed(() : boolean[] => {
|
||||
const totalElements = pickerItemInstanceArray?.value.length || 0;
|
||||
return [column.value == 0, column.value == totalElements - 1]
|
||||
});
|
||||
const innerIndex = computed(():number[] => [curIndex.value])
|
||||
|
||||
const indicatorStyles = computed(() : string => {
|
||||
const [isFirst, isLast] = elementPosition.value
|
||||
let style = ``
|
||||
|
||||
if(isFirst) {
|
||||
style+= 'border-top-left-radius:12rpx; border-bottom-left-radius:12rpx;'
|
||||
}
|
||||
if(isLast) {
|
||||
style+= 'border-top-right-radius:12rpx; border-bottom-right-radius:12rpx;'
|
||||
}
|
||||
return `
|
||||
${style}
|
||||
height: ${picker?.itemHeight || '50px'};
|
||||
background-color: rgba(0, 0, 0, 0.04); ${picker?.indicatorStyle}`
|
||||
})
|
||||
const itemStyles = computed(()=>{
|
||||
const style:Record<string, any> = {};
|
||||
if(picker?.itemColor) {
|
||||
style['color'] = picker.itemColor!
|
||||
}
|
||||
if(picker?.itemFontSize) {
|
||||
style['font-size'] = picker.itemFontSize!
|
||||
}
|
||||
return style
|
||||
})
|
||||
|
||||
const itemActiveStyles = computed(() =>{
|
||||
const style:Record<string, any> = {};
|
||||
if(picker?.itemActiveColor) {
|
||||
style['color'] = picker.itemActiveColor!
|
||||
}
|
||||
if (picker?.itemActiveFontWeight) {
|
||||
style['font-weight'] = picker.itemActiveFontWeight!
|
||||
}
|
||||
return style
|
||||
})
|
||||
|
||||
const getIndexByValue = (val: PickerValue | null) => {
|
||||
let defaultIndex = 0;
|
||||
if (val != null) {
|
||||
defaultIndex = props.options.findIndex((item) => item.value == val);
|
||||
}
|
||||
return defaultIndex < 0 ? 0 : defaultIndex;
|
||||
};
|
||||
|
||||
const setIndex = (index: number) =>{
|
||||
let lastIndex = curIndex.value
|
||||
let _index = clamp(index, 0, props.options.length - 1)
|
||||
if(props.options.length > _index) {
|
||||
curIndex.value = _index;
|
||||
curValue.value = props.options[_index].value
|
||||
}
|
||||
// #ifdef WEB
|
||||
if(lastIndex == _index || lastIndex == -1) return
|
||||
if(instance.proxy!.$el) {
|
||||
const childs = Array.from(instance.proxy!.$el.parentElement.children).slice(column.value + 1);
|
||||
childs.forEach((child) => {
|
||||
(child as HTMLElement).style.setProperty('--picker-duration', '300ms');
|
||||
setTimeout(function() {
|
||||
(child as HTMLElement).style.setProperty('--picker-duration', '0ms');
|
||||
}, 299);
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
|
||||
const setValue = (value: PickerValue|null) =>{
|
||||
if(value == curValue.value) return
|
||||
curValue.value = value
|
||||
const index = getIndexByValue(value)
|
||||
setIndex(index)
|
||||
}
|
||||
const setOptions = () => {}
|
||||
const setUpdateItems = () => {
|
||||
const curItem = props.options.length > curIndex.value ? props.options[curIndex.value] : null;
|
||||
if(curItem == null) return
|
||||
updateItems?.(curItem, curIndex.value, column.value);
|
||||
}
|
||||
|
||||
const handlePick = (e: UniPickerViewChangeEvent) => {
|
||||
if(props.options.length == 0) return
|
||||
const index = clamp(e.detail.value[0], 0, props.options.length - 1);
|
||||
const curItem = props.options[index];
|
||||
if(index == curIndex.value) return
|
||||
setIndex(index)
|
||||
onPick?.(curItem, index, column.value);
|
||||
}
|
||||
|
||||
|
||||
// const stop = watch(():PickerColumnItem[] => props.options, ()=> {
|
||||
// if(JSON.stringify(o) == JSON.stringify(v)) return
|
||||
// const index = (picker?.resetIndex || false) ? 0 : Math.max( Math.min(props.options.length - 1, curIndex.value), 0)
|
||||
// const curItem = props.options[index];
|
||||
// setIndex(index)
|
||||
// setUpdateItems();
|
||||
// // nextTick(()=>{
|
||||
// // onPick?.(curItem, index, column.value);
|
||||
// // })
|
||||
// }) // ,{immediate: true}
|
||||
|
||||
const stopValue = watch(():PickerValue|null => props.value, (v : PickerValue|null)=>{
|
||||
setValue(v);
|
||||
setUpdateItems();
|
||||
},{immediate: true})
|
||||
|
||||
onBeforeUnmount(()=>{
|
||||
manageChildInList?.(instance.proxy! as LPickerItemComponentPublicInstance, false)
|
||||
// stop()
|
||||
stopValue()
|
||||
})
|
||||
|
||||
// #ifdef VUE3
|
||||
expose({
|
||||
setIndex,
|
||||
setValue,
|
||||
// setOptions,
|
||||
// setUpdateItems,
|
||||
getIndexByValue
|
||||
})
|
||||
// #endif
|
||||
|
||||
return {
|
||||
indicatorStyles,
|
||||
innerIndex,
|
||||
curIndex,
|
||||
handlePick,
|
||||
itemStyles,
|
||||
itemActiveStyles,
|
||||
// #ifdef VUE2
|
||||
setIndex,
|
||||
setValue,
|
||||
getIndexByValue
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import './index';
|
||||
</style>
|
||||
Reference in New Issue
Block a user