博客首页

vue项目问题总结

4/10/2020 Vue面试

# vue加scoped后就无法修改vant的UI组件的样式

一些时候UI组件提供的默认的样式不能满足项目的需要，就需要我们对它的样式进行修改，但是发现加了scoped后修改的样式不起作用。

注：div中使用v-html，里面的图片溢出也是同样解决方法

解决方法：

<style scoped>
  .a >>> .b { /* ... */ }
</style>
1
2
3

以上的代码会编译成：.a[data-v-f3f3eg9] .b { /* ... */ }

使用Less或Sass等预处理器，可能无法>>>正确解析 这时可以/deep/

.brandList {
    /deep/.van-grid-item__content {
      padding: 0;
    }
  }
1
2
3
4
5

# van-tree-select 设置剩余高度

<van-tree-select height="calc(100vh - 114px)" :items="categoryList" :main-active-index.sync="active">
1

使用 height="calc(100vh - 114px)" 114px 为上下 tab 所占高度

# calc 计算高度

height: calc( 100vh - 36px ); calc 里面记得空格，否则不生效

# Vue中使用this.$forceUpdate()强制刷新渲染

当使用了v-for嵌套循环，外层循环了一个数组，且外层数组中的每一项底下又有一个子项的数组，并且当外层列表是不变的，而内部的子项列表确是在动态改变时

出现改变子项数组元素后，页面并没有被及时渲染改变的问题

参考及解决 (opens new window)

# postcss-pxtorem

postcss-pxtorem（自动处理 rem，妈妈再也不用担心屏幕太大太小了）

参考及实现 (opens new window)

# element UI 自定义传参的解决方法

<el-autocomplete
    v-model="data"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入内容"
    @select="handleSelect"
></el-autocomplete>
1
2
3
4
5
6

使用闭包解决：

<el-autocomplete
    v-model="data"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入内容"
    //使用闭包,index 表示所选的第几个组件
    @select="item=>handleSelect(item,index)"
></el-autocomplete>
1
2
3
4
5
6
7

也可写成 @select="handleSelect($event, index)

# Watch immediate

当 watch 一个变量的时候，初始化时并不会执行，如下面的例子，你需要在created的时候手动调用一次。

// bad
created() {
  this.getsearchText();
},
watch: {
  searchText: 'getSearchText',
}
1
2
3
4
5
6
7

你可以添加immediate属性，这样初始化的时候也会触发,代码也就可以简化成这样

// good
watch: {
  searchText: {
    handler: 'getSearchText',
    immediate: true,
  }
}
1
2
3
4
5
6
7

# ElementUI中限制el-input输入框只能输入数字

<el-input v-model.number="num"  onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"></el-input>
1

# 解决ElementUI导航栏重复点菜单报错问题

在VUE中路由遇到

Error: Avoided redundant navigation to current location:报错显示是路由重复， 虽然对项目无影响，但是看到有红的还是不舒服。

在router的配置文件中（router -> index.js）加上

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
1
2
3
4

# 组件封装

组件封装原则：

一个组件只专注做一件事，且把这件事做好（通用 易用 可组合）

vue组件三要素：

  1. props参数
  2. slot定制插槽
  3. event自定义事件

组件封装思想：

  • 判断基本类型
    • 哪些写死
    • 哪些传进来
  • 扩展
    • 自定义事件，判断传出参数
    • 插槽扩展
  • 优化
    • 提高适应性(v-if,v-show)

参考 (opens new window)、封装Vue组件的一些技巧 (opens new window)

# hookEvent，监听z组件生命周期函数

# 内部监听生命周期函数

以 echarts 开发图表为例

