- 博客(98)
- 收藏
- 关注
原创 vue3 provide/inject使用
provide/inject 可解决深层组件传值问题父组件import { provide } from "vue";const curValue = ref(props.modelValue);provide('curTabName',curValue); 子组件import { inject } from "vue";const curTabName = i...
2023-07-17 11:50:00
85
原创 setup 语法糖
在script标签加setup属性<script lang="ts" setup></script>1.不用写setup函数,组件只需要引入不需要注册,属性和方法也不需要再返回,可以直接在template模板中使用。2. setup语法糖中新增api2.1 defineProps:子组件接收父组件中传来的props2.2 defineEmits:子组件调用父组件中...
2023-07-12 17:28:00
97
原创 node api demo
1.package.json{ "name": "node-api", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywo...
2022-11-08 16:56:00
44
原创 uniapp中使用vuex
1.uniapp自带vuex,不需要在安装,创建store/index.js//引入vue和vueximport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({//全局变量定义 state: { user:{} }, mutations: {...
2022-11-02 10:51:00
71
原创 uniCloud传统方式调用数据库-基本操作
1.后台云函数todo/index.js'use strict';// 查询所有const queryAll =(collection,params)=>{ return collection.get()}// 新增const add = (collection,data)=>{ return collection.add(data)}// 删除const ...
2022-10-31 18:06:00
74
原创 前端docx文件阅览
1. 下载 npm installdocx-preview -S2. <el-button @click="lookDocx">文件阅览</el-button> <div class="docWrap"> <div ref="file"></div> </div>im...
2022-10-28 16:48:00
79
原创 echarts实现贵州地图
1. 添加标签 <div id="elementId" class="guizhou-map"style="width: 600px; height: 400px"></div> 2.import * as echarts from "echarts";import mapGeoJson from "./guizhou.json"; //注册地图...
2022-10-27 16:07:00
739
1
原创 echarts 基础图形使用
1. 安装npm install echarts --save2. 定义标签容器 <div id="main" style="width: 600px; height: 400px"></div>3. 引入import * as echarts from "echarts";4. 柱状图 initBar() { var myCha...
2022-10-27 10:26:00
406
原创 screefull全屏
1.安装npm install screenfull@5 --save2.使用import screenfull from "screenfull";screenfull.isFullscreen; // 当前页面是否全屏screenfull.isEnabled; // 当前浏览器是否支持全屏screenfull.request(); // 全屏screenfull.exit(); // ...
2022-10-17 09:52:00
153
原创 防抖函数第一次立即执行
function debounce(fn, wait) { var timer = null; var self = this; var args = arguments; var count = 0; return function () {...
2020-09-12 16:52:00
2793
2
原创 vue项目分环境打包配置
解决方案一:nginx代理转发 项目build后,通过nginx代理转发 location / { root D:\myproject\my-vue\dist; index index.html index.htm; } location /pyapi { ...
2020-09-04 15:42:00
403
原创 gulp 构建 demo
安装包1. cnpm install gulp-concat gulp-uglify gulp-rename gulp-clean-css gulp-htmlmin-S2. cnpm installgulp-livereload gulp-connect -S代码目录结构gulpfile.jsvar gulp = require('gulp');var c...
2020-07-04 14:46:00
179
原创 mui webview 切换 页面
1.页面结构2.js代码 mui.plusReady(function() { var pages = ['home.html', 'h5plus.html', 'settings.html', 'email.html']; var pageStyles = { top: "0", bottom: "50px" } ...
2020-03-30 23:07:00
302
原创 vant Weapp使用 引入
1. git clone git@github.com:youzan/vant-weapp.git 拷贝代码2. 将dist目录拷贝到小程序目录下,改名为vant3.使用
2020-03-21 22:39:00
763
原创 elment-ui loading 封装
import{Loading}from'element-ui';Vue.prototype.Loading='';//显示loadingVue.prototype.showLoading=function(){Vue.prototype.Loading=Loading.service({});}//关闭loadingVue.pro...
2020-03-19 23:04:00
241
原创 element-ui 使用问题记录
1.el-form表单校验需要绑定model,否则,使用校验this.$refs.loginForm.validate有问题
2020-03-15 16:48:00
204
原创 fastclick 解决移动端点击延迟300ms
fastclick 原理: 在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉 // 安装cnpm install fastclick -S// 使用import fastclick from 'fastclick'fastclick.attach(document.b...
2020-01-12 21:45:00
133
原创 vuex使用
1. 入口文件index.jsimport Vuex from 'vuex'import Vue from 'vue'import modulesA from './modules/modulesA'// 注册vuex到vue中Vue.use(Vuex)const state = { counter:1, todoList:[ {id:1...
2019-12-25 22:31:00
185
原创 require.js 加载 js 文件 404 处理(配置无效)
main.js 是 配置文件,data-main 是异步加载,如果在main.js未加载完成的时候,使用了require去加载文件,就会导致配置无效main.js
2019-12-18 22:46:00
882
原创 vue v-cloak 指令 处理页面显示源码
有时候页面会先出现源码,再显示解析的内容。可以通过v-cloak解决v-cloak这个指令会作为元素的一个属性一直保持到vue实例编译结束,即解析后移除此指令。 /* 含有v-cloak的html元素不显示 */ [v-cloak]{ display:none; } <!-- ...
2019-12-13 23:07:00
475
原创 js 获取url 参数
function getUrlArg(url,key){ var arr = url.split('?'); var argStr = arr.length >1 ? arr[1]:""; if(!argStr){ return ""; } var arr2 = arg...
2019-12-12 21:35:00
149
原创 element-ui Drawer抽屉组件封装
<template> <div class="com"> <el-drawer title="我是标题" :visible.sync="drawer_" :direction="direction"> <span>我来啦! {{task.name}}</span> ...
2019-12-02 23:02:00
4613
原创 js中的this指向
this 通常指向调用者,即谁调用指向谁。场景1: var a = 2; function fn() { console.log(this.a); } var obj = { a:123, fn:fn } fn...
2019-11-26 23:56:00
109
原创 对js闭包的理解
个人理解 闭包:函数内部定义一个函数,内部函数可以访问外包函数定义的变量。 闭包的特点:变量长驻内存 demo实现一个类似函数调用计数器功能: function fn(){ var c = 0; function inner(){ c += 1; ...
2019-11-25 23:44:00
97
原创 vue作用域插槽
简而言之,作用域插槽就是让插槽内容能够访问子组件中的数据。案例如下:有CurUser组件<template> <span> <!-- 在slot 元素上绑定user,让父组件插槽能够访问 --> <slot :user="user"></slot> </span&...
2019-11-20 23:27:00
112
原创 flex布局实战
1.实现盒子的水平垂直居中 .parent{ width:200px; height:200px; display:flex; align-items: center; justify-content: center; bor...
2019-11-19 23:48:00
122
原创 vue 组件之间传值
父组件通过 props 传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值,子组件可以通过watch监听父组件值变化。案例如下:1.子组件<template> <div class="com"> <input type="text" @input="inputChange" v-model="inputVa...
2019-11-14 23:14:00
91
原创 js 面试题一
1.格式化数字,每三位加逗号 // 实现方式一 function formatNum(num){ var _num = num + ""; var result = ""; while(_num.length>3){ result = "," +...
2019-11-12 23:04:00
124
原创 axios 简单二次封装
importaxiosfrom'axios'import{Message}from'element-ui';//设置baseURL//axios.defaults.baseURL='/api'//设置默认请求头axios.defaults.headers={'X-Requested-With':'XMLHttpReq...
2019-11-03 23:53:00
117
原创 element之input输入搜索联想框
1. 模板代码 <el-autocomplete :minlength="2" v-model="searchName" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocom...
2019-10-30 22:44:00
2505
原创 vue + element-ui 国际化实现
1. 安装组件和插件cnpm i element-ui -S // 安装elementcnpm i vue-i18n -S //安装i18n2.将国际化资源放在assets目录下3.在src下新建i18n目录,创建一个 index.js;路径src\i18n\index.jsimport Vue from 'vue'import VueI18n from...
2019-10-24 23:03:00
529
原创 async/await 处理多个网络请求同步问题
1.async/await是基于Promise的,是进一步的一种优化,await会等待异步执行完成 getProjectTask(id){ this.axios.get('/api/v1/task/' + id).then(resp=>{ this.al...
2019-10-23 23:42:00
2944
原创 element之table自定义表头
1.实现效果2.使用render-header可以自定义表头<el-table-column prop="date" label="日期" sortable width="180" :render-header="renderHeaderDate"> renderHeaderDate(){ return (<div...
2019-10-19 22:41:00
398
原创 element之tree组件样式重写
1.改写实现效果:2.页面代码<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>3.样式.el-tree { background: #fff; } .tree-com .el-i...
2019-10-19 22:36:00
741
原创 element 文件上传大小控制
1.页面代码 <el-upload :show-file-list="false" class="upload-demo" :before-upload="beforeUpload" :on-progress="onProgress" :on-success="onSuccess" :on-error="onError" a...
2019-10-19 22:31:00
590
原创 vue常用知识点
vue中图片路径写法 <img :src="avatorSrc" alt=""> <img :src="avatorSrc2" alt=""> data:function(){ return { avatorSr...
2019-10-19 22:28:00
216
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人