@quanzo/vue-step v1.0.3

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

Events

Options

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>

VueStep.Content

Display specified content

<block-content style="background-color:black;color:antiquewhite" classes="content">
    <h2>Content from block</h2>
</block-content>

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>