<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[dashinihao的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/dashinihao</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; dashinihao]]></copyright><item><title><![CDATA[antd-vue 树改变前面图标 （完全实现自定义图标）]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/121334747</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/121334747</guid><author>dashinihao</author><pubDate>Mon, 15 Nov 2021 15:04:31 +0800</pubDate><description><![CDATA[问题 我们在用antd-vue树的数据时想要自定义改变数据展开关闭的图标，除了默认的样式，我们在用一些api改变时效果总是不近人意，现在用css可以完全实现自定义图标的改变，根据需求来引用有的可能并不适配 仅作参考

上代码


// 树形引用
 &lt;a-tree
      :treeData="treeData"
      :showIcon="false"
      :showLine="true"
    &gt;

样式改变


&lt;style&gt;
// 关闭时的图标
::v-de]]></description><category></category></item><item><title><![CDATA[vue3的路由(vue-router@4XX)版本的使用]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/121284152</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/121284152</guid><author>dashinihao</author><pubDate>Fri, 12 Nov 2021 11:25:57 +0800</pubDate><description><![CDATA[前提：最近学习vue3 对应的路由也随之升级

vue2 对应的路由在vue3中使用会出问题，所以学习vue3时对应的路由创建引入也需要进行变化

1 安装版本（后续小版本还会更新大家自由安装）


 "vue": "^3.2.16",

  "vue-router": "^4.0.12"


2：首先创建路由


// 引入vue-router的两个api,
// createRouter创建路由，createWebHashHistory 采用hash模式， createWebHistory...]]></description><category></category></item><item><title><![CDATA[前端超链接下载文件和iframe下载文件]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/120550261</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/120550261</guid><author>dashinihao</author><pubDate>Wed, 29 Sep 2021 15:58:29 +0800</pubDate><description><![CDATA[超链接下载文件就是用a标签下载文件

非常简单

下面是封装的一个下载的组件的代码，仅供参考


&lt;template&gt;
  &lt;a
    ref="link"
    :href="url"
    :download="fileName"
  /&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: 'HDownload',
  props: {
    hrefUrl: {
      type: String,
]]></description><category></category></item><item><title><![CDATA[vue判断滚动条是否触底（触底增加数据）]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/119380123</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/119380123</guid><author>dashinihao</author><pubDate>Wed, 04 Aug 2021 11:25:40 +0800</pubDate><description><![CDATA[html部分


&lt;div id="scro" style="height:300px;overflow: auto;" &gt;
      &lt;a-table 
         style="margin-top:20px;background:#fff" :columns="columns" 
         :dataSource="dataSource" :customRow="customRow" :pagination="false"&gt;
      &lt;/a-table]]></description><category></category></item><item><title><![CDATA[图片简单的拖拽排序（vue，接近原生）]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/119352506</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/119352506</guid><author>dashinihao</author><pubDate>Tue, 03 Aug 2021 16:22:14 +0800</pubDate><description><![CDATA[项目需求做一个图片上传并且能够进行拖拽排序，项目中有引入了高德地图api

起初用的是vueDraggable，但是每次点击地图后整个页面的vueDraggable的拖拽功能失效了，无奈自己写了写，大体功能实现了但是没有插件的动画效果那么好

html部分


               &lt;div
                class="mylist"
                :draggable="false"
                v-for="(item, index)]]></description><category></category></item><item><title><![CDATA[antd-vue 表格拖拽相关（转载的）]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/118762847</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/118762847</guid><author>dashinihao</author><pubDate>Thu, 15 Jul 2021 16:34:54 +0800</pubDate><description><![CDATA[&lt;template&gt;
  &lt;div class="approvalStyle"&gt;
    &lt;draggle v-model="draggleList" @end="end" @start="start"&gt;
      &lt;transition-group&gt;
        &lt;div class="listStyle" v-for="item in draggleList" :key="item.value"&gt;{{ item.name }}&lt;/.]]></description><category></category></item><item><title><![CDATA[配合后端有个orderNumber的排序]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/118762534</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/118762534</guid><author>dashinihao</author><pubDate>Thu, 15 Jul 2021 16:31:52 +0800</pubDate><description><![CDATA[1 引用vueDraggable组件

2主要关注orderNum的改变

3给后端传值是传改变项的iid和orderNum


&lt;template&gt;
  &lt;div class="approvalStyle"&gt;
    &lt;draggle v-model="draggleList" @end="end" @start="start"&gt;
      &lt;transition-group&gt;
        &lt;div class="listStyle" v-...]]></description><category></category></item><item><title><![CDATA[图片转base64的步骤]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/118632216</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/118632216</guid><author>dashinihao</author><pubDate>Sat, 10 Jul 2021 10:51:10 +0800</pubDate><description><![CDATA[&lt;script&gt;
  function getBase64 (file) {
    return new Promise((resolve, reject) =&gt; {
     // 建立一个 FileReader对象
     const reader = new FileReader()
     // 把一个图片转换为base64 路径
     reader.readAsDataURL(file)
     // render.result就是包含了转换后的内容
     re.]]></description><category></category></item><item><title><![CDATA[antd-design-vue上传组件（upLoad）使用总结]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/118630567</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/118630567</guid><author>dashinihao</author><pubDate>Sat, 10 Jul 2021 10:21:06 +0800</pubDate><description><![CDATA[项目需求中总是会有上传图片文件等功能，现在有时间正好做下简单总结

一般常用的几个属性就是fileList,customRequest,multiple,showUploadList,before

常用事件就是change

1、multiple

  这个就是在选择文件的时候是否能够多选，设置为true可以多选，不必多说

2、showUploadList

  这个属性如果设置为 :showUploadList=false的话，就是不展现上传后的列表

 

就是这个列表将不做展...]]></description><category></category></item><item><title><![CDATA[关于moment的常用api]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/118604980</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/118604980</guid><author>dashinihao</author><pubDate>Fri, 09 Jul 2021 14:30:02 +0800</pubDate><description><![CDATA[moment数据，时间戳，和常用时间的相互转换

1 、moment数据--&gt;时间戳

valueOf()方法 同Date对象一样，如果获得的momen数据只需要调用valueOf即可

举例 let data= item.valueOf()

2、moment数据--&gt;正常格式数据

 用format()

举例：let data=moment(item).format('YYYY-MM-DD')

3、时间戳--&gt;moment数据

直接调用即可

举例: letdata=...]]></description><category></category></item><item><title><![CDATA[使用antd-vue 的a-table自定义展开图标并且异步展开（展开图标点开两次才生效的问题解决）]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/118248584</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/118248584</guid><author>dashinihao</author><pubDate>Sat, 26 Jun 2021 14:37:06 +0800</pubDate><description><![CDATA[1 a-table自定义展开图标

 



需求是展开图标换成这个样子

可以利用a-table的expandIcon属性

具体使用如下


 &lt;a-table
        v-if="isRouterAlive"
        style="margin-top:20px"
        :columns="columns"
        :data-source="matterList"
        :expandIcon="customExpandIcon"
   ...]]></description><category></category></item><item><title><![CDATA[vue 组件的深度刷新]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/118248465</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/118248465</guid><author>dashinihao</author><pubDate>Sat, 26 Jun 2021 13:55:35 +0800</pubDate><description><![CDATA[遇到的问题？

假如一关于一个组件的属性或者数据进行改变了，vue没有进行页面刷新或者重绘，可以用this.$nextTick()完美解决


&lt;a-table v-if="isReview"&gt;&lt;/a-table&gt;

&lt;script&gt;
 export default{
    data(){
      return{
        isReview:true
       }
    },
   methods:{
     async reSet{
        ]]></description><category></category></item><item><title><![CDATA[vue 在工作中的一些的小功能总结]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/117415427</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/117415427</guid><author>dashinihao</author><pubDate>Mon, 31 May 2021 14:09:40 +0800</pubDate><description><![CDATA[1 把大数三个为一组分开
举例 123456=&gt;123,456
可以加一个过滤器
   filters: {
    showNumber: (showCount) =&gt; {
      return Number(showCount).toLocaleString()
    }
  },


]]></description><category></category></item><item><title><![CDATA[antd-design-vue a-ranger-picker 部分功能的项目总结]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/117414893</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/117414893</guid><author>dashinihao</author><pubDate>Mon, 31 May 2021 14:03:22 +0800</pubDate><description><![CDATA[antd-vue使用方面小功能总结
1 a-range-picker
&lt;a-range-picker
         :disabled-date="disabledDate"
          v-model="priceRangeDate"
          @calendarChange="calendarPriceRangeChange"
            @change="changePriceRangeDate"
 &gt;
  &lt;a-icon
     slot="su]]></description><category></category></item><item><title><![CDATA[关于 vue2中vue-router的学习总结]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/115552163</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/115552163</guid><author>dashinihao</author><pubDate>Fri, 09 Apr 2021 16:11:20 +0800</pubDate><description><![CDATA[关于 vue2中vue-router的学习总结
1安装：
      yarn add  vue-router

2 页面结构:
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 const routers=new Router({
    mode:"hashRouter",
    routes:[
       {path:"/",component:()=&gt;import('./../home'},
       { path]]></description><category></category></item><item><title><![CDATA[vue slot插槽 匿名插槽，具名插槽，和作用域插槽]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/115300420</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/115300420</guid><author>dashinihao</author><pubDate>Mon, 29 Mar 2021 15:17:11 +0800</pubDate><description><![CDATA[首先需要理解的是插槽的作用就是在调用组件的时候，让两标签之间的内容显示出来，举例来说
我们有一个 childe组件 引入到父组件中 &lt;Child&gt; &lt;/Child&gt;,默认如果在两个标签内加内容，他是不显示的
比如&lt;Child&gt;&lt;div&gt;是谁的心儿啊&lt;/div&gt; &lt;/Child&gt;  渲染出来 div里的内容是不会显示的，这时候插槽的作用就显现出来了
匿名插槽（默认插槽）
声明子组件 Child
&lt;template&gt;
    &]]></description><category></category></item><item><title><![CDATA[ly-tab的使用]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/115005814</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/115005814</guid><author>dashinihao</author><pubDate>Fri, 19 Mar 2021 14:42:50 +0800</pubDate><description><![CDATA[vue 手机端插件 ly-tab
这个插件对于手机端编写导航很是方便
先看效果

使用方法非常的简单
第一步 install ly-tab
第二步 在vue里引入，一般在 mian.js 引入可供全局使用
 import LyTab from ''ly-tab"
 Vue.use(LyTab)

第三步 在组件中使用
 &lt;ly-tab
     v-model="selectedId"
    :items="items"
    :options="options"
    @change="han]]></description><category></category></item><item><title><![CDATA[antd 的RangePicker 返回后端的数据如何格式化]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/114781331</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/114781331</guid><author>dashinihao</author><pubDate>Sun, 14 Mar 2021 12:24:55 +0800</pubDate><description><![CDATA[antd 的RangePicker 返回后端的数据如何格式化
通过FormItem包裹的RangePicker返回后端数据还不是标准的需要的数据
是这样的
Moment {_isAMomentObject: true, _isUTC: false, _pf: {…}, _locale: Locale, _d: Tue Mar 02 2021 11:47:32 GMT+0800 (中国标准时间), …}

要想返回后端需要的格式我们可以引入moment组件然后
item= moment(item).forma]]></description><category></category></item><item><title><![CDATA[如何在ant 的表单Form.Item下获取自定义表单元素的值]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/114552294</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/114552294</guid><author>dashinihao</author><pubDate>Mon, 08 Mar 2021 22:17:20 +0800</pubDate><description><![CDATA[如何在ant 的表单Form.Item下获取自定义表单元素的值
有时我们会遇到开发需求 一个FormITem下有多个表单项的值需要获取，这时候我们就需要自定义表单元素，来获取 ，举例来说 假如我一个Form.Item有多个表单项
 &lt;FormItem name="select",label="多个选择"&gt;
         &lt;Select&gt;
			  &lt;Option label="漩涡鸣人" value="xuanwo"&gt; 漩涡鸣人&lt;/Option&gt;
  		]]></description><category></category></item><item><title><![CDATA[antdDesign select一些api的理解]]></title><link>https://blog.youkuaiyun.com/dashinihao/article/details/114358430</link><guid>https://blog.youkuaiyun.com/dashinihao/article/details/114358430</guid><author>dashinihao</author><pubDate>Thu, 04 Mar 2021 10:32:46 +0800</pubDate><description><![CDATA[关于antd组件Select的api的用法
1 defaultValue
 defaultValue 文档看起来比较简单，但是当你动态赋值的时候会发现defaultValue不起作用，原因就是react渲染机制引起的，那么怎么解决这个问题呢？
 1 我查百度常说的是把 defaultValue 换成 value 但是Select 组件当换成value 属性时 再下拉选择，选择内容不在会改变，所以这个方法并不适用
 2 对于这个问题 可一个Select 设置一个 key值，根据diff算法，key值不同 会重]]></description><category></category></item></channel></rss>