【elementUI学习第二步——Link 文字链接】

Step1 Components文件夹创建Link.vue

<template>
    <div>
      <el-link href="https://www.baidu.com" target="_blank">默认链接</el-link>
      <el-link type="primary" href="https://www.baidu.com" target="_top">主要链接</el-link>
      <el-link type="success" :underline="underlineFlg">成功链接</el-link>
      <el-link type="warning" :underline=underlineFlg>警告链接</el-link>
      <el-link type="danger" :underline="false">危险链接</el-link>
      <el-link type="info" :underline=false disabled>信息链接</el-link>
    </div>
  </template>
  
  <script>
    export default {
      name:"link",
      data(){
        return{
          underlineFlg:false
        }
      }
    }
  </script>
  
  <style scoped>
  </style>


Step2 注册到路由index.js中

import Link from '../components/Link.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/button', component: Button},
    {path: '/link', component: Link}
  ]
})

Step3 在App.vue里给个入口

注意一个坑

false 可以这样写,不过有代码提示,直接输入:就好

      <el-link type="danger" :underline="false">危险链接</el-link>
      <el-link type="info" :underline=false>信息链接</el-link>
### 如何在JavaScript项目中添加和使用Element UI图标 #### 导入Element UI及其样式 为了能够在JavaScript项目中使用Element UI的图标,首先需要安装并引入Element UI库。如果采用的是通过`npm`或`yarn`来管理依赖的方式,则可以通过命令行工具执行相应的包安装指令。 对于已经初始化好的Vue CLI环境下的JavaScript项目来说,在终端运行如下命令可以完成Element UI的基础安装: ```bash npm install element-ui --save ``` 或者如果是Yarn作为包管理器的话, ```bash yarn add element-ui ``` 接着,在项目的入口文件(通常是`main.js`),按照下面的方法引入整个Element UI库以及其默认主题样式表[^1]。 ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; // 引入Element UI import 'element-ui/lib/theme-chalk/index.css'; // 引入样式 Vue.use(ElementUI); ``` #### 使用内置图标 一旦成功集成了Element UI,便可以直接利用它所提供的大量预设图标。这些图标的名称通常遵循一定的命名约定,即以`el-icon-`开头后面接具体的图形描述词组。例如要展示一个搜索按钮对应的图标,可以在模板里这样书写HTML标签: ```html <i class="el-icon-search"></i> ``` 这将会渲染出由Element UI提供的标准搜索图案。 #### 添加自定义图标 当官方提供的图标无法满足需求,还可以很方便地加入第三方字体图标服务如Iconfont中的资源。需要注意的是为了避免与现有的Element UI内建图标发生冲突,应该给新添的图标类名指定独一无二的前缀而不是沿用`el-icon-*`模式[^4]。 假设已经在Iconfont上创建了一个新的项目,并选择了几个心仪的图标准备应用到当前工程之中。此只需复制该平台给出的相关链接地址至页面头部区域内的`<head>`部分即可加载所需的Web Font资源;与此同也要记得调整好CSS选择器使得新增加的内容能够正确显示出来[^2]: ```html <!-- 将以下代码片段放置于<head>...</head>之间 --> <link rel="stylesheet" href="//at.alicdn.com/t/font_8d93072kzvqivmfr.css"> ... <span class="icon-template-1"></span><!-- 这里的class应对应实际使用的图标类名 --> ``` 另外一种方法是下载SVG格式的单个图像文件或者是Sprite Spritesheet集合版本下来放到本地静态资产目录下边,随后参照常规图片处理流程来进行调用。 #### 处理生产环境下可能遇到的问题 有可能会碰到部署后的网页未能按预期显示出某些特定的小部件的情况——特别是涉及到网络请求获取外部资源的情形之下更容易出现问题。针对这种情况的一个常见解决方案是在Nginx配置文件中适当放宽跨域资源共享(CORS)策略或是优化反向代理规则以便更好地支持不同类型的多媒体素材传输过程[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值