iview笔记

Posted 2021-09-25 今夜月色很美

iview input校验

rules如果是数字，要加上type: ‘integer’

Alert 警告提示自定义图标大小等

<Alert style="height: 50px;padding-top:16px;" show-icon>
    <Icon style="font-size: 26px" type="ios-information-circle-outline" slot="icon"></Icon>
    <span style="font-size: 14px" slot="desc">
        xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </span>
</Alert>

Icon设置图标大小

style="font-size: 28px"

ivew提供点击复制效果

在package.json中添加clipboard依赖

"clipboard": "^2.0.6",
"vue-clipboard2": "^0.3.1",

在main.js中导入clipboard

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

vue方法

copy(content) {
                let that = this
                this.$copyText(content).then(function (e) {
                    that.$Message.success('已复制');
                }, function (e) {
                })
            },

tablecolumns

{
                        title: '复制内容字段',
                        key: 'content',
                        align: 'center',
                        width: 170,
                        render: (h, params) => {
                            return h('div', [
                                h('span', params.row.content),
                                h('Icon', {
                                    attrs: {
                                        style: 'cursor:pointer; padding-left: 5px;font-size: 18px'
                                    },
                                    props: {
                                        type: 'md-copy'
                                    },
                                    nativeOn: {
                                        click: () => {
                                            this.copy(params.row.content)
                                        }
                                    }
                                })
                            ])
                        },
                    },

Tabs.TabPane导致页面字体变模糊

设置animated为false不使用CSS3 动画

:animated="false"

样式只在当前文件生效

在style标签上添加scoped

<style lang="less" scoped></style>

修改第三方组件样式不生效

样式前加/deep/ 或添加非scope样式

/deep/ .ivu-modal-content {
  padding-top: 10px;
}

DatePicker设置默认值不成功

要设置日期时间，只设置日期不行

前端项目运行报错一

D:\\project\\test\\UAP\\uap-web>npm run dev

> vue-3-hello-world@0.1.0 dev
> vue-cli-service serve --open --mode development

internal/modules/cjs/loader.js:960
  throw err;
  ^

Error: Cannot find module 'node-ipc'
Require stack:
- D:\\project\\test\\UAP\\uap-web\\node_modules\\@vue\\cli-shared-utils\\lib\\ipc.js
- D:\\project\\test\\UAP\\uap-web\\node_modules\\@vue\\cli-shared-utils\\index.js
- D:\\project\\test\\UAP\\uap-web\\node_modules\\@vue\\cli-service\\bin\\vue-cli-service.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:957:15)
    at Function.Module._load (internal/modules/cjs/loader.js:840:27)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (D:\\project\\test\\UAP\\uap-web\\node_modules\\@vue\\cli-shared-utils\\lib\\ipc.js:1:13)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\\\project\\\\test\\\\UAP\\\\uap-web\\\\node_modules\\\\@vue\\\\cli-shared-utils\\\\lib\\\\ipc.js',
    'D:\\\\project\\\\test\\\\UAP\\\\uap-web\\\\node_modules\\\\@vue\\\\cli-shared-utils\\\\index.js',
    'D:\\\\project\\\\test\\\\UAP\\\\uap-web\\\\node_modules\\\\@vue\\\\cli-service\\\\bin\\\\vue-cli-service.js'
  ]
}
npm ERR! code 1
npm ERR! path D:\\project\\test\\UAP\\uap-web
npm ERR! command failed
npm ERR! command C:\\Windows\\system32\\cmd.exe /d /s /c vue-cli-service serve --open --mode development

npm ERR! A complete log of this run can be found in:

解决方法:

删除node_modules
指定淘宝镜像
npm config set registry http://registry.npm.taobao.org/
重新安装
npm install

前端项目运行报错二

npm install报错

npm ERR! code E404
npm ERR! 404 Not Found - GET http://registry.npm.taobao.org/@vue/test-utils/-/test-utils-1.0.0-beta.16.tgz - [not_found] document not found
npm ERR! 404
npm ERR! 404  '@vue/test-utils@http://registry.npm.taobao.org/@vue/test-utils/-/test-utils-1.0.0-beta.16.tgz' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\\Users\\yzliu10\\AppData\\Local\\npm-cache\\_logs\\2021-06-04T06_27_55_273Z-debug.log

执行

npm config set registry http://registry.npmjs.org/

be found in:
npm ERR! C:\\Users\\yzliu10\\AppData\\Local\\npm-cache_logs\\2021-06-04T06_27_55_273Z-debug.log

执行

npm config set registry http://registry.npmjs.org/

再npm install成功