tarsier-vue-tools图标选择器组件

ps:不配置 urls 的情况下依赖于公共组件服务中台接口

使用方法一(全局注册方式)

注册

// index.js
import { IconList } from "uino-tarsier-vue-lib";
Vue.component('Authority', Authority)

使用方法

// *.vue:
<template>
  <Button @click="show = true">选择图标</Button>
  <IconList :urls="urls" v-model="show" on-ok="okFn" />
</template>
<script>
  export default {
    data() {
      return {
        show:false, // 控制弹窗 显示/隐藏
        urls:{} // 请求接口配置
      };
    },
    methods:{
      // 选择图标事件处理方法
      okFn(e){
        // do something...
      }
    }
  }
</script>

使用方法二(局部注册方式)

// *.vue:
<template>
  <Button @click="show = true">选择图标</Button>
  <IconList :urls="urls" v-model="show" on-ok="okFn" />
</template>

<script>
  import { IconList } from  'uino-tarsier-vue-lib';
  export default {
    components: {
      IconList
    },
    data() {
      return {
        show:false, // 控制弹窗 显示/隐藏
        urls:{} // 请求接口配置
      };
    },
    methods:{
      // 选择图标事件处理方法
      okFn(e){
        // do something...
      }
    }
  }
</script>

v-model,

  • 控制组件是否显示

on-ok, 选择图标事件处理方法

  • 参数为已选图标Object

urls, 地址配置说明

  • PRE: 地址前缀
  • DIR_PATH: 获取目录列表
  • IMAGES: 获取图标列表