adp-extend

Extended component library of ADP project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm install adp-extend -S

CDN

• 目前可以通过 unpkg.com/adp-extend 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://unpkg.com/adp-extend/dist/index.css"/>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/adp-extend/dist/adp-extend.js"></script>

• 建议使用 CDN 引入 adp-extend 的用户在链接地址上锁定版本，以免将来 adp-extend 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。

依赖说明

- Vue 2.6.x

组件使用例程

• hl-icon-select组件
  • props
    • value：v-model的绑定值, 类型：string
    • mode：控件类型, 类型：string, 可选值：input/button, 默认：input 如果是button类型，会将选择的图标复制到剪贴板，并显示提示信息
    • type：按钮的类型(仅在mode为button时有效), 类型：string, 可选值参考 el-button
    • label：按钮的文字（仅在mode为button时有效), 类型：string
    • size：控件大小, 类型：string, 可选值参考 el-element
  • 依赖
    • element-ui 2.15.x
    • font-awesome 4.7.x
    • 需要在html模板文件中引入相关资源

        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

  • examle

      <HLIconSelect v-model="iconName" size="small" class="w-8/12 h-64 ml-7"></HLIconSelect>
      <HLIconSelect mode="button" label="选择图标" size="small"></HLIconSelect>

  • vue例程

  //main.js
    import Vue from 'vue'
    import {HLIconSelect} from 'adp-extend'
    import 'adp-extend/index.css'
  
    Vue.use(HLIconSelect)

  //app.vue
  <template>
      <div id="app">
          <span>请选择图标：</span>
          <HLIconSelect v-model="iconName" size="small" class="w-3/12 h-64 ml-7" mode="input"></HLIconSelect>
      </div>
  </template>
  
  <script>
  export default {
      name: 'app',
      data () {
          return { iconName: 'el-icon-setting' }
      }
  }
  </script>

  • amis例程

  {
    "type": "custom",
    "name": "hlIconSelect",
    "html": "<hl-icon-select v-model='iconName' size='small' class='w-8/12 h-64 ml-7' mode='input'></hl-icon-select>",
    "label": "自定义组件",
    "onMount": "const app = new Vue({el: dom, data: {iconName: 'fa fa-edit'}});"
  },