iconfont 弹窗选择数据后展示到页面

1. html

 <div ref="box">

              <!-- 点击应用 -->

             <div class="icon-content" @click="openIcon">

                    <div :class="icon" />

                    <div>{{ appIcon }}</div> 

                     <i :class="iconArrow" />

             </div>

            <!-- 展示icon弹窗 -->

            <div v-show="openFlag" class="dialog-content">

                    <!-- 弹窗数据 -->

                    <div v-for="(item, index) in jsonList" :key="index" class="dialog-icon-content" @click="itemClick(item)">

                          <div :class="`${'iconfont ' + 'icon'+ item.font_class}`" />

                          <span :class="item.font_class === appIcon ? 'selected' : ''">{{ item.font_class }}</span>

                    </div> 

             </div>    

       </div>

2. 引入json文件数据：
import jsonList from '@/assets/style/iconFont/iconfont.json';

3. data定义数据：

      icon: 'iconfont iconqingxuanze', // 默认应用图标

      openFlag: false,

      iconArrow: 'iconOpen el-icon-arrow-down',

      jsonList: jsonList.glyphs,

    appIcon： ''

4.方法

  mounted() {   // 创建弹窗点击  外部关闭方法

       document.addEventListener('click', this.boxClick);

  },

  beforeDestroy() {  // 移除弹窗点击  外部关闭方法

        document.removeEventListener('click', this.boxClick);

  },

  methods: {

        boxClick(e) {  //  点数据框之外的地方关闭数据弹窗方法

              if (!this.$refs.box.contains(e.target)) this.openFlag = false;

        },

        // 打开弹窗 改变箭头样式

        openIcon() {

              this.openFlag = !this.openFlag;

              if (this.openFlag) {

                        this.iconArrow = 'iconOpen el-icon-arrow-up';

              } else {

                        this.iconArrow = 'iconOpen el-icon-arrow-down';

              }

        },

        // 点击每一项时赋值

        itemClick(item) {

             this.icon = `iconfont icon${item.font_class}`;

              this.form.appIcon = item.font_class;

              this.openIcon();

        }

}

5. 样式设置
.iconfont {  // 默认icon大小样式设置

        font-size: 18px;

  }

  .iconOpen { // 箭头icon大小样式设置

        -webkit-box-align: center;

        -ms-flex-align: center;

        align-items: center;

        line-height: 34px;

  }

  .icon-content { // 外部数据

        cursor: pointer;

        padding: 0 10px;

        line-height: 34px;

        display: flex;

        > div {  //icon与其他数据的间隔

              margin-right: 5px;

        }

  }

 .dialog-icon-content { // 弹窗整体每行的样式                

        cursor: pointer;

        padding: 0 20px; 

         line-height: 34px;   

        display: flex;

         > div {  //icon与其他数据的间隔     

               margin-right: 5px;

          }

  }

  .dialog-icon-content:hover { // 弹窗滑动上去的行内样式

        background-color: #F5F7FA;

  }

  .selected { // 选中的数据样式

        color: #409EFF;

        font-weight: bold;

  }

  .dialog-content { // 弹窗样式

        font-size:14px;

        z-index: 9999;

        background: #FFFFFF;

        position: absolute;

        overflow: scroll;

        width: 400px;

        height: 300px;

        box-shadow: 1px 1px 10px 5px rgba(52, 52, 52, 0.1); //阴影样式

        border-radius: 6px;

        margin-top: 20px;

        padding: 5px 0;

        > div {

              display: flex;

              line-height: 34px;

              .iconfont {

                    font-size: 16px;

              }

        }

  }