拿这个考验干部-CSDN博客

<template> <div> <iframe id='printID'><html><head></head><body></body></html></iframe> <div class="print-container" @click="handlePrint"> <img class="image" :src="xxxxxxx

2022-05-21 17:28:29 1380

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

2022-05-20 10:47:48 237

原创 vue3中自定义组件的双向绑定

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

2022-05-19 10:47:16 639

原创 vue中元素中的滚轮滚动事件

<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

2022-05-17 09:55:44 1742

原创点击元素(div等)外,使元素隐藏的两种方法

实现点击div元素之外隐藏div 需求需要使用元素失焦方法,但是div没有失去焦点的方法给div元素添加tabIndex属性<template> <div tabIndex="0" @blur="divBlur" v-show="activeId === '1'">1234</div></template><script setup>import { ref } from "vue";function divBlur(){

2022-05-11 09:15:57 4274 4

原创 vue引入阿里iconfont

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

2022-05-09 19:03:49 171

原创 vue3的setup父子通信

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

2022-05-05 17:30:52 954

原创 git创建分支,上传分支,合并分支

git创建分支: git branch developZx切换进入分支: git checkout developZx将本地版本库推送到远程服务器:git push origin developZx所有代码添加到暂存区:git add .上传的描述:git commit -m ‘上传的描述’上传代码到分支:git push origin developZx切换分支: git checkout master获取最新提交修改:git pull将developZx合并到master分支:git m

2022-04-12 11:31:56 606 1

原创 vant-weapp中selectComponent无法正常访问组件实例

项目使用wepy框架使用到了vant-weapp中的倒计时通过 selectComponent 选择器获取到组件实例后，可以调用start、pause、reset方法。文档中的使用示例是start() { const countDown = this.selectComponent('.control-count-down'); countDown.start(); },wepy中这样的语法会报错解决:this.$wxpage.selectComponent(’xxx‘)

2022-02-23 16:33:59 1153 1

原创微信小程序使用table表格

做小程序项目中遇到这种需要合并行和并列来展示数据但是小程序没有table标签不能使用合并行合并列找了很多发现小程序中有一个标签和 VUE中的 v-html是一样的功能<rich-text nodes="{{tableHtml}}"></rich-text>rich-text标签可以渲染html代码,这样实现需要后端数据格式的配合demoList:[ [ {name:"9时",colspan:'',rowspan:'',type:'1'},.

2022-02-18 17:25:35 6116 2

原创前端js获取当前时间的前n个月时间和后n个月时间

获取前n个月//获取当前日期的前n个月const minDate=(date=new Date())=>{ date.setMonth(date.getMonth()-5) let year=date.getFullYear(); let month=(date.getMonth()+1).toString().padStart(2,'0'); let time=year+'-'+month let minDate=new Date(time).getTime()//获取时

2022-02-14 18:47:26 1648

原创微信小程序带参返回上个页面

//返回上个页面并传值（传值页面使用）const setPageData=(data,pageIndex)=>{ //在需要执行带参数返回上级页面的地方加上 let pages= getCurrentPages(); //获取当前页面js里面的pages里的所有信息。 let prevPage= pages[pages.length - pageIndex]; //获取上一个页面的js里面的pages的所有信息,-2 是上一个页面 prevPage.setData(data) w

2022-02-13 17:04:06 574

原创 vue使用Ant design的a-tag事件@close的问题

<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否则会出现一次删除两个标签的情况...

2022-02-10 13:57:00 1742

原创 vue使用setInterval完成倒计时,带暂停开始

//倒计时方法 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{.

2022-02-08 15:34:49 1525 1

原创 vue路由跳转不触发mounted方法

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

2022-01-05 11:04:45 3372

原创 vue使用Ant design的input输入框,去掉边框和获取焦点时的边框

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

2021-12-30 11:18:23 4954

原创 vue使用Draggable拖动组件

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

2021-12-28 16:33:33 486

原创 vue 强制更新数据this.$forceUpdate()

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

2021-12-07 16:04:52 180

原创小程序+wepy使用vant的van-steps步骤条

vant中的组件是这样的项目中的需求样式是首先找到steps组件组件中是循环了steps我修改了绿色框中的代码接下来就是数据问题了,回到使用van-steps的页面<van-steps steps="{{steps}}" active="{{ active }}" direction="vertical" active-color="#025BFF"/>data = { active:0, steps:[ {

2021-11-30 17:14:55 1620 3

原创 vue使用高德地图,点击地图获取经纬度

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){//回显经纬度标记

2021-11-17 16:11:07 689

原创 vue+Ant design使用table分页的功能

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

2021-10-09 10:52:23 1060

原创 vue+Ant design实现嵌套table(expandedRowKeys,expandIcon)

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

2021-09-26 19:54:19 1660 1

原创 vue使用Ant design中的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

2021-09-22 18:09:36 1384

原创 vue中使用vuedraggable 实现拖拽排序

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

2021-09-07 17:38:22 209

原创 Vue使用Ant design中a-tree的scopedSlots

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

2021-09-03 16:33:53 3239

原创 vue+Ant design使用a-table

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

2021-08-25 19:56:45 3102

原创小程序+wepy实现图片的抖动旋转效果

小程序+wepy实现图片的抖动旋转效果直接上代码<image class="hongbao" mode="scaleToFill" src="../images/hongbao.png" animation="{{animation}}" />样式.hongbao{ width:90rpx; height:90rpx;}data中的变量data = { animation: {}, next:true,};在onshow中写async on

2021-08-19 18:11:55 294

原创小程序wepy框架引入vant.UI

小程序wepy框架引入vant.UI在项目根目录npm i vant-weapp -S --production安装vant下载安装完成后去node_modules/_vant_weapp复制dist文件夹到src/components中替换名称为van在要使用vant的页面的config中配置usingComponentsconfig = { navigationBarTitleText: "", usingComponents: { "van-bu

2021-07-02 18:15:35 390

原创 input上传文件

input调用上传文件一个隐藏的input标签,一个触发uploadChange()的按钮<input style="display: none" ref="filElem" type="file" accept="application/vnd.ms-excel" @change="getFile"/><a-button type="primary" @click="uploadChange"> 上传文件&

2021-04-28 18:27:32 277

原创 vue中使用quill-editor富文本编辑器

vue中使用quill-editor富文本编辑器npm下载npm install vue-quill-editor --savenpm install quill —savemian.js中全局引入//富文本编辑器插件引入import VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'quill/dist/qui

2021-04-13 18:56:25 111

原创 vue中用transition标签css动画效果

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

2021-04-13 16:56:18 397

原创 CSS吸顶效果

CSS吸顶效果/*吸顶*/<div class="sticky sticky-top"></div>/*吸底*/<div class="sticky sticky-bottom"></div>style中写.sticky{ position: -webkit-sticky; position: sticky; width: 100%; height: 40px; z-index: 1; backgr

2021-04-13 16:42:46 143

空空如也

空空如也