iview 使用筆記

1、在單文件組件中如何重載iview中的樣式?沒法重載iview中的樣式?

<style lang="sass" scoped>
    /*
        添加 scoped 後樣式將被鎖定在當前組件,所以沒法覆蓋原iview樣式,
        解決方式:
            1/不使用 scoped(不推薦),
            2/再建一個 style 標籤 ,vue單文件組件中是容許定義多個style標籤的
    */
<style>
/*以下*/
<style lang="sass" scoped>

</style>
<style lang="sass">

</style>        

2、使用iview上傳組件Upload時,須要動態改變附帶的參數data及上傳的路徑url?但 before-upload 動態改變時,子組件中參數未改變時已執行上傳操做?

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>

 3、vue-cli構建的項目按照iview官網上的定製主題步驟,引入主題樣式後報錯

 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

 4、在使用組件時,組件定義的方法已經有默認的參數,但還需傳入本身的參數,如:穿梭框中

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)")

 五:vue-cli2引入iview3時報錯

 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')
  }
相關文章
相關標籤/搜索