1.0.18 • Published 2 years ago
cwui v1.0.18
安装使用
npm install cwui
// main.js
import cwui from "cwui";
Vue.use(cwui);
.vue 文件中
<CW-AssemblyName></CW-AssemblyName>
组件
Layout
<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 |
Button
<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 |
Tabs
<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>
Copy
<CW-Copy>123456</CW-Copy>
Card
<CW-Card>Card</CW-Card>
Popover
<CW-Popover>
这是弹窗内容
<CW-Button slot="reference">打开弹窗</CW-Button>
</CW-Popover>
Switch
<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>
Input
<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>
Notice
<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>
Dialog
<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>
Alert
<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>
Steps
<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>
Table
<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>