vue 移动端粘性组件_一个Vue组件，有助于产生粘性效果

vue 移动端粘性组件

威客贴纸 (vue-sticker)

Vue component, that helps to make sticky effects

Vue组件，有助于产生粘性效果

View demo 查看演示 Download Source 下载源

安装 (Installation)

# install component
npm install --save-dev vue-sticker

使用类似本地组件 (using like local component)

import VueSticker from 'vue-sticker'

...
    components: { VueSticker }

或在全球范围内使用 (or use globally)

import VueSticker from 'vue-sticker'
import Vue from 'Vue'

Vue.use(VueSticker)

用法 (Usage)

After installing you can use vue-sticker component in your templates:

安装后，您可以在模板中使用vue-sticker组件：

<VueSticker :d="300"></VueSticker>

道具说明 (Props description)

prop name	type	description
d	Number required	It's diameter of your sticker (width and height of block)
className	String	This allows to you add styles to sticker by this name. For example: if you set className="good", then you can styling this sticker with .good__wrapper, .good__main-image and .good__backside-image. Your pictures has to be describe in these classes. By default className is set to 'vue-sticker'
prefix	String	that allows to you keep style guide and metodology, that you use in all your project. This string will be added between className and other words (elements). For example, you can set it in '--', and you get something like this: .goode--wrapper, .good--main-image and .good--backside-image. By default uses __
end	Number/Boolean	end point of sticky ability. This prop has to be > 0 and < d (size of your component)
deg	Number	this prop need to set degree that will be used when we active sticker by Enter key, without mouse cursor (Yes, i thought about accessibility). Also this prop uses for first animation helper (if you turn it on)
tipAnimation	Boolean	This prop turn on/off first animation, to indicate users, taht this element can sticky. (Indeed, i think about it case, may be it can be design by other way)

道具名称	类型	描述
d	所需数量	它是贴纸的直径(块的宽度和高度)
班级名称	串	这允许您通过此名称将样式添加到贴纸。 例如：如果设置className =“ good”，则可以使用.good__wrapper，.good__main-image和.good__backside-image设置此标签的样式。 您的图片必须在这些课程中进行描述。 默认情况下，className设置为'vue-sticker'
字首	串	这使您可以保留在所有项目中使用的样式指南和方法。 该字符串将添加在className和其他单词(元素)之间。 例如，您可以将其设置为“-”，您将得到如下内容：.goode--包装纸，.good--主图像和.good--背面图像。 默认使用__
结束	数字/布尔	粘性能力的终点。 该道具必须> 0且<d(组件的大小)
度	数	该道具需要设置在不使用鼠标光标的情况下通过Enter键激活贴纸时将使用的程度(是的，我想到了辅助功能)。 此道具也可用于第一个动画助手(如果您将其打开)
tipAnimation	布尔型	该道具打开/关闭第一个动画，以指示用户，此元素可能会发粘。 (实际上，我认为是这种情况，也许可以通过其他方式设计)

Describe your styles in component where you use vue-sticker by three elements: wrapper, main-image and backside-image.

通过三个元素来描述您在其中使用vue-sticker的组件中的样式：包装器，主图像和背面图像。

带有className =“ good”的Sass示例 (Sass example with className="good")

Illustrate case when you set main-image, but backside is just color

说明设置主图像时的情况，但背面只是颜色

<VueSticker :d="200" className="good" />

.good

    &__wrapper

        &:focus
            box-shadow: 0 0 5px 10px rgba(0, 0, 0, .4)

    &__main-image
        background-image: url('your-image.png')

    &__backside-image
        background-color: lighgray
        opacity: .4

带有className =“ example”和prefix =“-”CSS示例 (CSS example with className="example" and prefix="--")

<VueSticker :d="200" className="example" prefix="--" />

In this case we skip wrapper just for example. Usually wrapper styles need to add :hover and :focus for your component. But it's not must have.

在这种情况下，我们仅跳过包装器。 通常包装器样式需要为您的组件添加：hover和：focus。 但这不是必须的。

.example--main-image {
    background-image: url('example.png');
}

.example--backside-image {
    background-image: url('back.png');
}

getPercent事件 (getPercent event)

Vue-sticker always generate event, that indicate number from 0 to 1 of sticky complition. When user get down of sticker it will be 1.

Vue-sticker始终会生成事件，该事件指示粘性补全从0到1的数字。 当用户拿下贴纸时，它将为1。

To handle this event you just need add your method in your parent component and subscribe on event getPercent in vue-sticker component.

要处理此事件，您只需要在父组件中添加方法并在vue-sticker组件中订阅事件getPercent。

<VueSticker :d="400" @getPercent="doSomething" />

And set your method in parent component, for example we use percent:

并在父组件中设置您的方法，例如，我们使用百分比：

...
doSomething(value) {
    this.percentOfComplition = value * 100;
}

翻译自: https://vuejsexamples.com/a-vue-component-that-helps-to-make-sticky-effects/

vue 移动端粘性组件