随笔分类 - vue
vue使用笔记
摘要：现在有这么个需求，点击表格一列的表头或其中一列，选中全列，ux如下，默认选第一列 直接上代码 <!--表格--> <el-table :data="tableData" @cell-click="(row, column) => handleClick({column})"> <el-table-c
阅读全文
摘要：前提：必须先安装了element-ui 自定义开发带分页以及搜索框的select 用法 select.vue文件 <template> <div v-clickoutside="()=>visible=false" class="com-select" :class="{'is-disabeled'
阅读全文
摘要：Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。 自定义指令里的钩子函数 options = { bind:function(el,bind
阅读全文
摘要：国内的 PC端常用的 1.element-ui 官网地址：http://element-cn.eleme.io/#/zh-CNGitHub地址：https://github.com/ElemeFE/element 2.iView 官网地址：http://v1.iviewui.com/GitHub地址
阅读全文
摘要：最终效果图 直接看TheTimeLine.vue文件代码 <template> <div class="timeline-main"> <!--年月标题--> <div class="timeline-title"> {{ timeData.yearData }} <i :class="showCa
阅读全文
摘要：ui设计图大概长这样↓ 因为这是在表格里展示的对应的样式的，我直接写成了一个组件 下面是一个.vue文件，可以直接使用 <template> <div class="column-row"> <!--#409eff--> <div class="one">{{ column[0] || '' }}<
阅读全文
摘要：在使用Elemen-UI中el-select时 代码如下↓ <!-- selected --> <el-select v-if="item.columnType 'selected'" :key="updates" v-model="scope.row[Object.keys(item)[0]]"
阅读全文
摘要：element-UI中el-select组件在vue里使用时，当我想点击下拉框选择后，不仅传当前选的值，还要传个id过去时，这时候该怎么办？ 先看官网api↓ 默认是@change="changeData"不传参数，才会把选中值带过去 下面给出两种解决方法： 方法一：@change="dataCha
阅读全文
摘要：今天遇到一个bug，下拉框怎么点都改变不了，代码如下 <el-form-item label="坑位："> <el-select v-model="form.pitSeq" placeholder="请选择"> <el-option v-for="(v, i) in $store.state.fix
阅读全文
摘要：vue官网给出： 那我们就传个对象看看： // 父组件里 provide() { return { isManual: { status : 'none', } } }, // 改变provide里的对象值 this._provided.isManual.status = '0'; 子组件里正常使用
阅读全文
摘要：最近在开发中遇到一个在form表单对象里，有个图片上传的组件，上传成功后返回数据赋值后，图片没有展示出来 当我上传图片成功后给form.imgUrl赋值后，页面并没有出现图片的缩略图 该怎么解决呢： 方法1.$set // 上传成功回调函数 handleAvatarSuccess(res, file
阅读全文
摘要：其实这个修饰符就是vue封装了 子组件要修改父组件传过来的动态值的语法糖，省去了父组件需要写的方法，但是子组件emit时要加上update 官方解释：↓ 在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子
阅读全文
摘要：在项目开发中如果你用到了自己自定义的组件，并且想给他绑定一个点击事件 // 这里是父组件里 <template> <div> <my-button @click='submitClick'>提交</my-button> </div> </template> <script> import myBut
阅读全文
摘要：如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名 const store = new Vuex.Store({ m
阅读全文
摘要：当我们去二次封装别人组件时，可能别人组件上有很多属性，我们不想再次重写一遍 这时候就可以使用v-bind="$attrs" 和 v-on="$listeners"。这是vue 2.4 版本提供 vm.$attrs 是一个属性，其包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (cl
阅读全文
摘要：首先我们在本地开发，域名都是localhost，当我们需要请求后台数据时，就会出现跨域的问题 下面就是在vue.config.js配置文件里 devServer: { proxy: { // detail: https://cli.vuejs.org/config/#devserver-proxy
阅读全文
摘要：报错原因： 当前组件的名字不能和他使用其他组件注册的名字相同 不然这样会陷入死循环，所以js内存溢出了
阅读全文
摘要：报错翻译：TypeError：无法使用“ in”运算符在false中搜索“ name” 报错原因：在使用vue开发中，一个input绑定的对象被赋值成false了，当输入值就会报这个错 <input type="text" v-model="form.name" /> getResult('xxx/
阅读全文
摘要：饿了么官网给的自定义例子是点击哪个日期在日期后面加个勾 而我们想要的是显示备忘录，像这样↓，日历上直接显示 这时候我们要把template里的代码改一下 <el-calendar> <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法--> <template s
阅读全文
摘要：首先我们来翻译一下nextTick是什么意思：下一个刻度 再来看看vue官网怎么说的： Vue.nextTick( [callback, context] )在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 大概意思就是在修改完数据后会立即调用这个
阅读全文
浙公网安备 33010602011771号