1.新建乙個新元件命名命名為alertbox.vue
一.dom結構
提示 }否是
二.script
export default {
props: ["isshowalert", "message"],
data() {
return {
isshowdialogs: true
methods: {
isshowrefruct() {
this.isshowdialogs = false;
this.$emit("replacechecked", "replace");
isshowagree() {
this.isshowdialogs = false;
this.$emit("surechecked", this.message);
watch: {
isshowalert() {
this.isshowdialogs = this.isshowalert;
三樣式.paymentdetail_compontents {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 33333;
background-color: rgba(0, 0, 0, 0.6);
/* display: flex; */
.paymentdetail_div_box {
width: 300px;
background-color: white;
border-radius: 5px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.paymentdetail_div1 {
height: 90px;
text-align: center;
margin-top: 20px;
.paymentdetail_person_box {
height: 50px;
margin-top: 20px;
color: #685c5c;
.paymentdetail_div1_warn {
color: #000;
font-family: bolder;
.paymentdetail_div2 {
border-top: 1px solid #eee;
/* display: flex; */
span {
/* flex: 1; */
height: 39px;
line-height: 39px;
color: #5077aa;
text-align: center;
width: 50%;
.paymentdetail_div2_span {
border-right: 1px solid #eee;
color: #685c5c;
float: left;
box-sizing: border-box;
.paymentdetail_div2_span1 {
float: right;
4.使用props接收從父元件中接收的值
props: ["isshowalert", "message"],
5.在watch中監聽彈框是否出現
isshowalert() {
this.isshowdialogs = this.isshowalert;
6.父元件中引入元件
1.import alertbox from "./alertbox";
2. components: {
alertbox
3.dom結構
4.data() {
return {
showalert: "",
alertmessage: "你好"
5.methods: {
replace_checked() {
console.log(2222222);
sure_checked() {
console.log(1111111);
Vue請求封裝
現在大部分的vue開發者都使用了axios請求方式 新建乙個http.js檔案 引入axios 需要npm安裝到專案中 引入vue 儲存登入資訊 import axios from axios import vue from vue import util from util.js 自己定義的工具類...
vue外掛程式封裝
外掛程式通常用來為 vue 新增全域性功能。外掛程式的功能範圍沒有嚴格的限制 一般有下面幾種 1 新增全域性方法或者 property。如 vue custom element 2 新增全域性資源 指令 過濾器 過渡等。如 vue touch 3 通過全域性混入來新增一些元件選項。如 vue rou...
vue封裝請求
1 首先建立axiosconfig資料夾 建axiosconfig.js檔案 響應時間 axios.defaults.timeout 5 1000 配置cookie axios.defaults.withcredentials true 配置請求頭 axios.defaults.headers.po...