原创 js 寫一個前端圖片查看器
1. 前言 網上已經有不少成熟的圖片查看器插件，如果是單純想要點擊圖片放大預覽的話，可以直接使用插件。例如viewerjs 但是，當打開圖片後還需要對圖片進行一些像刪除、下載、標記等業務層面上的操作，使用插件就顯得不那麼便捷，於是
2020-05-18 13:06:49
原创 Vue中使用viewer.js圖片查看器
最近開發需要用到點擊圖片放大查看，找到一個好用的插件，簡單記錄下 插件安裝： npm install viewerjs --save 插件引入： //main.js import Viewer from 'viewerjs';
2020-05-18 13:06:49
原创 canvas 實現截圖功能——截取圖片的一部分
整理一下最近在vue項目中做的一個截圖功能（只能夠截取圖片），即用鼠標在畫布上進行框選截取。 思路大概如下：做一個彈窗，打開彈窗的時候傳入要截的圖，接下來在這個窗口裏面，點擊截圖按鈕，開始截圖，點擊取消按鈕，取消截圖。 窗口裏面的
2020-05-17 17:57:25
原创 zTree的使用踩坑記錄
最近做了一個功能，在vue中使用到了zTree，要求實現樹節點的新增和編輯，即鼠標移到節點上的時候顯示出這兩個按鈕，點編輯的時候節點會變成輸入框可直接輸入，點新增的時候會在該節點的子節點中新增一個節點，並顯示爲可編輯狀態。 做的過
2020-05-15 10:04:02
原创 vuex的基本使用 整理(vue狀態管理)
vuex可以用來保存我們需要管理的狀態值，值一旦被修改，所有引用該值的地方就會自動更新，適用於多組件共用同一個狀態值的情況。 首先，需要一個vue項目，新建一個空文件夾，在該文件夾目錄下命令行輸入（使用webpack創建一個項目名
2020-04-27 16:54:08
原创 vue強制更新$forceUpdate();
記錄一個問題，在做項目的時候，有一個頁面比較複雜，嵌套了多層v-for循環，當我給某個item增加一個屬性的時候，值是可以獲取到的，但頁面並沒有更新 原因： 因爲數據層次太多，render函數沒有自動更新，需手動強制刷新。 解決方
2020-04-21 13:44:40
原创 vue 同時綁定多個class
寫法一： <div class="demo" :class="{active:isActive}"></div> 寫法二： <div class="demo" :class="[{active:isActive},{open:i
2020-03-30 04:19:22
3
原创 iview DatePicker添加表單驗證及初始化賦值
<Form class="search_form" ref="searchForm" :rules="ruleInline" :model="formInline" label-position="right" :label-wi
2020-03-26 13:31:04
原创 canvas 製作動效線條背景（可與鼠標交互）
完整代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <c
2020-02-22 11:44:04
原创 canvas 網站背景鼠標吸附線條動畫
完整代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <s
2020-02-22 11:44:04
原创 rem 自適應屏幕解決方案
1.使用的長度單位rem、vw rem 這個單位代表根元素的 font-size大小（一般來說是html元素的font-size）。當用在根元素的font-size上面時 ，它代表了它的初始值。 vw 1vw就是屏幕寬度的百分之一
2020-02-22 11:44:04
1
原创 layer.photos 相冊（圖片查看器）實現縮放
2019年4月12日 layer版本 layer-v3.1.1 layer.photos 方法在使用過程中發現沒有通過鼠標中鍵（滾軸）實現圖片縮放功，故通過搜索引擎找到如下方法 需要引用 jquery $(document).on
2020-02-22 11:44:04
原创 iview Tooltip換行及渲染
需求： 關於iview上的文字提示及氣泡提示都是沒有換行的，如果我們要換行必須自己設置，但是你直接在Tooltip上設置它的style爲whit-spce=‘normal’是不能生效的，官方是提供了一種換行方式，但是並沒有很詳細的
2020-02-22 11:44:04
原创 layui 內置方法layer.msg（提示框）
//eg1 layer.msg('只想弱弱提示'); //eg2 layer.msg('有表情地提示', {icon: 6}); //eg3 layer.msg('關閉後想做些什麼', function(){ //do so
2020-02-22 11:44:04
原创 vue+iview+less 實現一鍵換膚
1. 準備兩個less文件： 1.1 theme.less 用於定義控制樣式的函數 .theme( @Background: #1D2B40, @Border: #000017, ){ .header{
2020-02-22 11:44:04