![](https://img-blog.csdnimg.cn/20190927151026427.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue 2 项目
用Vue实现的功能
王小王和他的小伙伴
前端开发
展开
-
vue 项目 前端实现大屏数字滚动效果
vue 项目 前端实现大屏数字滚动效果。内含完整代码,直接复制使用转载 2022-10-14 11:16:53 · 2494 阅读 · 0 评论 -
vue项目 -- element 表格添加多选框(禁用某一行),并且跨分页选择
需求:在表格中,有个多选框,需要选择数据,但是跨分页后,之前点选的数据就没有了,现在需要做个保存实现效果:代码:<el-table ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" :row-key="getRowKeys"> //指定row-key原创 2022-05-11 10:42:27 · 2657 阅读 · 1 评论 -
vue-项目 设置某一块区域 安卓显示 iphone、ipad不显示
实现效果:某一块区域,在安卓型号下可以正常显示,iphone、ipad不显示(公司需求是 下载的入口)可复制直接使用代码实现:<div v-show="cartoonClose"> <p>这里是显示或者不显示的区域</p></div><script>import { getOS } from "@/utils/common.js"; //引入封装的内容export default{ data() { return原创 2022-05-04 19:08:19 · 864 阅读 · 0 评论 -
vue项目 - element 后端配合实现分页效果
此功能是结合element组件去实现的,实现效果:实现代码: <div class="page"> <el-pagination ref="page" @size-change="handleSizeChange" :current-page="form2.pageNow" @current-change="handleCurrentChange" :page-s原创 2021-07-29 16:13:43 · 652 阅读 · 0 评论 -
vue项目 - 顶部栏 鼠标滑动 显示不同的顶部样式
使用的是vant插件安装插件npm i babel-plugin-import -D// 对于使用 babel7 的用户,可以在 babel.config.js 中配置module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ]};``````html<templa原创 2021-06-16 09:52:09 · 476 阅读 · 0 评论 -
vue项目 - 根据路由去做v-if v-else 的判断,设置显示隐藏
实现功能 : 封装的组件中,功能比较多,有些功能某些页面不需要,解决:可以通过路由去设置特定的页面功能不需要。代码实现:<div v-if='xians'> 这里是要显示的内容</div><div v-else> 这里是不需要显示的内容</div>//判断路由data(){ return { xians:this.$route.path.includes('/print') }}...原创 2021-06-16 10:20:52 · 2437 阅读 · 1 评论 -
vue项目 - uniapp 设置可切换中英文
需求:可以去切换中英文模式npm i vue-i18n显示:中文版英文版代码:main.jsimport VueI18n from 'vue-i18n';Vue.use(VueI18n)import languages from '@/common/lang'; //详见2const i18n = new VueI18n({ locale: uni.getStorageSync('lang') ? uni.getStorageSync('lang') : 'cn', //原创 2021-08-25 18:19:02 · 1872 阅读 · 1 评论 -
vue项目 - 利用HBuilderX打包成APP
1.使用 HBuilderX新创建项目 类型点选 为 5+App2.设置文件将新创建项目 自动生成的文件删除 仅保留manifest.json 文件。然后将自己的文件移入3,设置 manifest.json 文件。4.点击发行5.设置点选安卓或者iOS (ios设置需要证书,这里点选的是安卓)安卓设置6.开始进行打包返回下载地址就代表成功了点击下载地址发送到手机上即可安装参考;https://blog.csdn.net/blue_698/article/details/原创 2021-06-15 18:26:17 · 558 阅读 · 0 评论 -
vue项目 - element日期时间选择器快捷键+自定义外部选择按钮
实现效果:实现代码:<template> <div> <el-form class="dataForm" label-width="100px"> <el-form-item label="同步时间:"> <el-date-picker v-model="date" type="dateti原创 2021-06-24 16:20:04 · 1795 阅读 · 0 评论 -
Vue项目 + element - 前端分页加搜索(不依赖接口实现分页,接口一次性返回数据)
需求:后端一次性返回数据,前端实现分页效果,并且可以搜索,,,最左边懒和最右边栏固定,当窗口缩小时,产生滚动条原创 2021-11-12 17:48:57 · 2858 阅读 · 0 评论 -
vue项目 - uniapp 弹窗设置间隔时间 进入页面自动显示
需求:首次进入首页出现弹窗,设置多久后再次显示时间(比如 24 小时) 则·在这个时间段内不会再显示弹窗,24小时之后,再次进入,则弹出弹窗显示:代码:弹窗样式组件<home-Pop-Up :ad="PopUpAd" 传值弹窗内数据 :showFullAd="show['popUp']" 设置true 或者 false @close="close" 传值点击关闭事件></home-Pop-Up>data() { ret原创 2021-08-24 16:34:58 · 2857 阅读 · 0 评论 -
vue项目 - 实现循环div拖拽变换位置
实现效果:安装插件:npm install --save vue-class-componentnpm install --save vue-property-decorator实现代码:<template> <div class="test_wrapper" @dragover="dragover($event)"> <transition-group class="transition-wrapper" name="sort">原创 2021-06-24 16:31:27 · 435 阅读 · 2 评论 -
Vue项目 - element中el-table 设置表格高度自适应-滚动条
实现效果:代码:<el-table ref="table" :data="tableData" :height="tableHeight"></el-table>export default { data(){ return { tableHeight: 0, } }, mounted:function(){ this.$nextTick(function () {原创 2021-11-11 10:35:54 · 3666 阅读 · 0 评论 -
vue项目- v-lazy懒加载 图片没有出来之前 loding的图标占位
v-lazy 表示在图片没有出来之前,会有loding的图标去占位, 图标在main.js中设置步骤1.安装插件npm i vue-lazyload -S步骤2.全局配置// 懒加载,在图片数据还没有更新之前显示的loding图片,----import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, {// 第一种 直接设置图片 小公司----弊端:图片是盗取的,稳定性差// loading: "https://ss1.bdstat原创 2021-06-16 17:28:05 · 1996 阅读 · 0 评论 -
Vue项目 - 自动引入Vuex子模块
需求:当使用Vuex中modules的时候,需要自己去引入子模板的文件,如果文件比较多,手动引入比较麻烦,那么可以封装自动引入原先:代码实现:const files = require.context('.', false, /\.js$/)const modules = []files.keys().forEach(key => { if (key === './index.js') return const item = files(key).default modul原创 2021-08-25 17:38:23 · 586 阅读 · 0 评论 -
vue项目- 仿京东-功能整理
1.封装 axios1.安装插件 axios2.引入3.封装4.使用// 单独创建一个页面 全局配置import axios from 'axios'// axios的全局配置const instance = axios.create({ baseURL: 'http://localhost:3000/api api为数据接口中共同出现的', timeout: 10000})export default instanceimport axios from "全局配置原创 2021-06-07 09:59:55 · 1324 阅读 · 1 评论 -
vue项目 - 封装loding组件
一、需求问题在vue项目中,当在页面内容进行加载的时候,会进行请求数据,然后显示页面。在这个等待的过程中,会出现一段时间的白屏,我们可以通过加一个loading的效果,进行过渡,然后显示页面。<template><div> <!--没数据则 加载动画 --> <comloading v-if="watchflag"></comloading> <!--有数据则显示 设置样式 --> <div v-if="!wa原创 2021-06-16 18:48:07 · 725 阅读 · 0 评论 -
vue项目 - 使用eventBus 设置某一功能模块的显示和隐藏
vue项目组件使用的比较多,封装的组件,然而有些功能模块某些页面可能用不到,则可以通过v-if设置显示隐藏,如果组件嵌套过深,一层一层设置比较麻烦,可以使用eventbus 去设置显示于隐藏步骤 1----->设置总线机制 // 一般设置在man.js中import store from './store'Vue.prototype.eventBus = new Vue()步骤2 ---->设置底边栏的页面 <div v-if="is_show">需要隐藏的模块&l原创 2021-06-16 16:54:14 · 594 阅读 · 0 评论 -
vue项目 - echarts实现正负柱状图 多种样式 多种颜色
实现效果:代码:<template> <div class="model" ref="model"></div></template><script>export default { props: {}, data() { return { use: [], GetWindowInfo: { width: "", }, xSize: 18, };原创 2021-07-29 16:53:49 · 1070 阅读 · 0 评论