阅读 103

学习vue过程中遇到的问题

这是我参与8月更文挑战的第7天,活动详情查看:8月更文挑战

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的作用域不同

参考:blog.csdn.net/github_3885…

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
    }
  },
复制代码

参考:www.cxyzjd.com/article/zhe…

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

持续更新

文章分类
前端
文章标签