1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/ChaoXxxx_admin-suspension-ball

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
README.md 3.4 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
Отправлено 13.03.2025 08:06 b84b665

suspension-ball

Поддержка перемещаемого плавающего шара, автоматическое прилипание к краям, аналогично iOS всплывающему управлению

Пример

avatar

Установка

npm install suspension-ball -S

import Vue from 'vue'
import suspensionBall from 'suspension-ball'
Vue.use(suspensionBall)

Параметры

Имя Тип По умолчанию Описание
zIndex число 1001 Уровень компонента
init объект { верхний край: 0, левый край: 0 } Начальная позиция
distance объект { верхний край: 10, левый край: 10, правый край: 10, нижний край: 10 } Расстояние до границ экрана (при превышении определенного расстояния компонент вернётся на указанное расстояние от границы)

События

@eventEmit Отсутствие возвращаемых значений, событие отправляется при нажатии кнопки

@positionEmit Возвращает значения компонента left и top

Шаблон

<suspension-ball 
    @eventEmit="eventEmit" 
    @positionEmit="positionEmit" 
    :zIndex="1002" 
    :distance="{top: 70, left: 10, right: 25, bottom: 10}" 
    :init="{top: 80}">
        <div class="float_ball">Плавающий</div>
</suspension-ball>

import suspensionBall from 'suspensionBall'

TypeScript

import { Component, Vue } from 'vue-property-decorator'
import { Position } from './types/app'
import SuspensionBall from '../src/components/SuspensionBall.vue'

@Component({
  components: {
    SuspensionBall
  }
})
export default class App extends Vue {
  private eventEmit(): void {
    return
  }

  private positionEmit(position: Position): void {
    console.log(`верхний край => ${position.top}  левый край => ${position.left}`)
  }
}
```### Параметры

// Уровень компонента (если возникают проблемы с перемещением, проверьте значение z-index. z-index должно быть больше чем у web на один уровень) По умолчанию 1001 @Prop({ type: Number, required: false, default: 1001 }) private zIndex !: number

// Начальная позиция (начальные координаты верхнего и левого края компонента)
@Prop({
    type: Object,
    required: false,
    default: () => {
      return {
        верхний край: 0,
        левый край: 0
      }
    }
}) private init!: Init

// Расстояние до границ экрана (расстояние до верхней, правой, нижней и левой границы)
@Prop({
    type: Object,
    required: false,
    default: () => {
        return {
            верхний край: 10,
            левый край: 10,
            правый край: 10,
            нижний край: 10
        }
    }
}) private distance!: Distance
```

### Исходный код
[suspension-ball](https://gitee.com/ChaoXxxx/suspension-ball)
```

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/ChaoXxxx_admin-suspension-ball.git
git@api.gitlife.ru:oschina-mirror/ChaoXxxx_admin-suspension-ball.git
oschina-mirror
ChaoXxxx_admin-suspension-ball
ChaoXxxx_admin-suspension-ball
master