zzh990822的博客

原创 微信小程序·瀑布流

原文https://wenku.baidu.com/view/a1f5e7080366f5335a8102d276a20029bd646305.html.div_left{break-inside: avoid;}父盒子上使用 column-gap: 5rpx;column-count: 2;循环体上 使用 break-inside: avoid;

原创 前端 开发 组件库

方便vue 开发的组件库

原创 设置ant日期只能选择当月

import moment from 'moment' <a-range-picker :disabled-date="disabledDate" value-format="yyyy-MM-DD" format="YYYY-MM-DD" @change="rangePickerHanlder" /> methods: { moment, disabledDate (current) { const yearStart = moment().st

原创 vue引入jQuery

vue3引入jQuery

原创 js 获取范围日期

<template> <div> {{ "当前毫秒数："+datTime }}<br> {{ "7天毫秒数："+time }}<br> {{ "上周周一："+numYI }}<br> {{ "上周周日："+numRI }} </div></template><script>const datTime = new Date().getTime()//获取当前日期毫秒

原创 动态循环 新增form表单 数据被引用 和 表单验证问题

定义一个集合formFor,每次点击新增的时候往form.materilasReqVoList数组里追加一条 formFor: { accessorySource: 'material', accessorySourceId: new Date().getTime(), materialsName: '', // 资产名称 materialsNumber: '', // 资产编号 materialsUnitId: undefi

原创 Ant Design循环form表单添加必填校验

<a-form-model :model="form" ref="ruleForm"> <div v-for="(item, index) in form.dataList" :key="index" style="margin-top:12px"> <a-card> <a-row> <a-col> <a-form-model-item ..

原创 vue3.0 api封装

盗取 element 的api封装方式，后期可根据自己的业务需求 进行删减，修改.

原创 vue 大屏动态图

http://datav.jiaminghi.com/

原创 cdn 引用 与替换

原创 keepAlive详细操作

正常生命周期：beforeRouteEnter --> created --> mounted --> updated–>destroyed使用keepAlive后生命周期： 首次进入缓存页面：beforeRouteEnter --> created --> mounted --> activated --> deactivated再次进入缓存页面：beforeRouteEnter --> activated --> deactivated.

原创 uniapp获取云服务空间 数据

uniapp 关联云服务空间

原创 方便uniapp开发的 组件库

1.UView 组件https://www.uviewui.com/components/noticeBar.html

原创 uniapp高度计算

var(--status-bar-height) //获取状态栏的高度height: calc(100% - 200rpx - var(--status-bar-height));//通过calc计算属性 获取想要的高度

原创 a-tree-select选择器取消、选中时获取父级伴选ID

a-tree-select选择器取消复选框、选中复选框时获取父级伴选ID

原创 rem适配

1.先下载 插件安装 cnpm i amfe-flexible postcss-px2rem-exclude --save2.在main.js文件中引入import 'amfe-flexible'3.创建并配置postcss.config.jsmodule.exports = { plugins: { autoprefixer: {}, "postcss-px2rem-exclude": { "remUnit": 75, "exclude": /node_modules/i } } }注意：

原创 页面 滚动到指定的元素位置

document.getElementById('ID').scrollIntoView()

原创 vue.config.js 防止报错偷窥源码

原创 阿里矢量库 图标引入

在阿里引入 svg@font-face { font-family: 'iconfont'; src: url('//at.alicdn.com/t/font_2857380_3sgbtmcfkak.woff2?t=1635209553956') format('woff2'), url('//at.alicdn.com/t/font_2857380_3sgbtmcfkak.woff?t=1635209553956') format('woff'), url('//at.ali.

原创 echarts监听页面变化 实时更改图表大小

在 myChart.setOption({}）后面加上即可 window.onresize = myChart.resize// 监听页面变化，改变表格宽度

原创 前端 判断页面进的是pc还是移动端

1.在根目录App.vue里面设置<template> <div id="app"> <router-view /> </div></template><script>export default {data(){ return{}},mounted(){ // 判断进入的是那个端 跳入相应的路由 页面 if (this._isMobile()) { //移动端

原创 钉钉登录二维码嵌套在vue页面中

<template> <div id="app"> <div id="login_container"></div> </div></template><script>import axios from "axios";export default { name: "App", components: {}, data() { return { appid: "din

原创 微信小程序头部自定义

1.可以在全局设置使每一个页面头部都可以自定义在全局app.json设置"navigationStyle": “custom” "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "", "navigationBarTextStyle":"black", "navigationStyle": "custo

原创 element 弹框层级问题

《1》出现的问题 当你点击一个事件出现一个弹框后再点击弹框内的按钮 出现另一个弹框 但是最后出现的弹框会被上一个弹框覆盖//添加append-to-body就可以个<el-dialog append-to-body>

原创 vue 导出excel表

vue导出文件

原创 el-tree show-checkbox 的使用

check-strictly在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false1.获取被选中节点的id数组2.通过一个点击事件去设置el-tree树的回显

原创 vue 转换后端传过来的二维码字符

${后端传过来的二维码字符}

原创 Echarts数据可视化dataZoom所有属性

原创 去掉字符串中某个字符或多个字符

去除字符串中的多个字符var name_=“a,aasd,asd,a”console.log(name_.replace(/,/g,""))打印出来：“aaasdasda”利用正则去除name_里面多个逗号字符去除字符串中的某个字符var name_=“a,aasd,asd,a”console.log(name_.replace(/,/,""))打印出来：“aaasd,asd,a”...

原创 HTML5 自带提示标签

1> 鼠标放上去之后就会显示出来提示，鼠标移出之后就会消失

原创 vue 复制剪贴功能

zeroclipboard是走的flash插件，手机浏览器是不支持的,所以不得不舍弃之，用clipboard，clipboard不需要flash就可以完成复制剪切等功能，而且可以兼容pc,移动端首先要安装：cnpm install clipboard --save

原创 vue创建项目自定义选择添加的功能

Check the features needed for your project:（检查你的项目需要的功能:）1.Choose Vue version（选择版本号）2.Babel（在webpack 中，默认只能处理 一部分 ES6 的新语法，一些更高级的ES6语法或者 ES7 语法，webpack 是处理不了的；这时候就需要 借助于第三方的 loader，来帮助webpack 处理这些高级的语法，当第三方loader 把 高级语法转为 低级的语法之后，会把结果交给 webpack 去打包到 b

转载 vue-cli3 取消代码规范

用了vue-cli3，这个eslint在疯狂的提示我，严重阻碍了我的日常工作（写bug）选择生成的时候，有一个询问是否把插件配置文件写在package.json文件里，这里我手贱选择了是，现在开始排坑，vue-cli3没有build/webpack.config.base.js文件，这个时候我们有这个文件.eslintrc.js,实际上我们应该在.eslintrc.js文件中修改：删掉 “@vue/prettier” 就可以了module.exports = { root: true, env:

转载 vue进全屏和退出全屏

<template> <div> <div class="fullscreen-button" @click="toggleFullscreen" v-show="is">全屏</div> <div class="fullscreen-button" @click="toggleFullscreen" v-show="!is">退出全屏</div> </div></template>

原创 vue如何让页面做到和F11一样全屏效果

原创 vue中mixins(混入)的使用

一、来自官网的描述混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。二、项目中如何使用混入在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。你可以将一个对象作为混入的选项，在组件中复用。因为vue实例也是对象，所以你可以将vue实例作为混入选项传递进去。我们可以创建一个目录mixins，在创建一个

原创 vue中的provide和inject (依赖注入)、

一、名词解析：provide：Object | () => Objectinject：Array<string> | { [key: string]: string | Symbol | Object }provide：提供依赖``是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。inject： 注入依赖一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和default默认值。说明：provide 和 inject 主要

原创 vue自定义指令

背景除了核心功能默认内置的指令 (如v-model 和 v-show等)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。如何自定义指令1.创建局部指令var app = new Vue({ el: '#app', data: { }, // 创建指令(可以多个) directives: { // 指令名称 dir1: { inserted(e

原创 自定义指令使用场景

使用自定义指令背景代码复用和抽象的主要形式是组件。当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令但是，对于大幅度的 DOM 变动，还是应该使用组件常用案例1、 输入框自动聚焦// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }})<input v-focus&

原创 vue自定义过滤器filter

过滤器就是一个数据经过了这个过滤器之后出来另一样东西。vue中的过滤器分为两种：局部过滤器和全局过滤器全局过滤器// global-filter是过滤器名称// 函数第一个参数是需要过滤的数据.// 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })1234567var .