如何动态更改 CSS 光标 vuejs

Posted 2023-02-23

【中文标题】如何动态更改 CSS 光标 vuejs

【英文标题】：How to change CSS cursor dynamically vuejs

【发布时间】：2019-07-26 16:50:18

【问题描述】：

这可能是一个过于宽泛的问题，但我正在尝试使用 Vuejs 作为框架重新创建 cursomizer。我陷入了必须动态更改光标的位置。这些光标应该是 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" 
                        >
                        <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" 
                        >/*  */
                        <ellipse class="cursor-svg__main" cx="8" cy="8" rx="8" opacity="1" ry="8" fill="none"
                            stroke- stroke="#000"></ellipse>
                    </svg>`
        ,
        
            cursorId: '3',
            cursorImage: ` <svg class="cursor-svg cursor-svg_static hover_undefined move_undefined click_undefined" 
                        >
                        <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】：

我能想到的最佳解决方案是使用样式绑定。这样，您可以在数据对象中定义光标并在之后动态更改它（v-bind:style="cursor: selectedCursor"）。

至于设置光标，可以使用this question.上面的答案所示的方法

我创建了一个小提琴来说明我的意思 https://jsfiddle.net/rnab4tep/1/

您现在要做的就是将 selectedCursor 设置为您喜欢的光标。

【讨论】：

最后，我选择在其中创建一些带有 SVG 的不同 div，然后从 javascript 中定位它，因为它对我的项目更有意义，但您的版本更干净！谢谢