听闻余生ssn-CSDN博客

原创 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 1041

原创 vue router 定义了三级路由，路由跳转了，但页面还显示二级路由的

因为页面二级路由的和三级的路由共用router-view 了，需要利用router-view 和 redirect 重新定义如下图所示

2021-09-02 16:01:19 6284 2

原创 JSON.stringify()和JSON.parse()的区别，以及JSON.stringify()的妙用

一、JSON.stringify()与JSON.parse()的区别1、JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，而JSON.parse()可以将JSON字符串转为一个对象，简而言之它们的作用是相对的2、在使用JSON.parse()需要注意，由于此方法是将JSON字符串转换成对象，所以字符串必须符合JSON格式，即键值都必须使用双引号包裹二、JSON.stringify()的几种妙用1、判断数组是否包含某对象，或者判断对象是否相等 //判

2021-07-07 10:24:21 218

原创 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 126

原创 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 108

原创 js通过身份证号获取出生日期，性别，年龄

/* * 当type=1时获取出生日期,type=2时获取性别,type=3时获取年龄 * */ var idCard = '' //身份证号 function IdCard(IdCard, type) { if (type === 1) { //获取出生日期 let birthday = IdCard.substring(6, 10) + "-" + IdCard.substring(10, 12) + "..

2021-06-18 14:59:06 1210

原创 css谷歌，火狐隐藏滚动条

火狐： scrollbar-color: transparent transparent; scrollbar-track-color: transparent; -ms-scrollbar-track-color: transparent;谷歌：::-webkit-scrollbar { display: none;}

2021-05-31 10:59:10 110

原创 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 1884 1

原创 uni-app中引用iconfont图标

1、iconfont官网新建项目2、新建完后，将需要的图标添加入库3、点击右侧购物车将图标添加至项目中4、先点击生成在线链接，再点击下载至本地，将下载成功的压缩包中的iconfont.css用编辑器打开，用刚刚在线生成的@font-face代码替换掉iconfont.css里面的@font-face部分，并且在加上前面https5、在项目中static文件夹下新建font文件夹，将修改后的的iconfont.css和iconfont.ttf文件放入其中6、在项目的APP.vue文件中引入就可

2021-04-15 15:31:53 219

原创前端实现文件下载

function download(url, filename) { return fetch(url).then(res => res.blob().then(blob => { let a = document.createElement('a'); let url = window.URL.createObjectURL(blob); a.href = url; a.download = filename;

2021-04-09 16:52:00 64

原创 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 1057

原创 js字符串转换为数字

方法一：let test1 = '123' *1方法二：let test1 = +'123'console.log(test1) //123

2021-03-12 10:11:11 102

原创 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&gt

2021-03-10 15:55:26 693

原创 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 210

原创 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 9951 3

原创 vue跳转到新页面返回顶部

App.vue文件中，添加watch事件，全局监听路由watch: { '$route': function(to,from){　 document.body.scrollTop = 0 document.documentElement.scrollTop = 0 }}

2020-09-25 13:45:13 264

原创 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 110

转载 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 414

原创 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 2883

原创限制input框只能输入数字且可输入小数点

type属性必须为number <input type="number" placeholder="请输入" onkeyup="value=value.replace(/[^\d]/g,'')"/>

2020-09-14 08:36:51 279

原创 uni-app季度选择控件

代码中涉及到图片需要自己加哦，效果如图：<template> <view class="content"> <view class="input_year"> <button @click="quarterTime" style="display: none">季度</button> <span @click="showDoubleMonth">

2020-08-28 14:06:54 729

原创 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 476

原创 vue获取当前时间，精确到时分秒，并实时刷新

<template> <div class="time"> <span>{{nowTime}}&nbsp</span> <span>{{nowWeek}}</span> </div></template><script>export default { data () { return { nowTime: '',

2020-08-12 16:41:12 4971

转载 VUE 调用PC摄像头

在当前网页安全的情况下，浏览器会开启navigator.mediaDevices.getUserMedia我们通过它来实现拍照如果当前网页不安全可以通过设置谷歌浏览器强制该网页安全：1.浏览器进入：chrome://flags/#unsafely-treat-insecure-origin-as-secure2.然后改下参数配置，如下图<template> <div> <article> <section>

2020-08-12 10:05:00 869

转载 js控制video控件禁止快进但可以后退

<!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-UA-Compatible" content="ie=edge"> <title>Doc

2020-08-12 09:25:58 895

原创 vue轮播图（可改变高度，图片可由后台返回）

2020-08-06 16:03:14 706

原创 vue项目中当元素内文本溢出时（超过width部分）显示省略标记（...）

<tempalte> <div class="list" v-for="item in items" :key="item.id"> <img src="../../assets/img/index/right.png" alt="" class="right"/> <span class="head_title ">{{item.title}}</span> <span class="date">{{item

2020-08-04 11:03:22 1270

原创 uni-app页面跳转并携带参数

在起始页面跳转到test.vue页面并传递参数uni.navigateTo({ url: 'test?id=1&name=uniapp'});test页面接受传递过来的参数onLoad(option) { console.log(option.id); console.log(option.name);}

2020-07-30 16:27:15 4884

原创 uni-app中使用video组件

需要自己设置视频的宽高<video class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="disable" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%B

2020-07-30 15:58:52 6398

空空如也

空空如也