ywicon

wujingjing

2024-06-28 b89ed80f20f2e07729a68f2c6ed2ca5134332a17

 src/components/iconSelector/index.vue

@@ -33,6 +33,9 @@
            <div class="icon-selector-warp">
               <div class="icon-selector-warp-title">{{ title }}</div>
               <el-tabs v-model="state.fontIconTabActive" @tab-click="onIconClick">
                  <el-tab-pane lazy label="yw" name="yw">
                     <IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
                  </el-tab-pane>
                  <el-tab-pane lazy label="ali" name="ali">
                     <IconList :list="fontIconSheetsFilterList" :empty="emptyDescription" :prefix="state.fontIconPrefix" @get-icon="onColClick" />
                  </el-tab-pane>
@@ -111,9 +114,11 @@
   fontIconWidth: 0,
   fontIconSearch: '',
   fontIconPlaceholder: '',
   fontIconTabActive: 'ali',
   fontIconTabActive: 'yw',
   fontIconList: {
      ali: [],
      yw: [],

      ele: [],
      awe: [],
   },
@@ -145,7 +150,8 @@
// 根据 tab name 类型设置图标
const fontIconTabNameList = () => {
   let iconList: any = [];
   if (state.fontIconTabActive === 'ali') iconList = state.fontIconList.ali;
   if (state.fontIconTabActive === 'yw') iconList = state.fontIconList.yw;
   else if (state.fontIconTabActive === 'ali') iconList = state.fontIconList.ali;
   else if (state.fontIconTabActive === 'ele') iconList = state.fontIconList.ele;
   else if (state.fontIconTabActive === 'awe') iconList = state.fontIconList.awe;
   return iconList;
@@ -158,8 +164,9 @@
};
// 处理 icon 类型，用于回显时，tab 高亮与初始化数据
const initFontIconName = () => {
   let name = 'ali';
   if (props.modelValue!.indexOf('iconfont') > -1) name = 'ali';
   let name = 'yw';
   if (props.modelValue!.indexOf('ywiconfont') > -1) name = 'yw';
   else if (props.modelValue!.indexOf('iconfont') > -1) name = 'ali';
   else if (props.modelValue!.indexOf('ele-') > -1) name = 'ele';
   else if (props.modelValue!.indexOf('fa') > -1) name = 'awe';
   // 初始化 tab 高亮回显
@@ -167,23 +174,30 @@
   return name;
};
// 初始化数据
const initFontIconData = async (name: string) => {
   if (name === 'ali') {
const initFontIconData =  (name: string) => {
   if (name === 'yw') {
      // 阿里字体图标使用 `yw xxx`
      if (state.fontIconList.yw.length > 0) return;
       initIconfont.yw().then((res: any) => {
         state.fontIconList.yw = res.map((i: string) => `ywicon ${i}`);
      });
   } 
   else if (name === 'ali') {
      // 阿里字体图标使用 `iconfont xxx`
      if (state.fontIconList.ali.length > 0) return;
      await initIconfont.ali().then((res: any) => {
       initIconfont.ali().then((res: any) => {
         state.fontIconList.ali = res.map((i: string) => `iconfont ${i}`);
      });
   } else if (name === 'ele') {
      // element plus 图标
      if (state.fontIconList.ele.length > 0) return;
      await initIconfont.ele().then((res: any) => {
       initIconfont.ele().then((res: any) => {
         state.fontIconList.ele = res;
      });
   } else if (name === 'awe') {
      // fontawesome字体图标使用 `fa xxx`
      if (state.fontIconList.awe.length > 0) return;
      await initIconfont.awe().then((res: any) => {
       initIconfont.awe().then((res: any) => {
         state.fontIconList.awe = res.map((i: string) => `fa ${i}`);
      });
   }