AIoT前端基础组件文档

Appearance

Return to top
On this page

CommonIcon 公共ICON

基础用法 

<template>
  <common-icon  name="common-bianyuanwangguan" content="我是toolTip" :size="18" @click.stop="handelClick"></common-icon>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();


function handelClick() {
  proxy.$message(`$dianj`)
}

</script>


<template>
  <common-icon  name="common-bianyuanwangguan" content="我是toolTip" :size="18" @click.stop="handelClick"></common-icon>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();


function handelClick() {
  proxy.$message(`$dianj`)
}

</script>
公共icon
common-bianji
common-bianyuanwangguan
common-bingzhuangtongji
common-bofang
common-caidanshouqi
common-caozuozhinan
common-changjingbianpai
common-dingwei
common-dingyue
common-fanhui
common-fanhuijiantou
common-fenxiang
common-fuzhi
common-gailan
common-gaojing
common-gengduo
common-gerenyonghu
common-gongnengshuoming
common-guanbi
common-guanli
common-jiantouxiangshang
common-jiantouxiangxia
common-jihuoshebei
common-jingshi
common-kapianzhanshi
common-liebiaozhanshi
common-liuyan
common-lixianbianyuanwangguan
common-lixianshebei
common-moban
common-mobandaoru
common-quanping
common-riqi
common-shaixuan
common-shanchu
common-shangchuan
common-shangjia
common-shangjiantou
common-shebei
common-shebeifenzushu
common-shebeigaojingshu
common-shebeiguigeshu
common-shebeishu
common-shebeishujushu
common-shijian
common-shouqi
common-shuaxin
common-shuju
common-sousuo
common-suodingshebei
common-tiaozhuan
common-tingzhi
common-tuopuguanxi
common-tupian
common-wenjian
common-wenjianjia
common-xiajia
common-xiajiantou
common-xiala
common-xianshi
common-xiazai
common-xiazaimoban
common-xinzengziji
common-xuanzhong
common-yichangbianyuanwangguan
common-yincang
common-yingyong
common-youjiantou
common-yuanxingguanbi
common-yuanxingxinzeng
common-yuanxingxuanzhong
common-yunduanshangchuan
common-yunduanxiazai
common-zaixianbianyuanwangguan
common-zaixianshebei
common-zanting
common-zhexiantongji
common-zhuzhuangtongji
common-zichanmoxing
common-zuojiantou
工具类icon
tool-a-3D
tool-baocun
tool-beixiangtuisong
tool-bianliangshezhi
tool-bianliangshezhi1
tool-bianliangshezhi2
tool-changjingfangzhen
tool-chexiao
tool-chunengshebei
tool-dengpao
tool-dingweisuanfa
tool-duanxintixing
tool-duozhongshebei
tool-fabu
tool-fangda
tool-fangjian
tool-fengpinggudianjia
tool-gaojingguize
tool-gaojingguize1
tool-guangfuban
tool-jieshujiedian
tool-jisuansuanzi
tool-kaishijiedian
tool-lishi
tool-louceng
tool-luyoupanduan
tool-luyoupanduan1
tool-mobanxiazai
tool-renlianrentishibie
tool-shangchuanyunkongjian
tool-shebeijieru
tool-shebeikongzhi
tool-shujufenfa
tool-shujuhecheng
tool-shujuyuanjieru
tool-suanfaguanli
tool-suanfaguanli1
tool-suoxiao
tool-tiaozhengjiedianweizhi
tool-tuxiangshibie
tool-wenbenshibie
tool-wendang
tool-wenkong
tool-wenshiduganyingqi
tool-xianshirizhilan
tool-xifusuanfa
tool-yincangyoucelan
tool-yincangyoucelanyichanggaojing
tool-yincangzuocelan
tool-youjian
tool-youjiantuisong
tool-youjiantuisong1
tool-yulan
tool-zichanmoxing-kongkai
tool-zichanmoxing-louyu
tool-zidingyiAPI
tool-zidingyiAPI1
tool-ziranyuyan

