本來打算寫乙個那種提示完了自動消失的彈窗的，但是沒有想好淡入淡出的效果。所以暫時算是半成品。
練習**如下：
lang="en">
charset="utf-8">
ys-alert-componenttitle>
input
.ys-alert
.icon
.content
/*成功的樣式*/
.success
/*失敗的樣式*/
.error
/*警告樣式*/
.warning
style>
src="">
script>
head>
type="button"
value="呼喚預設的按鈕" @click="alertshow('info')">
type="button"
value="呼喚成功的按鈕" @click="alertshow('success')">
type="button"
value="呼喚失敗的按鈕" @click="alertshow('error')">
type="button"
value="呼喚警告的按鈕" @click="alertshow('warning')">
type="button"
value="呼喚美美噠部落格" @click="alertshow('yuki')">
icon-bar="o"
type="info"
v-if="info"
alert-content="我是預設的按鈕喲">
ys-alert-component>
icon-bar="v"
type="success"
v-if="success"
alert-content="我是成功的按鈕喲">
ys-alert-component>
icon-bar="x"
type="error"
v-if="error"
alert-content="我是失敗的按鈕喲">
ys-alert-component>
icon-bar="!"
type="waring"
v-if="warning"
alert-content="我是警告的按鈕喲">
ys-alert-component>
icon-bar="e"
type=""
v-if="yuki"
alert-content="我是灰色定製的按鈕喲"
style="background-color: #ccc; color: #fff;">
slot="alert-content">
章魚不丸子span>
href="" >a>
div>
ys-alert-component>
div>
/* props：
type:
info: 預設
success: 成功
error: 失敗
warning：警告
iconbar： 字串，我沒有圖示，就用字母寫的。很low...
hideicon: 隱藏或者顯示醜醜的圖示
slot：
alert-content: 定製提醒資訊內容及icon整套模板
methods：
無，沒有寫方法
*/vue.component("ys-alert-component", ,
alertcontent: ,
hideicon: ,
type:
},template:`
class="ys-alert" :class="type">
name="alert-content">
class="icon" >}}
slot>
div>`
})var vm = new vue(,
methods: }}
})script>
body>
html>
封裝vue的彈窗元件
先寫乙個工具函式,建立元件例項 建立指定元件例項並掛載於body上 import vue from vue export default function create component,props mount 更新操作 1.上面vm幫我們建立元件例項 2.通過 children獲取該元件例項 c...
手寫乙個彈窗元件 vue
最近的專案中，需要自己去手寫乙個全域性的彈窗元件，在下面貼出自己的 元件寫的比較簡單 notice.vue 自定義元件的掛載 這裡用了兩種不同的形式，考慮到不同的元件需要特定的方法，比如notice元件只能是乙個單例的模式，所以用了乙個notice.js給他掛載，其他通用的元件可以採用第二種方式進行...
vue自定義 confirm彈窗確認元件
使用基礎 vue 構造器，建立乙個 子類 引數是乙個包含元件選項的物件 vue單檔案經過webpack打包之後是乙個元件示例物件，因此可以傳到vue.extend中生成乙個包含此元件的類 new vuecomponent 建立例項，呼叫 mount 可以手動編譯 手動編譯後的示例物件中存在乙個 el...