1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="./fontFace.css"> 7 <style> 8 [class*=" m-icon-"], [class^=m-icon-] { 9 font-family: element-icons!important; 10 speak: none; 11 font-style: normal; 12 font-weight: 400; 13 font-variant: normal; 14 text-transform: none; 15 line-height: 1; 16 vertical-align: baseline; 17 display: inline-block; 18 -webkit-font-smoothing: antialiased; 19 -moz-osx-font-smoothing: grayscale; 20 } 21 /*基本样式*/ 22 .m-alert { 23 width: 100%; 24 padding: 8px 16px; 25 margin: 0; 26 box-sizing: border-box; 27 border-radius: 4px; 28 position: relative; 29 background-color: #fff; 30 overflow: hidden; 31 color: #fff; 32 display: table; 33 transition: opacity .2s; 34 margin-top:10px; 35 border: 1px solid #ccc; 36 } 37 .m-content { 38 display: table-cell; 39 padding: 0 8px; 40 } 41 .m-message { 42 font-size: 13px; 43 line-height: 18px; 44 } 45 /*不同状态样式*/ 46 .m-alert-success{ 47 background-color:#13ce66; 48 } 49 .m-alert-info{ 50 background-color:#50bfff; 51 } 52 .m-alert-warning{ 53 background-color:#f7ba2a; 54 } 55 .m-alert-error{ 56 background-color:#ff4949; 57 } 58 /*关闭按钮样式*/ 59 .m-closebtn { 60 font-size: 12px; 61 color: #fff; 62 opacity: 1; 63 top: 12px; 64 right: 15px; 65 position: absolute; 66 cursor: pointer; 67 } 68 .m-icon-close:before { 69 content: "\E60C"; 70 } 71 /*小图标样式*/ 72 .m-icon { 73 font-size: 16px; 74 width: 16px; 75 display: table-cell; 76 color: #fff; 77 vertical-align: middle; 78 } 79 .m-icon-success:before { 80 content: "\E609"; 81 } 82 .m-icon-warning:before { 83 content: "\E615"; 84 } 85 .m-icon-info:before { 86 content: "\E615"; 87 } 88 89 .m-icon-error:before { 90 content: "\E60B"; 91 } 92 /*自定义图标*/ 93 .m-icon-message:before { 94 content: "\E618"; 95 } 96 97 .m-icon-menu:before { 98 content: "\E617"; 99 } 100 101 .m-icon-setting:before { 102 content: "\E61E"; 103 } 104 105 #app { 106 width: 500px; 107 } 108 109 </style> 110 <script src="../vue.js"></script> 111 <script> 112 113 </script> 114 </head> 115 116 <body> 117 <div id="app"> 118 <m-alert 119 type=\'success\' 120 title="成功" 121 ></m-alert> 122 123 <m-alert 124 type=\'warning\' 125 :closeable="false" 126 :show-icon=\'false\' 127 ></m-alert> 128 129 <m-alert 130 type=\'error\' 131 title="错误啦，重新写" 132 :closeable="false" 133 :show-icon=\'false\' 134 ></m-alert> 135 136 <m-alert 137 type=\'info\' 138 139 style=\'background:pink\' 140 ></m-alert> 141 142 <m-alert @close-click=\'close\'> 143 <template slot=\'iconTmp\'> 144 <i class="m-icon m-icon-menu" 145 146 147 ></i> 148 </template> 149 <template slot=\'titleTmp\'> 150 <p>自定义</p> 151 </template> 152 </m-alert> 153 </div> 154 <script> 155 /* 156 alert提醒框有四种状态： 157 info success error warning 158 159 设置的props： 160 type 提醒框类型 默认为info 161 title 提示信息 \'这里有一个消息要提示\' 162 closeable 是否禁用关闭 默认为true 163 showicon 是否显示图标 默认为fasle 164 style 设置提醒框样式 默认为{} 165 166 定制模板： 167 slot为iconTmp 定制icon模板 168 slot为titleTmp 定制提示信息结构 169 170 监控状态变化： 171 事件名close-click 点击关闭X触发 172 173 */ 174 175 Vue.component("m-alert",{ 176 props:{ 177 type:{ 178 type:String, 179 default:\'info\' 180 }, 181 title:{ 182 type:String, 183 default:"提示信息" 184 }, 185 closeable:{ 186 type:Boolean, 187 default:true 188 }, 189 showIcon:{ 190 type:Boolean, 191 default:true 192 }, 193 style:{ 194 type:String, 195 default:\'\' 196 } 197 }, 198 computed:{ 199 classes:function(){ 200 return \'m-alert-\'+ this.type 201 }, 202 icon:function(){ 203 return \'m-icon-\'+ this.type 204 } 205 }, 206 template:` 207 <div class="m-alert" 208 :class="[classes]"> 209 <slot name=\'iconTmp\'> 210 <i class="m-icon " 211 :class="[icon]" 212 v-if="showIcon" 213 ></i> 214 </slot> 215 216 <div class="m-content" :style=\'style\'> 217 <slot name=\'titleTmp\'> 218 <span class="m-message">{{title}}</span> 219 </slot> 220 221 <i 222 v-if="closeable" 223 class="m-closebtn m-icon-close" 224 @click="closeHandle" 225 ></i> 226 </div> 227 </div> 228 `, 229 230 methods:{ 231 closeHandle:function(){ 232 this.$emit(\'close-click\',"关闭动作") 233 } 234 } 235 }) 236 237 new Vue({ 238 el:"#app", 239 methods:{ 240 close:function(value){ 241 alert(value) 242 } 243 } 244 }); 245 246 </script> 247 </body> 248 </html>
相关文章：