
vue
Georgia fab
这个作者很懒,什么都没留下…
展开
-
实用组件:双击重命名
【代码】实用组件:双击重命名。原创 2023-01-13 15:41:20 · 389 阅读 · 0 评论 -
怎么在可视化编辑器中局部更新元素样式
【代码】怎么在可视化编辑器中局部更新元素样式。原创 2023-01-13 15:30:26 · 105 阅读 · 0 评论 -
在可视化编辑器开发中怎么做代码导入成json的
【代码】在可视化编辑器开发中怎么做代码导入成json的。原创 2023-01-13 15:24:37 · 253 阅读 · 0 评论 -
el-tree 半选处理
有参考过其他人的方案:elementui tree设置节点半选解决方案是使用的组件内置方法实现的,可能我是使用的element-plus 的缘故 使用其方案并未其效果,就从数据上入手了:tree组件在获取完数据进行页面回显时,因为获取的数据中包含父节点的关系,把不该选中的子节点也全部勾上了 const getList = () => { getRoleDetail({ id: route.query.id || '' }).then(async (res) => {原创 2021-07-15 09:53:34 · 1707 阅读 · 0 评论 -
el-select 可过滤状态点击最右arrow icon可收起
el-select 可过滤状态点击最右arrow icon可收起公司测试又在折磨人,el-select组件在设置了filterable 属性的情况下点击右边的icon位置,下拉是收不回来的,只能点击可输入框和组件外其他区域才可以,bug就来了单纯只是filterable 很好解决,直接css:/*** 下拉框图标点击可收起*/.el-select{ .el-input__inner{ position: relative; z-index: 10; backgroun原创 2021-07-14 18:01:33 · 1009 阅读 · 0 评论 -
列表页缓存解决方案(keep-alive)Vue3.x
列表页缓存解决方案(keep-alive)Vue3.x列表页切换详情,切回后要保持列表页切换前的状态是十分常见的需求,以下是我在项目中使用的处理方案,代码贴上,路过大佬望指教:常规操作,router-view 上配置 keep-alive:我将需要缓存的放到了vuex中 <router-view v-slot="{ Component }" :key="key"> <transition name="move" mode="out-in"> <原创 2021-07-14 17:29:12 · 1080 阅读 · 0 评论 -
vue2.x的data响应式原理
proxy 兼容性不好,且无法polyfill ,vue2.x还会存在一段时间vue2.x data响应式原理监听对象,监听数组,复杂对象,深度监听基础API object.definePropertydefineProperty的几个缺点vue怎么监听数组监听对象,监听数组,复杂对象,深度监听基础API object.definePropertyfunction defineReactive(target,key,value){ //深度监听 observer(value) //核.原创 2021-01-10 22:38:21 · 432 阅读 · 0 评论 -
vue2.x使用总结(扩展部分)
文章目录创建组件的方式动态组件组件分类组件对外API组件通信mixinsprovide / injectextend构造器$mount手动挂载递归组件render函数jsxfunctional rendererrorCaptured 异常捕获创建组件的方式//1.全局组件Vue.component('组件名', { name components directives filters mixins template props data computed wa原创 2020-11-16 16:44:43 · 245 阅读 · 0 评论 -
vue2.x vnode编译过程
vnode是vue中的虚拟dom节点对象什么是虚拟dom节点:不是真实的dom节点,是js对象。template:<div id="app"> <p>{{message}}</p> <button @click="btnAction">按钮</button></div>1.第一渲染,需要根据template中的模版,渲染出来初始的dom结构<div id="app"> <p>hello原创 2020-11-16 16:39:26 · 181 阅读 · 0 评论 -
vue-router使用总结
路由 router基础写法路由嵌套路由正向传参编程式导航命名路由路由别名,重定向命名视图路由守卫基础写法将router的配置分离出去router.js定义路由表const routes = [ // 一个对象,就是一个路由表配置项 // 必须配置的是path,component { // 当地址栏地址变化为/home时,就加载Home组件,放置在router-view中 path: '/home', //按需加载 component: ()=>im原创 2020-11-16 16:32:08 · 99 阅读 · 0 评论 -
自定义v-model 2.x vs 3.0
关于v-model指令的一个小记,由于新出的vue3 对它做了一个很好的改进,所以值得记录一下先看下v-model实现方式当在原生组件中使用: <input v-model="val" /> //相当于做了以下 <input :value="val" @input="val=$event.target.value">当在自定义组件上使用时: <my-component v-model="val"></my-component>原创 2020-11-15 23:55:04 · 132 阅读 · 0 评论 -
使用vue3 hook 完成一个点击元素外区域元素隐藏功能附加vue2自定义指令实现方式
一般这样的功能在一个项目中很多地方需要用到vue3可以将功能代码单独提出来import { ref, onMounted, onUnmounted, Ref } from 'vue'const useClickOutside = (elementRef: Ref<null | HTMLElement>) => { const isClickOutside = ref(false) const handler = (e: MouseEvent) => { if原创 2020-11-13 18:30:31 · 1774 阅读 · 4 评论 -
vue3.0使用笔记(基础)
vue3.0基本使用ref语法Reactive 函数生命周期侦测变化 - watchdefineComponent 包裹组件Teleport 瞬间移动spense - 异步请求好帮手第二部分ref语法<template> <h1>{{count}}</h1> <h1>{{double}}</h1> <button @click="increase">+1</button></template>原创 2020-11-13 15:22:18 · 426 阅读 · 0 评论 -
vue2.x使用总结(可复用性篇)
使用发布订阅模式自己写发布订阅模式代码使用发布订阅模式来处理非父子组件之间的通信vue中的发布订阅main.jsVue.prototype.$center = new Vue();one.vuemethods: { addAction(){ // 派发事件 // Bus.$emit('send', this.value); this.$center.$emit('send', this.value); this.value = '';原创 2020-11-12 11:06:25 · 296 阅读 · 2 评论 -
vue2.x使用总结(组件篇)
template 标签开发时需要有个大标签包裹,但是又不希望存在dom中,这时候可以使用template标签,只识别指令,不作用在dom中。可以跟v-if, v-for使用,但是不能和v-show使用,无效的按键修饰符<input type="text" @keyup.ctrl.c="handleAction"/>组合键的使用.c ,.enter,.tab...系统修饰符…组件先声明组件参数1:组件的名字参数2:组件的配置项,必须写template,定义组件的dom原创 2020-11-12 10:49:24 · 351 阅读 · 0 评论