<template>
  <div class="icon-demo">
    <div v-for="(item, index) in allIcons" :key="index" class="icon-container">
      <h5 class="common-title">{{ item.label }}</h5>
      <div class="icon-list">
          <div class="card" @click.stop="getSvgName(icon)" v-for="icon in item.icons" :key="icon">
            <common-icon class="icon" :name="icon" :size="30"></common-icon>
            <span style="width: 80px" class="text-line-3">{{ icon }}</span>
          </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
// import { ElMessage } from 'element-plus';

const { proxy } = getCurrentInstance();

const common = import.meta.globEager(
  '../../../packages/assets/icons/common/*.svg'
);

const tool = import.meta.globEager('../../../packages/assets/icons/tool/*.svg');
const commonKeys = Object.keys(common);
const toolKeys = Object.keys(tool);

const commons = ref([]);
const tools = ref([]);

function getName(keys, file, target) {
  keys.forEach((item) => {
    const name = item
      .split(`../../packages/assets/icons/${file}/`)[1]
      .split('.')[0];
    target.push(`${file}-${name}`);
  });
}


getName(commonKeys, 'common', commons.value);
getName(toolKeys, 'tool', tools.value);

const allIcons = ref([
  { label: '公共icon', icons: commons },
  { label: '工具类icon', icons: tools }
]);

function getSvgName(name) {
  const text = `<common-icon name="${name}" :size="18"></common-icon>`;
  proxy.$copyText(text).then(() => {
    console.log(text);
    proxy.$message(`${name} 复制成功`)
  });
}
</script>





<template>
  <div class="icon-demo">
    <div v-for="(item, index) in allIcons" :key="index" class="icon-container">
      <h5 class="common-title">{{ item.label }}</h5>
      <div class="icon-list">
          <div class="card" @click.stop="getSvgName(icon)" v-for="icon in item.icons" :key="icon">
            <common-icon class="icon" :name="icon" :size="30"></common-icon>
            <span style="width: 80px" class="text-line-3">{{ icon }}</span>
          </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
// import { ElMessage } from 'element-plus';

const { proxy } = getCurrentInstance();

const common = import.meta.globEager(
  '../../../packages/assets/icons/common/*.svg'
);

const tool = import.meta.globEager('../../../packages/assets/icons/tool/*.svg');
const commonKeys = Object.keys(common);
const toolKeys = Object.keys(tool);

const commons = ref([]);
const tools = ref([]);

function getName(keys, file, target) {
  keys.forEach((item) => {
    const name = item
      .split(`../../packages/assets/icons/${file}/`)[1]
      .split('.')[0];
    target.push(`${file}-${name}`);
  });
}


getName(commonKeys, 'common', commons.value);
getName(toolKeys, 'tool', tools.value);

const allIcons = ref([
  { label: '公共icon', icons: commons },
  { label: '工具类icon', icons: tools }
]);

function getSvgName(name) {
  const text = `<common-icon name="${name}" :size="18"></common-icon>`;
  proxy.$copyText(text).then(() => {
    console.log(text);
    proxy.$message(`${name} 复制成功`)
  });
}
</script>

配置参数

参数说明类型是否必须
nameicon名称，目前分为'common-'和'tool-'Stringtrue
sizeicon的大小，如果不传，默认为18Numbertrue
contenticon hover上去时的tooltip展示，不传默认为没有Stringtrue
color图标展示的颜色，所有svg图片默认为currentColor，如果不传为’#333‘,如果传即为设定颜色，彩色图片不在此列Stringtrue
effecttool-tip背景色，默认为’dark‘具体使用方法参考element-plus的el-tooltip组件Stringtrue
placementtool-tip显示位置，默认为’top-start‘具体使用方法参考element-plus的el-tooltip组件Stringtrue