Vue
关注
分享
扫一扫
自由的音符
这个作者很懒，什么都没留下…
展开
-
瀑布流效果
瀑布流原创 2023-02-10 14:37:53 · 146 阅读 · 0 评论 -
diff算法中的patch
patch原创 2022-05-23 17:19:43 · 251 阅读 · 0 评论 -
虚拟dom详解
虚拟dom原创 2022-05-23 16:50:17 · 169 阅读 · 0 评论 -
v-model原理
v-model代码实现原创 2022-05-23 16:02:16 · 126 阅读 · 0 评论 -
vue原理--让每一个属性都可以被观测（Observer类实现）
html<!-- * @Autor: CQJ * @Date: 2022-05-23 14:59:59 * @LastEditors: CQJ * @LastEditTime: 2022-05-23 15:09:49 * @Description: --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equi原创 2022-05-23 15:17:35 · 427 阅读 · 0 评论 -
商品属性sku
效果思路数据格式{ json1: [ ["红⾊", "黄⾊", "蓝⾊"], ["S", "M"], ["棉的", "涤纶"], ],json2: [ { color: "红⾊", type: "S", mianliao: "棉的", price: 100, },{ color: "红⾊", type: "M", mianliao: "棉的", price: 200, },{ color: "红⾊", type: "S", mianliao: "涤纶", price: 300, },{ color原创 2022-05-23 12:11:44 · 395 阅读 · 0 评论 -
关于vue props 传值，子组件修改props数据，父组件数据随之改变的问题
1.最近完成一个table列表，控制cloumn的显示隐藏的功能时，发现一个问题，记录一下首先问题是：通过父组件传递一个array数据下去给到子组件,数据格式大概是这个样子// 列信息 columns: [ { key: 0, label: `付款时间`, visible: true }, { key: 1, label: `订单号`, visible: true }, { key: 2, label: `消费商家`, visible:原创 2022-04-15 12:07:48 · 2959 阅读 · 0 评论 -
vue实现多语言功能
详细步骤安装vue-i18nnpm install vue-i18n -S在main.js中引入vue-i18nimport VueI18n from 'vue-i18n'Vue.use(VueI18n)定义语言文件const messages = { //简体中文 cn: { message: { hello: '你好', author: '龙的传人' } }, //英文 en: { message: { h转载 2022-03-30 17:59:08 · 5211 阅读 · 0 评论 -
vue,html页面滚动切换(走马灯)
vue:<!-- * @Description: * @Version: 2.0 * @Autor: CQJ * @Date: 2022-01-21 08:52:38 * @LastEditTime: 2022-01-21 08:52:38 * @LastEditors: CQJ--><template> <div id="wrap" :style="{ height: screenHeight + 'px' }"> <div id=原创 2022-01-21 08:58:01 · 915 阅读 · 0 评论 -
vue3+ts 绑定props 默认值的方式：withDefaults
withDefaults作用是给defineProps绑定默认值的api父组件<template> <TsSample :msg='msg' @on-updated='onUpdated' title='title' @on-delete='onDelete'/> </template>子组件<template> <h1>ts sample</h1> <p>{{ msg }}</p>原创 2021-12-17 10:35:08 · 51035 阅读 · 6 评论 -
4.怎么理解vue中的diff算法?
怎么理解vue中的diff算法?整体策略：深度优先，同层比较转载 2021-12-06 18:01:56 · 1981 阅读 · 0 评论 -
3.vue中key的作用和工作原理？
你知道vue中key的作用和工作原理吗？说说理解唯一的确定dom元素，从而执行diff算法的时候更高效源码中找答案：src/core/vdom/patch.js-updateChildern()测试代码：<body> <div id=" demo"> <p v-for="item in items" :key="item">{{item}}</p> </div> <script src="../ . ./dist/vue.原创 2021-12-06 17:34:26 · 2303 阅读 · 0 评论 -
2.vue组件data为什么必须是一个函数，而vue的根实例则没有限制
源码中找答案：src/core/instance/state.js-initData()多实例的情况下，为了保证大家的状态的不污染、不干扰 需要是一个函数函数每次执行都会返回新的data对象实例测试代码：<html> <head> <title>Vue事件处理</title> </head> <body> <div id="demo"> <h1>vue组件data为什么必须是个函数?原创 2021-12-06 17:04:51 · 512 阅读 · 0 评论 -
1.v-if和v-for哪个优先级高?如何正确使用避免性能问题
源码：el.staticRoot=>el.once=>el.for=>el.if=>el.tag 执行顺序两者同级时，渲染函数如下：(function anonymous(){with(this){return_ .c('div' ,{attrs:{"id":"demo"}},[_ _c('h1' ,[_ _v("v-for和v-i f谁的优先级高?应该如何正确使用避免性能问题? ")]),_v(" ")，_1((children)，function(chi1d){r原创 2021-12-06 15:38:07 · 339 阅读 · 0 评论 -
vue3新特性
对vue3新特性的了解：（性能提升，维护性问题， 独立的响应化模块，componsitionAPI）vue3.0的改进主要体现在：运行速度，打包体积，维护性，友好性，跨平台性，易用性速度更快(运行速度)虚拟dom的重写优化slots的生成静态树的提升静态属性的提升基于Proxy的响应式系统使用Proxy代替Object.defineProperty体积更小：通过摇树优化核心库体积tree-sharking：最早由rollup实现，是一种通过删除冗余代码，优化代码体积原创 2021-12-06 15:13:59 · 499 阅读 · 0 评论 -
下拉框 滚动加载
<template> <div> <!-- v-loadmore 触底滚动加载事件 --> <el-select ref="select" v-model="content" v-loadmore :value-key="valueKey" filterable remote :placeholder="placeholder" :remote-me原创 2021-11-22 18:48:22 · 694 阅读 · 0 评论 -
vue 百度地图获取经纬度和地址插件
1、先看效果图2、代码实现（组件）2-1、compons文件夹下新建baiduMap.vue,内容：<template> <div> <el-dialog width="30%" :before-close="cancel" :closable="false" :mask-closable="false" :visible="visible" > <span>转载 2021-11-09 15:19:35 · 599 阅读 · 0 评论 -
vue3 + elementPlus 自定义指令 实现自动聚焦 自动选中 整数/小数点限制
定义指令import { App, nextTick } from 'vue'// 根据el获取inputconst getInput = (el: HTMLElement): HTMLInputElement | null => el instanceof HTMLInputElement ? el : el.querySelector('input')export default { install (app: App) { // v-focus 自动聚焦。对于非文转载 2021-10-21 17:33:34 · 2059 阅读 · 0 评论 -
element 表单只允许输入数字和两位小数，保留两位小数(四舍五入) 小数不足两位补0
1.form表单<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px"> <el-form-item label="提现金额" prop="withdrawAmount"> <el-input v-model="ruleForm.withdrawAmount" auto-complete="off" oninp原创 2021-07-27 16:30:08 · 2559 阅读 · 1 评论 -
vue页面添加水印
Vue项目在页面添加水印功能创建watermark.js文件let watermark = {}let setWatermark = (str) => { let id = '1.23452384164.123412416'; if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)); } //创建一个画布 let can转载 2021-07-26 10:47:04 · 462 阅读 · 1 评论 -
element dateTimePicker 常见需求
<div class="datetime"> <span>选择日期：</span> <el-date-picker :disabled="timeDisabled" v-model="ruleForm.syncStartTime" class="datetime" placeholder="请选择日期" type="date" .原创 2021-07-23 14:43:57 · 130 阅读 · 0 评论 -
element级联选择业务功能
<el-form ref="form" :model="form" :rules="rules" label-width="122px"> <el-form-item label="关联社区:" prop="communityId"> <el-cascader ref="communityRef" v-model="form.communityId" :options="原创 2021-06-15 14:17:34 · 235 阅读 · 0 评论 -
element table根据条件隐藏复选框
<el-table v-loading="loading" :data="merchantList" width="800px" @selection-change="handleSelectionChange" :cell-class-name="cellClass" > <template slot="empty"> <svg-icon key="item-warp" type=原创 2021-06-04 14:25:00 · 1084 阅读 · 0 评论 -
element table表格总计功能
<el-table :data="businessList" v-loading="loading" :summary-method="getSummaries" show-summary width="800px" ><el-tabl/>getSummaries(param) { const { columns, data } = param; console.原创 2021-06-03 15:15:05 · 1047 阅读 · 0 评论 -
base64图片下载
download() {this.resultDialog.picture.map((res, i) => {this.downloadFile(证据 ${i + 1}.png, res) // 此处 res 为 base64 数据图片 (data:image/jpg;base64,/…)})},downloadFile(fileName, content) {let aLink = document.createElement(‘a’);let blob = this.base64To转载 2021-05-18 11:22:20 · 276 阅读 · 0 评论 -
vue中路由守卫钩子函数的使用
vue中路由守卫钩子函数的使用什么是路由守卫钩子函数？在日常的vue项目开发过程中，大多的项目会涉及到权限问题：登陆与未登录状态的管理登陆后不同角色所看到的内容的区别顾名思义，守卫就是时时刻刻的守护着你，路由守卫就是用于实时监听路由的变化，根据变化做出各种处理方式；vue-router里提供了一个beforeEach的方法，它就是我们常用到的路由钩子函数（还有个afterEach钩子函数，不常用）如何进行路由守卫与检测？其中这个方法提供了三个参数beforeEach(to, from, nex转载 2021-04-15 11:44:31 · 352 阅读 · 0 评论 -
web端导出功能
新建一个observable 储存列表数据import Vue from 'vue';export const storeError = Vue.observable({ dataList: [], rowIndex: '',});export const mutations = { saveErrorList(value) { storeError.dataList = value; }, deleteErrorList(rowIndex) { store.原创 2021-04-13 14:24:56 · 476 阅读 · 0 评论 -
web端 筛选时间的工具方法
首先 在utils里新建一个 filter-time.js文件import dayjs from 'dayjs';class FilterTime { constructor(type, format) { this.type = type; this.format = format || 'YYYY-MM-DD HH:mm:ss'; this.time = this.mergeTime(); } //本月 monthStartTime() { r.原创 2021-04-13 13:57:50 · 337 阅读 · 1 评论 -
reload注入＆inject使用
父页面注入 import { getQueryString } from 'utils/helper';import { get_menu_permission } from 'api/cooperation-in-page';export default { name: 'MyBusinessBusinessDetails', components: { BusinessInfo, MoreHandle, // LinkCompany, FollowRecor原创 2021-03-18 13:52:02 · 1114 阅读 · 0 评论 -
vue observable 仓库
创建一个文件夹 命名为observable.js 定义号store mutations actionsimport Vue from 'vue';export const store = Vue.observable({ //不同tab页筛选选中数据集合 fieldParams: {}, params: { limit: 10, start: 1, column: undefined, asc: undefined, mchUserId: stores原创 2021-03-18 13:48:07 · 154 阅读 · 0 评论 -
element 级联选择器
template 结构 <el-form-item label="客户需求：" prop="customerRequire" class="content-customerRequire common-style" ><el-cascader ref="requirementRef" v-model="ruleForms.customerRequire" place原创 2021-03-18 11:43:05 · 238 阅读 · 0 评论 -
VUE之定义指令实现 select滚动加载
template结构绑定v-loadmore <el-form-item v-if="ruleForms.allocationMode == 1" label="合作接收方:" prop="receiveUserId" class="contents-is-require cooperationType cooperationAcceptor" > <el-select v-原创 2021-03-18 11:37:47 · 326 阅读 · 0 评论 -
VueClipboard 实现复制功能
安装npm install --save vue-clipboard2引入 挂载main.jsimport Vue from 'vue'import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)方式一<template> <div class="container"> <input type="text" v-model="message"> <button cla转载 2021-01-19 10:31:51 · 184 阅读 · 0 评论 -
模块化的store参数传递
store 初始化数据index.jsimport Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);import getters from './getters';const modulesFiles = require.context('./modules', true, /\.js$/);const modules = modulesFiles.keys().reduce((modules, modulePath) =>原创 2021-01-18 13:58:33 · 602 阅读 · 0 评论 -
vue中使用provide和inject来实现页面刷新
在父组件中定义一个provide，通过定义reload方法对页面进行预刷新操作(tip:已经在当前页面但是需要再次刷新)父组件<template> <div id="app"> <router-view v-if="isRouterAlive" /> </div></template><script>export default { name: 'App', provide() { //父组件中原创 2020-12-16 18:43:02 · 286 阅读 · 0 评论 -
有意思的子改父
第一步：你要想改动父组件的值，你父组件得先有值让你改吧！所以，在父组件定义值：第二步：同样的，二者之间咋就成了父子关系了呢？你得让一个组件里边装另一个组件吧，所以在父组件Second-module中调用、注册、引用进来子组件Three-module：调用：注册：引用：第三步：父组件定义公用值，就是为了让子组件用的，你得把值给了子组件吧！不要小气：找到二者的契合点（组件引用处），用bind 把值绑给他。第四步：父组件扔过来了，子组件要接住啊，接不住掉地上摔烂了你还杂用！第五转载 2020-11-06 14:03:47 · 139 阅读 · 0 评论 -
微信内置浏览器 H5页面点击输入框，键盘遮盖文本框的解决办法
在main.js里引入用就完事儿了window.addEventListener("resize", function() { if ( document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA" ) { window.setTimeout(function() { document.activeElement.scrollIntoViewIf原创 2020-10-29 17:52:09 · 736 阅读 · 0 评论 -
vue 项目标签 点击下载文件
看网上，很多都说放在什么static、public目录，但是没什么用，最后发现一句代码的事（引入方式），话不多说，先上代码点击dom元素，创建一个a标签，给上download属性指定下载格式，如果是图片就png ，xsl就xsl，创建完之后，销毁。const path = require('../../../../public/aixin.png'); console.log(path); var a = document.createElement("a"); a原创 2020-10-27 11:58:46 · 1253 阅读 · 0 评论 -
微信端移动端 底部组件在点击输入框时，被键盘顶上来，导致输入框遮盖
问题描述：Vue开发中，当我们相对于父视图的底部布局子控件时，需要用position:fixed，如果页面内容不是很长，没有超出屏幕范围，那就还好，没有问题；一旦超出屏幕范围，当你点击输入框，弹出键盘时，底部固定定位的子控件就会被顶起来。这个问题在iOS端不会出现，在安卓端会出现，原因是键盘加载方式不一样，这里不作详情解答。解决方案：在键盘弹起时，页面高度变小，底部固定定位上升，所以我们只需要在页面高度变小时，隐藏底部子控件，当键盘消失时再显示底部子控件。解决方法：检测浏览器的resize事件，当高度转载 2020-10-13 16:01:12 · 2393 阅读 · 0 评论 -
解决ios时间显示NaN的问题（附android时间）
import moment from 'moment';Vue.prototype.$moment=moment;年月日时分秒Vue.prototype.$format_all = function(date){ return moment.parseZone(date).local().format('YYYY/MM/DD HH:mm:ss')}年月日十分Vue.prototype.$format = function(date){ return moment.parseZone(原创 2020-09-01 11:07:25 · 489 阅读 · 0 评论