如何动态更改CSS光标vuejs
How to change CSS cursor dynamically vuejs
这可能是一个太宽泛的问题,但我正在尝试使用 Vuejs 作为框架重新创建一个 cursomizer。我陷入了必须动态更改光标的位置。这些光标应该是 SVG 文件,可以从下一个组件访问,用户可以在其中修改大小和填充。我担心的是可以将不同的光标存储在不同的按钮中并在单击时更新。我提供的代码包含动态生成的不同列表项,单击时,它会将 active class 添加到所选项目。如果有人对如何解决这个问题有任何建议,请加入。
<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);
}
}
}
我能想到的最佳解决方案是使用样式绑定。这样,您可以在数据对象中定义游标,然后动态更改它 (v-bind:style="{cursor: selectedCursor}"
)。
关于光标的设置,可以使用
最上面的答案所示的方法
我创建了一个 fiddle 来说明我的意思
https://jsfiddle.net/rnab4tep/1/
您现在要做的就是将 selectedCursor 设置为您喜欢的光标。
这可能是一个太宽泛的问题,但我正在尝试使用 Vuejs 作为框架重新创建一个 cursomizer。我陷入了必须动态更改光标的位置。这些光标应该是 SVG 文件,可以从下一个组件访问,用户可以在其中修改大小和填充。我担心的是可以将不同的光标存储在不同的按钮中并在单击时更新。我提供的代码包含动态生成的不同列表项,单击时,它会将 active class 添加到所选项目。如果有人对如何解决这个问题有任何建议,请加入。
<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);
}
}
}
我能想到的最佳解决方案是使用样式绑定。这样,您可以在数据对象中定义游标,然后动态更改它 (v-bind:style="{cursor: selectedCursor}"
)。
关于光标的设置,可以使用
我创建了一个 fiddle 来说明我的意思 https://jsfiddle.net/rnab4tep/1/
您现在要做的就是将 selectedCursor 设置为您喜欢的光标。