Vue自行封装常用组件-文本提示

使用方法：
1.在父组件中引入"toast.vue"
//import toast from "./toast";

2.在父组件中注册 toast
//components:{toast},

3.放在父组件中使用
//<toast ref="toast"></toast>

4.调用toast组件
//this.$refs.toast.showToast('text')

注：index.vue为父组件，后者为子组件，效果图先上，可以先看是否是自己想要的组件，再选择使用

index.vue

<template>

    <div>

        <toast ref="toast"></toast>

    </div>

</template>

<script>

import toast from './toast.vue'

    export default {

        components:{

            toast

        },

        methods:{

        },

        created(){

            this.$refs.toast.showToast('弹出文本TEXT')

        }

    }

</script>

<style lang="less" scoped>

</style>

toast.vue

<template>

    <div class="toast" v-show="toastShow">

        {{toastText}}

    </div>

</template>

<script>

    export default {

        data() {

            return {

                toastShow: false,

                toastText: ''

            }

        },

        methods: {

            showToast (str) {

                let v = this

                v.toastText = str

                v.toastShow = true

                setTimeout(function(){

                v.toastShow = false

                }, 1500)

            }

        }

    }

</script>

<style lang="less" scoped>

    .toast {

        position: fixed;

        z-index: 2000;

        left: 50%;

        top:45%;

        transition:all .5s;

        -webkit-transform: translateX(-50%) translateY(-50%);

            -moz-transform: translateX(-50%) translateY(-50%);

            -ms-transform: translateX(-50%) translateY(-50%);

                -o-transform: translateX(-50%) translateY(-50%);

                transform: translateX(-50%) translateY(-50%);

        text-align: center;

        border-radius: .1rem;

        color:#FFF;

        background: rgba(17, 17, 17, 0.7);

        padding: .4rem .4rem;

        max-width: 14rem;

        font-size: .55rem

    }

</style>

巴特西

Vue自行封装常用组件-文本提示

最新文章

热门文章