前端框架、插件
sunlizhen
这个作者很懒,什么都没留下…
展开
-
vue使用echarts出现tab切换echarts宽度变窄问题
在tabs切换中有echarts的话,我们会发现初始化的那个echarts是有宽度的,当点击tabs切换之后,切换过来的echarts只剩下100px的宽度。这是因为渲染的时机不对,我们需要在点击到当前切换的时候在echarts父级加载完毕之后在执行echarts,而不是在页面初始化的时候就把所有tabs里面的echarts都执行。因为echarts会根据父级给宽度,而在初始化页面的时候其他tabs切换是display:none;没有宽度,所以会发生以上问题解决方法第一种方法是我在网上找到的自己原创 2020-11-27 09:53:28 · 2797 阅读 · 0 评论 -
echarts 柱状图多维数组
<template> <div class="hello"> <div ref="manyBar" style="width: 600px;height:400px;"></div> </div></template><script>let seriesDatas = [[ 83, 56, 77, 99 ], [ 62, 55, 67, 82 ], [ 71, 45, 62, 79 ], [ 7.原创 2020-10-26 19:58:21 · 1628 阅读 · 0 评论 -
echarts渐变色实现方法
option: { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'line', ..原创 2020-10-26 16:55:50 · 1792 阅读 · 0 评论 -
vue 购物车合计效果
<template> <div class="wrap"> <el-table empty-text="购物车为空" :data="tableData" :summary-method="getSummaries" show-summary style="width: 100%"> <el-table-column label="商品名称" ...原创 2020-05-11 11:02:53 · 1047 阅读 · 0 评论 -
vue draggable 两个列表之间的拖拽
1.group 可以传入对象:object:{name,pull,put}2.name两个draggable节点中, group 的 name 是一样的, 就可以实现两个区域的相互拖拽.::group='{name: "menu", put: true}'3.pull:pull用来定义从这个列表容器移动出去的设置,true/false/'clone'/function tr...原创 2020-04-28 11:43:39 · 7097 阅读 · 1 评论 -
el-select 添加删除选项
clearable 是否可以清空选项 boolean — false <el-select v-model="formPersonnel.imkefugropuid" placeholder="请选择" :clearable="true"> <el-option v-for="item in options" :key="item...原创 2020-03-17 09:51:45 · 4208 阅读 · 0 评论 -
wangeditor 回显数据问题
editor.txt.html('<p>用 JS 设置的内容</p>')或者:this.editor.txt.html('<p>' + this.value + '</p>')设置的时候必须包裹在p标签里面 否则会出现 回车不换行的问题...原创 2020-03-13 18:27:13 · 9500 阅读 · 1 评论 -
vue集成wangeditor3.0版本 解决光标乱跳等问题
关于wangeditor的具体集成方法跟用法 可以参考官网http://www.wangeditor.com/<template lang="html"> <div class="editor"> <div ref="toolbar" class="toolbar"> </div> <div ref="edi...原创 2020-03-13 17:44:10 · 2145 阅读 · 2 评论 -
wangeditor 动态生成多个
父组件引用<editor-bar v-model="item.dicVal" :isClear="isClear" :index="index" @change="change" @deleteIndex="delWelLange"></editor-bar><div class="weLanguageTemWrap" v-for="(item,index...原创 2020-02-13 17:33:25 · 2051 阅读 · 1 评论 -
vuedraggable+element ui实现页面控件拖拽排序效果
<draggable v-model="filters" dragable="true" :move="getdata" @update="datadragEnd"><transition-group><el-col :span="8" v-for="filter in filters" :key="filter.filterKey" s...原创 2020-02-04 11:33:37 · 2258 阅读 · 0 评论 -
vue el-tree添加层级指示线
1.div中放个tree注意设置::indent="0",否则节点会出现较大缩进<div ref="treeDiv" class="tree-container"> <el-tree id="tree" class="tree" @node-click="treeNodeClick" :data="data" :indent="0" ...原创 2020-01-03 15:08:09 · 1704 阅读 · 0 评论 -
vue 拖拽draggable
<template> <div class="regionalMenu"> <div> <template slot="header"> 微信访客导航菜单 <el-popover placement="bottom-start" width="30...原创 2019-12-24 15:23:30 · 237 阅读 · 0 评论 -
vue 自定义省市联级插件
先上代码 代码有点乱 没来得及整理;效果在最下边<el-form-item label="包含省市"> <el-button v-for="(item, index) in form.checkProvince">{{ item }}<span class="el-icon-close" @click="deleteDataP(index)">&l...原创 2019-12-20 17:03:55 · 267 阅读 · 0 评论 -
在layui layer 弹出层中加载 layui table
<button data-method="setTop" data-type="auto" class="layui-btn layui-btn-normal proMent">属性管理</button>// 属性管理开始 layui.use(['layer','table'], function(){ var layer = layu...原创 2019-01-31 18:13:51 · 5688 阅读 · 0 评论 -
layui中弹出层中将确认按钮变为form表格的提交按钮
layer.open({ type : 1, title : '添加角色', area : [ '500px', '350px' ], shadeClose : true, // 点击遮罩关闭 content : html, btn : [ '保存', '取消' ], success :...转载 2019-02-01 17:35:00 · 1241 阅读 · 0 评论 -
高德地图 自定义点标记(marker) 图标大小
<!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"原创 2019-02-11 16:37:43 · 27929 阅读 · 3 评论 -
jQuey表单序列化
前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提交。而在处理复杂的表单时,需要一个一个区手动判断处理字段值,显得非常麻烦。接下来介绍的插件将解决这个问题。关于serializeJSON使用jquery.serializeJSON,可以在基于jQuery或者Zepto的页面中,调用.serializeJSON(...原创 2019-03-14 10:19:32 · 152 阅读 · 0 评论 -
Bootstrap 里的 popover 被挡住的解决方案
在代码中添加一个属性:data-container="body"即可。<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">hover over me</a>原创 2019-03-07 17:09:09 · 753 阅读 · 0 评论 -
layer 弹出层显示在top顶层
因为项目框架用了iframe,所以在用layer时,默认layer.open弹出的窗口只能在iframe子窗口区域显示。现在想让layer在父窗口或者说框架的最顶层显示,想到用top.layer.open或者parent.layer.open,但是没反应。后面想到应该是在父页面中没有导入layer.js文件,导入后就能正常显示在父窗口页面区域了。显示在顶层窗口top.layer.open({...原创 2019-03-19 09:59:14 · 5711 阅读 · 0 评论 -
使用ajaxfileupload.js上传文件
首先就是引入js和ajaxfileupload的文件,这个不需要多说。 然后就是ajax请求后台地址。代码如下: <div class="btn-file-box pos-rel"> <input type="file" id="upload" name="upload" style="font-size: 0;opacity: 0;width: 100...原创 2019-03-27 14:45:53 · 1688 阅读 · 0 评论 -
layui嵌套弹出层
<button data-method="setTop" data-type="auto" class="layui-btn layui-btn-normal proMent">属性管理</button> 被点击的按钮var active = { setTop: function(){ var that = this; //多...原创 2019-01-31 14:08:35 · 4871 阅读 · 0 评论