在uni-app中自定义组件与插件

Vue.js

发布日期: 2019-11-21

文章字数: 697

阅读时长: 3 分

阅读次数:

前言

在Vue的开发中，我们为了使代码能有更好的复用性，在开发阶段将具有相似业务的模块功能抽取成组件。而对于插件而言，则是通常用来为 Vue 添加全局功能。像我们使用的vue-router,就是一个插件。为了演示组件和插件的用法，我会在uni-app中自定义一个Toast来演示开发流程。

我们知道，在uni-app中已经封装了toast的插件：

uni.showToast({
                    title: '我是一个Toast！'
                });

将toast封装成一个组件

我们创建一个叫做LXToast的vue文件,然后设置显示的内容message，超时时间timeOut和是否展示的show。这里，我们为了实现props的“双向绑定”，我们在父组件中使用了.sync修饰符，在子组件中通过this.$emit('update:show', false)的方式来更改父组件的状态：

<template v-if="isShowing">
    <view class="toast">
        <view class="content">{{message}}</view>
    </view>
</template>

<script>
    export default {
        name: 'LXToast',
        props: {
            message: {
                type: String,
                default: ''
            },
            timeOut: {
                type: Number,
                default: 2000 
            },
            show: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            isShowing() {
                return this.show
            }
        },
        created() {
            setTimeout(() => {
                this.$emit('update:show', false)
            }, this.timeOut)
        }
    }
</script>

<style lang="scss" scoped>
    .toast {
        >.content {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 10upx 12upx;
            background-color: rgba($color: #000000, $alpha: 0.7);
            border-radius: 4upx;
            color: #FFFFFF;
            font: 100upx;
        }
    }
</style>

然后我们在模块中使用这个组件。首先，我们需要先引入这个组件，然后设置相关的属性，这里我们点击hello文字，就可以弹出toast（其他的代码乃是创建项目生成的，请读者不要产生迷惑）：

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title" @click="clickTitle">{{title}}</text>
        </view>
        <LXToast
         v-if='show'
        :message='77777777777'
        :show.sync='show'
        :timeOut='timeOut'></LXToast>
    </view>
</template>

<script>
    import LXToast from '../../components/common/LXToast/LXToast.vue';
    export default {
        data() {
            return {
                title: 'Hello',
                show: false,
                timeOut: 1000
            }
        },
        components: {//引入组件
            LXToast
        },
        onLoad() {

        },
        methods: {
            clickTitle() {
                this.show = true 
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }
    .text-area {
        display: flex;
        justify-content: center;
    }
    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>