兰兰想的博客

脑海中的创意, 生活中的点滴
返回列表

nodejs 直接升级(不影响当前正在运行程序)

Sat Dec 11 2021 21:03:26 GMT+0800 (China Standard Time)


使用以下命令 使用 n 模块

npm install n -g

然后运行n + 版本号即可 例如:

n 14.15.0

或者直接使用当前的stable版本

n stable
返回列表

相关文章

vc++ 2022 minimum or additional runtime missing the feature you are trying to use is in a network resource that is unavailable

阅读 12/4/2022, 2:12:00 PM

安卓手机屏幕没有显示 转移出数据的方法

阅读 12/13/2021, 10:00:00 PM

Open Graph Protocol(开放内容协议)

阅读 12/8/2021, 11:05:00 PM

pixel experience + magisk 支付宝刷脸

阅读 12/8/2021, 9:31:15 AM

IDEA SECTOR
image
匿名用户:
<template>
    <div class="hello">
        <img src="https://i.loli.net/2020/03/17/BRVMNvJKDnUtald.jpg" des="test"/>
        <img src="https://i.loli.net/2020/03/17/ePqugTZ3jMS4Ki7.jpg" des="test2"/>
        <div class="mask" v-if="showImage" ></div>
        <div class="div-fullScreen" v-if="showImage">
            <div class="btn-close" @click="showImage=false">
               X
            </div>
            <img :src="currentImage" class="image-fullScreen"/>
            <div class="div-des">
                <p>{{currentDes}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        data(){
            return {
                currentImage: null,
                currentDes:null,
                showImage: false
            }
        },
        mounted(){
            let ele = document.getElementsByTagName('img');
            //todo 过滤非组内元素
            console.log(ele);
            for (let img of ele) {
                img.onclick = () => {
                    this.showImage = true;
                    this.currentDes=img.getAttribute("des");
                    this.currentImage = img.src;
                };

            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .mask {
        width: 100vw;
        height: 100vh;
        opacity: 0.9;
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 0;
    }

    .div-fullScreen {
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1;
    }

    .image-fullScreen {
        width: auto;
        height: 100vh;
        text-align: center;
        z-index: 2;
    }
    .btn-close{
        position: absolute;
        right:50px;
        top: 30px;
        width:50px;
        height: 50px;
        border-radius: 50px;
        background-color: rgba(0,0,0,0.5);
        font-size: 50px;
        z-index: 3;
        cursor: pointer;
        color:white;
    }
    .div-des{
        width: 100vw;
        background-color: rgba(0,0,0,0.5);
        min-height: 50px;
        z-index: 3;
        color:white;
        bottom: 0;
        left: 0;
        position: absolute;
        text-shadow: 0 0 3px black;
    }
</style>

Tue Mar 08 2022 11:04:13 GMT+0800 (China Standard Time)
image

Thu Mar 10 2022 09:22:29 GMT+0800 (China Standard Time)
image
匿名用户:
<template>
    <div class="hello">
        <img src="https://i.loli.net/2020/03/17/BRVMNvJKDnUtald.jpg" des="test"/>
        <img src="https://i.loli.net/2020/03/17/ePqugTZ3jMS4Ki7.jpg" des="test2"/>
        <div class="mask" v-if="showImage"></div>
        <div class="div-fullScreen" v-if="showImage">
            <div class="btn-close" @click="showImage=false">
                X
            </div>
            <div class="btn-prev" @click="toPrevPhoto"> prev </div>
            <div class="btn-next" @click="toNextPhoto"> > </div>


            <img :src="photos[currentIndex].src" class="image-fullScreen"/>
            <div class="div-des">
                <p>{{photos[currentIndex].getAttribute("des")}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        data(){
            return {
                showImage: false,
                photos: [],
                currentIndex: 0
            }
        },
        mounted(){
            let ele = document.getElementsByTagName('img');
            //todo 过滤非组内元素
            for (let img of ele) {
                this.photos.push(img)
                img.onclick = () => {
                    this.showImage = true;
                    this.currentIndex = this.photos.indexOf(img)
                };
            }

        },
        methods: {
            toNextPhoto(){
                if (this.currentIndex === this.photos.length - 1) {
                    alert('已经是最后一张照片')
                } else {
                    this.currentIndex += 1;
                    const currentPhoto = this.photos[this.currentIndex];
                    this.currentImage = currentPhoto.src;
                    this.currentDes = currentPhoto.getAttribute("des");
                }

            },
            toPrevPhoto(){
                if (this.currentIndex === 0) {
                    alert('已经是第一张照片')
                } else {
                    this.currentIndex -= 1;
                    const currentPhoto = this.photos[this.currentIndex];
                    this.currentImage = currentPhoto.src;
                    this.currentDes = currentPhoto.getAttribute("des");
                }
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .mask {
        width: 100vw;
        height: 100vh;
        opacity: 0.9;
        position: fixed;
        top: 0;
        left: 0;
        background-color: black;
        z-index: 0;
    }

    .div-fullScreen {
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1;
    }

    .image-fullScreen {
        width: auto;
        height: calc(100vh - 50px);
        text-align: center;
        z-index: 2;
        bottom: 50px;
    }

    .btn-close {
        position: absolute;
        right: 50px;
        top: 30px;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 50px;
        z-index: 3;
        cursor: pointer;
        color: white;
    }

    .btn-next {
        position: absolute;
        right: 50px;
        top: 45%;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 50px;
        z-index: 3;
        cursor: pointer;
        color: white;
    }

    .btn-prev {
        position: absolute;
        left: 50px;
        top: 45%;
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 50px;
        z-index: 3;
        cursor: pointer;
        color: white;
    }

    .div-des {
        width: 100vw;
        background-color: rgba(0, 0, 0, 0.5);
        min-height: 50px;
        z-index: 3;
        color: white;
        bottom: 0;
        left: 0;
        position: absolute;
        text-shadow: 0 0 3px black;
    }
</style>



Thu Mar 10 2022 09:22:50 GMT+0800 (China Standard Time)