mes-ui-d2/src/pages/demo/components/icon/select.vue

<template>
  <Container type="ghost">
    <el-card class="dd-mb">
      <div class="title-group">
        <p class="title">一般用法</p>
        <p class="sub-title">
          icon = {{icon || '未选择'}}
          <i v-if="icon" :class="'fa fa-' + icon"></i>
        </p>
      </div>
      <IconSelect v-model="icon"></IconSelect>
      <div class="title-group">
        <p class="title">用户可以输入</p>
        <p class="sub-title">
          icon2 = {{icon2 || '未选择'}}
          <i v-if="icon2" :class="'fa fa-' + icon2"></i>
        </p>
      </div>
      <IconSelect v-model="icon2" :user-input="true"></IconSelect>
    </el-card>
    <el-card>
      <Markdown url="/static/markdownFiles/article/组件 - 图标选择器.md"></Markdown>
    </el-card>
  </Container>
</template>

<script>
export default {
  data () {
    return {
      icon: '',
      icon2: ''
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.title-group {
  margin-top: $margin;
  margin-bottom: $margin / 2;
  &:first-child {
    margin-top: 0px;
  }
  .title {
    margin: 0px;
  }
  .sub-title {
    margin: 0px;
    color: $color-text-sub;
    font-size: 10px;
  }
}
</style>