1.自定義 提示框 元件
src / components / toast / index.js
/**
* 自定義 提示框( toast )元件
*/var toast = {};
var showtoast = false, // 儲存toast顯示狀態
showload = false, // 儲存loading顯示狀態
toastvm = null, // 儲存toast vm
loadnode = null; // 儲存loading節點元素
toast.install = function (vue, options) ;
for (var property in options)
vue.prototype.$toast = function (tips, type) }
'; if (showtoast)
if (!toastvm)
},template: tmp
});toastvm = new toasttpl()
var tpl = toastvm.$mount().$el;
}toastvm.type = 'lx-toast-' + curtype;
toastvm.tip = tips;
toastvm.show = showtoast = true;
settimeout(function () , opt.duration)
};['bottom', 'center', 'top'].foreach(function (type)
});vue.prototype.$loading = function (tips, type) else
var loadtpl = vue.extend(
},template: '
' + tips + '
' });
loadnode = new loadtpl();
var tpl = loadnode.$mount().$el;
loadnode.show = showload = true;}};
['open', 'close'].foreach(function (type)
});}// 向外暴露介面
module.exports = toast;
/**
* toast 樣式
*/.lx-toast
.lx-toast.lx-word-wrap
.lx-toast.lx-toast-top
.lx-toast.lx-toast-center
@keyframes show-toast
to }.lx-load-mark
.lx-load-box
.lx-load-content
.lx-loading
.loading_leaf
.loading_leaf:before
.loading_leaf_0
.loading_leaf_0:before
.loading_leaf_1
.loading_leaf_1:before
.loading_leaf_2
.loading_leaf_2:before
.loading_leaf_3
.loading_leaf_3:before
.loading_leaf_4
.loading_leaf_4:before
.loading_leaf_5
.loading_leaf_5:before
.loading_leaf_6
.loading_leaf_6:before
.loading_leaf_7
.loading_leaf_7:before
.loading_leaf_8
.loading_leaf_8:before
.loading_leaf_9
.loading_leaf_9:before
.loading_leaf_10
.loading_leaf_10:before
.loading_leaf_11
.loading_leaf_11:before
@-webkit-keyframes opacity-0
0.01%
0.02%
60.01%
100%
}@-webkit-keyframes opacity-1
8.34333%
8.35333%
68.3433%
100%
}@-webkit-keyframes opacity-2
16.6767%
16.6867%
76.6767%
100%
}@-webkit-keyframes opacity-3
25.01%
25.02%
85.01%
100%
}@-webkit-keyframes opacity-4
33.3433%
33.3533%
93.3433%
100%
}@-webkit-keyframes opacity-5
41.6767%
41.6867%
1.67667%
100%
}@-webkit-keyframes opacity-6
50.01%
50.02%
10.01%
100%
}@-webkit-keyframes opacity-7
58.3433%
58.3533%
18.3433%
100%
}@-webkit-keyframes opacity-8
66.6767%
66.6867%
26.6767%
100%
}@-webkit-keyframes opacity-9
75.01%
75.02%
35.01%
100%
}@-webkit-keyframes opacity-10
83.3433%
83.3533%
43.3433%
100%
}@-webkit-keyframes opacity-11
91.6767%
91.6867%
51.6767%
100%
}
main.js
// 全域性引入toast
import './components/toast/toast.css';
import toast from './components/toast/index';
vue.use(toast);
toast.vue
返回
topcenter
bottom
loading
自定義模態提示框
關於android中模態提示框的問題 因為專案最新的效果圖，中提示框為模態的，先前用的toast，雖然可以實現功能，但是提示框後面並沒有模態框那樣的灰色半透明蒙板，現把 給大家參考 customer dialog.xml android orientation horizontal android ...
自定義彈出提示框
把confirm提示框的 確定 和 取消 按鈕，修改一下文字，並進行相應的按鈕事件。生成html var generatehtml function type,title,msg html 必須先將 html新增到body，再設定css樣式 生成css var generatecss functio...
自定義的提示框
上面橙色的就是提示框，position是fixed的，在這個編寫過程中確實遇到了難點，那就是 我的頻道 是iframe，而我們如果在iframe中直接加入這個js，那麼它的fixed只是相對於iframe的，而不是當前的視窗，所以，我們要在iframe內部回應，並且在頂層響應，這裡上瀏覽器找了好久的...