精华内容
下载资源
问答
  • 动态显示电池电量Icon Vue 电量Icon 电池电量 效果 Vue 代码实现 <template> <div class="electric-panel" :class="bgClass"> <div class="panel" :style="{transform: `rotate(${rotate}deg)`}"&...

    动态显示电池电量Icon Vue 电量Icon 电池电量

    效果

    在这里插入图片描述

    Vue 代码实现

    <template>
      <div class="electric-panel" :class="bgClass">
        <div class="panel" :style="{transform: `rotate(${rotate}deg)`}">
          <div class="remainder" :style="{width: quantity +'%'}" />
        </div>
        <div v-show="showText" :style="{marginLeft: (parseFloat(rotate)? 0 : '10') + 'px'}"
          class="text">{{ quantity }}%</div>
      </div>
    
    </template>
    
    <script>
    /**
     * 电池电量Icon
     */
    export default {
      name: 'ElectricQuantity',
      props: {
        quantity: {
          type: Number,
          default: 0
        },
        showText: {
          type: Boolean,
          default: true
        },
        rotate: {
          type: String,
          default: '0'
        }
      },
      computed: {
        bgClass() {
          if (this.quantity >= 30) {
            return 'success'
          } else if (this.quantity >= 15) {
            return 'warning'
          } else if (this.quantity >= 1) {
            return 'danger'
          } else {
            return 'danger'
          }
        }
      }
    }
    </script>
    
    <style lang="scss" scoped>
    @mixin panel($color) {
      .panel {
        border-color: #{$color};
        &:before {
          background: #{$color};
        }
        .remainder {
          background: #{$color};
        }
      }
      .text {
        color: #{$color};
      }
    }
    .electric-panel {
      display: flex;
      justify-content: center;
      align-items: center;
    
      .panel {
        box-sizing: border-box;
        width: 30px;
        height: 14px;
        position: relative;
        border: 2px solid #ccc;
        padding: 1px;
        border-radius: 3px;
    
        &::before {
          content: '';
          border-radius: 0 1px 1px 0;
          height: 6px;
          background: #ccc;
          width: 4px;
          position: absolute;
          top: 50%;
          right: -4px;
          transform: translateY(-50%);
        }
    
        .remainder {
          border-radius: 1px;
          position: relative;
          height: 100%;
          width: 0%;
          left: 0;
          top: 0;
          background: #fff;
        }
      }
    
      .text {
        text-align: left;
        width: 42px;
      }
    
      &.success {
        @include panel($color-success);
      }
    
      &.warning {
        @include panel($color-warning);
      }
    
      &.danger {
        @include panel($color-danger);
      }
    }
    </style>
    
    
    展开全文
  • 在个人博客中编辑菜单信息的时候,需要修改Icon 图标所以我们需要封装一个 ICON 图标组件 实现效果 组件代码 <template> <div class="Icon-warp"> <a-row :gutter="[18,18]"> // 给每个Icon ...

    需求

    在个人博客中编辑菜单信息的时候,需要修改Icon 图标所以我们需要封装一个 ICON 图标组件

    实现效果
    在这里插入图片描述
    组件代码

    <template>
      <div class="Icon-warp">
        <a-row :gutter="[18,18]">
        	  // 给每个Icon Click事件触发向调用组件也就说父级组件进行传值
          <a-col class="Icon-div" v-for="(item,key) in IconArr" @click="SendIconString(item)" :key="key" :xs="12" :sm="8" :md="6" :lg="4" :xl="2">
            <a-icon :type="item.iconName" />
          </a-col>
    
        </a-row>
    
      </div>
    </template>
    <style scoped>
    .Icon-warp {
      height: 80vh;
      overflow: hidden;
      overflow-y: scroll;
      padding: 15px;
    }
    
    .Icon-div:hover i {
      box-shadow: 0 0 0 3px #409eff;
      color: #409eff;
      border-radius: 3 px;
    }
    .Icon-div > i {
      display: block;
      padding: 15px 0;
      font-size: 26px;
      font-weight: 600;
      text-align: center;
      color: #6d7882;
      cursor: pointer;
      box-shadow: 0 0 0 1px #eee;
    }
    </style>
    
    <script>
    import { SelectIcon } from "../utils/requset/api";
    export default {
      data() {
        return {
          IconArr: [],
        };
      },
      methods: {
        SendIconString(stringicon) {
        	// 像父级传值 把icon 标签名称
          this.$emit("GetIconString", stringicon);
        },
      },
      mounted() {
        SelectIcon().then((res) => {
        	// 向后台获取Icon   Json格式 {id:0,IconName:"xxxx"}
          this.IconArr = res.data;
        });
      },
    };
    </script>
    
    展开全文
  • npm install flag-icon-css 二、在main.js文件中引入 import 'flag-icon-css/css/flag-icon.css' 三、使用 <span class="flag-icon flag-icon-gr"></span> 使用不同国家的国旗,将gr换成对应的代码...

    一、安装

    npm install flag-icon-css
    

    二、在main.js文件中引入

    import 'flag-icon-css/css/flag-icon.css'
    

    三、使用

    <span class="flag-icon flag-icon-gr"></span>
    

    使用不同国家的国旗,将gr换成对应的代码即可,例如:
    flag-icon flag-icon-cn —— China
    flag-icon flag-icon-es —— Spain
    flag-icon flag-icon-gb —— England
    国家代码对照表:iso-3166-1全球国家名称代码

    使用上述方式后,发现本地环境可以正常显示图标,但是到了develop,图标未能正常显示,于是换了一种方式:
    一、在GitHub地址(flag-icon-css GitHub)下载图标资源和css文件
    (也可以在百度网盘下载,链接:https://pan.baidu.com/s/1jvlkU1WzHJNI1Tflnhoafw
    提取码:tgfs)
    ①图标资源:flags文件夹,下载后将其放入src\assets下
    在这里插入图片描述
    在这里插入图片描述

    ②css文件:css文件夹下的flag-icon.css文件即可,下载后将其放入src\assets\css下
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    二、修改package.json文件和main.js文件
    ①package.json文件:卸载flag-icon-css
    ②引入flag-icon-css的css文件
    在这里插入图片描述
    通过以上配置,即可正常显示图标

    展开全文
  • vue+elementui实现排序按钮icon 效果图: 前端页面代码: -----vue代码 <el-row type="flex" justify="start" align="middle"> <i class="icon el-icon-s-fold"></i> <span>访问量</...

    vue+elementui实现排序按钮icon
    效果图:
    在这里插入图片描述
    前端页面代码:

    -----vue代码
    <el-row type="flex" justify="start" align="middle">
       <i class="icon el-icon-s-fold"></i>
       <span>访问量</span>
       <div style="display: inline-block;margin-left:5px">
         <div><i class="el-icon-caret-top"></i></div>
         <div><i class="el-icon-caret-bottom"></i></div>
       </div>
     </el-row>
    -----样式代码
    .icon {
        color: #1890ff;
        margin-right:5px;
      }
    
    
    展开全文
  • // 引入刚刚写好的icon.js,返回的对象用于渲染图标 const icons = reactive(iconsList); // 有些情况下,需要添加图标的点击事件。 const onClick = (e) => { emits('click'); } </script> css部分也比较简单,...
  • 场景描述 因为业务需求,需要"script-loader"包 运行了以下命令yarn add"script-loader": "0
  • ant-vue 关于 a-icon使用

    千次阅读 2021-04-22 12:10:50
    a-icon type="lock"></a-icon> 网站图标 标签去除Oulined、TwoTone、Filled,首字母小写,后续大写字母转小写并加- 如UpOutlined 改成up 如EyeInvisibleOutlined 改成eye-insivible <a-icon type="clock...
  • vue-element-admin
  • 代码: <i class="el-icon-folder-opened" style="background:rgb(246, 189, 49); color: white"></i> 效果: 如果要实现这种的,最好还是乖乖去找png图片吧:
  • 前端:vue-cli3 后端:springboot + maven 打包发布形式:前端编译后,放入后台/resource/static文件下,通过maven进行打包 问题图片: 此案例是在打包发布后icon不显示,本地显示没问题!!! 一般这种情况有两种...
  • vue-cli3打包后 element-ui的icon不显示问题javascripticon不显示发现是路径不对,请求路径是/dist/static/css/static/fonts/732389de.element-icons.ttf,多了css/static。正确路径应该是/dist/static/fonts/732389...
  • 标签中 rel 相关设置的值为 icon 的标签元素,将 icon 地址的值赋给该标签的属性 href。 // 比如某个路径 browerIconUrl document.querySelectAll("link[rel*='icon']").forEach(item => { item.href = ...
  • YDOOK: vue3: vue-cli4: 更换页面 ICON icon图标标志 © YDOOK JYLin 1. 将新 icon 文件拖入文件目录: ./public: 2. 新建或者在已有的 vue.config.js 文件根位置中输入: module.exports = { pwa: { iconPaths...
  • 新版antd vue 图标使用

    2021-12-06 14:25:20
    最近在做vue3+TypeScript的练习项目,既然都用vue3了,那轮子也得跟着走吧,所以引入了antd vue v3 版本。 之前项目一直使用的v1版本,图标直接使用即可,但从v2版本开始,官方为了节省体积,采用了按需引入的方式...
  • 需求描述:在移动端页面悬浮一个可随便拖拽的图标,类似于苹果手机的辅助触控小圆点,并且可随意拖动。 预览: 组件代码如下: ...div class="ys-float-btn" :style="{'width':itemWidth+'px','height':...
  • vue项目设置浏览器icon图标

    千次阅读 2021-05-07 16:35:22
    vue项目开发中往往会设计到浏览器头部图标的设置,这里分享一下自己在项目中的使用的方法,如有不足的地方还望指正,直奔主题:
  • vue icon

    2021-08-04 17:11:43
    icon组件 <template> <i :class="`iconfont icon-${type}`" :style="styles" @click="handleClick"></i> </template> <script> export default { name: 'Icons', props: { type:...
  • (1)全局调用,无加加载icon(2)组件调用(含ant-design/icon-vue加载)2.手动引入 npm install -g @vue/cli@next vue create vueapp //选择vue3 cd vueapp npm i --save ant-design-vue@next //测试版,稳定版好像不...
  • 1.安装echartsnpm install echarts --save2.可以在项目入口一如全局 也可以在局部页面... 也可以在main.js 引入全局import echarts from 'echarts'//放入全局vue 对象中Vue.prototype.$echarts = echarts3.div容器v...
  • npm install @icon-park/vue-next --save 引入样式 在main.js里面引入样式 import '@icon-park/vue/styles/index.css'; 使用 将刚才复制的代码应用到你的vue组件里面 <template> <doc-search-two ...
  • antd vue图标选择器

    千次阅读 2021-05-12 12:21:49
    目前antd vue还没有图标选择器,但是由于需求所需所以自定义了一个iconPicker 一、效果展示 二、使用 1、自定义组件iconPicker.vue,支持’click’, ‘hover’, ‘focus’ 三种触发方式,默认click触发 <...
  • 第一步:在.vuepress/public下建一个icon文件夹 第二步:把iconfont.css内容放到index.styl文件中,这个文件在哪,大家可以从vuepress官网上找,自己按照官网建议的文件目录进行创建。 这时候运行会出现问题,显示不...
  • Vue中使用SVG-ICON

    2021-01-23 17:06:56
    Vue中使用svg-icon,可以按如下配置即可。 1、src/components/SvgIcon目录下创建index.vue,代码如下: <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :...
  • vue使用自定义icon图标的方法

    千次阅读 2020-12-19 02:31:56
    首先因为elementUI提供的icon太少了,所有自己找找有没有矢量图可以补充的,尝试多种方法,觉得下面方法简单易懂,分享给大家效果图:推荐使用阿里爸爸矢量图标管理,iconfont使用方法 登录账号,找到需要的图标加入...
  • Ant Design Vue官网中,给出的示例中,引用图标组件,需要在每个页面进行按需引入。下面给大家提供一个全局注册ant图标组件的一种方法。 1.安装 @ant-design/icons-vue 图标组件包 npm install --save @ant-design/...
  • YDOOK:vue3.0:vue-cli4.5: 改变项目的网页页面 ICON更改标签图标 ICON 1. 首先,默认的 vue-cli 项目页面标签 ICON 是: 默认的 vue 的标志: 2. 然后就是该标志会在 vue-cli 项目的每一个页面中都会存在: 3. ...
  • vue-admin-template:在setting.js中修改 vue项目中:在index.html中修改 electron-vue-admin中:在index.ejs中修改
  • 目录Vue3项目搭建方式Vue3引入Element-plus引入Vue-Router4并封装路由 Vue3项目搭建方式 Vue.js 设计的初衷就包括可以被渐进式地采用。这意味着它可以根据需求以多种方式集成到一个项目中。 将 Vue.js 添加到项目中...
  • VUE自定义icon图标-20211124-PUSDN-JaneYork

    万次阅读 2021-11-24 21:13:41
    VUE自定义icon图标-20211124 前情提示 系统: 文中仅仅用于演示操作,使用icon时请注意版权是否可以商用! 一说 同步更新最新版、完整版请移步PUSDN Powered By PUSDN - 平行宇宙软件开发者网www.pusdn.com ,转载...
  • 本文主要记录一下,从vue-element-admin框架中,学习到使用icon的经验。希望以后,可以运用到自己的项目中。 一、前端icon的发展史       在远古时代,大部分图表都是用img来实现的。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,519
精华内容 21,007
关键字:

iconvue

vue 订阅