npm install cwui
// main.js
import cwui from "cwui";
Vue.use(cwui);
<CW-AssemblyName></CW-AssemblyName>
<CW-Row gutter="20">
<CW-Col span="1">
<div class="colItem"></div>
</CW-Col>
<CW-Col span="2">
<div class="colItem"></div>
</CW-Col>
<CW-Col span="3">
<div class="colItem"></div>
</CW-Col>
<CW-Col span="4">
<div class="colItem"></div>
</CW-Col>
<CW-Col span="6">
<div class="colItem"></div>
</CW-Col>
<CW-Col span="8">
<div class="colItem"></div>
</CW-Col>
<CW-Col span="12">
<div class="colItem"></div>
</CW-Col>
<CW-Col span="24">
<div class="colItem"></div>
</CW-Col>
</CW-Row>
.colItem {
width: 100%;
height: 32px;
background-color: burlywood;
margin-bottom: 5px;
}
CW-Row
参数 |
说明 |
类型 |
默认值 |
gutter |
栅格间隔 |
Number, String |
0 |
CW-Col
参数 |
说明 |
类型 |
默认值 |
span |
栅格占据的列数(共 24 列) |
Number, String |
24 |
<CW-Button type="primary">主要按钮</CW-Button>
<CW-Button size="large">大型按钮</CW-Button>
<CW-Button plain>朴素按钮</CW-Button>
<CW-Button round>圆角按钮</CW-Button>
<CW-Button circle>圆</CW-Button>
<CW-Button loading>加载中</CW-Button>
<CW-Button disabled>禁用</CW-Button>
参数 |
说明 |
类型 |
可选值 |
默认值 |
type |
类型 |
String |
default/primary/success/info/warning/danger |
— |
size |
大小 |
String |
large/medium/small/mini |
— |
plain |
是否朴素按钮 |
Boolean |
— |
false |
round |
是否圆角按钮 |
Boolean |
— |
false |
circle |
是否圆形按钮 |
Boolean |
— |
false |
loading |
是否加载中状态 |
Boolean |
— |
false |
disabled |
是否禁用状态 |
Boolean |
— |
false |
<CW-Tabs v-model="tabsActive">
<CW-TabsItem label="tabs1" name="tabs11">tabs111</CW-TabsItem>
<CW-TabsItem label="tabs2" name="tabs22">tabs222</CW-TabsItem>
</CW-Tabs>
<script>
export default {
data() {
return {
tabsActive: "tabs22",
};
},
};
</script>
<CW-Copy>123456</CW-Copy>
<CW-Popover>
这是弹窗内容
<CW-Button slot="reference">打开弹窗</CW-Button>
</CW-Popover>
<CW-Switch v-model="switchValue"></CW-Switch>
<CW-Switch
v-model="switchValue"
activeColor="green"
inactiveColor="red"
></CW-Switch>
<script>
export default {
data() {
return {
switchValue: false,
};
},
};
</script>
<CW-Input v-model="inputValue" disabled></CW-Input>
<CW-Input v-model="inputValue"></CW-Input>
<CW-Input v-model="inputValue" clearable></CW-Input>
<script>
export default {
data() {
return {
inputValue:""
};
},
};
</script>
<CW-Button @click="open1">可自动关闭</CW-Button>
<CW-Button @click="open2">不自动关闭</CW-Button>
<script>
export default {
data() {
return {
dialogVisible: false,
};
},
methods: {
open1() {
this.$notice({
title: "标题",
message: "我是一条会消失的消息框",
time: 2000,
});
},
open2() {
this.$notice({
title: "标题",
message: "我是一条不会消失的消息框",
});
},
},
};
</script>
<CW-Dialog
:visible.sync="dialogVisible"
@close="dialogClose"
@sure="dialogSure"
>
<ul>
<li>我是内容1</li>
<li>我是内容2</li>
<li>我是内容3</li>
</ul>
</CW-Dialog>
<CW-Button @click="dialogVisible = true">打开弹窗</CW-Button>
<script>
export default {
data() {
return {
dialogVisible: false,
};
},
methods: {
dialogClose() {
},
dialogSure() {
},
},
};
</script>
<CW-Alert type="success">success</CW-Alert>
<CW-Alert type="warning">warning</CW-Alert>
<CW-Alert type="info">info</CW-Alert>
<CW-Alert type="error">error</CW-Alert>
<CW-Alert type="success" :showIcon="false">success</CW-Alert>
<CW-Steps :stepsList="stepsList" :stepActive="stepActive"></CW-Steps>
<script>
export default {
data() {
return {
stepsList:[
{ key: 0, title: 1, desc: 1 },
{ key: 1, title: 2, desc: 2 },
],
stepActive:1,
};
},
};
</script>
Pagination
<CW-Pagination
:currentPage="pagination.currentPage"
:pageSize="pagination.pageSize"
:total="pagination.total"
:pageChange="pageChange"
></CW-Pagination>
<script>
export default {
data() {
return {
pagination: {
currentPage: 1,
pageSize: 2,
total: 20,
},
};
},
methods: {
pageChange(pagination) {
this.pagination.currentPage = pagination.currentPage;
this.pagination.pageSize = pagination.pageSize;
},
},
};
</script>
<CW-Table :tableColumns="tableColumns" :tableData="tableData">
<template slot="id" slot-scope="scope">
{{ scope.row.id }}
</template>
<template slot="operation" slot-scope="scope">
{{ scope.row }}
<CW-Button size="small" type="primary">编辑</CW-Button>
<CW-Button size="small" type="danger">删除</CW-Button>
</template>
</CW-Table>
<script>
export default {
data() {
return {
tableColumns: [
{ dataIndex: "id", title: "ID", isSlot: true },
{ dataIndex: "dynasty", title: "朝代名称" },
{ dataIndex: "operation", title: "操作", isSlot: true },
],
tableData: [
{ id: 1, dynasty: "秦" },
{ id: 2, dynasty: "汉" },
{ id: 3, dynasty: "隋" },
{ id: 4, dynasty: "唐" },
],
};
},
};
</script>