xin_yun_Jian的博客

原创 vue3 provide/inject使用

provide/inject 可解决深层组件传值问题父组件import { provide } from "vue";const curValue = ref(props.modelValue);provide('curTabName',curValue);　　子组件import { inject } from "vue";const curTabName = i...

原创 setup 语法糖

在script标签加setup属性<script lang="ts" setup></script>1.不用写setup函数，组件只需要引入不需要注册，属性和方法也不需要再返回，可以直接在template模板中使用。2. setup语法糖中新增api2.1 defineProps：子组件接收父组件中传来的props2.2 defineEmits：子组件调用父组件中...

原创 多个vue-cli版本共存

1.安装指定版本2.改名3.配置环境变量

原创 创建vue3项目

1. 使用vite快速创建vue3项目npm init vite-app app-name2. npm init vue@3

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

原创 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: {...

原创 uniCloud传统方式调用数据库-基本操作

1.后台云函数todo/index.js'use strict';// 查询所有const queryAll =(collection,params)=>{ return collection.get()}// 新增const add = (collection,data)=>{ return collection.add(data)}// 删除const ...

原创 前端docx文件阅览

1. 下载 npm installdocx-preview -S2. <el-button @click="lookDocx">文件阅览</el-button> <div class="docWrap"> <div ref="file"></div> </div>im...

原创 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"; //注册地图...

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

原创 screefull全屏

1.安装npm install screenfull@5 --save2.使用import screenfull from "screenfull";screenfull.isFullscreen; // 当前页面是否全屏screenfull.isEnabled; // 当前浏览器是否支持全屏screenfull.request(); // 全屏screenfull.exit(); // ...

原创 防抖函数第一次立即执行

function debounce(fn, wait) { var timer = null; var self = this; var args = arguments; var count = 0; return function () {...

原创 vue项目分环境打包配置

解决方案一：nginx代理转发　　项目build后，通过nginx代理转发 location / { root D:\myproject\my-vue\dist; index index.html index.htm; } location /pyapi { ...

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

原创 antd 表单的两种校验方式

1.声明式表单验证：<Form.Itemname="username"rules={[{...

原创 mui webview 切换 页面

1.页面结构2.js代码 mui.plusReady(function() { var pages = ['home.html', 'h5plus.html', 'settings.html', 'email.html']; var pageStyles = { top: "0", bottom: "50px" } ...

原创 vant Weapp使用 引入

1. git clone [email protected]:youzan/vant-weapp.git 拷贝代码2. 将dist目录拷贝到小程序目录下，改名为vant3.使用

原创 element-ui 表单自定义校验

原创 elment-ui loading 封装

import{Loading}from'element-ui';Vue.prototype.Loading='';//显示loadingVue.prototype.showLoading=function(){Vue.prototype.Loading=Loading.service({});}//关闭loadingVue.pro...

原创 element-ui 使用问题记录

1.el-form表单校验需要绑定model,否则，使用校验this.$refs.loginForm.validate有问题

原创 fastclick 解决移动端点击延迟300ms

fastclick 原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉 // 安装cnpm install fastclick -S// 使用import fastclick from 'fastclick'fastclick.attach(document.b...

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

原创 require.js 加载 js 文件 404 处理(配置无效)

main.js 是 配置文件，data-main 是异步加载，如果在main.js未加载完成的时候，使用了require去加载文件，就会导致配置无效main.js

原创 vue v-cloak 指令 处理页面显示源码

有时候页面会先出现源码，再显示解析的内容。可以通过v-cloak解决v-cloak这个指令会作为元素的一个属性一直保持到vue实例编译结束，即解析后移除此指令。 /* 含有v-cloak的html元素不显示 */ [v-cloak]{ display:none; }　　 <!-- ...

原创 js 获取url 参数

function getUrlArg(url,key){ var arr = url.split('?'); var argStr = arr.length >1 ? arr[1]:""; if(!argStr){ return ""; } var arr2 = arg...

原创 element-ui Drawer抽屉组件封装

<template> <div class="com"> <el-drawer title="我是标题" :visible.sync="drawer_" :direction="direction"> <span>我来啦! {{task.name}}</span> ...

原创 js中的this指向

　　　this 通常指向调用者，即谁调用指向谁。场景1： var a = 2; function fn() { console.log(this.a); } var obj = { a:123, fn:fn } fn...

原创 对js闭包的理解

　　个人理解 闭包：函数内部定义一个函数，内部函数可以访问外包函数定义的变量。　　闭包的特点：变量长驻内存　　demo实现一个类似函数调用计数器功能： function fn(){ var c = 0; function inner(){ c += 1; ...

原创 vue作用域插槽

　　简而言之，作用域插槽就是让插槽内容能够访问子组件中的数据。案例如下：有CurUser组件<template> <span> <!-- 在slot 元素上绑定user，让父组件插槽能够访问 --> <slot :user="user"></slot> </span&...

原创 flex布局实战

1.实现盒子的水平垂直居中 .parent{ width:200px; height:200px; display:flex; align-items: center; justify-content: center; bor...

原创 vue 组件之间传值

父组件通过 props 传值给子组件，子组件通过 $emit 来通知父组件修改相应的props值，子组件可以通过watch监听父组件值变化。案例如下：1.子组件<template> <div class="com"> <input type="text" @input="inputChange" v-model="inputVa...

原创 js 面试题一

1.格式化数字，每三位加逗号 // 实现方式一 function formatNum(num){ var _num = num + ""; var result = ""; while(_num.length>3){ result = "," +...

原创 axios 简单二次封装

importaxiosfrom'axios'import{Message}from'element-ui';//设置baseURL//axios.defaults.baseURL='/api'//设置默认请求头axios.defaults.headers={'X-Requested-With':'XMLHttpReq...

原创 element之input输入搜索联想框

1. 模板代码 <el-autocomplete :minlength="2" v-model="searchName" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocom...

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

原创 async/await 处理多个网络请求同步问题

1.async/await是基于Promise的，是进一步的一种优化，await会等待异步执行完成 getProjectTask(id){ this.axios.get('/api/v1/task/' + id).then(resp=>{ this.al...

原创 element之table自定义表头

1.实现效果2.使用render-header可以自定义表头<el-table-column prop="date" label="日期" sortable width="180" :render-header="renderHeaderDate"> renderHeaderDate(){ return (<div...

原创 element之tree组件样式重写

1.改写实现效果：2.页面代码<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>3.样式.el-tree { background: #fff; } .tree-com .el-i...

原创 element 文件上传大小控制

1.页面代码 <el-upload :show-file-list="false" class="upload-demo" :before-upload="beforeUpload" :on-progress="onProgress" :on-success="onSuccess" :on-error="onError" a...

原创 vue常用知识点

vue中图片路径写法 <img :src="avatorSrc" alt=""> <img :src="avatorSrc2" alt=""> data:function(){ return { avatorSr...