Vue.js
曲小强
前行之路,负重而行。
展开
-
el-cascader组件 回显
【代码】el-cascader组件 回显。原创 2024-01-10 16:07:40 · 1095 阅读 · 0 评论 -
el-form-item validator 携带额外的参数
【代码】el-form-item validator 携带额外的参数。原创 2023-10-10 16:35:15 · 469 阅读 · 0 评论 -
vue3+eleement plus日历选择季度
<template> <div class="el-quarter-wrap"> <el-popover width="280" v-model="visible"> <template #reference> <el-input v-model="quarterDate" placeholder="请选择季度" clearable :prefix-icon="Calendar" readonly原创 2023-09-26 10:10:38 · 556 阅读 · 0 评论 -
ElMessageBox.prompt 点击确认校验成功后关闭
【代码】ElMessageBox.prompt 点击确认校验成功后关闭。原创 2023-09-07 13:51:23 · 1563 阅读 · 0 评论 -
vue自定义键盘
<template> <div class="mark" @click="isOver"></div> <div class="mycar"> <div class="mycar_list"> <div class="mycar_list_con"> <p class="mycar_list_p">车牌号</p>原创 2023-08-31 10:03:11 · 1399 阅读 · 0 评论 -
textarea去除空格
【代码】textarea去除空格。原创 2023-06-07 10:18:18 · 339 阅读 · 0 评论 -
element UI el-form 表单滚动到校验失败的位置
【代码】element UI el-form 表单滚动刀校验失败的位置。原创 2023-06-05 09:36:38 · 241 阅读 · 0 评论 -
el-cascader选择省市区 单个选择
【代码】el-cascader选择省市区 单个选择。原创 2023-04-27 18:26:51 · 381 阅读 · 1 评论 -
vue实现点击复制简单版
【代码】vue实现点击复制简单版。原创 2023-04-17 17:34:15 · 99 阅读 · 0 评论 -
关于elementUI el-form-item双循环绑定校验规则
【代码】关于elementUI el-form-item双循环绑定校验规则。原创 2023-03-24 09:17:08 · 359 阅读 · 0 评论 -
循环表单 el-form-item 添加验证
循环表单 el-form-item 添加验证。原创 2022-09-28 16:46:52 · 1052 阅读 · 0 评论 -
clearValidate 无法取消验证的问题
clearValidate 无法取消验证的问题。原创 2022-09-28 13:29:57 · 796 阅读 · 1 评论 -
js 下载文件
代码】js 下载文件。原创 2022-08-10 10:44:54 · 123 阅读 · 0 评论 -
数组元素替换位置
代码】数组元素替换位置。原创 2022-08-02 10:56:25 · 563 阅读 · 0 评论 -
qrcodejs2 生成二维码 并上传oss
代码】qrcodejs2生成二维码并上传oss。原创 2022-08-01 18:04:18 · 334 阅读 · 0 评论 -
element UI 父组件验证子组件form表单
代码】elementUI父组件验证子组件form表单。原创 2022-07-22 10:19:25 · 1026 阅读 · 0 评论 -
element ui el-form-item动态渲染添加验证
代码】elementuiel-form-item动态渲染添加验证。原创 2022-07-21 16:58:48 · 705 阅读 · 0 评论 -
js添加多列数据
<div class="block" v-for="(item,index) in formline.lists" :key="index"> <div>工具{{index+1}}</div> <div style="position: relative;"> <div style="display: flex;align-items: center;margin-bottom: 6px;"> .原创 2020-05-28 11:31:15 · 732 阅读 · 0 评论 -
input输入框限制输入小数点后俩位
input输入框限制先输入后俩位原创 2022-06-04 21:15:37 · 1103 阅读 · 0 评论 -
js 实现下载音频
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<原创 2021-08-30 15:29:30 · 3631 阅读 · 0 评论 -
vue 通过.sync控制显示隐藏
父组件<dialog-item :visible.sync="visible"></dialog-item>visible: false,子组件<template> <div class="dialog" v-if="visible"> <div class="mark" @click="close"></div> </div></template><script>原创 2021-07-09 17:34:03 · 281 阅读 · 0 评论 -
el-checkbox label绑定对象回显
你可以用原生的写自己处理一下样式吧!!<span v-for="tag in item.teachers"> <input type="checkbox" :id="tag.teacher_id" :value="tag" v-model="ruleForm.checkboxGroup" /> <label :for="tag.teacher_id">{{tag.teacher_name}}</label>原创 2020-06-10 13:29:55 · 2595 阅读 · 0 评论 -
element表格单选
<el-table :data="gridData" border @row-click="showRow"> <el-table-column label="" width="50" align="center"> <template slot-scope="scope"> <el-radio v-model="radio" :label="scope.$index"> </el-radio> <原创 2021-05-25 14:28:58 · 389 阅读 · 0 评论 -
简易折叠面板
代码如下:主文件:app.vue<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <collpase> <collpase-item :title="item.name" :showAnimation="true" v-for="(item, i) in chapterList".原创 2021-05-10 11:25:53 · 963 阅读 · 0 评论 -
element UI el-select Select 的绑定值为对象类型
如果 Select 的绑定值为对象类型,请务必指定 value-key 作为它的唯一性标识。<el-select v-model="comparison" value-key="itemId"> <el-option v-for="item in comparisonList" :key="item.id" :label="item.name" :value="item"></el-option></el-select>...原创 2020-10-21 11:01:36 · 2682 阅读 · 0 评论 -
10个Vue小技巧(转)
注意:转载于 Vue中文社区 优雅更新props更新 prop 在业务中是很常见的需求,但在子组件中不允许直接修改 prop,因为这种做法不符合单向数据流的原则,在开发模式下还会报出警告。因此大多数人会通过 $emit 触发自定义事件,在父组件中接收该事件的传值来更新 prop。// 子组件.vueexport defalut { props: { title: String }, methods: { changeTitle(){原创 2020-08-05 15:09:28 · 517 阅读 · 0 评论 -
element UI模态框复功能(自用)
<el-form-item label="适用城市" :rules="{ required: true }"> <el-button size="small" @click="addCity" type="primary">添加城市</el-button> <span v-if="checkCity.length !== 0"> <el-tag v-if="checkCity.lengt原创 2020-07-13 11:38:26 · 1563 阅读 · 0 评论 -
vue 导出文件
parseParams(data) { try { var tempArr = []; for (var i in data) { var key = encodeURIComponent(i); var value = encodeURIComponent(data[i]); tempArr.push(key + '=' + value); } var urlParamsStr = tempArr.join('&');原创 2020-07-07 12:23:10 · 620 阅读 · 0 评论 -
vue 深度watch与watch立即触发回调
基础用法搜索框输入搜索关键字的时候,可以自动触发搜索,此时除了监听搜索框的change事件之外,我们也可以通过watch监听搜索关键字的变化。<template> <div> <span>搜索</span> <input v-model="searchVal" /> </div></template><script>export default { data() {转载 2020-06-29 11:10:02 · 3906 阅读 · 0 评论 -
van-datetime-picker循环 每个item添加时间
<div> <div v-for="(item,index) in 3" :key="index"> <strong><span class="span"></span>宝宝信息{{index+1}}</strong> <van-field readonly clickable name="datetimePicker" :value="item.bi原创 2020-06-22 09:58:37 · 1007 阅读 · 3 评论 -
element UI Cascader 级联选择器
<el-form-item label="跳转分类"> <el-cascader style="width: 300px;" v-model="item.value" :options="options" :props= selectReleaseProps @change="handleChange"></el-cascader> </el-form-item>data() { r原创 2020-06-11 16:13:29 · 229 阅读 · 0 评论 -
仿支付宝我的银行卡动态切换效果
效果图:HTML代码,css写的有点冗余,下面有vue版本的用到了sass<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...原创 2020-04-13 11:59:17 · 1257 阅读 · 0 评论 -
vue+elementui upload手动上传图片
<el-form-item label="截图"> <el-upload class="upload-demo" accept="image/png,image/jpg,image/jpeg" ref="upload" :file-list="fileLists" ...原创 2020-03-27 11:36:42 · 2005 阅读 · 0 评论 -
elementUI DatePicker 日期选择器不能选择当天以前的时间
<el-form-item label="下次跟进时间" prop="formDateTime"> <el-date-picker v-model="formName.formDateTime" type="date" :picker-options="pickerOptions" ...原创 2020-03-26 16:27:03 · 5213 阅读 · 6 评论 -
elementUI实现省级联动
<div class="block"> <span class="demonstration">现居住地:</span> <el-cascader v-model="valueCity" :props="{value: 'label',label:'label'}"...原创 2020-03-19 12:04:56 · 861 阅读 · 5 评论 -
Atom编辑器 vue 文件高亮
放张图吧 显得清晰一点 。我的是汉化的:选择扩展包- settings view - open - 输入language-vue 安装即可。原创 2019-11-08 11:51:02 · 212 阅读 · 0 评论 -
nuxt 安装教程
1、打开命令符 如图:我是新建到E盘的。。。。。[html] view plain copye: 然后[html] view plain copycd E:\work 3、[html] view plain copynpm install -g vue-cli 4、[html] view plain copyvue init nuxt/starter project 5、[html] v...原创 2018-03-05 11:20:32 · 2310 阅读 · 0 评论 -
elementUI select 默认选中
v-model的值为当前被选中的el-option的 value 属性值<template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label=&quo原创 2018-03-12 13:38:54 · 91191 阅读 · 7 评论 -
vue生命周期
Vue把整个生命周期划分为创建、挂载、更新、销毁等阶段,每个阶段都会给一些“钩子”让我们来做一些我们想实现的动作。学习实例的生命周期,能帮助我们理解vue实例的运作机制,更好地合理利用各个钩子来完成我们的业务代码。我们分别来看看这几个阶段:1. beforeCreate此阶段为实例初始化之后,此时的数据观察和事件配置都没好准备好。我们试着console一下实例的数据data和...原创 2018-03-20 13:59:16 · 436 阅读 · 0 评论 -
Vue一定会用到的10个指令
在实战中一定会用到的10个指令,没错,是一定会用到。1. v-text 指令 v-text 指令用于更新标签包含的文本,它的作用跟双大括号的效果一样。我们看看它的用法: <div id="app"> <p v-text="msg"></p> </div> <script> let app = new Vue({ el原创 2018-03-21 11:49:00 · 459 阅读 · 0 评论