![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
小瓶子
前端小菜菜
展开
-
谷歌浏览器input默认填充的背景样式修改
输入框没有border的时候是正常的,但是如果加了border,在没有默认填充的情况,会把border覆盖掉一部分。给input添加内阴影。原创 2022-09-20 16:47:31 · 1226 阅读 · 0 评论 -
echarts 实现legend添加icon
实现的最终效果高中低是icon图,后面的数字是根据接口动态变化,可切换图例查看不同图例的数据。原创 2022-08-12 16:58:06 · 2825 阅读 · 0 评论 -
vue3+ts+echarts 实现svg渲染地图
vue3+ts+echarts 实现svg渲染地图+省市联动公司打算地图使用svg渲染,就做了个小demo,这是最后实现的效果。http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5可以生成svg格式的地图关键部分:1 registerMap(‘china’, { svg: chinasvg })原创 2022-03-03 10:41:20 · 4676 阅读 · 0 评论 -
vue element-ui利用多选框实现互斥的效果
利用element-ui的多选框,实现互斥的多选框。 <!-- 行 --> <el-row class="elRowStyle"> <div style=""> <span class="title">行维度:</span> <el-checkbox-group v-model="checkboxGroupH" @change="rowChange.原创 2021-07-20 11:25:53 · 2315 阅读 · 0 评论 -
element-ui select多选绑定回显值
这是要最后实现的效果。 <el-form-item label="机组名称" prop="unitName"> <el-select v-model="unitName" multiple placeholder="请选择" @change="unitChange" > <el-option v-for="item in jzmcOption" :key="item.unitId" .原创 2021-07-05 16:49:58 · 5731 阅读 · 0 评论 -
vue 使用Jsx封装elementui的分页组件
// 使用// import Pagination from '@common/components/uniCom/Pagination';// <Pagination// :total="total"// :page="listQuery.page"// :limit="listQuery.limit"// @size-change="sizeChange"// @limit-change="limitChange"// ></Pagination&g原创 2021-06-29 11:13:12 · 1119 阅读 · 2 评论 -
vue 表格懒加载
vue 表格懒加载 <el-table :key="tableKey" :data="tableData" border fit highlight-current-row style="width: 100%" :height="tableHeight" ref="editTable" > <el-table-column align="center"原创 2021-05-30 15:49:41 · 2205 阅读 · 2 评论 -
vue 插槽
vue的slot主要分三种,默认插槽,具名插槽,作用域插槽;使用插槽是在存在父子关系的组件中使用,我们可以在子组件中决定插槽的位置,同时子组件也可以给这些插槽的默认信息,当父组件中没有需要给子组件插槽插入信息时,显示的是子组件插槽定义的默认信息。1 默认插槽:<slot></slot>子组件在子组件中定义一个默认插槽:<template> <div class="container"> <span>我是子组件</原创 2021-03-18 15:36:31 · 376 阅读 · 0 评论 -
vue双层进度条效果
进度条用的是elemen-ui的进度条组件。本来打算用css实现,但是没有找到双层的示例,,,被迫用进度条组件完成双层的进度条。 <el-col :span="12" id="getHeight" ref="getHeight"> <div style="text-align: center" class="process"> <div> <span .原创 2020-11-16 12:49:06 · 834 阅读 · 0 评论 -
elementui日历组件实现可标记日历
这是最后实现的效果,需要用圈来标记日期,有红色的标记和黄色的标记,开始找了很多插件,但是没有找到合适的能实现效果了,最后看到了其他相似的例子实现了这个需求 <el-calendar v-model="value" class="cal"> <template slot="dateCell" slot-scope="{ date, data }"> <p v-if="handleS.原创 2020-11-16 12:41:00 · 9228 阅读 · 5 评论 -
vue实现在线客服功能(附完整代码)
公司需要在网站实现一个在线客服的功能,开始是用的jq实现的,但是!!!把代码拿到vue里使用的时候,Jq的事件一直没有办法触发,各种百度都没有结果然后就放弃了,最后找到一种很好的解决方法,完美实现了功能!!!还有感谢我的外援,哈哈哈哈哈,一直是我的后盾!!!!!!!!哈哈哈哈哈主要是循环info里的数据,通过type来判断显示机器人还是用户。用户发送消息后直接push进数组里即可...原创 2020-09-09 11:05:08 · 29685 阅读 · 18 评论