Vue.js | 佳佳的博客

Vue.js 复制内容到剪贴板

npm install --save vue-clipboard2

Vue.js ElementUI 切换下拉框控件显示时显示了错误的文字

页面共有三个下拉框，后面两个根据第一个下拉框的值来切换显示，具体代码如下：

<template>
  <el-dialog :title="isEdit ? '编辑': '新增'" width="45%"
          :visible.sync="visible" :before-close="close" label-position="right"
          :modal-append-to-body="false"
          :close-on-press-escape="false"
          :close-on-click-modal="false">
    <el-form ref="ent" :model="ent" :rules="rules" label-width="120px">
      <el-form-item label="类型" prop="type">
        <el-select v-model="ent.type" placeholder="请选择" style="width: 100%">
          <el-option :key="1" label="链接" :value="1" />
          <el-option :key="2" label="应用" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="ent.type == 1" label="链接" prop="link">
        <el-select v-model="ent.link" placeholder="请选择链接" :disabled="ent.type != 1" style="width: 100%">
          <el-option :key="1" label="链接1" :value="1" />
          <el-option :key="2" label="链接2" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="ent.type == 2" label="应用" prop="appletIds">
        <el-select v-model="ent.appletIds" multiple clearable placeholder="请选择应用" :disabled="ent.type != 2" style="width: 100%">
          <el-option :key="1" label="应用1" :value="1" />
          <el-option :key="2" label="应用2" :value="2" />
        </el-select>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

Vue.js 使用 FontAwesome

这里以使用微信和支付宝的 Icon 为例。

步骤

安装包

其中 fontawesome-svg-core 为核心包，free-solid-svg-icons 为默认的 fas 资源包，free-brands-svg-icons 为品牌图标的 fab 资源包。
另外这里使用的 vue 2.x ，需要安装 vue-fontawesome@latest 包。
```
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/vue-fontawesome@latest
```

在 main.js 中导入组件和图标

import { library } from '@fortawesome/fontawesome-svg-core'
import { faWeixin, faAlipay } from '@fortawesome/free-brands-svg-icons'
import { faRetweet, faArrowCircleDown } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faWeixin, faAlipay)
library.add(faRetweet, faArrowCircleDown)

Vue.component('font-awesome-icon', FontAwesomeIcon)

在页面展示图片

<font-awesome-icon :icon="['fab', 'weixin']" style="color: #03dd6c;" />
<font-awesome-icon :icon="['fab', 'alipay']" style="color: #1977ff;" />

Vue.js 生成二维码

后台管理的 Vue.js 项目需要展示一个二维码，记录一下采用的实现方法。
关于 qrcodejs2 的更多信息请参考官方文档。

安装 qrcodejs2

说是在 Vue.js 中直接使用 qrcode 包会有错误，没试过。
另外还有个 vue-qr 的包，可自定义性更高，不过在项目中安装失败了，就没再尝试。

Vue.js 使用 Vue-Awesome

源码

在 Github 上 Vue-Awesome 。

安装

npm install vue-awesome

Vue.js webpackJsonp is not defined

每次打包 vue 项目时，总是提示很多如下的错误：

webpackJsonp is not defined
ReferenceError
    at unknown:1:1

Vue.js 环境安装

安装 nodejs

https://nodejs.org/en/

切换到 taobao 的 npm 镜像

PowerShell 中执行如下命令,使用 taobao 镜像

npm install nrm -g --registry=https://registry.npm.taobao.org
nrm use taobao
nrm ls
npm install cnpm -g