<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[yang_da_da的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/yang_da_da</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; yang_da_da]]></copyright><item><title><![CDATA[低代码设计器实现自定义脚本事件]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/137224915</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/137224915</guid><author>yang_da_da</author><pubDate>Mon, 01 Apr 2024 14:53:32 +0800</pubDate><description><![CDATA[分类事件初始脚本表格表单onLoad表格行操作按钮click表单组件changeblur。]]></description><category></category></item><item><title><![CDATA[vue实现垂直无限滑动日历组件]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/123852039</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/123852039</guid><author>yang_da_da</author><pubDate>Wed, 30 Mar 2022 17:38:35 +0800</pubDate><description><![CDATA[用vue做了一个垂直滚动的日历，在这里记录一下实现(●’◡’●)
效果

]]></description><category></category></item><item><title><![CDATA[grid布局兼容IE浏览器踩坑]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/123063014</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/123063014</guid><author>yang_da_da</author><pubDate>Tue, 22 Feb 2022 10:52:38 +0800</pubDate><description><![CDATA[grid布局其实对于浏览器的兼容性支持不是很好，支持IE时需要加前缀-ms-
普通写法
display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: 50% 50%;

IE兼容写法
display: -ms-grid;
-ms-grid-rows: 50% 50%;
-ms-grid-columns: 50% 50%;

用css写是没有问题的，但在vue中用v-bind:style绑定样式不生效了，后来发现vue会自动添加前缀，标准]]></description><category></category></item><item><title><![CDATA[vue实现吸壁悬浮球]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/120822071</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/120822071</guid><author>yang_da_da</author><pubDate>Mon, 18 Oct 2021 10:59:44 +0800</pubDate><description><![CDATA[最近接到一个需求，需要一个客服悬浮按钮，可以拖拽并吸壁到页面周边，我们一起看看吧
1.创建一个template，定义客服按钮，自定义v-drag指令
&lt;template&gt;
  &lt;div class="container"&gt;
    &lt;div
      class="btn"
      id="btn"
      :style="{ visibility: dialogVisible ? 'hidden' : 'visible' }"
      v-drag="{ set]]></description><category></category></item><item><title><![CDATA[js获取当前周区间]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/120323694</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/120323694</guid><author>yang_da_da</author><pubDate>Thu, 16 Sep 2021 10:25:52 +0800</pubDate><description><![CDATA[var timeStamp = new Date().getTime();
var currentDay = new Date().getDay();
this.monday = new Date(timeStamp - (currentDay - 1) * 60 * 60 * 24 * 1000)
 .toLocaleDateString()
 .replace("/", "-");
this.sunday = new Date(timeStamp + (7 - currentDay) * 60 * 60]]></description><category></category></item><item><title><![CDATA[vue实现左右滑动tab]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/120292527</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/120292527</guid><author>yang_da_da</author><pubDate>Tue, 14 Sep 2021 17:58:30 +0800</pubDate><description><![CDATA[1.两个div，一个outer，一个inner，inner设置absolute，滑动时改变inner的left值
&lt;div class="system-tabs"&gt;
      &lt;i
        class="el-icon-arrow-left"
        style="left: 13%"
        @click="arrowClick('pre')"
      &gt;&lt;/i&gt;
      &lt;i
        class="el-icon-arr]]></description><category></category></item><item><title><![CDATA[vue全局管理自定义组件]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/116976624</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/116976624</guid><author>yang_da_da</author><pubDate>Tue, 18 May 2021 09:49:04 +0800</pubDate><description><![CDATA[参考官方API  https://cn.vuejs.org/v2/api/#Vue-component

创建baseComponents.js

// 基础组件全局管理
import ChooseModal from "_c/choose-modal";
import Editor from "_c/editor";
import GroupUpload from "_c/group-upload";
import ICascader from "_c/i-cascader";
import ICheck]]></description><category></category></item><item><title><![CDATA[vue路由动态加载vue文件时，找不到跳404页面]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/116921835</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/116921835</guid><author>yang_da_da</author><pubDate>Mon, 17 May 2021 11:27:10 +0800</pubDate><description><![CDATA[项目菜单需要动态生成，vue文件是配置的，当文件不存在时，直接用import会报错终止程序，一番研究后发现可以特殊处理一下。
component = () =&gt; {
   return new Promise((resolve, reject) =&gt; {
       var RemoteComponent =
           import ('@/view/' + menu.menuUrl + '.vue')
       RemoteComponent.then(res =&gt; {]]></description><category></category></item><item><title><![CDATA[vue实现tree-select组件(树选择器)]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/116498638</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/116498638</guid><author>yang_da_da</author><pubDate>Fri, 07 May 2021 18:17:05 +0800</pubDate><description><![CDATA[基于iview的树选择器组件效果思路实现
组件效果

思路
主要用iview的Dropdown、Input和Tree组件实现，Dropdown作为外层组件，实现下拉收缩效果，Input实现数据回显，Tree加载数据选项。重点是Tree作为Dropdown的list插槽实现下拉选项的效果
实现

模板部分
trigger为custom，手动控制下拉框的显示，Input设为只读

&lt;Dropdown
  ref="dropdownRef"
  style="width:100%"
  trigger="c]]></description><category></category></item><item><title><![CDATA[vue项目配置请求加载中效果]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/115957613</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/115957613</guid><author>yang_da_da</author><pubDate>Wed, 21 Apr 2021 15:50:24 +0800</pubDate><description><![CDATA[1.main.vue引入iview Spin组件
&lt;Content class="content-wrapper"&gt;
     &lt;Spin fix v-show="loading"&gt;
       &lt;Icon type="ios-loading" size="18" class="spin-load"&gt;&lt;/Icon&gt;
       &lt;div&gt;加载中...&lt;/div&gt;
     &lt;/Spin&gt;
     &lt;keep-al]]></description><category></category></item><item><title><![CDATA[vue项目刷新页面（provide、inject方式）]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/115955807</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/115955807</guid><author>yang_da_da</author><pubDate>Wed, 21 Apr 2021 15:26:22 +0800</pubDate><description><![CDATA[开发vue项目时，框架需要一个刷新按钮，手动刷新页面渲染，我们知道window.reload()，或者router.go(0)可以路由刷新，重新进入当前页面，但是这种方法的问题在于会导致页面白屏，用户体验不是很好。

provide、inject方式
我们在需要刷新的路由层级，&lt;router-view&gt;渲染的地方用v-if去控制页面刷新。在这里用App.vue举例
&lt;template&gt;
  &lt;div id="app"&gt;
    &lt;router-view v-if="]]></description><category></category></item><item><title><![CDATA[微信小程序实现走马灯式抽奖]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/112649128</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/112649128</guid><author>yang_da_da</author><pubDate>Fri, 15 Jan 2021 10:45:06 +0800</pubDate><description><![CDATA[先来看下效果

设置奖项
awardList是从后台拿到的奖项数组，list不够八位时填充谢谢参与奖项，超过八位时截取数组，然后随机打乱数组，保证奖项随机布局，第四位固定填充立即抽奖按钮
// 设置奖项
  settingAward(awardList) {
    const len = awardList.length;
    const award = {
	  awardName: '谢谢参与',
	  awardMoney: 0,
	  awardType: '00',
	  awardCode]]></description><category></category></item><item><title><![CDATA[vue组件间通信六种方式（完整版）]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/112648388</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/112648388</guid><author>yang_da_da</author><pubDate>Fri, 15 Jan 2021 10:09:02 +0800</pubDate><description><![CDATA[前言
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：
image
如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。
针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、emit/emit/emit/on、vuex、$parent / children、childr]]></description><category></category></item><item><title><![CDATA[微信小程序打印实时日志]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/111961399</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/111961399</guid><author>yang_da_da</author><pubDate>Wed, 30 Dec 2020 14:11:55 +0800</pubDate><description><![CDATA[最近遇到了一个蜜汁bug，项目上线了但是定位不出问题，于是引入了微信的实时日志管理器对象来帮助定位，一起看下吧。
API地址

首先创建一个log.js文件

// 从基础库2.7.1开始支持
const log = wx.getRealtimeLogManager? wx.getRealtimeLogManager() : null;
module.exports = {
  info() {
    if (!log) return
    log.info.apply(log, arguments)
]]></description><category></category></item><item><title><![CDATA[CSS3实现红包抖动效果]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/111479678</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/111479678</guid><author>yang_da_da</author><pubDate>Tue, 22 Dec 2020 10:10:11 +0800</pubDate><description><![CDATA[有个需求是要实现红包的抖动效果，之前没做过，记录一下嘻嘻~~
这里用到了transform: rotate()属性，加上animation实现动画效果，不多说上代码
.red_packet {
  width: 180rpx;
  height: 220rpx;
  position: fixed;
  top: 10rpx;
  right: 20rpx;
  color: #D60E19;
  animation: shake .5s linear infinite;
}
@keyframes shak]]></description><category></category></item><item><title><![CDATA[小程序实现锚点效果]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/110873801</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/110873801</guid><author>yang_da_da</author><pubDate>Tue, 08 Dec 2020 15:42:45 +0800</pubDate><description><![CDATA[效果
1.点击tab页跳转至当前锚点内容
2.滚动页面时tab标签自动切换至当前tab


实现
1.wxml
使用scroll-view组件，顶部和内容都设成可滚动的区域
extraHeight是接下来要计算的额外高度，使点击到最后一个tab页时，内容可以在顶部
&lt;view style="height :{{extraHeight}}px"&gt;&lt;/view&gt;

&lt;view class="container"&gt;
 &lt;scroll-view scroll-x class]]></description><category></category></item><item><title><![CDATA[小程序AES、RSA加密]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/109366645</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/109366645</guid><author>yang_da_da</author><pubDate>Sat, 31 Oct 2020 17:54:21 +0800</pubDate><description><![CDATA[微信小程序RSA加密
加密流程：获取到后台传来的公钥，调用小程序登录接口获取到tokenId和userId，通过公钥使用RSA加密参数，再次请求时传给后台
这是开发的第三个小程序，基于一个物流系统，简化功能开发下单流程。登录的时候，系统是使用RSA进行加解密的。

创建RSA加密JS文件wx_rsa.js，放到utils文件夹下面
可在网上下载js文件，参考https://github.com/zhangzhaopds/WeixinApp_RSA_Signature/blob/master/utils/wx]]></description><category></category></item><item><title><![CDATA[获取flowable流程图资源]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/103562001</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/103562001</guid><author>yang_da_da</author><pubDate>Mon, 16 Dec 2019 14:18:30 +0800</pubDate><description><![CDATA[@PostMapping(value = "/flow/resource")
    public FlowResultVO getFlowResource(@RequestBody HashMap&lt;String, String&gt; map) throws IOException {
        String pId = map.get("pId");
        String ...]]></description><category></category></item><item><title><![CDATA[Flowable的常用数据表]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/103556920</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/103556920</guid><author>yang_da_da</author><pubDate>Mon, 16 Dec 2019 09:25:23 +0800</pubDate><description><![CDATA[SELECT * FROM ACT_GE_BYTEARRAY;  /*通用的流程定义和流程资源*/
SELECT * FROM ACT_GE_PROPERTY; /*系统相关属性*/

SELECT * FROM ACT_HI_ACTINST;  /*历史的流程实例*/
SELECT * FROM ACT_HI_ATTACHMENT; /*历史的流程附件*/
SELECT * FROM ACT_H...]]></description><category></category></item><item><title><![CDATA[前端项目实现Markdown编辑器]]></title><link>https://blog.youkuaiyun.com/yang_da_da/article/details/102805800</link><guid>https://blog.youkuaiyun.com/yang_da_da/article/details/102805800</guid><author>yang_da_da</author><pubDate>Wed, 30 Oct 2019 09:41:33 +0800</pubDate><description><![CDATA[接触Markdown是写博客时，发现Markdown的语法简洁又很全面，在写文章时可以专注于文字内容而不是排版效果，因此自己实现了将Markdown引入到前端中
一、引入showdown
showdown是markdown的开源库，内置markdown的转换机制，我们直接引入到项目中即可
方式1： github上下载
github地址 https://github.com/showdownjs/s...]]></description><category></category></item></channel></rss>