vue
没头发的卑微打工人
这个作者很懒,什么都没留下…
展开
-
vue 中 scrollIntoView
vue 中使用 scrollIntoView<div class="item_type" :id="item.id"> <span >{{item.label}}</span></div>document.getElementById(item.id).scrollIntoView()scrollIntoView({ behavior:auto //定义动画过渡效果"auto"或 "smooth" 之一。默认为 "auto"。 block原创 2022-04-22 15:33:02 · 4675 阅读 · 0 评论 -
Vue+elementUI下拉框自定义颜色选择器
Vue+elementUI下拉框自定义颜色选择器定义子组件父组件引入引入组件声明组件页面使用定义子组件<template> <div> <el-select ref="colorSelect" placeholder="" clearable v-model="myColor" style="width: 100%" @change="handleChange"> <el-option v-for="item in col原创 2021-11-03 10:29:19 · 2358 阅读 · 6 评论 -
element ui日期选择器:picker-options=“pickerOptions“设置禁用状态
element ui日期选择器:picker-options="pickerOptions"设置禁用状态效果图代码效果图代码<el-form-item label="延期时间" prop="delayTime" slot="delayTime"> <el-date-picker style="width: 400px;" v-model="formData.delayTime" :picker-opt原创 2021-10-28 13:40:00 · 1545 阅读 · 2 评论 -
element-ui 中dialog居中
element-ui 中dialog居中 ::v-deep .el-dialog{ display: flex; flex-direction: column; margin:0 !important; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); /*height:600px;*/ max-height:calc(100% - 30px);原创 2021-10-15 10:40:12 · 587 阅读 · 0 评论 -
element UI 封装table组件
tableWrapper.js<template> <div> <el-table :height="settings.height" v-loading="settings.isLoading" :header-cell-style="{background:'#FAFAFA',color:'rgba(0,0,0,0.85)',height:'54px'}" @selection-change="e => h原创 2021-03-12 10:35:03 · 583 阅读 · 2 评论 -
vue中slot插槽
vue中的slot为什么要使用slotslot的基本用法为什么要使用slot说道插槽,我们首先想到的会是电脑的usb插口,它既可以插手机,键盘,鼠标,还可以插盘,一个小小的插口,可以接收不同的值,就像solt标签一样比如,我们经常看到购物车的导航丽娜,他们的内容虽然不一样,但是我们可以看出来他们的结构都是一样的,或者说,当父组件引入子组件后,我们不想单一的用一种标签来实现,这个时候我们都可以用slot来实现slot的基本用法//父组件 <div class="wrapper">原创 2020-12-22 22:52:09 · 128 阅读 · 3 评论 -
Vue实现ElementUI中Message组件
Vue实现Element-ui中Message组件首先新建一个plugin文件夹message.jsimport Vue from 'vue'import messageComponent from './message.vue'let vm;const getInstance = () => { //单例模式 防止生成多个dom if (!vm) { vm = new Vue({ render: h => h(messageComponent)原创 2021-03-07 14:23:07 · 809 阅读 · 2 评论 -
vue.js 基础
vue.js基础标签中的新属性v-bind对象语法数组语法添加图片SRC地址v-on指令v-forv-if/v-else/v-showv-modelv-htmlv-text三级目录计算属性组件生命周期标签中的新属性v-bindv-bind:我们能将 data 中的值绑定到当前属性中,可简写为 :<a :href="url">a标签</a><p :class="pClass">p标签</p>对象语法<h1 v-bind:class="{'原创 2021-03-06 16:00:54 · 87 阅读 · 0 评论 -
el-select的v-model的没有及时更新页面的值
el-select的v-model的change事件已经显示值变了,但是下拉框没及时更新 <el-select v-model="value" placeholder="请选择" @change="handleChange" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> &l原创 2021-02-05 16:25:33 · 1357 阅读 · 0 评论 -
vue多层筛选
原创 2020-06-22 11:33:00 · 501 阅读 · 0 评论 -
element ui合并表格
element ui合并表格这是官网上的效果,传送门这是我合并之后 的样子,首先要保证你的数据是一条一条的,然后要合并的地方得有一个地方是用于区分到底合并不合并的,上代码<el-table :data="listData" :span-method="objectSpanMethod" class="tableArea" style="width: 100%" > <el-table-column p原创 2020-12-07 23:21:16 · 161 阅读 · 0 评论 -
vue父子组件
父访问子<div> <child ref='child'></child></div>this.原创 2020-12-20 14:57:49 · 90 阅读 · 3 评论 -
vue事件修饰符
vue事件修饰符详解代码展示思维导图详解.stop 阻止冒泡,相当于相当于js中的event.stopPropagation冒泡事件:父子组件都有点击事件,点击子组件,就会触发父组件上的点击事件.prevent 阻止默认事件,相当于js的event.preventDefault(),比如a标签点击跳转.capture 事件捕获 捕获事件:父子组件都有点击事件,点击子节点,就会触发从外至内 父节点->子节点的点击事件.self 只当在 event.target 是当.原创 2021-01-27 13:50:14 · 181 阅读 · 6 评论