<style lang="sass" scoped> /* 添加 scoped 後樣式將被鎖定在當前組件,所以沒法覆蓋原iview樣式, 解決方式: 1/不使用 scoped(不推薦), 2/再建一個 style 標籤 ,vue單文件組件中是容許定義多個style標籤的 */ <style> /*以下*/ <style lang="sass" scoped> </style> <style lang="sass"> </style>
iview的Upload組件文檔中: before-upload 上傳文件以前的鉤子,參數爲上傳的文件,若返回 false 或者 Promise 則中止上傳javascript
<template> <Upload ref="upload" :action="uploadUrl", :format="['jpg','jpeg','png','bmp','pdf']", :on-format-error = "handleFormatError", :before-upload = "handleBeforeUpload", :on-success = "handleSuccess", :on-error="handleError", :data="uploadData" > <div style="width: 58px;height:58px;line-height: 58px;"> <Icon type="camera" size="20"></Icon> </div> </Upload> </template> <script> export default { data () { return { uploadModal: true, uploadData: {}, activeUploadId: "5c2bf345-b973-4ffd-a52e-87bb9c1d2b72", uploadUrl: '', } }, methods: { ... ... handleBeforeUpload (file) { /*上傳前肯定上傳地址*/ let researchId = this.activeUploadId; this.uploadUrl = 'api?research_id=' + researchId + '&filetype=' + file.name.split('.')[1]; this.uploadData = { role: patient, abc: file }; let promise = new Promise((resolve) => { this.$nextTick(function () { resolve(true); }); }); return promise; //經過返回一個promis對象解決 } ... ... } } </script>
ERROR Failed to compile with 1 errors 10:58:39 PM error in ./src/assets/css/theme.less Module build failed: @import "./animation/index"; @import "./components/index"; ^ Can't resolve './components/index' in '/Users/linqiang/Documents/workplace/logManagement/node_modules/_iview@2.9.2@iview/src/styles' in /Users/linqiang/Documents/workplace/logManagement/node_modules/_iview@2.9.2@iview/src/styles/index.less (line 5, column 0) @ ./src/assets/css/theme.less 4:14-268 13:3-17:5 14:22-276 @ ./src/main.js @ multi ./node_modules/_webpack-dev-server@2.11.2@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
解決方案:https://github.com/iview/iview/issues/2147#issuecomment-338857856css
一、將less文件引入到main.js;html
二、在文件webpack.base.conf.js中添加.less配置vue
resolve: { extensions: ['.js', '.vue', '.json','.less'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } },
三、安裝依賴java
npm install --save-dev less-loader less
Transfer(:data="Obj[index].transferLeft", :target-keys="Obj[index].transferRight", @on-change="handlechange(index)")
這樣能接收到index,但同時也覆蓋了原有參數node
on-change | 選項在兩欄之間轉移時的回調函數 | targetKeys, direction, moveKeys |
解決方案:webpack
Transfer(:data="Obj[index].transferLeft", :target-keys="Obj[index].transferRight", @on-change="(value) => managedeptChange(index, value)")
in ./src/assets/css/theme.less Module build failed: // https://github.com/ant-design/ant-motion/issues/44 .bezierEasingMixin(); ^ Inline JavaScript is not enabled. Is it set in your options? in /Users/linqiang/Documents/workplace/explore-discovery/node_modules/_iview@3.1.1-rc.1@iview/src/styles/color/bezierEasing.less (line 110, column 0) @ ./src/assets/css/theme.less 4:14-271 13:3-17:5 14:22-279 @ ./src/main.js @ multi ./node_modules/_webpack-dev-server@2.11.3@webpack-dev-server/client?http://localhost:8082 webpack/hot/dev-server ./src/main.js
解決方案:在 ... ... /build/utils.js中git
// https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less', {javascriptEnabled: true}), // 加這裏 sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }