iview笔记

最新推荐文章于 2024-06-25 08:38:12 发布

原创最新推荐文章于 2024-06-25 08:38:12 发布 · 528 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #node.js #javascript

工作中遇到的问题专栏收录该内容

54 篇文章

订阅专栏

本文介绍了如何在iview组件中正确使用Input进行数字类型校验，并演示了如何定制Alert的警告提示图标大小，同时涵盖了vue-clipboard2的使用和解决Tabs TabPane导致字体模糊的问题。还涉及到了前端项目的常见错误排查，如npm包安装问题及组件样式修改技巧。

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/

再npm install成功