adp-extend v0.1.10-beta.1

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'}});"
    },