使用的组件

确认弹框

<template>
  <div>
    <button @click="del">修改</button>
    <input type="text" v-model="text">
   
  </div>
</template>
<script>
// Dialog({ message: '提示' }); //这个是在我们刷新的时候，就会自动弹出窗口，这个项目中使用不合理
export default {
  data() {
    return {
      text:""
    }
  },
methods:{
del(){


    this.$dialog.confirm({
      
  title: '删除内容',
  message: '你即将永久删除xxx内容'
}).then(() => {
   console.log("confirm(this.text)",confirm()) //返回的是布尔值
   if(  confirm()){
    //  console.log("this.edit",this.edit)
     this.text="1111111"
     
   }

}).catch(() => {
  // on cancel

});




}
}
}
</script>

使用密码框

<template>
  <div>
    <van-password-input
  :value="value"
  info="密码为 6 位数字"
  :mask="false"
  
  :focused="showKeyboard"
  @focus="showKeyboard = true"
 
/>
    <van-number-keyboard
     
  :show="showKeyboard"
  @input="onInput"
  @delete="onDelete"
  @blur="showKeyboard = false"
/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '123456',
      showKeyboard: true
    };
  },

  methods: {
    onInput(key) {
      this.value = (this.value + key).slice(0, 6);
    },
    onDelete() {
      this.value = this.value.slice(0, this.value.length - 1);
    }
  }
}
</script>

让一个元素居中

<template>
  <div class="nothingBox">
    <div class="nothing">
   <i class="iconfont cart icon-gouwu"></i>
   <p>去挑些喜欢的东西吧</p>
    </div>
  </div>
</template>
<script>
export default {
  
}
</script>
<style lang="less" scoped>
.nothingBox{
    margin:50% auto;  
}
  .nothing{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    i{
     color:  #bdc0c5;
     font-size: 100px;
    }
    p{
      margin-top: 25px;
      color:  #bdc0c5;
    }
    
  }
</style>

删除提示
使用到的组件

Dialog.confirm({
  title: '标题',
  message: '弹窗内容'
}).then(() => {
  // on confirm  当我们点击确认按钮的时候，就会执行then里面的程序
}).catch(() => {
  // on cancel
});

  //删除按钮事件
    delButton(addressId, index) {
      ///////////////////

      let data = {
        addressId: addressId
      };
      this.$dialog
        .confirm({
          title: "提示",
          message: "退出删除",
          confirmButtonText:"确认",
          confirmButtonColor:"#c53539"
        })
        .then(() => {
          let url = "/address/del";
          this.$axios.post(url, data).then(res => {
            let clear = this.$toast.success("删除成功");
            setTimeout(() => {
              clear.clear();
            }, 500);
            this.addressList.splice(index, 1);
          });
        })
        .catch(() => {});

      ////////////////删除结束

效果如下：
确认按钮是组件自带的
可以通过 confirmButtonText:"确认" ，默认是 “确认”。 confirmButtonColor:"#c53539"是设置确认按钮的颜色

image.png