@quanzo/vue-step

1.0.3 • Public • Published

Step - component for Vue.js

The component is intended for serial output of information. For example, you can consistently display a questionnaire or a psychological test.

Other components act as blocks.

Such a component must have the displayed property, which controls whether or not to display this component on the screen. If this property is absent, then it (the component without `displayed`) does not participate in the switch. It is displayed as usual. May use methods of the Step component.

The condition for the further transition must be defined in the component and the method provided by the Step component must be called. The condition for the transition may be a correctly completed form or the selected option from the list.

--------------------------------------------------------

Компонент предназначен для последовательного вывода информации. Например, можно последовательно выводить анкету или психологический тест.

В качестве блоков выступают другие компоненты.

Такой компонент должен иметь свойство displayed, которое управляет отображать или нет этот компонент на экране. Если это свойство отсутствует, то он (компонент без displayed) не учавствует в переключении. Выводится как обычно. Может использовать методы компонента Step.

В компоненте должно быть определено условие для дальнейшего перехода и вызван метод, предоставленный компонентом Step. Условием перехода может являться правильно заполненная форма или выбранный вариант из списка.

 

Install via NPM

npm i --save-dev @quanzo/vue-step

Load from CDN

You can load specific version of package from jsDelivr CDN.

<script src="https://cdn.jsdelivr.net/npm/@quanzo/vue-step"></script>

 

Methods provided by the component Step

provide component method return
nextStep() next() forward one step
prevStep() prev() one step back
toStep(index) to(index) go to slide by number
toStepAttr(atributeName, attributeValue) toAttr(atributeName, attributeValue)
countSteps() count() integer total number of elements
possiblePrevStep() possiblePrev() boolean is it possible to step back
possibleNextStep() possibleNext() boolean is it possible to step forward
stopAutoStep() stop() stop auto switch
currentStep() integer current step number
registerEventListener(eventName, func) Registers a function on an event. function(params={})

Events

event $emit event params
event-step-to yes {to: ..., from: ..., count: ..., component: ...} The event will be triggered after going to another step.

Options

param type default description
auto-start boolean false start auto switch
timeout integer 15000 automatic switching time, in milliseconds
round boolean true switch slides in a circle
inc integer 1 step increment
indexStart integer 0 display starts from this index
beforeTo function(to, from, obj) true
afterTo function(to, from, obj)

How to use

Connect script

<script src="../dist/bundle.js"></script>

Register Vue.js component

Vue.component("step", VueStep.Step());

Create with tag (example)

<div id="choose">
    <step :auto-start="false" :round="false" name="stepbystep">
        <choose-tarif :tarifs="tarifs"></choose-tarif>
        <choose-option :tarifs="tarifs"></choose-option>
        <result-choise :tarifs="tarifs"></result-choise>
    </step>
</div>

Additional

Additional components available

Vue.component("block", VueStep.Test("test-block-2"));
Vue.component("bimg", VueStep.Image());
Vue.component("block-content", VueStep.Content());
Vue.component("block-load-content", VueStep.LoadContent());

VueStep.Image

Image output

<bimg classes="content content-image" styles="display:block" src="https://data.1freewallpapers.com/thumb/i-m-hungry.jpg" url="http://ya.ru"></bimg>

 

params default type description
src string
url “” string If present, the picture will be wrapped in a link.
title “” string attribute image
alt “” string attribute image
transition fade string
styles “” string css styles
classes content string css classes
onShow function(component) {} function Will be called when this block is shown.
onHide function(component) {} function Will be called when this block is hidden.

 

VueStep.Content

Display specified content

<block-content style="background-color:black;color:antiquewhite" classes="content">
    <h2>Content from block</h2>
</block-content>
params default type description
onShow function(component) {} function Will be called when this block is shown.
onHide function(component) {} function Will be called when this block is hidden.
transition fade string
styles “” string css styles
classes content string css classes

Use all provided step-component methods in content

<block-content style="background-color:black;color:antiquewhite">
    <template v-slot="{ nextStep }">
        <h2>This content</h2>
        <button @click="nextStep()">Next</button>
    </template>
</block-content>

or

<block-content style="background-color:black;color:antiquewhite">
    <template v-slot="params">
        <button @click="params.nextStep()">Next</button>
    </template>
</block-content>

VueStep.LoadContent

Download content from a source and display it. Content is only loaded when displayed.

<block-load-content url="content.html" reqmethod="GET"></block-load-content>
param default type description
url string
reqmethod GET string method of request
reqparams {} object additional params of request
beforeRequest function(component, reqParams) { return true; } function It will be called before an ajax request. If it returns false, the request will not take place.
successRequest function(component) {} function Will be called after a successful ajax request.
onShow function(component) {} function Will be called when this block is shown.
onHide function(component) {} function Will be called when this block is hidden.
transition fade string
styles “” string css styles
classes content string css classes

Package Sidebar

Install

npm i @quanzo/vue-step

Weekly Downloads

1

Version

1.0.3

License

MIT

Unpacked Size

35.4 kB

Total Files

5

Last publish

Collaborators

  • quanzo