![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
效果实现
時間不夠以後
越努力越幸运……
展开
-
常见布局样式
常见布局样式原创 2022-09-06 17:25:21 · 274 阅读 · 1 评论 -
自定义Autocomplete
原生自定义实现Autocomplete组件原创 2022-08-17 11:29:05 · 187 阅读 · 0 评论 -
自定义插入页面标签以及实现类似通讯录的首字母搜索
对某个页面实现自定义标签的添加功能,同时支持动态的已有数据提示.其次对所有已有的标签实现类似于通讯录首字母搜索的功能原创 2022-06-27 19:24:30 · 137 阅读 · 0 评论 -
iview table单个单元格编辑
实现细节<template> <div> <Table :columns="columns" :data="data" border ></Table> <br> <div style="text-align: center;"> <Button @click="submit" type="primary">Submit</Bu...原创 2022-04-18 16:09:49 · 835 阅读 · 0 评论 -
v-for 自定义展开收缩div
<template> <div> <div class="main_area"> <div v-for="(item, index) in helpList" :key="index"> <div class="content_main"> <div class="content_text"> <div class="content_title".原创 2022-02-16 15:03:33 · 358 阅读 · 0 评论 -
vue 全屏效果实现
安装依赖 npm install --save screenfull在需要的界面导入 import screenfull from 'screenfull'实现效果具体实现<template> <div> <div ref="content" class="content"> <Tooltip :content="isFullscreen ? `取消全屏` : `全屏`" placement="bottom"> .原创 2022-01-07 11:28:49 · 709 阅读 · 0 评论 -
iview poptip 外部input的实现
在开发中,我们期望带有poptip的input可以占满100%的宽度(图1),但实际使用的时候poptip包含组件的方法,会发现并没有达到期望的效果(图2)图1图2解决方案:将input移出<template> <br> <br> <Row> <Col span="8" style="border:1px solid #bed742;"> <Input v-model="value1" :aut原创 2021-12-27 20:46:55 · 399 阅读 · 0 评论 -
canvas 封装chart —— 绘制权重比例得分图
废话不多说,先整目标效果图开发需求:期望上述完成效果图的组件封装数据格式: // 其中颜色可传可不传,不传的话,按照封装的组件中,随机生成颜色 scores: [60, 60, 50, 20, 10, 32, 88], // 必须的 // 格式1 myOptions: { radius: 60, width: 300, height: 200, data: [ { weighting: 20, title: '语文' }, { weighti原创 2021-12-15 15:20:47 · 1572 阅读 · 0 评论 -
iview 小功能效果实现
table render渲染数据,并可修改数据提交。demo原创 2021-12-10 15:02:26 · 188 阅读 · 0 评论 -
vue 项目中 v-for渲染的对应card点击切换显示,且对应card加选中样式
默认展示效果点击对应卡片:<template> <Row :gutter="8" style="margin-top: 14px;clear: both;"> <Col :xs="24" :sm="12" :md="8" :lg="4" v-for="(item, index) in curPageData" :key="index" > <Card s.原创 2021-12-02 11:49:06 · 918 阅读 · 0 评论 -
iview - tree节点的相关操作
最新有一个新的需求,即在iview tree的自定义节点基础上,对当前节点进行相关的操作,参考相关博客,整理了以下两种方案。右键弹出相关操作按钮 参考博客实现细节:<template> <div> <Tree :data="kindData" :render="renderContent" ></Tree> <Button type="primary" @click=原创 2021-11-09 18:11:00 · 1330 阅读 · 0 评论 -
嵌套tabs的使用:外层切换,导致内层tabs显示空白的问题
异常显示效果:根据iview官网中对tabs的属性,当嵌套使用 Tabs,设置该属性指向对应 Tabs 的 name 字段使用方法:<Tabs type="card" name="outTabs" value="tab1-1"> <TabPane label="tab1-1" name="tab1-1" tab="outTabs"> <Tabs name="innerTabs" value="tab2-1"> <TabPane label原创 2021-10-15 16:15:10 · 769 阅读 · 0 评论 -
iview-table实现自适应高度渲染表格条数
实现效果:<template> <div :style="{ height: scrollerHeight + 'px' }"> <div> <Input v-model="searchForm.name" icon="md-search" style="width: 30%;" @keyup.enter.native="search()"></Input> </div> <br>原创 2021-10-13 18:02:44 · 380 阅读 · 0 评论 -
iview-select 鼠标移入option,显示对应操作
目标效果:<template> <Select v-model="selectObj" filterable clearable style="width: 300px;" > <OptionGroup label="--- 测试1 ---"> <Option v-for="item in selectOptions1" :value="item.value"原创 2021-09-29 15:54:36 · 406 阅读 · 0 评论 -
vue路由跳转白屏问题
当前问题: 比如当前路由为: `/projectDetail?Id=1&name=页面1` 通过页面改变了路由参数Id `/projectDetail?Id=2&name=页面1` 此时做的操作是: this.$router.push({ name: 'projectDetail', query: { Id: this.id, name: this.name } }) this.$router.go(0) 在这种情况下,会导致页面整体刷新,且出原创 2021-09-23 15:10:04 · 6869 阅读 · 0 评论 -
前端随机密码生成 + 内容复制
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #button { font-family: sans-serif; font-size: 15px; margin-top: 20px; border: 2px solid rgb(20.原创 2021-08-09 10:19:00 · 337 阅读 · 0 评论 -
vue - axios 取消仍在pending中的接口
需求:tabs切换时,调用相同接口(参数不同)渲染图表数据。(每 3s 请求一次)存在问题:在tabs切换的时候,因为定时器的原因,接口数据仍在pending,导致切换之后的图表第一条数据仍为上一个tabs的数据解决方案:第二次请求接口时,取消上一次请求。axios官方手册第一次未结束,不允许第二次请求定义一个变量,判断此时tabs是否切换,做对应的数据渲染具体js实现:取消上一次接口请求实现细节import axios from 'axios'export原创 2021-08-06 16:07:22 · 1660 阅读 · 1 评论 -
实现简易计算器
问题描述:1、除法操作时,如果被除数为0,则结果为02、结果如果为小数,最多保留小数点后两位,如2 / 3 =0.67(显示0.67),1 / 2 = 0.5(显示0.5)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>百度笔试0329</ti...原创 2020-03-29 21:44:44 · 311 阅读 · 2 评论 -
渐变
线性渐变<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>线性渐变</title> <style> .border1{ width:...原创 2020-03-29 21:56:18 · 83 阅读 · 0 评论