0.0.1 • Published 8 months ago

@newyouth/hi-ui v0.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
8 months ago

Vue2 based UI components

  1. Install dependencies

npm install hi-ui
  1. setp up

import Vue from 'vue'
import HiUi from 'hi-ui'

Vue.use(HiUi)
<template>
  <div>
    <el-button @click="openDialog">打开全局弹窗</el-button>
    <hi-form :model="model" :columns="columns" @change="onChange"></hi-form>
  </div>
</template>

<script>
export default {
	data() {
		return {
      model: { name: undefined, age: 'ZH' },
			columns: [
        {
          title: '姓名',
          name: 'input',
          key: 'name',
          rules: [{ required: true, message: '必填项' }],
          span: 12,
          props: { 'show-word-limit': true, maxlength: 100, readonly: false }
        },
        {
          title: '年龄',
          name: 'select',
          key: 'age',
          dict: {
            isTree: false,
            label: 'label',
            value: 'value',
            children: 'children',
            data: [{ label: '中国', value: 'ZH' }, { label: '美国', value: 'USA' }],
            url: 'lala'
          },
          rules: [{ required: true, message: '必填项' }],
          span: 12,
          props: { placeholder: '请下拉选择11' }
        }
      ]
		}
	},
  methods: {
    onChange(e, scope) {
      console.log(e, scope)
    },
    openDialog() {
      this.$root.openModal({
        show: true,
        type: 'dialog',
        width: '80%',
        title: '全局弹窗1',
        slots: {
          default: (h) => h('div', { style: { color: 'red' } }, 66666)
        }
      })
    }
  }
}
</script>
0.0.1

8 months ago