@lexiang/venom

Introduction

Web UI Component For Vue

Install

yarn add @lexiang/venom

Usage

whole import

in you main js file

import Vue from 'vue';
import Venom from '@lexiang/venom';
import '@lexiang/venom/lib/index.css';

Vue.use(Venom);

be careful that you should import the style file separately

lazyload import

if you want to lazy load components, you can use @lexiang/babel-plugin-component

yarn add @lexiang/babel-plugin-component -D

.babelrc

{
  "plugins": [
    ["@lexiang/babel-plugin-component"]
  ]
}

then if you want to lazy load partial components, like selector and options

import { venomSelector, venomOptions } from '@lexiang/venom';

Vue.component(venomSelector);
Vue.component(venomOptions);
// or
Vue.use(venomSelector);
Vue.use(venomOptions);
// or in vue single file components
export default {
  components: {
    venomSelector,
    venomOptions,
  },
};

demo

lazyload use in vue sigle file components

<template>
  <venom-selector v-model="value" placeholder="请选择">
    <venom-options
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></venom-options>
  </venom-selector>
</template>

<script>
import { venomSelector, venomOptions } from '@lexiang/venom';

export default {
  components: {
    venomSelector,
    venomOptions,
  },
  data() {
    return {
      value: '',
      options: [
        {
          label: '双皮奶',
          value: '选项1',
        },
        {
          label: '姜撞奶',
          value: '选项2',
        },
        {
          label: '水牛奶',
          value: '选项3',
        },
      ],
    };
  },
};
</script>

Lists

available components and plugins lists

components

button、carousel、checkbox、dropdown、list、loading、modal、onOff、process、radio、rate、selector、switchButton、tabset、tooltip

plugins

confirm、toast

License

MIT