學習vue過程中遇到的問題

CodeTiger發表於2021-08-13

1、vue-quill-editor動態禁用

專案中把vue-quill-editor單獨封裝成了一個元件,通過props傳遞readOnly引數來設定是否禁用editor。開發中發現可以實現禁用效果,但取決於第一次開啟這個編輯器的狀態,如果第一次開啟時readOnly引數為true,那麼後面一直都是true,儘管傳入的readOnly引數不同。

<editor v-model="form.noticeContent" :min-height="192" :read-only="form.status === '1'" />

通過除錯發現是vue-quill-editor在頁面渲染完後只初始化一次,如果在init方法中進行設定,那麼只會設定一次。

根據官方文件,可以把動態禁用移到狀態改變事件中(onEditorFocustext-changeselection-changeeditor-change等),這樣就可以實現動態禁用效果了。

2、vue裡實現路由跳轉

就是點選按鈕,開啟另一個tab頁面,而不是頁面裡的彈窗。這在一般的前端專案裡,直接使用a標籤就可以。

雖然在vue裡也有類似的,即<router-link>標籤,渲染後就是a標籤。

關於路由跳轉有很多方式,這裡我選用this.$router.push({ path: })的方式,寫上頁面路徑一直404,因為要實現路由的調整,所以要跳轉的頁面都需要加入路由列表,不然找不著

router/index.js裡新增

{
    path: '/notice',
    component: Layout,
    hidden: true,
    children: [
      {
        path: 'add',
        component: (resolve) => require(['@/views/collaboration/notice/detail'], resolve),
        name: 'NoticeDetail',
        meta: { title: '新增公告' }
      },
      {
        path: 'edit/:noticeId(\\d+)',
        component: (resolve) => require(['@/views/collaboration/notice/detail'], resolve),
        name: 'NoticeDetail',
        meta: { title: '修改公告' }
      }
    ]
  }

這樣你要跳轉到新增頁面或者修改頁面,就可以像下面這樣寫

      /** 新增按鈕操作 */
      handleAdd() {
        this.$router.push({ path: '/notice/add' })
      },
      /** 修改按鈕操作 */
      handleUpdate(row) {
        const noticeId = row.noticeId || this.ids[0]
        this.$router.push({ path: '/notice/edit/' + noticeId })
      }

3、莫名其妙的錯誤

vue的熱更新有時候真的不能相信,你的程式碼或許真的沒問題,你只是需要重啟讓它冷靜一下。

4、el-button的@click方法點選失效

下面的程式碼,點選按鈕,兩個都列印了,但卻沒有執行submitNotice方法

      /** 釋出按鈕操作 */
      handleSubmit() {
        if (this.noticeId === undefined) {
          this.msgError("釋出失敗")
          return
        }
        this.$confirm('是否確認釋出該公告?', "警告", {
          confirmButtonText: "確定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          console.log('11111')
          return submitNotice(this.noticeId)
        }).then(() => {
          this.msgSuccess("釋出成功")
          this.getDetails(this.noticeId)
        }).catch(() => {});
      },

下面這樣修改就可以了。。
image.png

這倆寫法貌似沒啥區別啊。。通過查資料,我估計就是這個this的問題。this的作用域不同

參考:https://blog.csdn.net/github_38851471/article/details/79446722

5、父元件傳入子元件的值更新,子元件不會重新渲染

父元件呼叫子元件,傳入deptId,當deptId更新時,子元件不會重新載入

<post :deptId="form.deptId" />

子元件接受值

props: {
    deptId: {
      type: Number,
      default: -1
    }
  },

需要在watch中監聽子元件引數變化,然後執行需要的邏輯

watch: {
    deptId: {
      handler: function (val, oldVal) {
        this.inputDeptId = val
        if (val !== -1) {
          this.getList();
        }
      },
      deep: true
    }
  },

參考:http://www.cxyzjd.com/article/zhengyinling/93485296

6、vue-treeselect下拉選擇的時候,被遮擋住

根據官方文件,為標籤設定屬性:appendToBody="true",將選單追加到body即可。

7、資料庫tinyint型別,實體類需要設定為Boolean型別而不是boolean型別,因為boolean型別預設為false,而Boolean可以為null,在列表條件查詢時,預設為false可能會得到不正確的資料。

8、有的頁面啟動後第一次開啟樣式錯亂,重新整理後正常。

考慮是不是css樣式和頁面載入的順序問題,css載入慢了,所以出現這個問題,有待除錯。

9、el-upload多檔案上傳時,點選上傳到伺服器卻喚醒了檔案選擇框

image.png

解決:需要在選取檔案的按鈕加上屬性slot="trigger"

image.png

持續更新

相關文章