![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
晒黑的小神仙
这个作者很懒,什么都没留下…
展开
-
Radash 中文文档 整理常用 API
正在替代 lodash 的新JS工具。按字母顺序, 正序倒序排列。原创 2024-04-02 15:40:17 · 1501 阅读 · 0 评论 -
vue3上传图片,限制图片尺寸
vue3使用element plus 上传图片限制尺寸原创 2022-10-25 17:09:09 · 2272 阅读 · 0 评论 -
uniapp的H5页面, 隐藏黑色弹窗
uniapp的H5页面, 隐藏黑色弹窗原创 2022-07-08 13:58:18 · 304 阅读 · 0 评论 -
uniapp 输入框兑换码正则验证只能大写字母和数字
uniapp 输入框兑换码正则验证只能大写字母和数字原创 2022-06-22 16:50:23 · 528 阅读 · 0 评论 -
Vue封装组件接收不同数据渲染
父组件 :<!-- 分页器组件 -->// 定义一个传递数据的名称 --> total// 传递的数据为 --> simTotal<paging :total="simTotal"></paging>子组件 :<template> <div class="main"> <!-- 分页器组件 --> <el-pagination @size-change="handl原创 2022-04-28 09:58:18 · 383 阅读 · 0 评论 -
element的el-input出现无法输入的bug
在某位传说级大佬 的指点下,解决了该bug问题 :在 el-table 中使用了 el-input , el-table 外层还嵌套了多层 el- 组件原因 : 嵌套的 el- 组件太多解决 :1. 在el-table的el-table-column中,使用template slot-scope="scope"插槽,再将el-input放入其中2.将el-input绑定的数据,存放在el-table的 :data数据中<el-...原创 2022-04-26 17:54:09 · 2300 阅读 · 0 评论 -
element中dialog里放tree增加滚动条
样式层 less : /deep/ .el-dialog { width: 20% !important; ::-webkit-scrollbar { width: 3px; height: 1px; } ::-webkit-scrollbar-thumb { //滑块部分 border-radius: 5px; background-color: #c1c1c1; } ::-webkit-scrollbar-track { ...原创 2022-04-22 18:58:51 · 503 阅读 · 0 评论 -
element分页器组件刷新父组件重置页数无效已解决
问题 :将分页器组件封装为组件在父组件刷新时, 虽然使用传参改变了分页器组件的页数, 可是只有第一次刷新父组件时页数会重置, 之后再改变页数刷新, 则页数不会重置解决 :给分页器组件中 添加 v-if , 在重置分页器组件页数时, 在父组件或分页器组件中控制一次true和false, 来刷新组件<!-- 分页器组件 --><el-pagination v-if="showPage" @size-change="handleSizeChange"原创 2022-04-19 18:40:35 · 1056 阅读 · 0 评论 -
使用vuex传递总页数到element 分页器组件报类型错误
问题 :使用vuex传递总页数到element 分页器组件报类型错误原因 :element 分页器 total 只支持 String 和 Number 类型解决 :1. 在vuex传过来之前转成Number类型// 提取商品总页数simTotal(state) { let total = state.goodsList.total; return Number(total);}或者2. 在传到分页器后转换成 Number 类型再渲染...原创 2022-04-19 17:11:27 · 194 阅读 · 0 评论 -
element中el-select中的remove-tag移除标签事件携带的参数
结构层 :remove-tag事件方法, 不需要携带参数<el-select v-model="valueTags" filterable placeholder="请选择标签" multiple @remove-tag="removeTag"> <el-option v-for="item in simTagList" :key="item.id" :label="item.title" :value="item.id"..原创 2022-04-18 18:55:06 · 8233 阅读 · 2 评论 -
在vuex中对数组对象合并或添加属性后,在组件中直接调用渲染报错,数组对象显示{__ob__: Observer},解决方法
问题 :vuex中的代码// 提取选择商品框的数据 simOnSaleList(state) { let onSaleList = state.goodsList.onsale_yds_ls; // for (let i = 0; i < onSaleList.length; i++) { // onSaleList[i].is_stock = ""; // } let res = onSaleList.map(item => { .原创 2022-04-18 15:56:59 · 707 阅读 · 0 评论 -
vue接口多个参数多个组件互动导致数据渲染混乱bug
问题 :当接口参数太多时候, 组件太多的时候, 参数变化条件很多的时候会出现事件队列混乱, 数据混乱解决方法 :1. 减少事件队列, 接口直接写到渲染数据的组件里, 不让接口数据在其它组件再传到渲染数据的组件里2. 尽量不要使用vuex传参, 直接使用兄弟组件传参, 可以更直观的看到事件队列执行顺序3. 判断数据渲染的条件, 要细心耐心, 做好条件判断再渲染数据4. 当数据走到哪一步, 一定要打印出来看一看, 一个也不能丢掉5. 接口要使用带参数的接口方法, 这样就可以控原创 2022-04-02 15:45:43 · 1840 阅读 · 0 评论 -
vuex传过来的数据存入本地缓存并提取
computed: { ...mapState('vuex子仓库名', ['allList']), localAllList() { uni.setStorageSync('allList', JSON.stringify(this.allList)); return JSON.parse(uni.getStorageSync('allList') || '[]'); },使用时直接当做计算属性使用即可原创 2022-04-01 14:34:30 · 2691 阅读 · 0 评论 -
uniapp实现组件滚动条瀑布流加载
效果 :滚动条触底后,将上一页的数据与下一页的数据合并,滚动条也会自动跳到页数合并的中间实现步骤 :1. 使用 uni-app 提供的标签 scroll-view2. scroll-view 标签提供了添加滚动条属性 scroll-y3. scroll-view 标签提供了 下拉上拉触底事件 或 自定义刷新事件4.在触底刷新事件中,增加page页数属性,并将page属性传给接口5.每次触底刷新,接口返回的数据,使用数组API ---> conca...原创 2022-03-31 14:27:13 · 2028 阅读 · 0 评论 -
uni-app实现滚动区域
效果 :子组件 children 结构层 :// 给父级标签使用 scroll-view , 添加 scroll-y 属性<scroll-view scroll-y> <view class="list" v-for="(item, index) in list" :key="index" > {{ item }} </view></scroll-view>父组件 parents 结构层 :<v.原创 2022-03-31 10:18:46 · 1427 阅读 · 0 评论 -
watch无法监听vuex传过来的对象数据
问题 :在组件中接收vuex传过来的对象, 使用watch监听,无法监听到变化原因 :因为对象的地址是一样的, watch要监听地址变化解决 :使用深拷贝, 将vuex传过来的对象深拷贝一份computed: { ...mapState('depotScope', ['depotScope']), params() { return JSON.parse(JSON.stringify(this.depotScope)); },},watch: { params(ne原创 2022-03-30 20:36:10 · 1543 阅读 · 0 评论 -
elementUI时间选择器时间格式及时间数据获取
结构层 :// 输入框内的时间格式format="yyyy-M-d"// 选择时间获取的时间格式value-format="yyyy-M-d"// 点击选择时间后储存时间数据的事件@change="chooseTimeRange"<el-date-picker v-model="timeStage" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日原创 2022-03-30 10:03:37 · 5957 阅读 · 0 评论 -
ElementUI按需引入
1. 安装 babel-plugin-componentnpm install babel-plugin-component -D2. 在项目目录下创建elementUi /index.js目录及文件elementUi / index.js// 里面的这些 MessageBox Dropdown 都是 element 组件库标签的驼峰写法import { MessageBox, Message, Dropdown, DropdownMenu, DropdownItem } ...原创 2022-03-29 11:52:11 · 1636 阅读 · 1 评论 -
Vue节点动态添加样式类
<template> <view class="context"> <block v-for="(item,index) in List" :key="index"> <view :class="['depot', index !== 0 ? 'canChose' : '']"> <view>{{ item.name }}</view> </view> </block> <.原创 2022-03-28 19:06:35 · 552 阅读 · 0 评论 -
Vue使用$refs实现父子组件通信
父组件 :<template> <view> <children ref="children"></children> </view></template><script>import children from './children'data(){ return{ List:[1,2,3] }}methods:{ diffuseValues(){原创 2022-03-28 17:22:53 · 1097 阅读 · 0 评论