twolions-ui v1.0.0

说明

twolions-UI 你们没看过吧，我是最牛逼的 UI 组件库，主要用于快速开发基于 VUE2.0 的项目,如果再某个网站看到我，你不用我，吃亏的是你自己，不信走着瞧

安装

cnpm i twolions-ui -S

使用

在src/main.js
import twolionsUI from 'twolions-ui';
Vue.use(twolionsUI);
import 'twolions-ui/twolions-ui.css';

组件

按钮

    <twolions-button>默认按钮</twolions-button>
    <twolions-button type="primary">主要按钮</twolions-button>
    <twolions-button type="success">成功按钮</twolions-button>
    <twolions-button type="info">信息按钮</twolions-button>
    <twolions-button type="warning">警告按钮</twolions-button>
    <twolions-button type="danger">危险按钮</twolions-button>

表格

<twolions-table :column="column" :data="data"></twolions-table>
<script>
export default {
  data() {
    return {
        column: [
          {title: '编号', key: 'id'},
          {title: '姓名', key: 'name', render(row, data) { return `<b>${data}</b>`}},
          {title: '年龄', key: 'age'},
          {title: '性别', key: 'sex', render(row, data) { return data==1? '男' : '女'}},
        ],
        data: [
          {id:1, name: '武大郎', age: 998, sex: 1},
          {id:2, name: '西门庆', age: 18, sex: 1},
          {id:3, name: '潘金莲', age: 32, sex: 1},
          {id:4, name: '神龙教主', age: 32, sex: 1},
        ]
    }
  },
}
</script>

分页

<twolions-page :total="10" @changePage="changePageFn"></twolions-page>

<script>
export default {
  methods: {
    changePageFn(n) {
      alert(n)
    }
  }
}
</script>

弹框

<twolions-dialog :state.sync="dialogUserState" @submit="sayFn" title="用户编辑" content="用户编辑"></twolions-dialog>
<twolions-dialog :state.sync="dialogState" @submit="sayFn" title="填写信息" content="填写信息"></twolions-dialog>

<script>
export default {
  data(){
    return {
        dialogState : false,
        dialogUserState : false
    },
  methods: {
    sayFn(){
      alert("这是twolions封装的组件")
    },
  }
}
</script>

导航

<twolions-topbar>
    导航标题
</twolions-topbar>