Vue
Vue
hy3528
这个作者很懒,什么都没留下…
展开
-
vue3 element-plus-admin中引入swiper使用
第一步:安装swiper第二步:在需要使用的页面上引入swiper组件注意:如果是js需要在页面中注册组件js示例ts示例 ts引入后直接使用即可第三步:在页面中使用</</</</原创 2024-05-07 09:33:13 · 817 阅读 · 0 评论 -
html中使用vant/element的插槽功能(slot)
把#input 替换为 Slot=‘input’vue-cli中写法。原创 2023-06-06 15:25:05 · 960 阅读 · 0 评论 -
vue-cli 兄弟组件传参、父子组件传参
2.在需要调用的页面引入(有几个页面需要使用就几个页面引入)parone和partwo是传给子组件页面的参数。$on(‘方法名’,data=>{ })1.创建子组件名称为tabbar.vue。1.子页面tabbar.vue 定义方法。$emit(‘方法名’,‘传值’)1.新建js文件(命名可随意)$emit(‘方法名’,传值)@方法名(为上面定义的方法名)注:data即为传过来的参数。2.父组件页面定义方法。注:方法名两边需对应。4.接受传值页面代码。2.在页面引入子组件。3.父组件使用子组件。原创 2023-02-22 16:42:14 · 398 阅读 · 1 评论 -
vue-cli打包增加版本号、时间戳等自定义参数
1.首先新建一个version.js页面。2.在vue.config.js 引入 version.js。3.在打包后的编译名称处增加自定义好的参数。时间戳同理,或者其他参数。原创 2022-11-21 14:07:27 · 1595 阅读 · 0 评论 -
vue-cli 项目 echarts 地图标点功能
参考echarts官网api文档:https://echarts.apache.org/zh/option.html#title地图标点,带数字显示效果图复制代码后可查看效果(提示:记得配置json)地图标点功能,分级别标点效果图复制代码后可查看效果......原创 2022-06-17 15:35:27 · 981 阅读 · 0 评论 -
vue动态获取$ref怎么写
for (let e = 0; e < this.addArtList.length; e++) { this.$refs[`mavon-${e}`] }原创 2022-02-22 10:29:35 · 562 阅读 · 0 评论 -
element table 表格组件增加前端分页
<el-table :data="giftDetailList.slice((giftDetailCurrentPage-1)*giftDetailPageSize,giftDetailCurrentPage*giftDetailPageSize)" height="700px" :header-cell-style="{backgroundColor:'#e6e6e6'}" border style="widt...原创 2022-01-19 16:54:39 · 333 阅读 · 0 评论 -
配置脚手架正式测试
在项目根目录新建三个env文件.env.development //开发环境.env.production //生产环境.env.test //测试环境.env.development(本地运行时)NODE_ENV = 'development'VUE_APP_MODE = 'development'VUE_APP_BASE_URL = "http://bendi".env.production(正式)NODE_ENV = 'production'VUE_APP_MODE = 'pr转载 2021-12-24 17:34:12 · 86 阅读 · 0 评论 -
利用el-checkbox-group 做三级分类选择
<el-checkbox-group class="pop_label_cont" v-model="addStageLabelList"> <el-checkbox class="pop_label_one" :label="item.Id" :disabled="item.IsState">{{item.Label}}</el-checkbox> <div class="pop_la...原创 2021-12-20 17:41:30 · 797 阅读 · 2 评论 -
搜索功能(高亮内容中被搜索的文字)
let list = JSON.parse(JSON.stringify(res.data.rows)) for (let i = 0; i < list.length; i++) { let content = list[i].content //需要替换的内容 let text = this.search //搜索的文字 let str = `<span style="color: red...原创 2021-12-13 15:24:14 · 414 阅读 · 0 评论 -
vue-cli 中使用element的Loading、MessageBox组件问题
import { Message, Loading, MessageBox } from 'element-ui';引入时需要重定向Vue.prototype.$loading = Loading.service;Vue.prototype.$msgbox = MessageBox;Vue.prototype.$alert = MessageBox.alert;Vue.prototype.$confirm = MessageBox.confirm;Vue.prototype.$prompt =原创 2021-12-13 15:14:58 · 1458 阅读 · 0 评论 -
element el-steps步骤条如何监听点击事件?
<el-steps class="steps_cont" :active="active" align-center> <el-step v-for="(item,index) in stepsList" :key="index" :title="item.title" @click.native="choiceStep(index)"></el-step> </el...原创 2021-12-09 17:51:15 · 1479 阅读 · 0 评论 -
element图片预览组件使用
在vue-cli使用<template> <div> <el-button @click="onPreview">预览</el-button> <el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="[url]" /> </div></template><script>原创 2021-11-18 09:27:03 · 1140 阅读 · 0 评论 -
vue-cli脚手架只改变单个页面的背景色
beforeCreate () { document.querySelector('body').setAttribute('style', 'background-color:#f3f2f8') }, beforeDestroy() { document.querySelector('body').removeAttribute('style') },原创 2021-06-17 17:57:10 · 203 阅读 · 0 评论 -
安卓H5页面fixed布局被软键盘上顶问题
Vuedata:{ isTabbar: true, //判断页面的fixed内容是展示还是隐藏 docmHeight: document.documentElement.clientHeight, //默认屏幕高度 showHeight: document.documentElement.clientHeight, //实时屏幕高度}, mounted() { // window.onresize监听页面高度的变化原创 2021-05-21 15:14:24 · 433 阅读 · 0 评论 -
微信浏览器返回页面自动刷新
created() { var needRefresh = window.sessionStorage.getItem('need-refresh'); window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(); }原创 2021-02-19 14:01:08 · 1213 阅读 · 0 评论 -
element时日期选择器禁选某段日期
<el-date-picker v-model="value" :picker-options="pickerOptions" type="date" size="mini" style="width: 130px" placeholder="选择日期"> </el-da...原创 2020-11-18 10:54:28 · 1060 阅读 · 1 评论 -
element-ui 日期选择器如何禁用日期
日期选择器中有一个参数为picker-options,用法如下(想要知道原理的可以通过百度学习):在el-date-picker中增加**:picker-options=“pickerOptions”**body <el-date-picker v-model="scope.row.yanqidate" :picker-options="pickerOptions" @change="xuanzedate($event,scope.row)" type="date" size="mini" st原创 2020-10-20 17:11:39 · 2052 阅读 · 0 评论 -
vue删除一个数组元素后影响了另一个数组
出现此问题的原因就是两个数组来源于同一个对象的指针引用,所以在对其中一个数组进行操作的时候,才会影响到另一个同源的数组解决办法很简单,只要深拷贝一下 就可以消除 同源的影响this.data= JSON.parse(JSON.stringify(res.data.obj));...原创 2020-09-11 17:05:06 · 818 阅读 · 0 评论 -
Vue-cli 页面模版
<template> <div class="box"> </div></template><script>import { } from '../utils/api'import Vue from 'vue'import { Toast } from 'vant'Vue.use(Toast)export default { data() { return {} }, methods: {}, ac原创 2020-08-10 15:11:02 · 282 阅读 · 0 评论 -
九宫格抽奖demo-单页面vue
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css"> <meta name="viewport" content="width=device-width,原创 2020-07-18 14:12:47 · 353 阅读 · 0 评论 -
利用vant上传图片功能(可多选)
<div class="upimg"> <span>上传图片</span> <van-uploader v-model="fileList" @delete="deleteimg" :after-read="afterRead" multiple :max-count="9" ...原创 2020-07-13 10:04:07 · 7065 阅读 · 9 评论 -
vue-cli自定义海报功能(html2canvas)
<template> <div class="vue"> <div id="real_poster" class="real_poster" ref="real_poster"> <img class="bg" :src="bgurl" alt /> <img id="wxcode" v-bind:style="{top:wxtop + 'px',left:wxleft + 'px'}"原创 2020-06-11 17:55:22 · 585 阅读 · 0 评论 -
html中使用vant的van-list列表懒加载
使用van-list标签将需要进行懒加载的内容包住 <van-list class="activity" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <div class="activity_cont" v-for="(item,index) in activitylist" :key="index">原创 2020-05-26 17:27:15 · 5551 阅读 · 3 评论 -
Vue使用lib-flexible做手机端自适应以及引用lib-flexible导致第三方Ui库缩小
第一步 在项目中安装lib-flexiblenpm install lib-flexible --save第二步 在main.js中引入lib-flexibleimport 'lib-flexible/flexible.js'第三步 去index.html里把meta name=“viewport标签注释掉”<!-- <meta name="viewport" conte...原创 2020-03-11 14:16:12 · 587 阅读 · 0 评论 -
创建Vue脚手架项目
先下载node.js 去官网下载npm installnpm install vue-cli -g (然后输入这行 然后从第四步开始)1、npm uninstall vue-cli -g (卸载)2、npm uninstall webpack (卸载webpack)3、cnpm -v4、cnpm install webpack -g() (创建项目前安装webpack)5、vue...原创 2020-03-11 14:07:00 · 186 阅读 · 0 评论 -
Vue防止数据未赋值时出现代码
css [v-cloak] { display: none !important; }body <div v-cloak id="Vue"> </div>原创 2020-01-17 13:54:26 · 277 阅读 · 0 评论 -
Vue样式绑定
:style="{background:color1,color:red}"原创 2020-01-15 10:11:22 · 82 阅读 · 0 评论 -
html Tab 标签页应用
Vue(带内容显示层)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>...原创 2019-12-21 17:26:27 · 828 阅读 · 0 评论 -
Vue中axios接口使用
jiekou() { let that = this axios.get('你的接口', { params: { 传给后台的值 } }) .then(function (res)...原创 2019-12-20 09:29:13 · 117 阅读 · 0 评论 -
html引入vant省市区选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2....原创 2019-12-17 16:27:05 · 799 阅读 · 0 评论 -
html5充值页面(Vue)
可直接复制到html中查看效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>加油卡充值</title> <script src="https://cdn.suoluomei.com/common/js...原创 2019-12-12 14:20:13 · 9035 阅读 · 2 评论 -
Vue脚手架中页面跳转
1.进入index.js(路由)页面刚刚进入页面时import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({ routes: [ { ...原创 2019-12-04 14:55:31 · 3735 阅读 · 0 评论 -
Vue脚手架中运用Vant-ui省市区选择器
template标签中的代码 <div class="hello"> <div id="pro_city_country"> <div class="arrp">选择地址:</div> <div class="arrinput" @click="toSelect"> {{city}} ...原创 2019-12-04 11:17:01 · 1349 阅读 · 1 评论 -
新建Vue脚手架并引入Vue组件库 Vant
1.新建一个文件夹,点击目录并输入命令:cmd2.新建脚手架(1)输入命令:vue init webpack xx(创建项目)(2)前三项直接回车,第四行standalone,第五行yes,六-九NO(安装成功)3.打开项目(1)打开编辑器,打开文件夹,点击终端,新建终端(2)输入命令:npm run dev 然后回车(2)跑完后打开该链接即可在浏览器查看<---...原创 2019-12-02 18:10:23 · 1034 阅读 · 0 评论 -
Vue模版(带ajax、axios接口)
<script> new Vue({ el:"#Vue", data:{ }, methods:{ }, created(){ } })</script>原创 2019-12-02 12:00:39 · 710 阅读 · 0 评论 -
Vue分类下级菜单
所有内容一定要在最大的div(id=Vue)里两个div(class=“zong”)里代表两个循环的假数据。第一个div的方法名和第二个div的方法名必须不一样。(item,index)获取的是假数据的下标。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2019-11-28 14:49:08 · 424 阅读 · 0 评论 -
Vue点击切换颜色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-11-28 10:51:15 · 726 阅读 · 0 评论