<div id="app" @scroll="letsScroll = true" :class="letsScroll && '_scrolled'"><template>
<input type="text"
:placeholder="placeholder"
:value="value"
@input="onchange">
<app-transition type="toggleDown">
<div>{{ notify }}</div>
</app-transition>
</template>
<script>
export default {
name: 'app-input',
props: ['type', 'value', 'placeholder'],
computed: {
notify() {
let text = 'Поле может содержать только ';
return ( this.type === 'tel' && text + 'цифры' )
|| ( this.type === 'page' && text + 'латинские буквы, цифры (не менее 6 символов)' )
|| ( this.type === 'name' && text + 'русские и латинские буквы, цифры (не менее 3 символов)' )
},
validation(value) {
return {
tel: (/^[0-9]+$/).test(this.value) || !this.value.length,
page: (/^[a-z0-9]+$/i).test(this.value) && this.value.length > 5,
name: (/^[a-zа-яA-ZА-Я0-9 ]+$/i).test(this.value) && this.value.length > 3
}
}
},
methods: {
onchange(e) {
if ( this.validation[this.type] ) {
this.$emit('input', e.target.value);
}
}
}
}
</script><template>
<ul>
<li @click = "currentSorting = 'name'"> byName </li>
<li @click = "currentSorting = 'price'"> byPrice </li>
</ul>
<app-product v-for="product in productsBy"
:key="product.id"
:product="product">
</app-product>
</template>
<script>
import AppProduct from './app-product.vue';
export default {
name: 'products-list',
components: { AppProduct },
data() {
return {
currentSorting: 'name',
products: [ {id: 'sdfsdfsdf}, {id: '121qwqwe'}, {id: '2oo23o'} ]
}
},
computed: {
productsBy: function() {
switch(this.currentSorting) {
case 'name': return this.products
case 'price': return this.products
}
}
}
}
</script>
You can use ready-made solutions:
www.google.com/analytics
www.clicktale.com
https://segment.io/
www.extrawatch.com
mouseflow.com
https://www.seevolution.com/
clicky.com
You can do amazing stuff with Google Analytics and its Event Tracker:
https://developers.google.com/analytics/devguides/...
searchenginewatch.com/article/2287906/10-Google-An...
If you're looking for a custom-made solution, you can try the following one with PHP and JavaScript:
css-tricks.com/tracking-clicks-building-a-clickmap...
Keep in mind that using third-party solutions is better performance-wise. Writing the coordinates of the mouse movements in a database in real time, needs a lot of resources.