亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2022年04月22日 15:07:46   作者:risenew  
這篇文章主要介紹了vue在antDesign框架或elementUI框架組件native事件中觸發(fā)2次問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

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

打印event.target

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

運用ant-design-vue組件庫,且在項目中遇到的問題

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

可能大家在運用到組件庫的時候都會遇到要改變其組件自帶的樣式,組件自帶的都難以去改變,下面來看看,這種方法很有效果。。。。。

首先,!important

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

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

其次,/deep/

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

最后,如果以上兩個都不好用,::v-deep最好的選擇

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

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

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

沒改變之前,是這個樣子的

 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,
  });
},

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

 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ù)據(jù),有的數(shù)據(jù)直接渲染就可以,但是有的還要改變其格式,方可展示,那就用到了customRender,當(dāng)然也少不了時間格式的轉(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,就能實現(xiàn)時間格式的轉(zhuǎn)換了

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

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

vue.runtime.esm.js?0261:619 [Vue warn]: Error in render: “TypeError:

Cannot read property ‘0’ of undefined”

出現(xiàn)這個錯誤的原因其實是Vue在拿到數(shù)據(jù)之前就渲染了dom,那么在你的html結(jié)構(gòu)中加上v-if,某個數(shù)據(jù)的長度,如:

v-if="dataList.length>0

“ReferenceError: h is not defined”

原因:在用到colums,沒放到data里定義,會報錯

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue+axios實現(xiàn)統(tǒng)一接口管理的方法

    Vue+axios實現(xiàn)統(tǒng)一接口管理的方法

    這篇文章主要介紹了Vue+axios實現(xiàn)統(tǒng)一接口管理的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-07-07
  • Vue使用vue-drag-resize生成懸浮拖拽小球

    Vue使用vue-drag-resize生成懸浮拖拽小球

    這篇文章主要為大家詳細(xì)介紹了Vue使用vue-drag-resize生成懸浮拖拽小球,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue.use的原理和設(shè)計源碼探究

    Vue.use的原理和設(shè)計源碼探究

    這篇文章主要為大家介紹了Vue.use的原理和設(shè)計源碼探究詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02
  • Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結(jié)

    Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式小結(jié)

    這篇文章主要介紹了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對象的常見方式,結(jié)合實例形式總結(jié)分析了vue.js使用v-for指令遍歷輸出js數(shù)組與json對象的常見操作技巧,需要的朋友可以參考下
    2019-02-02
  • vue實現(xiàn)移動端省市區(qū)選擇

    vue實現(xiàn)移動端省市區(qū)選擇

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)移動端省市區(qū)選擇,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-09-09
  • Vue項目導(dǎo)入導(dǎo)出文件功能以及導(dǎo)出文件后亂碼問題及解決

    Vue項目導(dǎo)入導(dǎo)出文件功能以及導(dǎo)出文件后亂碼問題及解決

    這篇文章主要介紹了Vue項目導(dǎo)入導(dǎo)出文件功能以及導(dǎo)出文件后亂碼問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue?socket.io模塊實現(xiàn)聊天室流程詳解

    Vue?socket.io模塊實現(xiàn)聊天室流程詳解

    vue-socket.io其實是在socket.io-client(在瀏覽器和服務(wù)器之間實現(xiàn)實時、雙向和基于事件的通信)基礎(chǔ)上做了一層封裝,將socket掛載到vue實例上,同時可使用sockets對象輕松實現(xiàn)組件化的事件監(jiān)聽,在vue項目中使用起來更方便
    2022-12-12
  • vue 打包后的文件部署到express服務(wù)器上的方法

    vue 打包后的文件部署到express服務(wù)器上的方法

    vue是目前最流行的前端框架,今天要介紹的是如何利用vue+webpack+express的方式進(jìn)行前后端分離的開發(fā),下面通過本文給大家分享vue 打包后的文件部署到express服務(wù)器上的方法,感興趣的朋友一起看看吧
    2017-08-08
  • vue2 設(shè)置router-view默認(rèn)路徑的實例

    vue2 設(shè)置router-view默認(rèn)路徑的實例

    今天小編就為大家分享一篇vue2 設(shè)置router-view默認(rèn)路徑的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue-cli使用stimulsoft.reports.js的詳細(xì)教程

    vue-cli使用stimulsoft.reports.js的詳細(xì)教程

    Stimulsoft?Reports.JS是一個使用JavaScript和HTML5生成報表的平臺。它擁有所有擁來設(shè)計,編輯和查看報表的必需組件。該報表工具根據(jù)開發(fā)人員數(shù)量授權(quán)而不是根據(jù)應(yīng)用程序的用戶數(shù)量。接下來通過本文給大家介紹vue-cli使用stimulsoft.reports.js的方法,一起看看吧
    2021-12-12

最新評論