vue3實現(xiàn)alert自定義的plugins方式

更新時間：2024年08月29日 09:50:21 作者：zhooson

這篇文章主要介紹了vue3實現(xiàn)alert自定義的plugins方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3實現(xiàn)alert自定義的plugins

技術(shù)環(huán)境：

vue3實現(xiàn)一個alert的plugins

代碼目錄如下：

1. plugins/Message/index.vue

<template>
  <div class="default-message">
    <div class="default-message-content">
      <div class="default-message-title">{{title}}</div>
      <div class="default-message-value" v-html="content"></div>
      <div class="default-message-btns">
        <div class="default-message-cancle default-message-btn"
          v-if="cancleText" :style="setCancleColor()"
          @click.prevent.stop="handleCancel">
          {{cancleText}}
        </div>
        <div class="default-message-submit default-message-btn"
          :style="setOkColor()" @click.prevent.stop="handleOk">
          {{okText}}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "Message",
  props: {
    // 標(biāo)題
    title: {
      type: String,
      default: "提示",
    },
    // 內(nèi)容
    content: {
      type: String,
      default: "",
      required: true,
    },
    // 確定按鈕文字
    okText: {
      type: String,
      default: "確定",
    },
    // 確定按鈕文字顏色
    okTextColor: {
      type: String,
      default: "#26a2ff",
    },
    // 取消按鈕文字
    cancleText: {
      type: String,
      default: "",
    },
    // 取消按鈕文字顏色
    cancleTextColor: {
      type: String,
      default: "#999",
    },
    // 成功回調(diào)
    success: {
      type: Function,
    },
    // 失敗回調(diào)
    fail: {
      type: Function,
    },
  },
  setup(props) {
    // ok的顏色
    const setOkColor = () => {
      return `color: ${props.okTextColor}`;
    };
    // 取消的顏色
    const setCancleColor = () => {
      return `color: ${props.cancleTextColor}`;
    };

    // 移除當(dāng)前組件
    function removeModal() {
      const modelDom = document.body.querySelector(
        `.__default__container__message__`
      );
      if (modelDom) {
        document.body.removeChild(modelDom);
      }
    }

    const handleCancel = () => {
      removeModal();
      props.fail && props.fail();
    };

    const handleOk = () => {
      removeModal();
      props.success && props.success();
    };

    return {
      setOkColor,
      setCancleColor,

      handleOk,
      handleCancel,
    };
  },
});
</script>
<style scoped lang="scss">
.default-message {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background: rgba($color: #000000, $alpha: 0.3);

  .default-message-title {
    padding-top: 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #333;
  }

  .default-message-content {
    width: 85%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    background-color: #fff;
    border-radius: 6px;
    transition: all 0.2s ease-in;
    color: #999;
    font-size: 18px;
  }

  .default-message-value {
    padding: 10px 20px 15px;
    min-height: 36px;
    position: relative;
    color: #999;
    text-align: center;
    line-height: 36px;
  }
  .default-message-btns {
    // border-top: 1px solid #ddd;
    display: flex;
    height: 46px;
    position: relative;
    &:after {
      position: absolute;
      content: "";
      display: inline-block;
      left: 0;
      right: 0;
      top: 0;
      height: 1px;
      transform: scaleY(0.5);
      background: #ddd;
    }
    .default-message-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      padding: 0 3px;
    }
    .default-message-cancle {
      position: relative;
      &:after {
        position: absolute;
        content: "";
        display: inline-block;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        transform: scaleX(0.5);
        background: #ddd;
      }
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
</style>

2. plugins/Message/index.js

import { createVNode, render } from "vue";
import MessageConstructor from "./index.vue";

const $message = function(options) {
  // 創(chuàng)建div
  const container = document.createElement("div");
  container.className = `__default__container__message__`;
  //創(chuàng)建虛擬節(jié)點
  const vm = createVNode(MessageConstructor, options);
  //渲染虛擬節(jié)點
  render(vm, container);
  document.body.appendChild(container);
};

export default {
  //組件注冊
  install(app) {
    app.config.globalProperties.$message = $message;
  }
};

3. main.js

import { createApp } from "vue";
import router from "./router";
import store from "./store";
import App from "./App.vue";

import Message from "./assets/plugins/Message";

const app = createApp(App);

app.use(Message);

app.use(store);
app.use(router);
app.mount("#app", { username: "123 });

4. 使用方法

import { getCurrentInstance } from "vue";
setup(props) {
	const { ctx } = getCurrentInstance();
	
	  ctx.$message({
        content: "您確定要退出嗎？",
        cancleText: "取消",
        success: (res) => {
          	console.log(res);
        },
        fail: (err) => {
			console.log(err);
		},
      });
}

5. 升級改造

由于當(dāng)前 ctx.$message 僅僅只在setup里面使用，如果希望在unit.js或者其他js文件中使用? 下面開始我的表演

5.1 js文件中需要使用vue的app實例對象

// main.js
export const app = createApp(App);

5.2 js文件引入app實例

// util.js
import { app } from "../../main";

/**
 * @params title String
 * @params content String
 * @params okText String
 * @params okTextColor String
 * @params cancleText String
 * @params cancleTextColor String
 * @return promise
 */
export function showMessage(params) {
  return new Promise((resolve, reject) => {
    app.config.globalProperties.$message({
      ...params,
      success: () => {
        return resolve("is:ok");
      },
      fail: () => {
        return reject("is:cancle");
      }
    });
  });
}

5.3 使用方法

import { showMessage } from "../../assets/scripts/util";
setup(){
	 const logout = () => {
      showMessage({ content: "您確定要退出嗎？", cancleText: "取消" })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    };
   return { logout };
}

文檔說明：

字段	說明	required	type	默認(rèn)
title	標(biāo)題	false	string	提示
content	內(nèi)容	true	string
okText	確定按鈕文字	false	string	確定
okTextColor	確定按鈕文字顏色	false	string	#26a2ff
cancleText	取消按鈕文字	false	string
cancleTextColor	取消按鈕文字顏色	false	string	#999
success	成功回調(diào)	false	Function
fail	失敗回調(diào)	false	Function