- 博客(9)
- 收藏
- 关注
原创 仿(京东、淘宝)顶部分类展示列表
仿(京东、淘宝)顶部分类展示列表人生最精彩的不是实现梦想的瞬间,而是坚持梦想的过程效果图如下最近在项目中遇到一个分类展示的需求,看了别人的案例总是觉得有些看不懂,所以自己封装了一个组件去使用。这个东西我们一般都是封装起来去使用,所以本人也封装了起来,供大家使用。<template> <div class="search-condition-comp"> <div class="title">{{ typeCondition }}: </div&
2021-01-26 14:47:48
314
原创 calc()使用用法
calc()使用用法calc()是css3的一个新增的功能,用来指定元素的长度。它是动态设置元素值,可由加减乘除算法得到最后计算值。比如说“width:calc(50% + 5em)”在使用less解析中calc运算会忽略单位出现:“width:calc(50% - 5em)” 解析为 “width:calc(45%)”的情况修改方法:width:calc(~“50% - 5em”)修改方法:width:calc(~“50% - 5px”)修改方法:width:calc(~“50% - 5r
2021-01-22 16:50:39
2283
原创 Vue 中基于element-ui二次封装Pagination分页组件
Vue 中基于element-ui二次封装Pagination分页组件<template> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1, 2, 5, 10]" :page-size="pageSize" :layout="la
2021-01-21 16:36:24
712
原创 Vue项目中优雅的使用svg图表
Svg的使用第一步肯定要下载安装npm install svg-sprite-loader --save-dev然后在src下面新建文件夹svg里面放的是使用阿里矢量图标库里的下载图标文件附图标网址:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2下载文件后复制粘贴到svg文件下index.js中文件代码如下:不用纠结直接复制import Vue from 'vue'import SvgIcon fr
2021-01-21 11:08:11
723
原创 Vue使用element-ui tab切换echarts解决宽度100%问题
element-ui 使用el-tab组件注意事项这里面每一个tab页使用echarts都会存在echarts设置百分比自适应问题设置100%后只有100px的样子缩到一起,解决办法是:1. 第一种 解决:通过 v-if 重新渲染组件即可。2. 延时调用echart的resize()方法即可methods:{ handleClick(tab, event) { if (tab.name === 'second') { this.$nextTick(() =&
2021-01-20 11:56:52
1282
2
原创 echarts之init报错
echarts安装后报init错误解决方法@TOCinit报错查看package.json文件中echarts版本,如果是5.0以上的版本请卸载安装指定版本4.2.1,然后就不会报错了
2021-01-20 11:12:15
8687
9
原创 基于element-ui搜索框按钮的二次封装
这是我基于element封装的第一个组件——搜索框组件定义组件1. 此组件可以传递placeholder2. 定义了一个搜索框事件项目中执行 npm i element-ui -S (安装)在main.js中写入/* 引入element */import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'/* 运用 ElementUI */Vue.use(ElementUI)开始
2020-12-18 15:45:14
1433
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人