0.0.1 • Published 8 months ago
@newyouth/hi-ui v0.0.1
Vue2 based UI components
Install dependencies
npm install hi-uisetp 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