![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
doit_damao
顺其自然,是竭尽所能之后的不强求,而非两手一摊的不作为~
展开
-
a-select中placeholder设置无效的解决办法(两种情况)
需求:1. a-select绑定基础类型数据 2. a-select使用了labelInValue,绑定的数据类型为object方式一:只取option的value值<a-select placeholder="请选择功能类型" v-model="submitObj.operation" @change="typeChange"> <a-select-option v-for="(item, index) in o...原创 2020-12-10 14:43:33 · 6384 阅读 · 0 评论 -
使用Vue + ant-design + Cropper二次封装一个公共图片裁剪组件
效果展示:代码实现:(cropper安装、上传图片方法请自行百度)<template> <div class="cut-img-container"> <!-- 裁剪后图片展示、预览、删除,选取裁剪图片 --> <div v-if="afterCutImgUrl && afterCutImgUrl !== '--'" class="item-img-container"> &l..原创 2020-07-27 10:20:39 · 606 阅读 · 0 评论 -
解决模糊搜索接口返回的数据与页面显示不对应的问题
问题:使用ant-design中select的search方法,添加模糊搜索时,接口即时请求了,但是页面绑定的数据未更新为最新的(比如: 按键输入123时,需要展示为“123”的搜索结果空数组,但是页面并没更新为空);经排查发现此次模糊搜索会发送三个接口请求,但是“123”无结果数据,“1”的有数据返回最慢,导致页面绑定的变量展示的是“1”的搜索结果。解决办法:<a-select placeholder="请选择对象名称" showSearch :fi原创 2020-07-26 17:44:05 · 643 阅读 · 0 评论 -
Vue中定制公共组件之modal
需求:整个项目的modal统一风格(本文以ant design of vue为例)commonModal组件:<template> <a-modal :title="modalTitle" centered :maskClosable="false" :visible="showModal" ...原创 2019-09-20 15:58:46 · 2832 阅读 · 0 评论 -
Vue中定制公共组件之loading
需求:在页面加载前或者请求响应之前使用loadingcommonLoading组件:<template> <section> <div class="common-loading"> <div class="loading-container"> <img src="../../assets...原创 2019-09-20 15:33:07 · 371 阅读 · 0 评论 -
iview中table排序数据混乱的问题
需求:下图中的“现价”以及“涨跌幅”可根据数值大小排序(下面以“现价”为例)第一次处理:排序触发,但是数据没有排序正确(代码如下)Html部分:<div class="list-main"> <Table stripe class="order-table" :columns="historyColumns" ...原创 2019-08-22 09:59:15 · 2047 阅读 · 1 评论 -
Vue中鼠标悬浮切换图片src
需求:1. 鼠标悬浮到图示按钮上面,图片切换成灰色按钮 2. 鼠标离开图示按钮,图片切换成回白色按钮Html部分:<!-- 如果此处的两个鼠标事件不生效,可以在mouseenter后面添加.native后缀 --><div class="left-btn" @click="saveTemplate()" @mousee...原创 2019-08-05 16:46:04 · 5359 阅读 · 0 评论 -
Vue中使用router.meta.keepAlive对页面进行缓存
需求:1. 从stockList页面到stockInfo页面,从stockInfo页面返回stockList,缓存stockList页面 2. 从其他页面进入到stockList页面,则不缓存stockList页面路由配置文件中:{ path: '/stockSelectionAndDiagnosticStocks', name: 'stockSelecti...原创 2019-07-02 15:26:52 · 20489 阅读 · 4 评论 -
Vue中使用js制作进度条式数据对比动画
实现的效果:(初始化以及浏览器resize的时候两侧的条形为向两侧递增的动画,其中两端的数字也是递增的动画)HTML部分:<div class="no-ivatargo-chart-b"> <div class="investment-ability"> <div class="title"> <span>您的投...原创 2019-06-12 10:54:46 · 1604 阅读 · 0 评论 -
Vue中使用echarts定制特殊的仪表盘
实现的效果:(初始化以及浏览器resize的时候数字和弧形条均为递增动画)HTML部分:<!-- 为ECharts准备一个具备大小(宽高)的Dom --><div class="main-echarts-contianer" ref="main"></div>CSS部分:.main-echarts-contianer { ...原创 2019-06-10 15:31:27 · 4476 阅读 · 0 评论 -
Vue中对过滤器的简化
需求:在页面某个地方,需要将后台传过来的数值型数据转换为对应字符串显示到页面上(以管道符的过滤器为例){{experienceUnit | experienceUnitFilter}}优化前:用常规的if...else...或者switch语句experienceUnitFilter (date) { let dateTime = date switch (parseInt(...原创 2019-04-23 11:08:00 · 171 阅读 · 0 评论 -
Vue中评论列表里的文字实现“查看全文”效果,超过100字的部分自动隐藏,点击“查看全文”之后再显示当前评论全部文字
效果图:解决方法:1.遍历获得的列表数据,给每个评论以及评论的第一个回复,添加一个新属性2.根据这个属性值(true or false),给文字显示两种css(超过100字的以及少于100字的)3.点击"查看全文",遍历列表数据,根据id比对,将对应id的这个新属性的属性值取反代码如下:Html部分:<div class="item-body"> &...原创 2018-11-23 17:23:56 · 8003 阅读 · 2 评论 -
Vue中动态样式绑定的经典用法举例( :style以及 :class)
需求:在当前企业名片主题 (EnterpriseTheme) 为 'qinglianxiyu' 时,该组件所占位置的 margin-top 为'0';其他情况为'260px'。1.用:style的方式HTML部分:<!-- 注意此处的属性名,需用驼峰式而不能用连接符式 --><div :style="{marginTop: theMarginTop}" ...原创 2018-06-12 15:40:37 · 5340 阅读 · 1 评论 -
使用js,对数值保留小数点后两位的处理(两种情况)
Html部分:<div class="text primary-text"> <span>合计:</span> <span class="money">¥{{totalMoney | numFilter}}</span></div>Js部分:(注意toFixed方法只能用于数值型数据)// 情况一:保留...原创 2018-05-21 09:57:47 · 87426 阅读 · 8 评论