前端button一键预览与下载

阿里icon

打开阿里icon，注册，选用需要的icon，
icon

  • 加入购物车，添加至项目
    加入购物车

  • 选择font class ，下载到本地
    下载

  • 解压，得到的文件如下：
    解压

本地调用

  • 在src_assets下创建了icon文件夹，将所有文件复制进来。iconfont.css内容如下：
    icon.css

  • 在main.js中把css引入进来：
    引入js

  • 使用button

<el-col :span="1">
<el-button     type="info" circle icon="iconfont icon-wenhao2" @click="userHelp" size="mini" ></el-button>
			
</el-col>
  • 预览文件
    在methods中写button点击的触发代码，预览文件
methods: {
userHelp(){
    http_instance.get(`help`).then(res => {
     let file_path = res.data.download_help_path
    window.open(API_BASE +"/data/"+file_path)
}
  • 调用结果如下：
    图标展示：
    图标展示
    预览：
    预览

引用

版权声明：本文为qq_24495287原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。