vue
关注
分享
扫一扫
低調的D吖
这个作者很懒，什么都没留下…
展开
-
vue-admin-template 新手學習（十一）實現導出zip包
如下圖想把列表的數據導出zip包來（其實是有60條數據）需要安裝依賴npm install jszipnpm install file-saver然後需要增加Export2Zip的jsimport { saveAs } from 'file-saver'import JSZip from 'jszip'export function export_txt_to_zip(th, jsonData, txtName, zipName) { const zip = new...原创 2020-05-21 17:17:14 · 189 阅读 · 0 评论 -
vue-admin-template 新手學習（十）實現pdf下載
簡單寫一個下載的頁面<router-link to="/pdf/download"> <el-button type="primary" @click="clickBtn"> 下載pdf </el-button> </router-link>methods: { fetchData() { import('./content.js').then(data => {.原创 2020-05-20 14:20:12 · 265 阅读 · 2 评论 -
vue-admin-template 新手學習（九）選擇excel 並解析內容在前端展示
引入xlsx依賴模塊npm install xlsx --save在vue文件引入依賴import XLSX from 'xlsx'使用組件選擇文件<div> <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick"></input> <div>原创 2020-05-14 15:27:57 · 211 阅读 · 1 评论 -
vue-admin-template 新手學習（八）Echarts圖表
安裝依賴 npm install echarts --save在main.js全局引入import echarts from 'echarts'Vue.prototype.$eacharts = echarts原创 2020-05-09 15:48:28 · 1102 阅读 · 0 评论 -
vue-admin-template 新手學習（七） 本地/後端 mock 數據
假設我們要添加商品mock數據 達到如下效果1.我們需要在mock數據下添加product的模擬數據import Mock from 'mockjs'const data = Mock.mock({ 'items|10': [{ id: '@id', name: '@sentence(1, 5)', typeName: 'HUAWEI@integer...原创 2020-05-07 15:50:05 · 595 阅读 · 0 评论 -
vue-admin-template 新手學習（五） 國際化多語言
在各種項目中會涉及到多語言（國際化項目？） 所以這個時候語言包非常重要1.首先在 src加入 lang/index.js & index.js & en.js & zh.js//lang index.jsimport Vue from 'vue'import VueI18n from 'vue-i18n'import Cookies from 'js-c...原创 2020-04-29 17:39:47 · 654 阅读 · 0 评论 -
vue 常用特性
表單基本操作v-model 綁定值 value屬性（index or row ）表單修飾符.number 轉為數值 <input v-model.number="age" type="number"> .trim 去掉首尾空白 <input v-model.trim="msg"> .lazy 延時更新 <input v-mode.lazy="msg"&g...原创 2020-04-24 17:52:10 · 123 阅读 · 0 评论 -
vue-admin-template 新手學習（三） 改變請求後端API
如果後端的接口是要請求到合作的小夥伴那裡呢dev環境呢在.env.development 將VUE_APP_BASE_API 改成可以請求的網址'http://xxx.xxxx.local:86/api'然後就可以和合作的小夥伴 愉快的調試接口了啊（可能會遇到跨域問題 ）...原创 2020-04-24 16:56:57 · 375 阅读 · 0 评论 -
vue-admin-template 新手學習（二） 添加左側邊欄
在router文件夾下的index.js加入 需要添加的側邊欄內容 這個是靜態路由 不需要權限如下 然後npm run dev 就跑起來了{ path: '/products', component: Layout, hidden: true, children: [ { path: 'edit/:id', ...原创 2020-04-17 14:56:51 · 571 阅读 · 0 评论 -
vue-admin-template 新手學習（四） 頁面權限控制
1.創建vue實例的時候 掛載vue-router2.用戶登錄後獲取role 將role和路由美國頁面權限比較 生成最終用戶可訪問的路由表3.調用router.addRoutes 添加可訪問路由4.使用vuex管理路由 根據vuex中可訪問路由渲染側邊欄組件完整版登錄的時候記得改vue.config.js下面的環境為developmentlintOnSave: pro...原创 2020-04-15 17:17:55 · 391 阅读 · 1 评论 -
vue-admin-template 新手學習（一） 啟動項目
大家可能下載完整的模板再一個個刪除我剛好相反 只下載template模板來一個個頁面功能添加一、準備好vue-admin-template模板1.可以直接下載vue-admin-template-master.zip包然後解壓2.通過git命令科隆 git clone https://github.com:PanJiaChen/vue-admin-template.git...原创 2020-04-14 14:44:46 · 495 阅读 · 0 评论 -
el-radio遇到的一些坑
radio下面的數據是上一層的table 展開的問題1:選擇了其中一個，其他expand的數據都會被選中 思路：根據父級table然後選擇了子級radio <el-table fit style="width: 100%;" :data="goodsData" :row-key="getRowKeys" :expand-row-keys="expands" border...原创 2020-04-13 17:20:33 · 681 阅读 · 1 评论 -
一個帶有多個form-item和table多表單
最外一層是form ，form包含了2個form-item 和2個table ，然後要將1個form-item 的數據自己填寫 一個form-item的數據從別的地方獲取和table數據從別的地方獲取然後一起 提交到下一步1.form-item從子組件獲取數據回來，那麼先把子組件獲取回來到數據保存到form裡邊然後再展示到form-item<el-form-item...原创 2020-04-13 17:06:03 · 348 阅读 · 0 评论 -
解決三層 v-for循環數據後v-model綁定el-input 時遇到的坑
因為是要從服務器拿數據下來 並在原數據的基礎上進行更改 如下圖效果<el-table-column label="ContactWindow" align="center" width="150"> <template slot-scope="scope"> <template v-if="...原创 2020-03-31 14:32:43 · 311 阅读 · 0 评论 -
子組件向父組件傳值 this.$emit 和解決選擇數據後被覆蓋問題
將彈出的dailog 搜索得到的數據傳給父組件//子組件<el-table ref="filterTable" :key="tableKey" v-loading="listLoading" :data="pagination.items" fit highligh-current-row :element-loading-text="$t('commonText.loadingTe...原创 2020-03-30 16:10:34 · 170 阅读 · 0 评论 -
解決一個高度造成的問題
<template><div class="app-container"> <el-card :body-style="{padding: '12px'}"> <div slot="header"> <span>{{ $t('pageInquiryView.goodsInfo') }}</span>...原创 2020-03-24 22:23:10 · 110 阅读 · 0 评论 -
vue slot-scope="scope" 獲取數據
今天遇到一個問題 就是要獲取的數據在列表中的某個屬性中的列表中比如 我想獲取contacts中的contactWin獲取chineseName可以直接row.chineseName直接獲取到數據 <template slot-scope="{row}"> <span> {{ row.chinese...原创 2020-03-18 23:08:06 · 302 阅读 · 0 评论 -
vue 父子組件通訊升級版
有一個需求一個頁面需要有超過三個dialog彈出 每次彈出的不同 然後用了比較笨的方法寫了三個組件子組件：廢話不多說 上代碼#template代碼部分<el-dialog ref="dialogTitle" :title="添加供應商" :visible.sync="visible" :before-close="handleClos...原创 2020-03-10 17:57:20 · 132 阅读 · 0 评论 -
vue-admin-template 新手學習（六） 導出excel
需要先安裝三個依賴npm install -S file-saver xlsxnpm install -D script-loader封裝Export2Excel.jsfunction generateArray(table) { var out = []; var rows = table.querySelectorAll('tr'); var ranges = ...原创 2020-01-18 14:16:13 · 220 阅读 · 0 评论 -
vue-element-admin-template 分頁組件實現
分頁組件實現 ，使用element 的pagination組件進行再一次封裝https://element.eleme.io/#/zh-CN/component/pagination#<template> <div :class="{'hidden':hidden}" class="pagination-container"> <el-pa...原创 2020-01-16 18:25:56 · 461 阅读 · 0 评论 -
vue promise/async/await 區別與聯繫
1、只有一個異步請求，且只需要做錯誤處理情況下，使用promise getInfo({ commit, state }) { return new Promise((resolve, reject) => { getInfo(state.token).then(response => { const { data } = response...原创 2020-01-16 11:28:38 · 302 阅读 · 0 评论 -
vue-element-admin-template 權限控制整理
vue-element-admin是個強大的管理後台框架https://github.com/PanJiaChen/vue-element-admin/tree/master/src/directive經過了一些琢磨，終於知道vue-element-admin-template如何增加權限控制首先，先把邏輯關係理清楚： 登錄後通過token獲取用戶對應的角色rol...原创 2020-01-10 11:12:02 · 1782 阅读 · 20 评论 -
vue 組件式開發swiper
必須要先安裝npm install vue-awesome-swiper//組件<template> <div class="my-swiper"> <swiper :optops="swiperOption" class="swiper-menu"> <swiper-slide><img src="~as...原创 2019-12-09 11:51:46 · 77 阅读 · 0 评论 -
vue 組件式開發tabControl
經常在頁面會使用tab切換，如下為tabcontrol組件開發//點擊的時候當前的index 傳給方法然後顏色變化 <div class="tab-control"> <!-- if you click the first tab ,index =0, --> <div v-for="(item,index) in titl...原创 2019-12-04 12:01:21 · 123 阅读 · 0 评论 -
Vuex是什麼 主要用來做什麼 為什麼要使用vuex
一、Vuex是什麼Vuex是一個大管家，多個組件共享的變量全部存儲在一個對象裡 將這個對象放在頂層vue實例中，讓其他組件使用，如下圖為多頁面二、Vuex的五個屬性state：vuex的基本數據，用來儲存變量 getter：從基本數據（state）派生的數據 ，相當於state的計算屬性（computed） mutation：提交更新數據的方法，必須是同步，美國mutation...原创 2019-12-10 18:24:43 · 223 阅读 · 0 评论 -
如何解決vuejs 的路徑問題
我們經常在開發的時候 路徑的問題經常提示：These relative modules were not found我們可以在webpack.base.config.js 的resolve代碼下加入如下resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), ...原创 2019-12-02 14:52:53 · 104 阅读 · 0 评论 -
vue aixos網絡請求的開發封裝
vue-router 以後不再維護了 當前比較多使用的是ajax和axiosajax 是Asynchronous Javascript And XML 異步js 和xml，是一種異步請求的技術aixos在npm上的描述是Promise based HTTP client for the browser and node.js，是一種基於promise封裝的http客戶端在networ...原创 2019-11-29 10:47:43 · 108 阅读 · 0 评论 -
vue 如何解決路徑變化問題--alias
resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'assets':resolve('src/assets'),//vue cli3 'assets':resolve('@/assets') 'components':resolve('s...原创 2019-11-28 16:43:04 · 75 阅读 · 0 评论 -
vue 組件式開發navBar
如下圖 是要實現的效果如下為代碼塊//NavBar.vue<template> <div id="vab-bar"> <div class="nav-bar"> <div class="left"><slot name="left"></slot></div> ...原创 2019-11-28 14:37:42 · 356 阅读 · 0 评论 -
vue-cli腳手架install
全局安裝vue-cli：npm install -g vue-cli初始化項目： vue init webpack 出現如下（如下為需要手動安裝routerand npm install劃分項目結構原创 2019-11-28 14:45:04 · 70 阅读 · 0 评论 -
vue 組件式開發tabBar
如下圖 是想實現的效果對此組件進行分析tabbaritem.vue代碼塊<template><div class="tab-bar-item"><div v-if="!isActive" @click="itemClick"> <slot name="item-icon"></slot></di...原创 2019-11-26 16:31:44 · 261 阅读 · 1 评论 -
Promise 的鏈式編程--異步編程的一種解決方案
Promise 異步編程的一種解決方案，比傳統的解決方案（回調函數和事件）更合理強大1.promise 構造函數接受一個函數作為參數，該函數有兩個參數resolve 和 reject （javascript 引擎提供）2.resolve函數的作用是將promise 對象的狀態從未完成變成成功，即pending變成resolved，在異步操作成功時調用3.reject函數的作用是將pro...原创 2019-11-25 16:14:18 · 359 阅读 · 0 评论 -
vue.js v-bind 可以做些什麼事呢
v-bind 動態綁定class<h2 v-bind:class=“{active:isActive,line:isLine}”>{{message}}</h2><button @click=‘btnClick’>按鈕</button>data:{ message:’hello’, isActive:true,...原创 2019-11-24 10:20:34 · 64 阅读 · 0 评论 -
Vue router 的路由的跳轉方式 以及原理
一、路由概念 路由：網絡工程術語 互聯網中把信息從源地址發送到目的地二、路由進化的三個階段 2.1 後端路由 頁面請求不同路徑的內容時，交給服務器來處理，服務器渲染好整個頁面並且返回客戶端 2.2 前端路由 後端提供api，前端使用ajx獲取數據，通過javascript將數據渲染到頁面...原创 2019-11-21 14:10:56 · 298 阅读 · 0 评论 -
父子組件通訊使用
一、父子組件 1.創建組件構造器 Vue.extend()--> const app = new Vue({}) 2.註冊組件 Vue.component('my-cpn',cpnC) 3.使用組件 <div> <my-cpn></my-cpn></div>//父組件模板<div id="app"&...原创 2019-11-14 14:19:37 · 148 阅读 · 0 评论 -
vue v-model
1.雙向綁定<input v-model="message"><script>data:{message:'hello'}</script>//v-model 相當於有v-on & v-bind<input type="text" :value="message" v-on:input="valueChange">...原创 2019-11-13 14:36:44 · 110 阅读 · 0 评论