123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- import baseComponent from '../helpers/baseComponent'
- import classNames from '../helpers/libs/classNames'
- import { useRect } from '../helpers/hooks/useDOM'
- baseComponent({
- relations: {
- '../sticky/index': {
- type: 'parent',
- },
- },
- properties: {
- prefixCls: {
- type: String,
- value: 'wux-sticky-item',
- },
- title: {
- type: String,
- value: '',
- },
- content: {
- type: String,
- value: '',
- },
- },
- data: {
- isFixed: false,
- index: 0,
- top: 0,
- height: 0,
- },
- computed: {
- classes: ['prefixCls, isFixed', function(prefixCls, isFixed) {
- const wrap = classNames(prefixCls, {
- [`${prefixCls}--fixed`]: isFixed,
- })
- const hd = `${prefixCls}__hd`
- const title = `${prefixCls}__title`
- const bd = `${prefixCls}__bd`
- const content = `${prefixCls}__content`
- return {
- wrap,
- hd,
- title,
- bd,
- content,
- }
- }],
- },
- methods: {
- onScroll(scrollTop) {
- const parent = this.getRelationsByName('../sticky/index')[0]
- const { top, height, index } = this.data
- const isFixed = scrollTop >= top && scrollTop < top + height
- if (this.data.isFixed !== isFixed) {
- this.setData({
- isFixed,
- })
- if (parent) {
- parent.triggerEvent(isFixed ? 'stick' : 'unstick', { index })
- }
- }
- },
- updated(index) {
- useRect(`.${this.data.prefixCls}`, this)
- .then((rect) => {
- if (!rect) return
- this.setData({
- top: rect.top,
- height: rect.height,
- index,
- })
- })
- },
- },
- })
|