vue在antDesign框架或elementUI框架組件native事件中觸發(fā)2次問(wèn)題

更新時(shí)間：2022年04月22日 15:07:46 作者：risenew

這篇文章主要介紹了vue在antDesign框架或elementUI框架組件native事件中觸發(fā)2次問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue在antDesign或elementUI組件native事件中觸發(fā)2次

打印event.target

核心思想是設(shè)置下event.target的過(guò)濾

運(yùn)用ant-design-vue組件庫(kù),且在項(xiàng)目中遇到的問(wèn)題

難以改變的默認(rèn)樣式

可能大家在運(yùn)用到組件庫(kù)的時(shí)候都會(huì)遇到要改變其組件自帶的樣式，組件自帶的都難以去改變，下面來(lái)看看，這種方法很有效果。。。。。

首先，!important

對(duì)于一般的組件樣式，找到你要改變其組件的class名，在樣式后加上！important，它的權(quán)重比較高，。

.ant-select {
  width: 145px !important;
}
.happy-scroll-content {
  width: 100% !important;
}

其次，/deep/

/deep/ .happy-scroll-content {
  width: 100% !important;
}

最后，如果以上兩個(gè)都不好用，::v-deep最好的選擇

 ::v-deep .ant-col {
  margin-bottom: 7px;
}

讓通知提醒框的內(nèi)容自動(dòng)換行

一撮內(nèi)容，在js的地盤，也不可能讓我在里面插入個(gè)<br/>或者\(yùn)n,而且還是從后端返回的多條數(shù)據(jù)，最終還是解決了…

沒(méi)改變之前，是這個(gè)樣子的

 openNotification() {
  this.$notification.open({
    message: 'Notification Title',
    description:
      'I will never close automatically. I will be close automatically. I will never close automatically.',
    duration: 0,
  });
},

運(yùn)用了descriptionAPI的特性，function(h)，可以理解是vue里的一個(gè)render函數(shù)里面的createElement，這里就不過(guò)多講解，直接貼代碼了，效果如下：

 this.$notification[type]({  
       message: h=>{return h('div',{style:{'font-size':'14px'}},str)},
       description: h => {
       return h("div",this.tips.map(function(item){
       return h('li',{style:{'font-size':'12px'}},item)//可以改變其li的樣式
  }));
   },
   duration: 10,
   });

table組件表格出現(xiàn)時(shí)間時(shí),格式問(wèn)題

對(duì)于后端返回的數(shù)據(jù)，有的數(shù)據(jù)直接渲染就可以，但是有的還要改變其格式，方可展示，那就用到了customRender，當(dāng)然也少不了時(shí)間格式的轉(zhuǎn)換moment

import moment from "moment";
const formatterTime = val => {
  return val ? moment(val).format("YYYY-MM-DD HH:mm:ss") : "";
};

在需要改變的數(shù)據(jù)columns中，加上customRender，就能實(shí)現(xiàn)時(shí)間格式的轉(zhuǎn)換了

{
    title: "上傳時(shí)間",
    dataIndex: "updateTime",
    width: '20%',
    customRender: (text, row, index) => {
    return (
    <a style="color:#000" href="javascript:;" rel="external nofollow" >
    {formatterTime(text)}
     </a>
    );
   }
 },

當(dāng)你遇到這樣的bug時(shí)，可能出現(xiàn)了這樣的問(wèn)題