vue組件之Alert

Flink_China 發(fā)布于2019-08-21 17:05 / 2252人閱讀

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

前言

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

Alert

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

templat模板結(jié)構(gòu)

大致結(jié)構(gòu) alert框，icon圖標(biāo)， slot插值（其他樣式顏色選項...）
如果需要動畫可以在外層包上Vue內(nèi)置組件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: 方法
點擊關(guān)閉向外暴露2個事件

使用

import Alert from "./Alert.vue"

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


  這是一個不能關(guān)閉的alert


  這是一個可以關(guān)閉的alert

Attribute

參數(shù)	說明	類型	可選值	默認值
closable	是否可關(guān)閉	boolean	—	true
show	是否顯示	boolean	—	true

Event

事件名稱	說明	回調(diào)參數(shù)
update:show	關(guān)閉時觸發(fā)，是否顯示false	false
close	關(guān)閉時觸發(fā)	—

云服務(wù)器 GPU云服務(wù)器 vue組件 vue組件開發(fā) vue父子組件通訊 vue輪播組件

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/89107.html

相關(guān)文章

Vue.js非常重要之組件

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

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

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

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

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

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

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

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

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

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