![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端VUE项目
丿Mr_Liu
这个作者很懒,什么都没留下…
展开
-
vue2 使用@vue/composition-api依赖包 编译、打包各种报错
vue2 使用 @vue/composition-api 依赖包 编译时报错原创 2023-01-18 16:10:25 · 3079 阅读 · 1 评论 -
vue 列表 懒加载
// 代码可以直接使用,请根据自己的需求,修改页面布局<template> <div class="task-list"> <div v-for="(item, index) of items" :key="index" class="item"> <div class="left-side"> <image :src="item.imageUrl"></image> </di原创 2021-09-27 14:08:50 · 1789 阅读 · 0 评论 -
vue 项目 将 javascript 切换 typescript
vue 项目 将 javascript 切换 typescript步骤:1:添加 tsconfig.json 文件// tsconfig.json 文件{"compilerOptions": { "target": "es6", "module": "es6", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "allowJs": true,原创 2021-04-08 16:16:22 · 842 阅读 · 0 评论 -
el-table 多选 选中数据动态回显
实现后的效果:需求表格展示数据,选中的数据展示在表格下方,点击删除图标删除选中的数据,需要同步到table中更新选中状态index.vue<template> <el-button @click="handleClick()" > 按钮</el-button> <table-dialog ref="tableDialog " :wildAxios="wildAxios" @callback="handleCallback"></table原创 2021-03-11 11:00:41 · 2826 阅读 · 0 评论 -
使用vue render jsx 实现element-ui table组件合并表头功能
实现后的效果图先安装 jsx 的依赖包npm install postcss-loader autoprefixer babel-loader babel-core配置 babel.config.js 文件中添加// babel.config.jsmodule.exports = { "presets": [...], "plugins": [...], 'env': { "text": { "presets": ["es2015"], "pl原创 2020-08-28 11:22:04 · 1104 阅读 · 0 评论 -
vue.js 自定义指令(拖拽、拖动、移动) 指令 v-drag
main.js文件中添加已下代码Vue.directive('drag', { //1.指令绑定到元素上回立刻执行bind函数,只执行一次 //2.每个函数中第一个参数永远是el,表示绑定指令的元素,el参数是原生js对象 //3.通过el.focus()是无法获取焦点的,因为只有插入DOM后才生效 bind: function (el) { }, //inserted表...原创 2020-03-06 09:52:06 · 9834 阅读 · 0 评论 -
vue项目使用vue-echart图表,实现根据页面高度自动计算图表高度
1.html代码<div class="widget-index"> <div ref="vueLine" class="vue-line"> <ve-line ref="lineChart" :data="chartData" :height="height" ></ve-line> &l...原创 2019-11-19 11:22:37 · 1845 阅读 · 0 评论 -
vue自定义指令(directive )并传参
使用场景:项目中的权限控制自定义指令 index.jsimport store from '@/store'/** * 权限指令 * @param {*} el 当前dom对象 * @param {*} binding 指令参数 * * 指令使用 v-permissions="'code'" * 其中 code 为传的参数 * 在指令中通过 binding.value...原创 2019-11-07 12:14:48 · 5844 阅读 · 0 评论 -
element-ui table 动态合并单元格
1.效果图如下:2.html 代码:// html代码:<template> <div> <el-table border ref="table" :data="dataList" style="width: 100%" :span-method="objectSpanMethod" :header-cell-style="{bac...原创 2019-11-05 11:13:33 · 2873 阅读 · 0 评论 -
vue.js 实现form、ul、列表元素的拖拽
vue.js 实现form、ul、列表元素的拖拽排序1:引入 vuedraggable 插件npm install vuedraggable --save2:组件中引入 vuedraggable<script>import Draggable from 'vuedraggable'export default { components: { Draggable...原创 2019-10-30 14:55:17 · 928 阅读 · 2 评论 -
Vue 中实现 div 在页面滚动后停留在页面固定位置
实现效果如下:需要设置的vue组件<script>export default { // 页面创建钩子函数中添加事件监听 created() { this.listenerFunction() }, methods: { // 事件监听 监听页面的 scroll 事件,回调方法为 handleScroll listenerFun...原创 2019-10-18 15:17:41 · 6964 阅读 · 0 评论 -
vue.js echrts饼图实现百分比
显示效果组件调用<template> <div> 总数1<el-input-number v-model="total1"></el-input-number> 数量1<el-input-number v-model="num1"></el-input-number> &a原创 2018-12-18 11:39:34 · 2052 阅读 · 0 评论 -
VUE 同一个组件切换 实现DOM更新
VUE 同一个组件切换 实现DOM更新在使用vue.js开发时遇到共用一个组件,数据相同,只是展示的内容不同。但是在每次切换时,必须执行DOM更新。 如果你遇到这个问题时,可以试试在切换时 使用 v-if 来判断,官方文档中说是:v-if “真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做—...原创 2018-11-13 12:04:58 · 1703 阅读 · 0 评论 -
vue.js + element UI实现表格、列表的拖动 推拽效果
VUE项目ElementUI基于sortablejs实现表格列的推拽效果在开发使用vue.js、elementUI开发项目时,客户提出将表格中的内容可随意拖动实现排序功能。于是项目中采用sortablejs来实现该功能。1.引入sortablejs $ npm install sortablejs --save2.组件中引入sortablejs &amp;amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;a原创 2018-11-14 15:52:13 · 4398 阅读 · 6 评论