vue組件之Alert

Flink_China 發布于2019-08-21 17:05 / 2208人閱讀

摘要：前言本文主要組件的大致框架，提供少量可配置選項。旨在大致提供思路用于頁面中展示重要的提示信息。

前言

本文主要Alert 組件的大致框架，提供少量可配置選項。旨在大致提供思路

Alert

用于頁面中展示重要的提示信息。

templat模板結構

大致結構 alert框，icon圖標， slot插值（其他樣式顏色選項...）
如果需要動畫可以在外層包上Vue內置組件transition

script

export default {
  name: "Alert",

  props: {
    closable: {
      type: Boolean,
      default: true
    },
    show: {
      type: Boolean,
      default: true,
      twoWay: true
    },
    type: {
      type: String,
      default: "info"
    }
  },
  data() {
    return {
      visible: this.show
    };
  },
  methods: {
    close() {
      this.visible = false;
      this.$emit("update:show", false);
      this.$emit("close");
    }
  }
};

name: 組件的名字

props: 屬性

methods: 方法
點擊關閉向外暴露2個事件

使用

import Alert from "./Alert.vue"

Alert.install = function(Vue){
    Vue.component("Alert", Alert);
}
export default Alert


  這是一個不能關閉的alert


  這是一個可以關閉的alert

Attribute

參數	說明	類型	可選值	默認值
closable	是否可關閉	boolean	—	true
show	是否顯示	boolean	—	true

Event

事件名稱	說明	回調參數
update:show	關閉時觸發，是否顯示false	false
close	關閉時觸發	—

云服務器 GPU云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89107.html

Vue.js非常重要之組件

摘要：它們之間必然需要相互通信父組件要給子組件傳遞數據，子組件需要將它內部發生的事情告知給父組件。父組件通過向下傳遞數據給子組件，子組件通過給父組件發送消息。這是由使用的父組件決定的。 Vue.js的組件注冊組件全局注冊要注冊一個全局組件，你可以使用 Vue.component(tagName, options)。例如： Vue.component(my-component, { ...

ysl_unh 2019-08-21 16:16 評論0 收藏0
提升90%加載速度——vuecli下的首屏性能優化

摘要：如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。前言之前用vuecli做了個博客，是一個單頁面項目，大概有十個路由直接npm run build打包出來，有一個1M的巨大js文件 showImg(https://segmentfault.com/img/bVbtXVk?w=1516&h=218); 先掛載到服務器上試試好家伙...

dreamtecher 2019-08-23 18:09 評論0 收藏0
vuejs組件通信精髓歸納

摘要：組件的通信和和內置的通信手段一般有兩種給元素或組件注冊引用信息訪問父子實例。有時候兩個組件之間需要進行通信，但是它們彼此不是父子組件的關系。詳情可參考參考組件之間種組件通信方式總結參考參考組件的分類常規頁面組件，由 vue-router 產生的每個頁面，它本質上也是一個組件（.vue），主要承載當前頁面的 HTML 結構，會包含數據獲取、數據整理、數據可視化等常規業務。功能性抽...

妤鋒シ 2019-08-23 15:23 評論0 收藏0
vue組件掛載到全局方法

摘要：在最近的項目中，使用了來開發，然而在實際的開發過程中卻發現這個提供的組件并不能打到我們預期的效果，像等組件每個頁面引入就得重復引入，并不像那樣可以通過來調用，那么問題來了，如何通過來調用起我們定義的組件或對我們所使用的框架的組件呢。在最近的項目中，使用了bootstrap-vue來開發，然而在實際的開發過程中卻發現這個UI提供的組件并不能打到我們預期的效果，像alert、modal等...

aboutU 2019-08-23 10:35 評論0 收藏0
封裝Vue組件的一些技巧

摘要：根據組件單向數據流和和事件通信機制，需要由子組件通過事件通知父組件，并在父組件中修改原始的數據，完成狀態的更新。本文同步在個人博客shymean.com上，歡迎關注寫Vue有很長一段時間了，除了常規的業務開發之外，也應該思考和反思一下封裝組件的正確方式。以彈窗組件為例，一種實現是在需要模板中引入需要彈窗展示的組件，然后通過一個flag變量來控制彈窗的組件，在業務代碼里面會充斥著冗余的彈...

韓冰 2019-05-23 17:35 評論0 收藏0