Vue封裝乙個自己的元件 Alert資訊提示框

2021-10-07 16:55:09 字數 1365 閱讀 9352

在專案中經常遇到提示資訊元件，我們·一般會用ui庫來做。但是當ui庫無法滿足自己的需求（比如自定樣式，ui庫的樣式很難改變）。下面就是簡單封裝乙個自己的alert資訊提示框。

1.我們要做得是alert元件所以要預設幾個字段

title  -標題

message -提示資訊

duration -顯示時間

2.給出建立元件的方法

3.掛載到全域性vue例項

4.呼叫

1.建立乙個ui元件（alert）

}
2.寫乙個建立alert的函式（新建乙個create.js）

import vue from 'vue'


// 傳入乙個元件配置


// 建立它的例項，並且將它掛載到body上


// 返回元件例項


export default function create(component, props) )


//掛載


comp.$mount();


//移除


comp.remove = () =>  


// // 方式二：new乙個vue


// const vm = new vue()


//   }


// }).$mount() // $mount()本質上將vdom=》dom


// // 通過vm.$el獲取生成的dom


// // 刪除函式


// // 獲取元件例項


// const comp = vm.$children[0]


// comp.remove = () => 


return comp


}
3.掛載到全域性vue例項中（方便呼叫）

1.在main.js 裡引入create檔案和alert元件

2.掛載到vue的原型上

**如下：

import vue from 'vue'


import './plugins/element.js'


import create from './utils/create.js';


import alert from './components/alert.vue';


vue.config.productiontip = false


vue.prototype.$alert= ((obj)=>)


new vue();
如果不懂vue.extends()/$mounted()/$destory可以看一下vue官方api---vue官方api文件傳送門

這個只是乙個簡單的元件，我只是給出了乙個自定義元件的方法，可以自己往裡面加樣式，其他字段都行

Vue 封裝乙個自己寫的元件或方法

1.首先寫好裡面的模板及傳遞過來的引數 2.定義乙個index.js並引入剛建立的元件並export defaut vue 3.在main.js裡面引入 然後vue.use 引入的名稱 vue封裝乙個js引用 vue封裝的js裡面可以是個物件 也可以是方法 export 和 export defau...

vue如何封裝乙個元件

1.新增子元件 在工程src components目錄下新建乙個資料夾用於存放元件。我封裝了乙個樹元件，資料夾名稱為va tree,裡面有乙個va tree.vue檔案，寫了樹元件的具體內容，包括元件樣式 元件處理邏輯 元件模板等等 子元件中定義的props是父元件需要傳給子元件的資料，在子元件中p...

自己封裝的乙個JS分享元件

因為工作的需求之前也封裝過乙個js分享外掛程式，整合了我們公司常用的幾個分享平台。但是總感覺之前的結構上很不理想，樣式，行為揉成一起，心裡想的做的完美，實際上總是很多的偏差，所以這次我對其進行了改版。這次的核心就是 js只負責事件 結構，也就是把功能實現出來，具體的外觀樣式，則使用者自己進行定義。以...