vue
听闻余生ssn
这个作者很懒,什么都没留下…
展开
-
vue百度地图(vue-baidu-map)
vue百度地图原创 2022-09-20 14:49:11 · 1040 阅读 · 1 评论 -
vue高德地图(vue-amap)
vue高德地图原创 2022-09-20 14:22:49 · 796 阅读 · 0 评论 -
vue axios二次封装
vue axios二次封装原创 2022-09-08 15:39:08 · 333 阅读 · 0 评论 -
vue使用xlsx插件下载excel文件
vue excel表格下载原创 2022-09-07 10:34:43 · 3645 阅读 · 2 评论 -
vue el-input 输入版本号(格式:x.x.x)的校验
data() { //版本号 const checkVersion = (rule, value, callback) => { let Reg = /^\d+(?:\.\d+){2}$/; if (!value) { return callback(new Error("版本号不能为空!")); } if (!Reg.test(value)) { return callback(new Error("版..原创 2022-02-25 10:34:26 · 1050 阅读 · 0 评论 -
vue router 定义了三级路由,路由跳转了,但页面还显示二级路由的
因为页面二级路由的和三级的路由共用router-view 了,需要利用router-view 和 redirect 重新定义如下图所示原创 2021-09-02 16:01:19 · 6345 阅读 · 2 评论 -
vue项目中使用sass
1、使用vue 脚手架搭建项目vue init webpack app(项目名称)项目创建完成后安装依赖cnpm install2、安装依赖cnpm install node-sass@4.14.1 -Dcnpm install sass-loader@7.3.1 -Dcnpm install style-loader -D注:直接使用cnpm install node-sass sass-loader -D 安装的依赖,使用时会报错,需要指定低版本就可以啦3、在项目build文件夹原创 2021-07-05 10:51:15 · 136 阅读 · 0 评论 -
vue axios封装
1、安装axiosnpm i axios -S2、在项目src下新建http文件夹,并新建axios.js文件,放入以下代码import Axios from 'axios'import {Message} from "element-ui";import _storage from '../plugins/storage'import router from '../router'const service = Axios.create({ baseURL: process.env.原创 2021-06-28 16:56:15 · 117 阅读 · 0 评论 -
vue阿里云点播播放器
1、在项目的component的文件夹下新建AliPlayer.vue文件,将sdk插件的代码放入其中,代码如下:<template> <div class="prism-player" :id="playerId" :style="playStyle"></div></template><script> export default { name: "Aliplayer", props: { sourc原创 2021-05-13 16:30:38 · 1900 阅读 · 1 评论 -
vue Pc端微信支付和支付宝支付
1、支付宝支付<template> <div> <el-dialog top="7.5vh" title="支付" :visible.sync="payDialogVisible" width="30%" :show-close="false" :close-on-click-modal="false" center> <div class="qrcode"原创 2021-04-06 09:55:51 · 1069 阅读 · 0 评论 -
Vue表格动态显示隐藏列(表格中包括静态表头和动态表头)
<template> <div class="service-asset-management--wrapper"> <section class="action-section"> <el-dropdown :hide-on-click="false"> <el-button size="mini" type="success" icon="el-icon-s-grid"></el-button>原创 2021-03-10 15:55:26 · 706 阅读 · 0 评论 -
Vue登录记住密码
<template> <div class="login-wrapper"> <div class="input-suffix mt-40" > <h3 class="text-center user">用户登录</h3> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"> &l原创 2021-02-26 09:30:47 · 216 阅读 · 0 评论 -
element-ui之table中嵌套下拉选择框
<template> <div class="service-asset-management--wrapper"> <el-table border :loading="tableLoading" :data="tableData" row-key="id"> <el-table-column label="序号" width="50" align="center"> <template slot-scope="原创 2020-11-02 15:43:55 · 10064 阅读 · 3 评论 -
vue跳转到新页面返回顶部
App.vue文件中,添加watch事件,全局监听路由watch: { '$route': function(to,from){ document.body.scrollTop = 0 document.documentElement.scrollTop = 0 }}原创 2020-09-25 13:45:13 · 272 阅读 · 0 评论 -
vue+elementui表格导出excle文件
Blob.js/* eslint-disable *//* Blob.js * A Blob implementation. * 2014-05-27 * * By Eli Grey, http://eligrey.com * By Devin Samarin, https://github.com/eboyjr * License: X11/MIT * See LICENSE.md *//*global self, unescape *//*jslint bitwise: t原创 2020-09-22 14:00:28 · 119 阅读 · 0 评论 -
vue年份选择器,自定义组件使用v-model
需求:年份选择组件(代码附在最后)公司的很多项目需要使用年份选择功能,之前用的是select,感觉不是很合理,那我决定手撸一个YearPicker,先看图效果图功能1,支持深浅两种配色,2,默认禁用今年以后的年份(可配置)使用 import YearPicker from './YearPicker' components: { YearPicker },关键点:v-model其实v-model只是:value 和@input的语法糖所以我们在YearPicker组转载 2020-09-15 14:10:28 · 434 阅读 · 0 评论 -
element ui 下拉框选择年份
<template> <div class="wrap"> <el-select v-model="form.recentYear" @change="yearChange" placeholder="请选择" clearable> <el-option v-for="item in years" :key="item.value" :label="item.label" :va原创 2020-09-15 13:54:13 · 2895 阅读 · 0 评论 -
vue播放视频
<template> <div class="playVideo"> <div class="container" ref="container"> <video ref="video" src="https://act.mcake.com/fangli/2018/pc/zhou-nian/video/zhounian-7.mp4" class="videws" poster=""></video> <d原创 2020-08-13 13:23:52 · 489 阅读 · 0 评论 -
vue获取当前时间,精确到时分秒,并实时刷新
<template> <div class="time"> <span>{{nowTime}} </span> <span>{{nowWeek}}</span> </div></template><script>export default { data () { return { nowTime: '',原创 2020-08-12 16:41:12 · 4987 阅读 · 0 评论 -
VUE 调用PC摄像头
在当前网页安全的情况下,浏览器会开启navigator.mediaDevices.getUserMedia我们通过它来实现拍照如果当前网页不安全可以通过设置谷歌浏览器强制该网页安全:1.浏览器进入:chrome://flags/#unsafely-treat-insecure-origin-as-secure2.然后改下参数配置,如下图<template> <div> <article> <section>转载 2020-08-12 10:05:00 · 880 阅读 · 0 评论 -
vue轮播图(可改变高度,图片可由后台返回)
<template> <div class="carousel-wrap"> <el-carousel :interval="5000" arrow="always" :height="banH + 'px'"> <el-carousel-item v-for="item in bannerList" :key="img.id"> <img :src="item.img" class="picImg" />原创 2020-08-06 16:03:14 · 717 阅读 · 0 评论