指令 按钮 权限vue
vue中el-select,el-radio-group设置默认值
首先来说设置默认值是用v-model去绑定一个值, 如下,一般大家用label是来展示具体展示在前端的文字,value是这组对象里每个对象的标识。 打个比方item.label是姓名,item.value是学号,学号不在前端展示。这样的话,v-model绑定的字符串对象写item.label的值。 ......
element+vue2下的input的样式修改
/* 禁用下的input的字体颜色 */ /* .el-input.is-disabled /deep/ .el-input__inner { color: red; } */ /* 禁用下的input的样式修改 */ /* .el-input.is-disabled { border: 1px s ......
Vue2组件插槽的使用笔记
Vue2插槽使用组件MyComponent.vue: <template> <div> <slot name="name1" :userName="'zhagnsan'"></slot> </div> </template> 复制 使用组件: <my-component> <template slo ......
vue3 报错 Uncaught TypeError: Cannot read properties of undefined (reading ‘deep‘)
报错信息 Uncaught TypeError: Cannot read properties of undefined (reading 'deep') at withDirectives (runtime-core.esm-bundler.js:2774:17) at Proxy._sfc_re ......
如何实现一个 获取元素尺寸变化的 自定义指令
以下基于vue3 来实现 首先创建一个指令函数页面 sizeDriect.js const map = new WeakMap() //相对map 不会造成内存泄漏 const ob = new ResizeObserver((entries) => { for(const entry of ent ......
vue3 中使用 transition的问题
问题:在路由中添加动画效果但是,当切换路由时,页面一片空白,这个问题困扰了我几天了,今天终于发现了它的问题,特来记录一下,以便参考 首先有这么一段代码 想在vue的路由跳转里面加入动画效果,于是便这样写 // 提示: name="fade-transform" fade-transform是css类 ......
Vue 中给图片添加时间水印
Vue 中给图片添加时间水印,可以通过在图片上叠加一层带有日期时间的透明图层来实现。具体的实现方式及步骤如下: 在 Vue 的 template 中加载原始图片和水印图片。 在 Vue 的 script 中计算日期时间字符串,并根据需要生成对应的日期时间图片(可以借助 Canvas API 来绘制) ......
vue3定义变量ref、reactive、toRefs的特征和应用
1.ref() 函数 ref() 函数用来根据给定的值创建一个响应式的数据对象,传入的为基本数据类型,例如字符串、数字、boolean 等,返回值是一个对象,这个对象上只包含一个 value 属性 ref定义的变量,改变值要.value,而且在template中不用写.value <div>{{ms ......
vue-qr引入时报错You may need an appropriate loader to handle this file type. 问题
今天研究了一下vue生成二维码的功能,在使用vue-qr插件的时候,在所需页面引入,报错,于是就研究了一番。 解决方法 找到node_modules/vue-qr/dist/vue-qr.js文件,搜...e,将...去掉,然后重新运行就好。 ......
vue 实现下拉滑动触底加载
实现下拉滑动触底加载可以分为以下几个步骤: 监听滚动事件,判断是否到达底部。 到达底部后,发起数据请求,获取数据。 将获取到的数据添加到页面上。 下面是一个基于Vue.js的示例代码: <template> <div class="container" ref="container" @scroll ......
vue-router学习笔记
入门 router-link // Go to Home router-view //router-view 将显示与 url 对应的组件。 ##动态路由匹配 带参数的动态路由匹配($route.params) const User = { template: '<div>User</div>', ......
vue项目手动上传文件并展示进度条
问题: 1.上传文件可能会跨域,查找跨域解决办法。(查找资料表明用手动上传,new FormData()方式可以解决,先用这个试一试) 2.手动上传没有进度条,查找进度条实现方式。(自定义axios,添加请求参数onUploadProgress) 3.进度条的进度和上传的对勾显示时机不一致。(解决办 ......
vue全家桶进阶之路24:Mock
Mock 是一个 JavaScript 库,用于生成随机数据或模拟 HTTP 请求响应,用于前端开发中的单元测试、功能测试、集成测试等场景。 Mock 可以生成各种类型的数据,包括字符串、数字、布尔值、对象、数组等等,并支持多种数据格式,例如 JSON、XML、YAML 等。Mock 还支持自定义数 ......
Vue.js 路由的params参数
视频 6.路由的params参数 配置路由,声明接收params参数 { path:'/home', component:Home, children:[ { path:'news', component:News }, { component:Message, children:[ { name: ......
Vue.js 命名路由
视频 5.命名路由 作用:可以简化路由的跳转。 如何使用 给路由命名: { path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //给路由命名 path:' ......
Vue.js 路由的query参数
视频 4.路由的query参数 传递参数 <!-- 跳转并携带query参数,to的字符串写法 --> <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link> <!-- 跳转并携带query参数,to的对象写法 ......
第6章 Linux的档案权限与目录管理
一、使用者与群组 1、档案拥有者 由于Linux是个多人多任务的系统,常常可能有多人同时使用这部主机来进行工作,为了考虑每个人的隐私以及每个人喜好的工作环境而建立档案拥有者。 2、群组概念 群组用于团队管理,同一团队共享同一份资源并共同管理资源。 3、Linux用户身份与群组记录的档案 在Linux ......
Vue2使用setup、ref、reactive等Vue3的组合式api
有些同学想在当前项目中体验Vue3组合式api,setup、ref、reactive等,而且一步就可以升级到Vue3,但是vue确实2.x版本,不改变当前版本怎么办呢? vue2.7.0开始自带composition-api可以放心体验,当然不支持 <script setup>语法糖,还需要retu ......
在vue3中读取本地txt文件
碰到运营提出需求,提供了一个.txt文件,要求输入框校验文件提供的敏感词汇,故以此记录: 上传文件: <input @change="uploadFile" type="file"> 操作函数: const fileContent = ref(''); const uploadFile = asyn ......
vue动态切换组件
多个组件挂在到同一个组件上,通过参数进行动态切换 一、实现方式 <component :is="componentName"></component> 二、示例 import Page1 from './Page1' import Page2 from './Page2' import Page3 ......
nginx配置vue打包npm build的静态页面
nginx 配置vue项目 server { listen 8081; server_name 10.8.8.8; index index.html; root /home/www/crm/vue/dist; #SSL-START SSL相关配置,请勿删除或修改下一行带注释的404规则 #error ......
使用原生input实现单选按钮组
type RadioType = { bottomHeight?: number; name: string; label: string; dirNameList: string[]; required?: boolean; onChange?: (value: string) => void } ......
linux 安装docker后提示权限被拒绝
错误 描述 不是root 用户安装docker 查看docker 版本 docker version permission denied while trying to connect to the Docker daemon socket at unix docker进程使用 Unix Socke ......
2022.3版本idea debug 按钮不全 ( Force Step Into 按钮没了 )
idea版本:2022.3 首次使用debug的时候,Force Step Into 按钮没了 解决步骤: 选择,点击ok即可 参考资料:https://six.club/question/466https://www.pianshen.com/article/83931811562 ......
Vue2 计算属性
说明: 计算属性指的是通过一系列运算之后,最终得到一个属性值。 间的的理解,当我们拥有一些数据时,我们需要将这些数据整合到一起,这时候计算属性就会完成这个操作,整合到一起的数据会变成实例的一个新属性值。当用户改变某个数据时,计算属性也会动态的调成整合后的数据。 这个动态计算出来的属性值可以被模板结构 ......
微信公众号跳转小程序 wx-open-launch-weapp,在vue3+vite中使用 (多个问题集锦)
写这篇文章为了解决现在没有⼀个合集 ,所以我参考其他文档, 及自己的测试最后得出完整的方案 1. 公众号后台关联小程序 要求已认证的服务号 ,在服务号中关联要跳转的小程序 配置 JS接口安全域名 2. 调用wx.config配置‘wx-open-launch-weappʼ标签 3. 修改微信本来的内 ......
思考 React Hook 和 Vue 组合式 API
Vue 组合式 API 优化周期函数 Vue2 选项 API 一个组件的周期函数只能有一个,比如 mounted 周期中有很多获取数据的逻辑都在这里,在 updated 周期中又有很多更新的逻辑在这里。 选项 API: export default { data() { return { a: 1, ......
vue 如何实现对弹窗中的列表进行滚动分页加载数据
html: <div class="userList" v-loading="usrLoading" ref="userListBox"> <ul v-if="userListData!=''" style="minHeight: 300px"> <li v-for="(item,i) in use ......
ant-design-vue wangeditor隐藏工具栏image
解决办法 this.editor.customConfig.menus中注释掉img就可以了 <template> <div :class="prefixCls"> <div ref="editor" class="editor-wrapper" ></div> </div></template>< ......
[CSS]鼠标放到按钮上微微发光的效果
自用,可通过 :hover 和 opacity 实现。 .ico cursor pointer opacity .8.ico:hover opacity 1 ......