重点不要看标题,
目前用的svelte 版本:3.0.0
demo代码
<script>
const btn = (e) => {
e.path[0].innerHTML = e.path[0].getAttribute("val");
};
</script>
<main>
<div on:click={btn} val="更换成功">测试点击按钮</div>
</main>
在ios上是没法更新的
isTrusted: true
手机上不知道为啥没有,反正就是没有结果,其次,点击事件能获取,但是没有找到方法可以获取当前点击的对象,比如在进行列表操作进行点击操作相关事件进行传参的问题
ios 的操作只能使用原生js的dom操作了
优化后的代码
<script>
const btn = (e) => {
// ios无效
// console.log(e);
// console.log(e.path);
// e.path[0].innerHTML = e.path[0].getAttribute("val");
// 通用方法
let _btn = document.getElementById("btn");
_btn.innerHTML = _btn.getAttribute("val");
};
</script>
<main>
<div id="btn" on:click={btn} val="更换成功">测试点击按钮</div>
</main>
如果是处于一个ul 下面的li这种列表
那就要用原生的js进行处理了,或者全局监控点击事件
<script>
import { afterUpdate } from "svelte";
let ul = ["按钮1", "按钮2", "按钮3", "按钮4"];
const btn = (e) => {
// ios无效
// console.log(e);
// console.log(e.path);
// e.path[0].innerHTML = e.path[0].getAttribute("val");
// 通用方法
let _btn = document.getElementById("btn");
_btn.innerHTML = _btn.getAttribute("val");
};
afterUpdate(() => {
let li = document.querySelectorAll("ul > li");
for (let index = 0; index < li.length; index++) {
const e = li[index];
e.onclick = (t) => {
e.innerHTML = ul[index];
};
}
});
</script>
<main>
<div id="btn" on:click={btn} val="更换成功">测试点击按钮</div>
<ul>
<li>测试点击按钮</li>
<li>测试点击按钮</li>
<li>测试点击按钮</li>
<li>测试点击按钮</li>
</ul>
</main>
由于用svelte开发pwa的应用,难免会遇到这种情况,始终没找到合适的解决办法
如果对于列表操作有更好的想法,可以评论一下,学习学习