chenhaodong / mew-iview

Commit 749665eee776ecddd45aa8a8b331b8f23f15b5dc

Authored by 梁灏
1 parent c4d780c0

add props

Showing 4 changed files with 142 additions and 0 deletions   Show diff stats
Inline Side-by-side
@@ -67,6 +67,7 @@ nav { @@ -67,6 +67,7 @@ nav {
67 <li><router-link to="/divider">Divider</router-link></li> 67 <li><router-link to="/divider">Divider</router-link></li>
68 <li><router-link to="/time">Time</router-link></li> 68 <li><router-link to="/time">Time</router-link></li>
69 <li><router-link to="/cell">Cell</router-link></li> 69 <li><router-link to="/cell">Cell</router-link></li>
  70 + <li><router-link to="/drawer">Drawer</router-link></li>
70 </ul> 71 </ul>
71 </nav> 72 </nav>
72 <router-view></router-view> 73 <router-view></router-view>
@@ -225,6 +225,10 @@ const router = new VueRouter({ @@ -225,6 +225,10 @@ const router = new VueRouter({
225 { 225 {
226 path: '/cell', 226 path: '/cell',
227 component: (resolve) => require(['./routers/cell.vue'], resolve) 227 component: (resolve) => require(['./routers/cell.vue'], resolve)
  228 + },
  229 + {
  230 + path: '/drawer',
  231 + component: (resolve) => require(['./routers/drawer.vue'], resolve)
228 } 232 }
229 ] 233 ]
230 }); 234 });
examples/routers/drawer.vue 0 → 100644
  Show/Hide comments   View file @749665e
  1 +<template>
  2 + <Row :gutter="16">
  3 + <i-col span="12">
  4 + <Card title="horizontal divider">
  5 + <div>
  6 + <p>
  7 + iView is a set of UI components and widgets built on Vue.js.
  8 + iView is a set of UI components and widgets built on Vue.js.
  9 + iView is a set of UI components and widgets built on Vue.js.
  10 + </p>
  11 +
  12 + <Divider/>
  13 +
  14 + <p>
  15 + iView is a set of UI components and widgets built on Vue.js.
  16 + iView is a set of UI components and widgets built on Vue.js.
  17 + iView is a set of UI components and widgets built on Vue.js.
  18 + </p>
  19 +
  20 + <Divider>iView </Divider>
  21 +
  22 + <p>
  23 + iView is a set of UI components and widgets built on Vue.js.
  24 + iView is a set of UI components and widgets built on Vue.js.
  25 + iView is a set of UI components and widgets built on Vue.js.
  26 + </p>
  27 +
  28 + <Divider dashed/>
  29 +
  30 + <p>
  31 + iView is a set of UI components and widgets built on Vue.js.
  32 + iView is a set of UI components and widgets built on Vue.js.
  33 + iView is a set of UI components and widgets built on Vue.js.
  34 + </p>
  35 +
  36 + <Divider orientation="left">iView</Divider>
  37 +
  38 + <p>
  39 + iView is a set of UI components and widgets built on Vue.js.
  40 + iView is a set of UI components and widgets built on Vue.js.
  41 + iView is a set of UI components and widgets built on Vue.js.
  42 + </p>
  43 +
  44 + <Divider orientation="right">iView</Divider>
  45 +
  46 + <p>
  47 + iView is a set of UI components and widgets built on Vue.js.
  48 + iView is a set of UI components and widgets built on Vue.js.
  49 + iView is a set of UI components and widgets built on Vue.js.
  50 + </p>
  51 +
  52 + </div>
  53 + </Card>
  54 + </i-col>
  55 + <i-col span="12">
  56 + <Card title="vertical divider">
  57 + <div>
  58 + iView
  59 + <Divider type="vertical" />
  60 + <a href="#">Components</a>
  61 + <Divider type="vertical" />
  62 + <a href="#">Divider</a>
  63 + </div>
  64 + </Card>
  65 + </i-col>
  66 + </Row>
  67 +</template>
  68 +
  69 +<script>
  70 + export default {}
  71 +</script>
  72 +
  73 +<style>
  74 +
  75 +</style>
src/components/drawer/drawer.vue
  Show/Hide comments   View file @749665e
@@ -2,11 +2,73 @@ @@ -2,11 +2,73 @@
2 <div></div> 2 <div></div>
3 </template> 3 </template>
4 <script> 4 <script>
  5 + import Icon from '../icon';
  6 + import { oneOf } from '../../utils/assist';
  7 + import TransferDom from '../../directives/transfer-dom';
  8 + import ScrollbarMixins from '../modal/mixins-scrollbar';
  9 +
5 const prefixCls = 'ivu-drawer'; 10 const prefixCls = 'ivu-drawer';
6 11
7 export default { 12 export default {
8 name: 'Drawer', 13 name: 'Drawer',
  14 + mixins: [ ScrollbarMixins ],
  15 + components: { Icon },
  16 + directives: { TransferDom },
9 props: { 17 props: {
  18 + value: {
  19 + type: Boolean,
  20 + default: false
  21 + },
  22 + title: {
  23 + type: String
  24 + },
  25 + width: {
  26 + type: [Number, String],
  27 + default: 256
  28 + },
  29 + closable: {
  30 + type: Boolean,
  31 + default: true
  32 + },
  33 + maskClosable: {
  34 + type: Boolean,
  35 + default: true
  36 + },
  37 + mask: {
  38 + type: Boolean,
  39 + default: true
  40 + },
  41 + maskStyle: {
  42 + type: Object
  43 + },
  44 + scrollable: {
  45 + type: Boolean,
  46 + default: false
  47 + },
  48 + placement: {
  49 + validator (value) {
  50 + return oneOf(value, ['left', 'right']);
  51 + },
  52 + default: 'right'
  53 + },
  54 + zIndex: {
  55 + type: Number,
  56 + default: 1000
  57 + },
  58 + transfer: {
  59 + type: Boolean,
  60 + default () {
  61 + return !this.$IVIEW || this.$IVIEW.transfer === '' ? true : this.$IVIEW.transfer;
  62 + }
  63 + },
  64 + },
  65 + data () {
  66 + return {
  67 + prefixCls: prefixCls,
  68 + visible: this.value,
  69 + };
  70 + },
  71 + methods: {
10 72
11 } 73 }
12 }; 74 };