国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用Vue.extend寫(xiě)一個(gè)全局使用的Alert

CarterLi / 889人閱讀

摘要：由于項(xiàng)目中經(jīng)常會(huì)用到這種組件，平常都是全局注冊(cè)標(biāo)簽，使用時(shí)引入，比較繁瑣借鑒別人這種組件一般是在中被調(diào)用，中組件主要是使用了標(biāo)簽的形式，現(xiàn)記錄通過(guò)實(shí)現(xiàn)的動(dòng)態(tài)組件官方文檔項(xiàng)目預(yù)覽彈窗組件開(kāi)發(fā)項(xiàng)目目錄部分部分移除

由于項(xiàng)目中經(jīng)常會(huì)用到alert這種組件，平常都是全局注冊(cè)標(biāo)簽，使用時(shí)引入，比較繁瑣；

借鑒別人這種組件一般是在js中被調(diào)用，vue中組件主要是使用了標(biāo)簽的形式，
現(xiàn)記錄通過(guò)Vue.extend實(shí)現(xiàn)的動(dòng)態(tài)組件;
Vue-extend官方文檔

項(xiàng)目預(yù)覽

Alert開(kāi)發(fā)

項(xiàng)目目錄

components

alert

alert.vue

index.js

HelloWord.vue

main.js

alert.vue

template部分

JavaScript部分

export default {
  name: "alert",
  data () {
    return {
      message: "this a alert",
      btns: [
        {
          text: "yes",
          click: () => console.log("yes")
        },
        {
          text: "no",
          click: () => console.log("yes")
        }
      ]
    };
  },
  methods: {
    clickFn (event, btn) {
      this.$el.remove(); // 移除DOM
      const {
        click = () => console.warn("請(qǐng)傳入回調(diào)函數(shù)")
      } = btn;
      click(event, btn); // 傳遞回去
    }
  }
};

css部分

