vue2混入寫法

為什么用 mixins

從官方的介紹我們可以知道

mixins的作用是抽取組件中相同的屬性和方法到獨(dú)立的文件，以便公用。
mixins對象會被混入該組件本身，所有會有命名沖突。

舉個(gè)例子：做一個(gè)公共返回頂部

因?yàn)槊總€(gè)頁面都要寫滾動(dòng)的生命周期，然后再把滾動(dòng)的值傳到組件里

所以做了一個(gè)公共組件和一個(gè)公共專門放混入寫法的文件，這樣寫的好處就不需要每個(gè)頁面是維護(hù)，改個(gè)公共文件就行了

1.混入代碼寫法：

返回頂部子組件：

代碼：

<template>
    <view>
        <view class="public-goback" @click="topBack" v-if="isShow" >返回頂部</view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            isShow: false,
        };
    },
    // 接受父組件的值
    props: {
        scrollHeight: {
            type: Number,
            required: true,
        },
    },
    watch: {
        scrollHeight(val) {
            uni.getSystemInfo({
                success: (res) => {
                    // 判斷滾動(dòng)高度大于屏幕高度
                    this.isShow = val > res.screenHeight;
                },
            });
        },
    },
    methods: {
        topBack() {
            if (uni.pageScrollTo) {
                uni.pageScrollTo({
                    scrollTop: 0, // 滾動(dòng)到頁面的目標(biāo)位置  這個(gè)是滾動(dòng)到頂部, 0
                    duration: 300, // 滾動(dòng)動(dòng)畫的時(shí)長
                });
            } else {
                uni.showModal({
                    title: "提示",
                    content:
                        "當(dāng)前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。",
                });
            }
        },
    },
};
</script>
<style lang="less" scoped>
/* 返回頂部 */
.public-goback {
    position: fixed;
    left: 50%;
    transform: translateX(270rpx);
    bottom: 8%;
    z-index: 10;
    width: 90rpx;
    height: 90rpx;
    overflow: hidden;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAAA/1BMVEVwcHAAAABvb29xcXFvb29ycnJycnJwcHBwcHBvb29wcHBxcXFwcHBubm5vb29ycnJ1dXVwcHBvb29vb29vb29wcHBubm5iYmJvb29wcHBxcXFubm51dXVubm5tbW1kZGRvb29wcHBvb29wcHBvb29wcHBvb29ubm5wcHBwcHB4eHhxcXFubm54eHhwcHBxcXFvb29xcXFubm5wcHBtbW1ubm5RUVFtbW1wcHBwcHBwcHBvb291dXVwcHB0dHR8fHxoaGh0dHRra2tnZ2dmZmZoaGhfX19ycnJ5eXl3d3d7e3tfX19fX19mZmZ8fHx6enpQUFB/f39UVFRPT099fX0jRRGyAAAAVXRSTlPMAMzMi7XMl8K0fjDHuXJWzIl3XFNKOAWqhlpPGAsIArymgnxvYkQ0IR8dEQ7Mop16amdfPSkZFL+UjyW6rz0tGsTAua6Bb2NgR0E1L6GVd1JNQTw14axcpAAAA41JREFUWMPF2Wdz2kAQgOG9PXIIBKKZ3rHpLaYEO07vvf//35JcBBHGSLeSjsk74y+e0TPrsxihO2Ani0Y3bp6cLRfW/XjcqvQKQ130oJqdPwaEXZwn2p2UGZq+6c7AydERSxf9EPQkNefgUWnxIBhdu0xyDt6JTME//eBrAtRxgMjaJ332QnAgZhV90Ou5EAjkHvfIdI6DvzBbJNGTh+A7bN8Q6EEMAvVBSZsGBGv6TUH3IWgo3nrSBQgeh4UHbUKoMOdKDxMQLt5zoYsxDmHtwXH6IYQvVjxG50BDmDlCD0FP+bv0TBP9vH5I50FT4vUBXWzpolEMbtPvELQVvUU3DNpE6TRlBHOfXlKu6KxHn95MaWM7dBLUZZnsOxAaOPQHpMh2VQJtOfQ1Rd51BqpEq7mjx8hJMnluXNk0ZY77NkqdO/16Rz9Ekky3py+bNl03iLJTSvWJfGrTHxUrfb71Gn9+msS5lzbdBc/iNlYvjyUd/0WaO2LTGcrMzZJgshLW7F9UvL8GNiU9aVPkKN5jsgy2RoS5EwNJr6/Uq8GisKUjgMkRYe6CpFck2aH/2DX107Qq6SpF3qcBHz1T2l1JL8GtjiPv0bLkA9WaWJK+VD0tonBIo7i3tS2PPxjYBbjUd+TDqSG9tScJOF5Z0pb7P1l2DcdoFMm/6113pT2nnssn/Rc4SgPyRyPG3C/ueK41/5w/eyVcaAA0uvkyeK51zv35DSKNd2haF/Z9TYpOO/d14SR0XtI3V6eg+5Kuz05AG88kzTonoEv2oyB3Arps06Z+Gis23WjpppE/tWkW0U1PX7ItnddNp+/v6HpCMw39Hc0yemkRY//oAtc79cKhWUwvXdujKwjKJE1aO9659Qb2gisvSNp7BFxtj/ZpluK0d7ZJkvQh39HU1Y7162ab8LZbO6BXQMgAdeLNnZ2Fa9DTo+IdesO1yPiE7dE6ty149uje07kGuu2yGdcOLSc2LvS4FQ5GNF13J4fPw9HvPfZUPwEPDHMpu9PMvAq+59RT7F8PYwHp6U/lrvt4FkhOPqUcQ2T9w3i9oZ1w9K58wviWfC6zyYg00u+MuennNGn1SnCibOR8noE13lFuFcENq8aotIOnSko6ttgEPMpclQ0vOFothjglHeczLQABhyePmIhWhqHPdseFbqS0TxuzyMWTka4T6drHH6nL8/i5dblM9dYTRuq/n6MH6jfneEGMAyi7mgAAAABJRU5ErkJggg==")
        no-repeat;
    background-size: 100%;
    text-indent: -99999px;
}
</style>

uni.getSystemInfo這個(gè)可以獲取到手機(jī)的信息，比如這里要獲取屏幕的高度 res.screenHeight

父組件引用子組件：

posted @ 2022-05-25 08:50 前端HL 閱讀(514) 評論(0) 收藏舉報(bào)

刷新頁面返回頂部

前端HL

只是記錄一些個(gè)人筆記而已！！！

vue2混入寫法

為什么用 mixins

公告