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