2b:null 2c:["$","title",null,{"children":"[MISC] 图片叠层对比 | UnluckyNinja | Observable"}] 31:[] 2f:{"id":"3823bfdbe08885f5","slug":null,"title":"[MISC] 图片叠层对比","thumbnail":"7ef845bf6d79caac6d0cdd4bf0117a1bedcd4ad2f4dc335e65d0377e2c74876d","access_level":"public","create_time":"$D2023-08-28T15:29:16.102Z","update_time":"$D2024-10-02T09:54:12.676Z","view_time":null,"first_public_time":"$D2023-08-28T15:29:16.102Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ebb6118c9a990a2c","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":"starter_2024"},"version":240,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4df1f6fd87aa7295","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":null}],"members":[{"type":"individual","id":"4df1f6fd87aa7295","login":"unluckyninja","name":"UnluckyNinja","avatar_url":"https://avatars-next.observableusercontent.com/95d8d23bafa30b0b30e2ead4a72666d02cc17899c3c958c22c65fc0fc09afe3d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"8a937268d1fb01d9","slug":"tools","title":"tools","owner":{"id":"ebb6118c9a990a2c","login":"unluckyninja","name":"UnluckyNinja"}},"type":"notebook","body":{"title":"[MISC] 图片叠层对比","cells":[{"id":5,"value":"# [MISC] 图片叠层对比","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"拖入图片A\n${newDropArea(imageA.value, dnd.dropHandler(r=>{\n imageA.value = r\n mutable f1 = !f1\n}), dnd.dragover)}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"拖入图片B\n${newDropArea(imageB.value, dnd.dropHandler(r=>{\n imageB.value = r\n mutable f2 = !f2\n}), dnd.dragover)}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"createVueApp({\n template: `

切换显示

`,\n setup(){\n const checked = Vue.ref(false)\n const onChange = ()=>{\n if(checked.value){\n value.value = 100\n } else {\n value.value = 0\n }\n }\n return {\n checked,\n onChange\n }\n }\n}, ()=>this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"createVueApp({\n template: `

第二层透明度

`,\n setup(){\n const rValue = value\n \n return {\n rValue,\n }\n }\n}, ()=>this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"createVueApp({\n template: compTemp,\n setup(){\n \n const { ref, watch, onUnmounted } = Vue\n const blobA = ref(null)\n watch(imageA, (newVal)=>{\n if(blobA.value) URL.revokeObjectURL(blobA.value)\n if (newVal){\n blobA.value = URL.createObjectURL(newVal.file)\n }\n }, {immediate: true})\n const blobB = ref(null)\n watch(imageB, (newVal)=>{\n if(blobB.value) URL.revokeObjectURL(blobB.value)\n if (newVal){\n blobB.value = URL.createObjectURL(newVal.file)\n }\n }, {immediate: true})\n \n const opacity = value\n\n onUnmounted(()=>{\n if(blobA.value) URL.revokeObjectURL(blobA.value)\n if(blobB.value) URL.revokeObjectURL(blobB.value)\n })\n return {\n blobA,\n blobB,\n opacity\n }\n }\n}, ()=>this)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"compTemp","database":"$undefined"},{"id":48,"value":"imageA = Vue.shallowRef(null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"imageB = Vue.shallowRef(null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"value = Vue.ref(50)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"mutable f1 = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"mutable f2 = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"import { newDropArea, dnd } from '@unluckyninja/fileapi'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"import { createVueApp } from '53b92343f9084d61'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"import { Vue } from '@unluckyninja/vue'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"unocss = import('https://cdn.jsdelivr.net/npm/@unocss/runtime/uno.global.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"