安装使用

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>