export default {
  mounted() {
    this.chart = echarts.init(this.$el)
    // 请求数据，赋值数据 等等一系列操作...
    
    // 监听窗口发生变化，resize组件
    window.addEventListener('resize', this.$_handleResizeChart)
    // 通过hook监听组件销毁钩子函数，并取消监听事件
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.$_handleResizeChart)
    })
  },
  updated() {},
  created() {},
  methods: {
    $_handleResizeChart() {
      // this.chart.resize()
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在Vue组件中，可以用过$on,$once去监听所有的生命周期钩子函数，如监听组件的 updated 钩子函数可以写成 this.$on('hook:updated', () => {})

# 外部监听生命周期函数

我们有时会遇到这样的情况，用了一个第三方组件，当需要监听第三方组件数据的变化，但是组件又没有提供change事件时。我们可以利用Vue 提供的** @hook:updated 来监听组件的 updated 生命钩子函数**

<template>
  <!--通过@hook:updated监听组件的updated生命钩子函数-->
  <!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发-->
  <custom-select @hook:updated="$_handleSelectUpdated" />
</template>
<script>
import CustomSelect from '../components/custom-select'
export default {
  components: {
    CustomSelect
  },
  methods: {
    $_handleSelectUpdated() {
      console.log('custom-select组件的updated钩子函数被触发')
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Vue-cli3 打包后报错 Failed to load resource: net::ERR_FILE_NOT_FOUND

根目录下新建文件 vue.config.js

// vue.config.js
module.exports = {
  publicPath: './'
}
1
2
3
4

# node-sass安装失败

//先
 npm set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

//然后
npm i
1
2
3
4
5

# vue-codemirror代码编辑器

使用详情 (opens new window)

# 单个 *.vue 快速原型开发—遇到的坑

在进行单个 *.vue 文件进行开发，结合 element-UI 使用的时候，输入命令vue sreve时，发现报错

#报错信息
These dependencies were not found:

* core-js/library/fn/object/assign in ./node_modules/babel-runtime/core-js/object/assign.js
* core-js/library/fn/symbol in ./node_modules/babel-runtime/core-js/symbol.js
* core-js/library/fn/symbol/iterator in ./node_modules/babel-runtime/core-js/symbol/iterator.js

To install them, you can run: npm install --save core-js/library/fn/object/assign core-js/library/fn/sym
bol core-js/library/fn/symbol/iterator
1
2
3
4
5
6
7
8
9

具体解决方法在这里 (opens new window)

# TortoiseSVN教程

SVN快速上手 (opens new window)、SVN使用教程

# css解决fixed布局不会出现滚动条的问题

如果我们布局的是后是fixed并且想要高度为100%的时候，我们一般会这样设置:

div {
    display:fixed;
    height:100%;
    overflow:scroll;
}
1
2
3
4
5

但是这样的话不会出现滚动条,设置

div {
  top: 0;
  bottom:0;
  position:fixed;
  overflow-y:scroll;
  overflow-x:hidden;
}
1
2
3
4
5
6
7

# element隐藏组件滚动条scrollbar使用

具体使用 (opens new window)

# post

https://blog.csdn.net/qq_35387940/article/details/103422835

# 男女随机

sex: Math.random() > 0.5 ? 1 : 0,
1

# require.context() 自动注册

require.context():

你可以通过 require.context() 函数来创建自己的 context。

可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。

webpack 会在构建中解析代码中的 require.context() 。

// 利用require.context()自动引入article.js和user.js
const routerContext = require.context('./', true, /\.js$/)
routerContext.keys().forEach(route => {
  // 如果是根目录的 index.js 、不处理
  if (route.startsWith('./index')) {
    return
  }
  const routerModule = routerContext(route)
  /**
   * 兼容 import export 和 require module.export 两种规范
   */
  routes = routes.concat(routerModule.default || routerModule)
})
1
2
3
4
5
6
7
8
9
10
11
12
13

# map

http://vue-gaode.rxshc.com/
1

# 换肤

:root{
  --bg:#000
}
body{
  background:var(--bg)
}
1
2
3
4
5
6

# post常见数据格式

  1. application/json 参数直接放在请求体，以 json 格式发送到后端，为 axios 请求的默认方式。
  2. application/x-www-form-urlencoded 请求体中的数据会以普通表单形式（键值对）发送给后端
  3. multipart/form-data 参数会在请求体中，以标签为单元，用分隔符(可以自定义的boundary)分开。既可以上传键值对，也可以上传文件。通常被用来上传文件的格式。 详情 (opens new window)

# vue props传递对象或数组

将对象或数组本地化

<template>
  <input v-model="newName.firstName" placeholder="我是子组件">//插值
</template>

<script>
export default {
  props: { 
  //接收父组件传来的数据
    name: {}
  },
  data: function () {
    	return {
     		newName: {
     			firstName:'',
    			lastName:''
     		}
    	}
   },
	computed: {
	  initData: function () {
	  // 将对象本地化
	    return this.newName = JSON.parse(JSON.stringify(this.name))
	  }
}
} 
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# eslint 报错

vue 文件 script首行添加 /* eslint no-unused-vars: "off"*/ 即可

# 生产环境去除 console.log

vue.config.js 中配置

configureWebpack: (config) => {
  if (process.env.NODE_ENV === "production") {
    config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
    config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = [
      "console.log",
    ];
  }
}
1
2
3
4
5
6
7
8

# hook

开发中用到定时器时我们一般这样

mounted() {
  // 创建一个定时器
    this.timer = setInterval(() => {
      // ......
    }, 500);
  },
  // 销毁这个定时器。
beforeDestroy() {
  if (this.timer) {
  clearInterval(this.timer);
  this.timer = null;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

借助 hook，方便维护

mounted() {
    let timer = setInterval(() => {
      // ......
    }, 500);
    this.$once("hook:beforeDestroy", function() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    });
  }
1
2
3
4
5
6
7
8
9
10
11

# hook 监听第三方组件生命周期

如你要在第三方组件 CustomSelect 渲染时监听其 updated 钩子，可以通过@hook:updated来实现

<template>
  <!--通过@hook:updated监听组件的updated生命钩子函数-->
  <!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发-->
  <custom-select @hook:updated="doSomething" />
</template>
<script>
import CustomSelect from "../components/custom-select";
export default {
  components: {
    CustomSelect
  },
  methods: {
    doSomething() {
      console.log("custom-select组件的updated钩子函数被触发");
    }
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# vue+elementUI在输入框中按回车键会刷新页面

当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.native.prevent。

<templat>
<el-form   @submit.native.prevent >< /el-form >
</templat>
1
2
3
4

# el-dialog关闭后重置数据

//重置表单，formRef为表单的ref值，excludeFields为要排除重新初始化值得属性
Vue.prototype.$reset = function (formRef, ...excludeFields) {
  this.$refs[formRef].resetFields();
  let obj1 = this.$data;
  let obj2 = this.$options.data.call(this);
  if (!excludeFields || excludeFields.length === 0) {
    excludeFields = ["ruleValidate"];
  }
  for (let attrName in obj1) {
    if (excludeFields && excludeFields.includes(attrName)) {
      continue;
    }
    obj1[attrName] = obj2[attrName];
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

el-dialog的close事件中调用

<template>
  <el-dialog v-el-drag-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" :title="model.id === 0 ? '新增车辆' : '编辑车辆'" class="car-edit" width="450px" top="5vh" @close="$reset('form')">
    <el-form ref="form" :model="model" :rules="ruleValidate" class="formFillWidth" label-width="50px">
      <el-form-item label="车牌" prop="carCard">
        <el-input v-model="model.carCard" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="司机" prop="driver">
        <el-input v-model="model.driver" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="model.remark" placeholder="请输入" />
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button :loading="submitLoading" type="primary" @click="handleSubmit">保存</el-button>
    </span>
  </el-dialog>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

vue使用el-dialog关闭后重置数据的最佳方法 (opens new window)、vue element-ui Dialog对话框关闭后重新打开数据不清空 (opens new window)、resetFields()重置表单不生效的问题 (opens new window)

原因

github issues讨论原因 (opens new window)、issues3217 (opens new window)

# el-input 过滤特殊字符或身份证脱敏

v-model拆分为:value和@input

<el-input :value="input" @input='e => input = idCardValid (e)' placeholder="请输入内容"></el-input>
1
  methods:{
    idCardValid(val){
      const idCard= val.replace(/^(\d{6})\d+(\d{4})$/, "$1******$2")
      console.log(idCard)
      return idCard
    } 
},
1
2
3
4
5
6
7

vue+element项目中过滤输入框特殊字符小结 (opens new window)

# 作用域插槽

# 作用域插槽传值

v-slot="{item}" 为v-slot="slotProps （slotProps为形参，可自己定义） 中解构出子级插槽传递的值

在vue2.6及已上版本，slot 和slot-scope已经开始废弃， 有了新的替代: v-slot，v-slot只能用在template 上，和组件标签上

# 动态插槽名

# 自定义指令

Vue3自定义指令-10个常见的实用指令 (opens new window)

# dataset 传值

# setup使用store

# el-form 自定义校验

  <sh-form :model="form" ref="form" label-width="80px">
    <sh-form-item label="账户名称" :rules="[{required : true, validator: validatorLoginName, trigger: 'blur'}]" prop="loginName">
      <el-input v-model="form.loginName" placeholder="账号长度6-14位"></el-input>
    </sh-form-item>
  </sh-form>

// required : true 可删除

  validatorLoginName(rule, value, callback) {
    const len = this.search.loginName.length > 4 && this.form.loginName.length < 16
    if (!len) {
      callback(new Error('账号长度6-14位'));
    } else {
      callback()
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# el-select 下拉框样式修改

使用样式穿透修改下拉框样式，你会发现打死都不生效，那是因为下拉框是默认挂载在 body 下面。解决办法：设置 :popper-append-to-body="false",然后再用样式穿透

# element-ui select组件change事件传递多个参数的方法

  1. 方法一
@change="onChange($event,customParam)"
1
  1. 方法二
@change="((val)=>{changeEvent(val,args)})"
1

其他组件的的默认事件同样的方法传递

<el-dropdown trigger="click" @command="((val)=>{handleCommand(val,scope.row)})">
  <span class="el-dropdown-link">
    <i class="el-icon-more el-icon--right"></i>
  </span>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="volumes">共享卷</el-dropdown-item>
        <el-dropdown-item command="container">容器</el-dropdown-item>
        <el-dropdown-item command="log">日志</el-dropdown-item>
        <el-dropdown-item command="shell">执行</el-dropdown-item>
        <el-dropdown-item command="delete">删除</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>
1
2
3
4
5
6
7
8
9
10
11
12

# el-input type=number 去除聚焦时的上下箭头

解决

<el-input class="clear-number-input" type="number"></el-input>

<style scoped>
.clear-number-input ::v-deep input[type="number"]::-webkit-outer-spin-button,
.clear-number-input ::v-deep input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}
</style>
1
2
3
4
5
6
7
8

# el-form 表单多个验证不通过，滚动到验证提示的位置

/**
 * element 表单多个验证不通过，滚动到验证提示的位置
 * { String } object 验证规则
 * 备注：
 *     1.this.$refs.infoList.validate((_, object)=>{})   返回两个参数，第一个参数：验证是否成功，第二个参数：验证规则
 *     2.验证的标签上添加ref属性，名字和prop值一致。例：<el-form-item :prop="'infoData.' + scope.$index + '.coalName'" :ref="'infoData.' + scope.$index + '.coalName'" ></el-form-item>
 */
export function scrollToView(_this, object) {
  for (const i in object) {
    let dom = _this.$refs[i]
    if (dom) { // 没有配置ref的必填项
      if (Object.prototype.toString.call(dom) !== '[object Object]') {
        // 这里是针对遍历的情况（多个输入框），取值为数组
        dom = dom[0]
      }
      // （包含动画效果）
      dom.$el.scrollIntoView({
        // 滚动到指定节点
        block: 'center', // 值有start,center,end，nearest，当前显示在视图区域中间
        behavior: 'smooth' // 值有auto、instant,smooth，缓动动画（当前是慢速的）
      })
    }
    break // 因为我们只需要检测一项,所以就可以跳出循环了
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# vue路由跳转打开新窗口

const openNewUrl=(url) => {
  let routeData = this.$router.resolve({path: url})
  window.open(routeData.href, '_blank')
  }
1
2
3
4

# chrome表单自动填充导致input文本框背景失效

// 自动填充样式覆盖
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  -webkit-text-fill-color: #fff; 
  transition: background-color 5000s ease-out 0.5s;
}
1
2
3
4
5
6

# dialog 里重置表单

  this.$refs['form'].resetFields()
  this.form = this.$options.data(this).form
1
2

Vue中的this.$options.data()的this指向问题 (opens new window)

# history路由模式，需要如何配置ngnix，才能正常访问？

通过nginx配置加入try_files，history 模式同样会有一个问题，就是当页面刷新时，如果没有合适的配置，会出现404错误，针对这种请看，需要额外在nginx配置，对于找不到url的，将首页html返回

# 同一组件上存在多个table进行tabs和v-if/v-show切换时，多表格的数据会相互混淆，串在一起，引发bug

为每个table指定对应且唯一的key属性。

# vue element 多个 Form 表单同时验证

<template>
<el-form   ref="form1"></el-form>
<el-form   ref="form2"></el-form>
<el-form   ref="form3"></el-form>
<el-form   ref="form4"></el-form>
</template>
<script>
export default{
    data(){
        resultArr:[],//接受验证返回结果数组
        formArr:['form1",'form2",'form3",'form4"],//存放表单ref数组
    }，
    methods:{
        //封装验证函数
        checkForm(formName){
            let _self=this;
            _self.resultArr = []
            let result = new Promise(function(resolve, reject) {
            _self.$refs[formName].validate((valid) => {
                if (valid) {
                    resolve();
                } else { reject() }
                })
            })
            _self.resultArr.push(result) //push 得到promise的结果
        },
        submit(){
            let _self=this;
            _self.formArr.forEach(item => { //根据表单的ref校验
                _self.checkForm(item)
            })
           //resultArr数组的值必须是promise对象才能使用Promise.all，在checkForm做了这一步
            Promise.all(_self.resultArr).then(function() { //都通过了
              alert('所有表单验证通过')
            }).catch(function() {
                console.log("err");
            });
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 调用Axios出现"Cannot read property 'protocol' of undefined"的可能原因

# 一、写法错误

大部分都是因为这样写Vue.use(axios)导致的，改成Vue.prototype.$ajax = axios就行了

# 二、URL错误

请求的url没有在对象中定义

# vue跳转相同路径报错

在vue的router的js中添加下面代码，ew VueRouter 前

const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}
// replace
VueRouter.prototype.replace = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
  return originalReplace.call(this, location).catch(err => err)
}
1
2
3
4
5
6
7
8
9
10
11
12

# 二次封装作用域插槽

子组件

<template>
<LiquorTree class="sh-tree" v-if="items.length" :data="items" :options="options" :filter='search' ref="tree" v-model="treeModel">
<!-- 作用域插槽 -->
  <template slot-scope="{node}">
    <span v-if="!$scopedSlots.default">{{node.text}}</span>
    <slot v-else :node="node"></slot>
  </template>
</LiquorTree>
</template>

使用

```vue
<template>
  <sh-tree class="tree" ref="tree" checkbox :api='api' :props="{children:'children',text: 'text'}" v-model="shows" @handleSubmit='handleSubmit'>
    <template slot-scope="{node}">
      <span class="tree-text">
        <template v-if="!node.hasChildren()">
          <van-icon name="user-o" size="18" class="icon" />
            {{ node.text }}
        </template>
        <template v-else>
          {{ node.text }}
        </template>
      </span>
    </template>
  </sh-tree>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# vue中使用a标签下载本地静态资源文件

  • 1、public目录下存放要下载的静态资源
  • 2、a 标签下载
 <a href="/demo.rar" download="demo.rar">点击下载</a>
1

# 检测元素外部(或内部)的单击

window.addEventListener('mousedown', e => {
  // 获取被点击的元素
  const clickedEl = e.target;
  
  if (el.contains(clickedEl)) {
   //在 "el "里面点击了
  } else {
   //在 "el "外点击了
  }
});
1
2
3
4
5
6
7
8
9
10

# iframe框架内页面控制父框架页面跳转到某地址

const { href } = this.$router.resolve({ path: "/resetPwd", query: { key: key } });
// iframe 控制父页面跳转
window.parent.window.location.href = href
1
2
3

# Vue中的method赋值为高阶函数

<script>
  import { debounce } from "lodash";

  export default {
    methods: {
      search: debounce(async function (keyword) {
        // ... 请求逻辑
      }, 500),
    },
  };
</script>
1
2
3
4
5
6
7
8
9
10
11

# Vue项目中，对于index.html中BASE_URL的配置

参考 (opens new window)

# 给 slot 插槽绑定事件

  • 1、作用域插槽 slot-scope 传方法
<!-- 伪代码:下拉框组件 -->
 
<template>
    <slot change-display="changeDisplay"></slot>
    <div v-show="mVisiable">*下拉框代码省略*<div>
<template>
 
<script>
export default {
    data(){
        return {
            mVisiable: false
        }
    }
 
    methods:{
        changeDisplay(){
            this.mVisiable = !this.mVisiable
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

使用：

<!--使用下拉弹窗组件-->
<dropdown v-model="value" :list="list">
  <button slot-scope="{changeDisplay}" 
    @click="changeDisplay">{{value}}</button>
</dropdown>
1
2
3
4
5
  • 2、vnode 中对应的页面元素
<!-- 伪代码:下拉框组件 -->
<template>
    <slot></slot>
    <div v-show="mVisiable">*下拉框代码省略*<div>
<template>
 
<script>
export default {
    data(){
        return {
            mVisiable: false
            reference: undefined
        }
    }
 
    methods:{
        changeDisplay(){
            this.mVisiable = !this.mVisiable
        }
    }
 
    mounted() {
        if (this.$slots.default) {
          this.reference = this.$slots.default[0].elm
        }
        if (this.reference) {
          this.reference.addEventListener('click', this.changeVisiable, false)
          // hook
          this.$once('hook:beforeDestroy', () => {
          this.reference.removeEventListener('click', this.changeVisiable)
      })
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 父组件监听子组件生命周期

原本：

//父组件
<child
 :value="value"
 @childMounted="onChildMounted"
/>
method () {
 onChildMounted() {
 // do something...
 }
},

// 子组件
mounted () {
 this.$emit('childMounted')
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

hooks：

//父组件
<rl-child
  :value="40"
  @hook:mounted="childMountedHandle"
/>
method () {
  childMountedHandle() {
  // do something...
  }
},
1
2
3
4
5
6
7
8
9
10

# uniapp 删除 main.js 的 App.mpType = 'app' 后运行 H5 报错 Cannot read property 'meta' of undefined

补齐main.js 的 App.mpType = 'app' 即可。

# WangEditor 设置图片百分比

// 找到 30% 的位置，添加
{
  $elem: r.default("<span>70%</span>"),
    onClick: function(t, e) {
    return e.attr("width", "70%"), e.removeAttr("height"), !0;
    },
},
1
2
3
4
5
6
7
  • 1、DropdownItem 设置 get-container="body"
  • 2、这个现象是由于 NavBar 的按钮有一个「点击透明」的反馈效果，你把 DropdownMenu 放在 Right 按钮内部的时候，也受到了这个样式影响：
/* 做样式覆盖 */
.van-nav-bar__right:active {
    opacity: .7; // .7 -> 1
}
1
2
3
4

# notice 在 dropdown再次打开不滚动、text文字消失的问题

在 open 方法里 先 v-if 设置为 false，再 $nextTick 设置为 true，这样就可以解决问题了。



[参考](https://blog.csdn.net/weixin_55953988/article/details/122621453)

## 低代码

[nocode](https://github.com/kelseyhightower/nocode)

<Vssue/>
1
2
3
4
5
6
7
8
Last Updated: 12/30/2022, 2:33:12 PM

vue中的$attrs和$listeners