教你手写vue的提示组件

最新推荐文章于 2025-03-21 22:24:11 发布

wyc是xxs

最新推荐文章于 2025-03-21 22:24:11 发布

阅读量799

点赞数 22

分类专栏： Vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Xiaokt_w/article/details/139936252

版权

Prompt.vue

<template>
    <div id="prompt" :style="style">
        <span class="close" @click="destroy"></span>

        <p class="msg" :style="{fontSize: fontSize + 'px'}">{
  {msg}}</p>
        <i class="tip">{
  {tip}}</i>
    </div>
</template>

<script>
export default {
     
    name: 'Prompt',
    props: {
     
        msg: {
     
            type: String,
            required: true
        },
        tip: {
     
            type: String,
            default: ''
        },
        side: {
     
            type: String,
            default: 'right'
        },
        showTime: {
     
            type: Number,
            default: 3000
        },
        closeSpeed: {
     
            type: Number,
            default: 5