.shade {
  user-select: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.03);
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shade .mian {
  background: white;
  width: 80%;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  animation: open 0.1s;
}
.shade .mian .content {
  box-sizing: border-box;
  width: 100%;
  padding: 30px 20px;
}
.shade .mian .btns {
  height: 45px;
  box-sizing: border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.shade .mian .btns .btn {
  flex: 1 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.shade .mian .btns .btn:last-child {
  border-right: none;
}
.shade .mian .btns .btn:active {
  color: white;
  background-color: rgb(64, 169, 243);
}
@keyframes open {
  0%,
  100% {
    transform: scale(1);
  }
  25%,
  75% {
    transform: scale(1.04);
  }
  50% {
    transform: scale(1.06);
  }
}
index.js 
import Vue from "vue";
import alert from "./alert.vue";
let MyAlertConstructor = Vue.extend(alert);
let instance;
const MyAlert = (option) => {
  // 創(chuàng)建實(shí)例并且過(guò)濾參數(shù)
  instance = new MyAlertConstructor({
    data: { ...option }
  })
  // 掛載實(shí)例
  instance.$mount();
  document.body.appendChild(instance.$el);
  return instance;
}
// 掛載到Vue原型上
Vue.prototype.$alert = MyAlert;
main.js 
import "./components/alert"; // 引入注冊(cè)一下

到這里我們的Alert組件就配置完成了；

如何使用

這里我在 Helloword.vue 中測(cè)試使用;

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  methods: {
    Alert() {
      //  使用直之前綁定到原型上的方法
      this.$alert({
        message: "你今天開(kāi)心嗎?",
        btns: [
          {
            text: "開(kāi)心",
            click: () => {
              // 測(cè)試是否可以拿到這邊的this
              console.log(this.msg);
            }
          },
          {
            text: "不開(kāi)心",
            click: (e, btn) => {
              // 這里的event target 可能沒(méi)用 因?yàn)橐呀?jīng)移除DOM了
              // 返回btn原來(lái)本身
              console.log("不開(kāi)心", e, btn);
            }
          },
          {
            text: "無(wú)回調(diào)"
            // 測(cè)試一下沒(méi)有回調(diào)函數(shù)的時(shí)候
          },
          {
            text: "幫助",
            click: this.isOK
          }
        ]
      });
    },
    isOK() {
      console.log("輸出幫助");
    }
  }};
項(xiàng)目截圖

參考文檔

Vue.extend構(gòu)造函數(shù)的使用--實(shí)現(xiàn)alert方法

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/106294.html

相關(guān)文章

  • Vue.extend用法（主要用于需要 動(dòng)態(tài)渲染的組件，或者類似于window.alert() 提示

    摘要：一簡(jiǎn)單的使用主要用于需要?jiǎng)討B(tài)渲染的組件，或者類似于提示組件注意創(chuàng)建的是一個(gè)組件構(gòu)造器，而不是一個(gè)具體的組件實(shí)例屬于的全局，在實(shí)際業(yè)務(wù)開(kāi)發(fā)中我們很少使用，因?yàn)橄啾瘸Ｓ玫膶?xiě)法使用步驟要更加繁瑣一些。 最近在重構(gòu)公司的項(xiàng)目，有些組件想要封裝的更靈活，例如toast、loading、messageBox等彈窗組件，模仿了mint-ui封裝此類組件的方式封裝了自己的彈窗組件； mint-UI的t...

    masturbator 評(píng)論0 收藏0

  • vue插件開(kāi)發(fā)練習(xí)--實(shí)用彈窗

    摘要：前言上回說(shuō)了組件組件開(kāi)發(fā)練習(xí)焦點(diǎn)圖切換的一個(gè)練習(xí)項(xiàng)目，這次換下口味，說(shuō)下的插件練手的項(xiàng)目。和組件開(kāi)發(fā)的目錄相比，區(qū)別就在于這個(gè)文件夾上。開(kāi)發(fā)過(guò)程把項(xiàng)目跑起來(lái)首先，先弄這個(gè)組件。最后還需要一個(gè)變量，控制彈窗是否顯示。 1.前言 上回說(shuō)了組件（vue組件開(kāi)發(fā)練習(xí)--焦點(diǎn)圖切換）的一個(gè)練習(xí)項(xiàng)目，這次換下口味，說(shuō)下vue的插件練手的項(xiàng)目。相對(duì)于現(xiàn)在之前的焦點(diǎn)圖切換的組件，這個(gè)可能就更簡(jiǎn)單了，基...

    muzhuyu 評(píng)論0 收藏0

  • vue組件掛載到全局方法

    摘要：在最近的項(xiàng)目中，使用了來(lái)開(kāi)發(fā)，然而在實(shí)際的開(kāi)發(fā)過(guò)程中卻發(fā)現(xiàn)這個(gè)提供的組件并不能打到我們預(yù)期的效果，像等組件每個(gè)頁(yè)面引入就得重復(fù)引入，并不像那樣可以通過(guò)來(lái)調(diào)用，那么問(wèn)題來(lái)了，如何通過(guò)來(lái)調(diào)用起我們定義的組件或?qū)ξ覀兯褂玫目蚣艿慕M件呢。 在最近的項(xiàng)目中，使用了bootstrap-vue來(lái)開(kāi)發(fā)，然而在實(shí)際的開(kāi)發(fā)過(guò)程中卻發(fā)現(xiàn)這個(gè)UI提供的組件并不能打到我們預(yù)期的效果，像alert、modal等...

    aboutU 評(píng)論0 收藏0

  • 如何實(shí)現(xiàn)全屏遮罩（附Vue.extend和el-message源碼學(xué)習(xí)）

    摘要：如何優(yōu)雅的動(dòng)態(tài)添加這里我們需要用到的實(shí)例化，首先我們來(lái)看的思路，貼一段源碼使用基礎(chǔ)構(gòu)造器，創(chuàng)建一個(gè)子類。因?yàn)樽鳛橐粋€(gè)的擴(kuò)展構(gòu)造器，所以基礎(chǔ)的功能還是需要保持一致，跟構(gòu)造器一樣在構(gòu)造函數(shù)中初始化。 [Vue]如何實(shí)現(xiàn)全屏遮罩（附Vue.extend和el-message源碼學(xué)習(xí)） 在做個(gè)人項(xiàng)目的時(shí)候需要做一個(gè)類似于電子相冊(cè)瀏覽的控件，實(shí)現(xiàn)過(guò)程中首先要實(shí)現(xiàn)全局遮罩，結(jié)合自己的思路并閱讀了（...

    malakashi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<