vue svg

1.版本 "dom-to-image": "^2.6.0", // or "html2canvas": "^1.4.1", 2.引入 import domtoimage from 'dom-to-image'; // or import html2canvas from 'html2canvas'; ......

<template> <div> <Card dis-hover> <div class="page-body"> <Form ref="queryForm" :label-width="90" label-position="left" inline> <Row :gutter="16"> <Co ......

拿若依前后端分离版项目举例： 修改前端代码 ruoyi-ui/vue.config.js // 二级目录名称ruoyi-ui publicPath: '/ruoyi-ui/', ruoyi-ui/src/router/index.js export default new Router({ mode ......

isRef()​ 检查某个值是否为 ref。 unref()​ 如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖 toRef()​ 可以将值、refs 或 getters 规范化为 refs (3.3+) ......

下载安装 npm install moment -s 全局方法 main.js 里面注册生成 import * as moment from 'moment' Vue.prototype.$moment = moment 全局过滤器 全局过滤器实现日期格式化 // 用法：1.{{ item.time ......

参考： 1.VUE + Springboot + SM4前端加密 后端解密 https://www.cnblogs.com/caoxwen/p/16179683.html 前端 1.引入gm-crypt npm install gm-crypt 2.封装js sm4Util.js const SM4 ......

本文适合对vue，arcgis4.x，threejs，ES6较熟悉的人群食用。 先报备一下版本号 "vue": "^2.6.11" "@arcgis/core": "^4.21.2" "three": "^0.149.0" 语法：vue，ES6 其实现在主流很多海量建筑渲染的方案是加载3DTiles ......

watchEffect()函数的作用是接收函数作为参数，并立即执行该函数，当该函数依赖的数据发生变化时，重新运行该函数。 <template> <span> <p>{{num}}</p> <button @click="btnFn">+1</button> </span> </template> < ......

在Vue中，父子组件之间有多种方式可以进行数据的传递。以下是两种常见的父子组件传值方式的详细代码和讲解： 1. 使用props进行属性传递： - 父组件通过在子组件标签上绑定属性，将数据传递给子组件。 - 子组件通过在props对象中定义属性来接收父组件传递的属性，并在组件内部使用。 父组件： `` ......

readonly()函数的作用是接收一个对象，其可以是普通对象，也可以是响应式对象，然后返回接收对象的只读代理对象。 通俗地讲，即如果想要一个对象是只读的，就使用readonly()函数。 <template> <span> <p>{{obj}}</p> <p>{{newobj}}</p> </sp ......

Vue.js提供了多种实现排序的方式。下面列举了几种常见的排序方法及示例代码。 1、使用JavaScript原生的Array.prototype.sort()方法进行排序。这种方法适用于简单的数组排序需求。 // 在Vue组件中的方法中使用sort方法进行排序 data() { return { m ......

直接上代码,可以点击左和右两个汉字进行横向滚动 <template> <div class="Home"> <div style="display: flex;height: 100%;align-items: center;"> <div @click="scrollLeft('scrollCon ......

效果图： 如图分为多选模式和单选模式。 group-select： 1 <template> 2 <div> 3 <el-select 4 v-model="innerValue" 5 :placeholder="placeholder" 6 @change="changeSelect" 7 :cl ......

封装了关于时间轴的组件，有时候统计页面会用到。 效果图： 时间轴分为2种，一种是time-axis：范围选择模式，一种是date-axis：步长选择模式。 代码中涉及到的工具类和图片资源，请移步页面底部的gitee地址下载源码。 time-axis： 1 <template> 2 <div clas ......

需求：一个表单中某个字段，根据另一个字段变化，校验是否必填 <el-form ref="detail" :model="detail" :rules="ruleData" size="small" label-width="100px"> <el-card> <el-row> <el-col :sp ......

1.vue2常用生命周期：创建前：beforeCreate() 只有一些实例本身的事件和生命周期函数 创建后：Created() 是最早使用data和methods中数据的钩子函数 挂载前：beforeMount() 指令已经解析完毕，内存中已经生成dom树 挂载后：Mounted() dom渲染完 ......

记一次bug。。 由于【甲方负责人】的表单是响应式的，然后直接添加到另一个响应式的数组里了，就会造成【更改表单内容，也会使数组里的值发生变化】 解决方法 1 //添加到列表，做临时显示 2 const addresponsible = () => { 3 const newResform = { . ......

## 说明 需求：实现一个拖拽指令，可在父元素区域任意拖拽元素，同时如果传入的值为 father，则拖拽的时候以父元素为拖拽对象 思路： 1、设置需要拖拽的元素为absolute，其父元素为relative。 2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。 3 ......

## 安装依赖 首先，你需要安装 xlsx 和 file-saver 这两个库。 ```bash npm install xlsx file-saver --save ``` 有兴趣可以看看两个库的官方说明，直接看下面使用也没问题。 [xlsx 官方介绍](https://www.npmjs.com ......

Refs模板用来获取页面DOM元素或者组件，类似于Vue2.X中的$refs。Refs模板的使用方法如下。 (1)在setup()中创建ref对象，其值为null。 (2)为元素添加ref属性，其值为步骤(1)中创建的ref对象名。 (3)完成页面渲染之后，获取DOM元素或者组件。 src\view ......

链判断运算符的安装 在vue项目中使用es6新的[运算符]（例如链判断运算符，null判断运算符）会报错，编译不成功需要安装babel依赖,并添加到babel.config.js中。 1.安装依赖 //NULL判断运算符 ?? npm install @babel/plugin-proposal-n ......

1. vue3页面传参 方式一 <div><router-link :to="/">首页</router-link></div> <div><router-link :to="{path:'/news/detail',query:{id:1}}">详情</router-link></div> <di ......

依赖注入就是父组件向后代组件传递数据，可以向子组件传递数据，也可以向孙子组件传递数据。 在父组件中使用provide()函数，向后代传递数据。 在后代组件中使用inject()函数，获取传递过来的数据。 provide()​ 提供一个值，可以被后代组件注入。 inject()​ 注入一个由祖先组件或 ......

# el-autocomplete核心参数 可以实现异步的数据拉取，从异步返回的数据中，选择需要的结果，并回显到文本框中。 ## fetch-suggestions 回调列表，异步的方式获取数据列表，显示在列表框中 ## @select 当选中某一项时，会触发这个方法，将数据获取到，这时，我们可以将 ......

watch()​ 侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数 <template> <span> <p>{{num}}</p> <p>{{num2}}</p> <button @click="num++">+1</button> <button @click="addNum">+ ......

Vscode使用版本 下载这个插件 ......

使用setup的情况下这个时候我们无法使用this，注意在setup中setup是封闭的，不会将子组件事件暴露出来，所以要用defineExpose()，将需要在父组件调用的函数暴露出去，子组件代码如下： ``` 哈哈哈哈 ``` 父组件： ``` import { ref, onMounted } ......

<template> <span> <p>普通属性:{{num}}</p> <p>计算属性-只读:{{numAdd}}</p> <p>计算属性-可读写:{{numAdd2}}</p> <button @click="numUpdate">修改普通属性</button> <button @click= ......

1.Person.vue <template> <div> <h1>人员列表</h1> <h1 style="color: red;">Count 组件的求和为{{ sum }}</h1> <input type="text" placeholder="请输入名字" v-model="name">< ......

1. Count.vue <template> <div> <h1>当前求和位{{ sum}}</h1> <h1>当前求和放大10倍后是{{ bigSum }}</h1> <h1>我在{{school }},学习{{ subject }}</h1> <select v-model.number="n ......