原创 vue2 +element-ui圖片上傳示例

這裏使用了一個沒有用的裁剪插件,需要先下載它 npm i [email protected] --save 然後在main.js引入: import VueCropper from 'vue-cropper' Vue.use(VueC

原创 elementUI——el-form表單數據校驗(包含數組循環)

一、普通的值類型的數據校驗①設置 el-form-item 的 prop 值 與 formdata 中定義的 key 保持一致`②如果 rules 需要通過 el-form 統一設置,rules 的 key 定義也與 prop 保持一致(如

原创 vue項目第一次進入頁面刷新頁面並只刷新一次

if (location.href.indexOf("&reloaded") == -1) { location.href = location.href + "&reloaded"; location.reload(); }

原创 微信小程序商城分類滾動列表錨點(左菜單右列表)

1、TestScroll.wxml <view class="content-box"> <!-- 左側分類 --> <scroll-view scroll-y scroll-with-animation class="left"

原创 前端生成(PC/移動端)驗證碼

先看看效果:   第一步:使用canvas標籤,給canvas添加一個id <canvas id="canvasVCode" width="40" height="22" class="captcha" @click="changeVC

原创 Vue+Element導出Excel表格示例

<template> <div @click="exportFn">導出</div> </template> <script> export default { data() {

原创 Vue2.0移動端利用插槽實現Tabbar底部導航

效果圖如下:    具體實現如下: 需要每個頁面都引入該組件:@/components/FZSTabbar/navBar.vue 以首頁爲例,首頁爲index.vue,在該頁面引入@/components/FZSTabbar/navBar

原创 微信小程序canvas驗證碼生成及使用

先看效果:     wxml: <canvas class="v-code" bindtap="changeImg" style="width:100px; height:40px;" canvas-id="canvas"></canv

原创 實現可移動懸浮按鈕(微信小程序/H5移動端html)

微信小程序實現方案: 我們可以利用微信小程序的內置組件輕鬆實現!1.將整個屏幕用movable-area組件覆蓋,2.在movable-area內部添加一個movable-view實現自由滑動。3.重點:CSS屬性 pointer-even

原创 async/await + Promise解決異步問題

比如小程序的獲取openid, 首先getOpenID需要藉助Promise實現,然後纔可以使用async 和 await來同步(Vue同樣如此) Page({ /** * 生命週期函數--監聽頁面加載 */ async onLo

原创 根據頁面動態自適應寬高(window.removeEventListener("resize", 方法名);)

<template> <el-table :height="tableHeight" :data="tableData"> <el-table-column header-align="center" label=

原创 apsx/html使用Vue開發百度地圖(現在以駕車路線規劃爲例)

第一步:在<head></head>標籤添加vue.js、以及<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你在百度申請的key"></

原创 vue3 使用 vue.config.js 配置使用scss全局變量

剛開始我在網上查找了許多資料,都是需要什麼安裝安裝 sass-resources-loader 和配置什麼亂七八糟的,我沒有嘗試過,因爲我覺得根本不需要這麼麻煩 通過查閱資料和嘗試,我發現只要在 vue.config.js 配置一下就可以了

原创 微信小程序實現視頻錄製實人認證

1、FaceScanning.wxml <view> <view class="content-box"> <view class="camera-box" wx:if="{{ishow}}">

原创 Vue實現一個簡單的答題案例(單選/多選)

1、html <template> <div class="root-div"> <div v-for="(item,index) in question" :key="index" v-show="index==idx" c