0.1.0 • Published 4 years ago
teacool-ui v0.1.0
基本介绍
初始化vue项目
vue create demo
安装组件库
npm install teacool-ui
全局导入
import TeaCoolUI from 'teacool-ui' import 'teacool-ui/lib/teacool-ui.css'
Vue.use(TeaCoolUI)
使用组件
<template>
<div id="app">
<tc-button type="success" @click="visible=true">显示登录框</tc-button>
<tc-dialog title="用户登录" :visible.sync="visible" width="30%">
<tc-form :model="model" label-width="80px">
<tc-form-item label="用户名">
<tc-input v-model="model.username" placeholder="请输入用户名" clearable></tc-input>
</tc-form-item>
<tc-form-item label="用户密码">
<tc-input v-model="model.password" placeholder="请输入用户密码" show-password></tc-input>
</tc-form-item>
<tc-form-item label="即时配送">
<tc-switch v-model="model.soon" active-color="green" inactive-color="red"></tc-switch>
</tc-form-item>
<tc-form-item label="爱好">
<tc-checkbox-group v-model="model.hobby">
<tc-checkbox label="篮球"></tc-checkbox>
<tc-checkbox label="足球"></tc-checkbox>
<tc-checkbox label="乒乓球"></tc-checkbox>
</tc-checkbox-group>
</tc-form-item>
<tc-form-item label="性别">
<tc-radio-group v-model="model.gender">
<tc-radio label="1">男</tc-radio>
<tc-radio label="0">女</tc-radio>
</tc-radio-group>
</tc-form-item>
</tc-form>
<template v-slot:footer>
<tc-button type="primary" @click="login">登录</tc-button>
<tc-button @click="visible=false">取消</tc-button>
</template>
</tc-dialog>
</div>
</template>
```
0.1.0
4 years ago