前端框架小领地
含有各类框架的小问题、遇到的知识点
黎轩栀海
只是简单的随心记录,不喜勿喷。。。
展开
-
Element-UI 下拉框单选转多选回显不清空绑定的值
单选和多选这两个 input 看上去没差别(自身和层级都一致),vue出于提高性能,所以 vue 给复用了。根据radio切换来更改下拉框是否多选。原创 2024-04-11 09:42:00 · 222 阅读 · 0 评论 -
vue 实现数字验证码功能
【代码】vue 实现数字验证码功能。原创 2023-09-26 15:36:36 · 777 阅读 · 0 评论 -
vue 前端生成唯一标识 —— guid
(下文引用网友dalmeeme 评论:)Guid的总数非常大,以目前速度的计算机,产生的两个Guid(产生在2个时刻或2个不同地方)基本上不会重复。假定在计算机上,平均1ns能产生一个,那么不断产生1年,共产生365*24*3600*1000*1000*1000=3.1536*10^16。假定全球有100亿台计算机参与产生,那么共产生3.1536*10^26个Guid。连续产生100年,也只有产生3.1536*10^28个Guid。所以以目前全世界计算机的性能和总数,理论上能保证不重复。原创 2023-09-26 15:23:36 · 1176 阅读 · 0 评论 -
VUE 兄弟组件传值
testA组件接收到testB组件的值:(接收值使用$on)testB组件传值给testA组件:(传值使用$emit)1.在项目中创建一个bus.js文件,暴露一个vue实例。到这里其实使用bus总线实现兄弟组件之间的传值已经完成。2.在父组件中注册两个子组件testA、testB。3.在两个子组件中分别引入bus。testA.vue子组件。testB.vue子组件。转载 2023-02-24 14:27:26 · 6561 阅读 · 0 评论 -
前端 vant安装记录
接着你可以在代码中直接引入 Vant 组件,插件会自动将代码转化为按需引入的形式。2、安装 vant (可能安装最新的vant,vue 版本不支持)3. 引入组件 (在main.js 里面引入组件)原创 2023-02-21 15:38:35 · 473 阅读 · 0 评论 -
Element-UI 的Cascader 级联选择器使用的省市区数据源
Element-UI 的Cascader 级联选择器使用的数据源原创 2022-10-09 16:17:05 · 742 阅读 · 0 评论 -
Vux 适用于PopupPicker组件的最新所有省市区data
areaList可使用以下代码转好的放在项目里的静态数据。通过js转化转化成PopupPicker适用的格式。转载 2022-09-02 16:10:04 · 499 阅读 · 0 评论 -
VUX Datetime 组件compute-days-function动态设置日期列表
Datetime 组件compute-days-function动态设置日期列表原创 2022-07-28 15:54:13 · 573 阅读 · 0 评论 -
Element-UI el-form组件的@submit.native.prevent
el-form组件的@submit.native.prevent原创 2022-07-15 17:27:17 · 1743 阅读 · 0 评论 -
Element-UI el-input组件type=“number“的样式修改
el-input组件原创 2022-07-14 16:54:28 · 5776 阅读 · 0 评论 -
Element-UI 表单校验
表单验证规则原创 2022-07-13 18:02:10 · 3092 阅读 · 0 评论 -
Element-UI 一级菜单和下拉菜单
<!--导航菜单--> <el-menu :default-active="selectedMenu" @select="menuSelect" :unique-opened="true" :router="true" class="el-menu-vertical-demo" :collapse="collapsed"> <template v-for="(item, index) in primaryMenus"> .原创 2022-05-05 14:46:02 · 1901 阅读 · 0 评论 -
Element-UI el-input组件只能输入数字的判断
<template> <div> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="rul...原创 2021-12-14 18:40:49 · 1796 阅读 · 0 评论 -
element-UI el-table组件的表格对某条数据的勾选
<template> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" :selectable='checkboxSelect'> </el-.原创 2021-12-10 16:11:49 · 1298 阅读 · 0 评论 -
element-UI el-dialog组件按ESC键关闭不了弹窗
我的代码<el-dialog :visible.sync="isShow" :modal="false"></el-dialog>点击“Esc”按键无法关闭弹窗,然后在官方例子中是可以按Esc关闭弹窗,去查看官方文档,如下:close-on-press-escape默认为“true” ,百思不得其解之后代码改为:<el-dialog :visible.sync="isShow" :modal="false" append-to-body>&原创 2021-12-07 16:37:30 · 5170 阅读 · 2 评论 -
vue项目中使用elementUI的el-tabs组件跳转卡死问题
解决方案1:在页面上使用了el-tabs元素的页面(log.vue),使用el-row el-col元素来包裹el-tabs元素,也可以解决页面卡死问题<tempalte> <div class="log-box"> <el-row> <el-col :span="24"> <el-tabs> <el-tab-pane>1111</el-tab-pane>转载 2021-10-11 19:34:35 · 2887 阅读 · 2 评论 -
uni-app 小程序开发
一、创建uni-app// 全局安装vue-clinpm install -g @vue/cli// 创建uni-appvue create -p dcloudio/uni-preset-vue my-project// 运行 npm run dev:mp-weixin二、样式和sass支持小程序的rpx和h5的vw、vh. rpx小程序中的单位 750rpx = 屏幕的宽度; vw是h5单位 100vw = 屏幕的宽度,100vh = 屏幕的高度; 内置有sass的配置.原创 2021-03-16 14:52:19 · 161 阅读 · 0 评论 -
taro 项目创建
Mac taro安装进入根目录cd /usr/local/lib/node_modules打开当前文件夹open .手动删除文件@tarojs安装指定版本sudo npm install -g @tarojs/[email protected]安装---最新---版本sudo npm install -g @tarojs/cli原创 2021-03-15 16:08:01 · 227 阅读 · 0 评论 -
vuex的拆分使用(详细)
将store拆分开,使state、getters、mutations、actions、都单独管理一、安装好vue和vuex二、构建目录在src目录下创建store文件夹,和六个js文件文件名 用处 state.js 里面存放所有的 state getters.js 里面存放所有的 getters mutations.js 里面存放所有的 mutations actions.js 里面存放所有的 actions index.js ...原创 2021-02-25 17:02:25 · 567 阅读 · 0 评论 -
vux框架 循环渲染flow组件
html:<flow> <template v-for="(i, index) in steps"> <flow-state :state="index + 1" :title="i.title" :is-done="i.isDone"></flow-state> <flow-line v-if="index != (steps.length - 1)" :is-done="i.lineDone" :tip="i.t.转载 2021-02-04 14:33:11 · 283 阅读 · 0 评论 -
Element-UI框架 —— Upload 上传(图片上传格式和大小判断)
<el-upload class="pic-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" ::on-success="handleUploadSuccess" :on-preview="handlePictureCardPreview"></el-upload>action:上传地址on-success:上传成功befo.原创 2020-12-09 11:44:16 · 2577 阅读 · 0 评论 -
Element-UI框架 —— Upload 上传(视频上传格式和大小判断)
<el-upload class="video-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="uploadVideoProcess" :before-upload="beforeUploadVideo"></el-upload>action:上传地址on-success:上传成功before-up.原创 2020-12-09 11:40:23 · 5047 阅读 · 0 评论