vue封裝共用元件-confirm
先上原始碼:
<template>
<transition name="mask-bg-fade">
<!-- 彈框元件 -->
<div class="mask" v-show="show">
<div class="mask_bg"></div>
<transition name="slide-fade">
<div class="modelBox" v-show="show" >
<div class="title">
<p>{{confirmModalOptions.title}}</p>
<i class="icon" v-on:click="closeModel()"></i></div>
<div class="message">
<span v-for='(item,index) in confirmModalOptions.message' :key='index'>{{item}}</span>
</div>
<div class="model_btnBox" v-show='confirmModalOptions.btnCancelText != null'>
<button v-on:click="confirmCancel()">
{{confirmModalOptions.btnCancelText}}
</button>
<button v-on:click="confirmSubmit()">
{{confirmModalOptions.btnSubmitText}}
</button>
</div>
</div>
</transition>
</div>
</transition>
</template>
<script>
export default {
name:'confirm',
props: ["confirmModalOptions"],
data() {
return {
show: false, // 是否顯示模態框
}
},
methods: {
closeModel() {
this.show = false;
},
showModel() {
this.show = true;
},
confirmCancel() {
this.show = false;
if(typeof (this.confirmModalOptions.btnCancelFunction)==='function'){
this.confirmModalOptions.btnCancelFunction()
}
},
confirmSubmit() {
this.show = false;
if(typeof (this.confirmModalOptions.btnSubmitFunction)==='function'){
this.confirmModalOptions.btnSubmitFunction()
}
}
}
}
</script>
<style scoped lang='scss'>
.mask{
.modelBox{
width: 6rem; height: 4rem;margin: auto;background-color: white;position: relative;top: calc(22%);border-radius: .1rem;
}
.title{padding: .1rem;text-align: center;background-color: #F7F8FA;border-top-left-radius: .1rem;border-top-right-radius: .1rem;display: flex;justify-content: center;
p{flex: 1;color: #666;}
}
.message{
padding: .2rem;height: 2.6rem;
span{display: inline-block;padding: .1rem;background-color: #24D08E;width: 1.2rem;margin: .1rem;color: white;text-align: center;border-radius: .1rem;
}
}
.model_btnBox{
text-align: center;
button{
padding: .1rem .6rem;border: none;color: white;border-radius: .1rem; margin: 0 .5rem;
&:nth-child(2){
background-color: #24D08E;
}
}
}
}
</style>
1.整個元件之間的通訊是通過 props ,可以是物件可以是陣列或者是函式
2.在需要的該元件的頁面使用 import DConfirm from ‘../components/confirm.vue’;引入該元件並註冊元件;
並且通過 v-bind指令繫結資料
3.在引入的頁面採用如下方法:
function abc(){
this.$refs.myConfirm.showModel();
this.confirmOptions= {
type: "warning",
title: "缺考學生",//提示
message:this.locklist,
btnCancelText:'關閉',
btnSubmitText:'提交',
btnCancelFunction:function(){
console.log(333)
},
btnSubmitFunction:function(){
console.log(1111)
}
}
}
相關推薦
vue封裝共用元件-confirm
先上原始碼: <template> <transition name="mask-bg-fade"> <!-- 彈框元件 -->
vue封裝element中table元件
後臺系統,table被用的次數比較多,所以決定提出來作為元件 1.新建一個Table.vue檔案 <!--region 封裝的分頁 table--> <template> <div class="table"> <el-tabl
Vue 封裝的loading元件
<template> <div class="loadEffect"> <span></span> <span></span> <span></span>
vue 封裝麵包屑元件
我看過一篇關於程式設計師寫部落格的文章,他說很多的程式設計師過了兩年寫了很多的程式碼,但是回想起來自己具體做了哪些技術點,遇到坑幾乎沒有印象,所以說文字是記錄的最好方式,好記性不如爛筆頭,可以方便自己以後檢視,在寫的過程中也會再加深一遍印象,對於我這個技術小白來說寫部落格是為了讓我對某一個知識點加深
vue 封裝元件上傳img
var _uploadTemplate = '<div>'+ '<input type="file" name="file" v-on:change="change" id="file" accept="img.png" style="display: none;">'
如何用vue封裝一個防使用者刪除的平鋪頁面的水印元件
需求 為了防止截圖等安全問題,在web專案頁面中生成一個平鋪全屏的水印 要求水印內容為使用者名稱,水印節點使用者不能通過開發者工具等刪除 效果 如上圖 在body節點下插入水印DOM節點,水印節點覆蓋在頁面最上層但不影響頁面正常操作
Vue開發——使用JQ的zTree外掛封裝樹元件
版權宣告:本文為博主原創文章,未經博主允許不得轉載。 https://blog.csdn.net/guanguan0_0/article/details/80359601 1.通過npm安裝jquery npm install jquery --save-dev 2.
Vue封裝元件的過程
vue元件的定義 ● 元件(Component)是Vue.js最強大的功能之一 ● 元件可以擴充套件HTML元素,封裝可重用程式碼 ● 在較高層面上,元件是自定義元素,Vue.js的編譯器為他新增特殊功能 ● 有些情況下,元件也可以表現用 is 特性進行了擴充套件的原
vue封裝元件寫toast彈出框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt
基於vue封裝選項卡元件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選項卡&l
vue中封裝動畫元件(漸隱漸現效果)
<body> <div id="root"> <comp :dis="show"> <div>hello</div>
Vue封裝樹形選單元件
csdn終於更新完成了哈,ok,步入正題 像這種樹形結構的核心思想就是:遞迴思想,知道使用遞迴,其實這個例子函式的封裝也就很簡單嘍 實現步驟: 設定的props: data 資料結構
基於Ant Design Vue封裝一個表單控制元件
# 開原始碼 [https://github.com/naturefwvue/nf-vue3-ant](https://github.com/naturefwvue/nf-vue3-ant) > 有缺點本來是寫在最後的,但是博文寫的似乎有點太長了,估計大家沒時間往下看,於是就把有缺點寫在前面了,不喜歡可以先
vue 封裝自定義組件
lec com != 封裝 data als storage -m .com 先說說組件的結構 最好單獨放一個文件夾,有依賴的話裝依賴 Sjld.vue 內容 <template id="sjld"> <label >
Vue 封裝js 並 引用
tor ret 引用 port 方便 js文件 getitem 文件 CA /封裝模塊化文件 新建的.js文件 var storage = { set(key, value) { localStorage.setItem(key, JSON.stringify(value
Vue 封裝的loading組件
ini return top back -a less ade inf asc <template> <div class="loadEffect"> <span></span> &l
vue自制日曆元件
效果圖: 程式碼: <template> <div id="calender"> <div id="celender_head"> <div id="left" cla
[log] vue使用Mint元件實現下拉重新整理、上拉載入
https://mint-ui.github.io/docs/#/zh-cn2/loadmore 使用的vue <mt-loadmore :top-method="loadTop" :bottom
vue.js全域性元件
全域性元件 可在任何例項的vm裡呼叫 方法一 這個好用,方便. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
vue遞迴元件製作任務進度表
遞迴元件的使用 註冊遞迴元件 Vue.component('item-child',{ template:` <div class="det"> <div class="item-wrap" v-for="item of list">