vue.js 에서 toast 용법 및 toast 탄 상 자 를 사용 하 는 인 스 턴 스 코드

1.먼저 도입

import { Toast } from 'vant'

소 열 을 쓰다
click 이벤트 바 인 딩

2.이벤트 쓰기
methods 에 쓰 는 방법

showToast() {
    this.$toast({
     message: "    +3",
     })
  },

3.효과 도 는 다음 과 같다.

간단 한 toast 힌트 하나 가 성 공 했 습 니 다.
다음은 인 스 턴 스 코드 를 통 해 vue 에서 Toast 탄 상 자 를 사용 하 는 것 을 보 겠 습 니 다.

import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux'
Vue.use(ToastPlugin)
Vue.use(ConfirmPlugin)
Vue.use(AlertPlugin)
//     (    )
Vue.prototype.showToast = function( showPositionValue,type,text,width="10em"){
 this.$vux.toast.show({
 showPositionValue: false,
 text: text,
 type: type,
 width: width,
 position: 'middle'
 })
}
//  alert confirm
const Message = {};
Message.install = () => {
 const msg = {
   alert: config => {
   let def = {
    title:'  ',
    content:'    ，        ！',
    buttonText:'  '
   }
   if(typeof config === 'string' || typeof config === 'number'){
  Vue.$vux.alert.show(Object.assign(def,{content:config}));
 }else{
  Vue.$vux.alert.show(Object.assign(def,config));
 }
},
 confirm: config => {
  let isConfirm = false;
  let def = {
    title:'  ',
    content:'    ，        ！',
    confirmText:'  ',
    cancelText:'  ',
    onConfirm:() =>{
    isConfirm = true;
 }
 }
  if(typeof config === 'string' || typeof config === 'number'){
   Vue.$vux.confirm.show(Object.assign(def,{content:config}));
  }else{
   Vue.$vux.confirm.show(Object.assign(def,config));
  }
 /*return new Promise((resolve,reject) => {
  if(isConfirm){
  resolve();
  }
  })*/
 },
}
 Object.entries(msg).forEach(([method,fn]) => {
  Vue.prototype[method] = fn;
})
}
Vue.use(Message)
//    
_this.confirm({
 title:'  ',
 content: '       ',
 onConfirm() {
  console.log('     ')；
 }
});

총결산
위 에서 말 한 것 은 소 편 이 소개 한 vue.js 에서 toast 용법 과 toast 탄 상 자 를 사용 하 는 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!