Как динамически изменить CSS курсор - PullRequest
Новая
       6

Как динамически изменить CSS курсор

0 голосов
/ 05 марта 2019

Возможно, это слишком широкий вопрос, но я пытаюсь воссоздать cursomizer с Vuejs в качестве фреймворка.Я застрял в положении, когда мне нужно динамически менять курсоры.Предполагается, что эти курсоры являются файлами SVG, к которым можно получить доступ из следующего компонента, где пользователь сможет изменить размер и заполнение.Моя задача - хранить разные курсоры на разных кнопках и обновлять их при нажатии.Код, который я предоставил, содержит различные элементы списка, которые генерируются динамически, и при нажатии добавляет класс active к выбранному элементу.Если у кого-нибудь есть какие-либо советы о том, как решить эту проблему, прыгайте. 

<template>
<div>
    <h1>Choose cursor</h1>
    <section class="cursors-wrapper">
        <ul class="cursor-list">
            <li class="cursor-list-item" @click="activateCursor(cursor.cursorId)" :class="{ active : active_el == cursor.cursorId }" v-for="cursor in cursors" >
               <a href="#" class="cursor-list-item-inner">
                   <!-- SVGG-->
                    <div v-html="cursor.cursorImage"></div>
                </a> 
            </li>
        </ul>
    </section>
    <div @click="choosenOne"></div>
</div>


<script>
export default {
data () {
return {
    cursors: [
        {
            cursorId: '1',
            cursorImage: `<svg class="cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
                        width="16">
                        <ellipse class="cursor-svg__main" cx="8" cy="8" rx="8" ry="8" fill="#000"></ellipse>
                    </svg>`          
        },
        {
           cursorId: '2',
            cursorImage: `<svg class="cursor-overflow cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
                        width="16">/*  */
                        <ellipse class="cursor-svg__main" cx="8" cy="8" rx="8" opacity="1" ry="8" fill="none"
                            stroke-width="3" stroke="#000"></ellipse>
                    </svg>`
        },
        {
            cursorId: '3',
            cursorImage: ` <svg class="cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" height="16"
                        width="16">
                        <path class="cursor-svg__main" d="M 0 0 L 12 10 L 0 16" opacity="1" fill="#000"></path>
                    </svg>`
        }
    ],
    active_el: 0
}
},
methods:{
activateCursor:function(el){
    this.active_el = el;
    console.log(this.cursorId);
}
}
}

1 Ответ

0 голосов
/ 05 марта 2019

Лучшее решение, которое я могу придумать, это использовать привязки стилей.Таким образом, вы можете определить курсор в вашем объекте данных и впоследствии изменить его динамически (v-bind:style="{cursor: selectedCursor}").

Что касается установки курсора, вы можете использовать метод, показанный в верхнем ответе этого вопроса.

Я создал скрипку, чтобы проиллюстрировать, что я имею в видуhttps://jsfiddle.net/rnab4tep/1/

Все, что вам нужно сейчас сделать, это установить selectedCursor на курсор по вашему вкусу.

...