m0_52948787的博客

/** * * @param {String} imgsrc 图片链接url */ export function download(imgsrc){ //下载图片地址和图片名 var image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { var canvas = document.create

vue2中有个.sync的语法糖可以使用 <!-- 父组件 --> <child :visible.sync="imgVisible" /> 子组件可以this.$emit(‘update:imgVisible’,false) //子组件使用 this.$emit('update:imgVisible',false) vue3写法其实变化不大 其实也是语法糖 <!-- 父组件 --> <div @click="imgVisible=true">打

<div @scroll.passive="scrollHandle" style="width:80px;height:100px;overflow-y:auto;"></div> 元素加上高度 function scrollHandle(e){ console.log("高度" + e.target.scrollHeight); console.log("距离上面" + e.target.scrollTop); console.log("元素高度" + e.tar

vue中用transition标签css动画效果 <template> <transition name="drop-down-transition"> <!-- div实现动画 --> <div v-show="isShow" class="div-box"><div> </transition> </template> <style> .div-box{ width: 280px;

创建项目 下载到本地,会下载一个压缩包,解压后拿到 在assets文件夹中创建一个icon文件夹,将这几个文件放进去 最后在main.js中引入.css文件就ok了 后面如果新添加了图标直接在阿里图标中复制代码替换掉.css文件中的代码就ok 复制所有代码,替换.css文件代码 <i class="iconfont icon-shangjiantou" /> 可以用了 ...

父调用子的方法 父: <template> <div @click="handle">调用子组件的方法</div> <child ref="alarmDetailRef" /> </template> <script setup> import { ref } from "vue"; let alarmDetailRef = ref(null); //调用子组件方法 function handle() { alarmD

<a-tag v-for="val in item.childs" :key="val.id" color="blue" closable @close="deleteLabelOrGroup(val.id)" > {{val.name}} </a-tag> a-tag在v-for的时候:key不能使用index 否则会出现一次删除两个标签的情况 ...

//倒计时方法 countdown(){ if(this.maxTime>0){//最大时间大于0 this.maxTime-- this.minutes=Math.floor(this.maxTime / 60).toString().padStart(2,'0') this.seconds=Math.floor(this.maxTime % 60).toString().padStart(2,'0') }else{ .

将mounted(){},换成activated(){}方法 activated:进入当前存在activated()函数的页面时，一进入页面就触发；可触发多次 mounted:只触发一次

vue使用Ant design的input输入框,去掉边框和获取焦点时的边框 /* 取消 多行文本框 伸缩效果 resize: none; */ /* 取消 多行文本框 边框 border: none; */ textarea.ant-input{ resize: none; border: none; } /* 取消 多行文本框 获取焦点的 边框 效果 */ textarea.ant-input:focus { border: none; box-sh

vue使用draggable完成拖动拖拽功能

使用Vue开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值； 赋值后，执行**this.$forceUpdate()**方法 强制刷新数据。

vue使用高德地图,点击地图获取经纬度 //初始化地图 getMap() { let _this = this; let map = new AMap.Map("container", { resizeEnable:true, // center: [108.944385, 34.196007], zoom: 11, }); if(_this.lnglat.length>0){//回显经纬度 标记

vue+Ant design使用table分页的功能 <a-table :columns="columns" :data-source="data" :scroll="{ x: 1200,y:1000 }" :pagination="pagination" @change="tablePaginationChange" > </a-table> :pagination=“pagination” @change=“tablePaginatio

vue+Ant design实现嵌套table(expandedRowKeys,expandIcon) <a-table :columns="columns" :data-source="dataSource" :pagination="false" :expandIcon='expandFirstIcon' :expandedRowKeys.sync="firstExpandedRowKeys" > <!-- 第二层 table 数据 -->

vue使用Ant design中的table点击行触发事件 <a-table :columns="columns" :data-source="value" :pagination="false" rowKey="id" :customRow="rowClick" ></a-table> *********:customRow="rowClick"是重点 在data中定义 rowClick data(){ return{ co

vue中使用vuedraggable 实现拖拽排序 安装: yarn add vuedraggable 或 npm i -S vuedraggable 引入 <script> import vuedraggable from 'vuedraggable'; export default { components: {vuedraggable}, } </script> 使用: <template> <vuedraggable class="wrapper"

Vue使用Ant design中a-tree的scopedSlots实现树标题的前后都有icon图标 <a-tree style="width:100%" :tree-data="treeData" show-icon :default-selected-keys="[treeData[0].key]"> <!-- 每项 最前面的 箭头的 icon --> <a-icon slot="switcherIcon" type="caret-down" />

vue+Ant design使用a-table 今天遇到一个需求是 组件中有多个a-table(v-for循环出的),但是多个a-table的选项,只能选择一个 <a-table :columns="columns" :data-source="dataSource" rowKey="UUID" :pagination="false" :rowSelection="{selectedRowKeys:selectedRowKeysArray,onChan