vue組件之Alert

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

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

前言

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

Alert

用于頁(yè)面中展示重要的提示信息。

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

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

使用

import Alert from "./Alert.vue"

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


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


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

Attribute

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

Event

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

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

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

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

相關(guān)文章

Vue.js非常重要之組件

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

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

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

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

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

妤鋒シ 2019-08-23 15:23 評(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 2019-08-23 10:35 評(píng)論0 收藏0
封裝Vue組件的一些技巧

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

韓冰 2019-05-23 17:35 評(píng)論0 收藏0