vue-pro/yudao-ui-app-v1/uni_modules/uview-ui/components/u-index-item/u-index-item.vue

88 lines
2.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<!-- #ifdef APP-NVUE -->
<cell ref="u-index-item">
<!-- #endif -->
<view
class="u-index-item"
:id="`u-index-item-${id}`"
:class="[`u-index-item-${id}`]"
>
<slot />
</view>
<!-- #ifdef APP-NVUE -->
</cell>
<!-- #endif -->
</template>
<script>
import props from './props.js';
// #ifdef APP-NVUE
// 由于weex为阿里的KPI业绩考核的产物所以不支持百分比单位这里需要通过dom查询组件的宽度
const dom = uni.requireNativePlugin('dom')
// #endif
/**
* IndexItem
* @description
* @tutorial https://uviewui.com/components/indexList.html
* @property {String}
* @event {Function}
* @example
*/
export default {
name: 'u-index-item',
mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
data() {
return {
// 本组件到滚动条顶部的距离
top: 0,
height: 0,
id: ''
}
},
created() {
// 子组件u-index-anchor的实例
this.anchor = {}
},
mounted() {
this.init()
},
methods: {
init() {
// 此处会活动父组件实例并赋值给实例的parent属性
this.getParentData('u-index-list')
if (!this.parent) {
return uni.$u.error('u-index-item必须要搭配u-index-list组件使用')
}
uni.$u.sleep().then(() =>{
this.getIndexItemRect().then(size => {
// 由于对象的引用特性此处会同时生效到父组件的children数组的本实例的top属性中供父组件判断读取
this.top = Math.ceil(size.top)
this.height = Math.ceil(size.height)
})
})
},
getIndexItemRect() {
return new Promise(resolve => {
// #ifndef APP-NVUE
this.$uGetRect('.u-index-item').then(size => {
resolve(size)
})
// #endif
// #ifdef APP-NVUE
const ref = this.$refs['u-index-item']
dom.getComponentRect(ref, res => {
resolve(res.size)
})
// #endif
})
}
},
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
</style>