Commit 01c7288c2f20a8d0bd9a0d3c8c915639588546a6
1 parent
701941b8
Exists in
master
[新增] 按钮、单元格
Showing
8 changed files
with
195 additions
and
8 deletions
Show diff stats
examples/router/routes.js
| ... | ... | @@ -30,6 +30,12 @@ const _components = [ |
| 30 | 30 | meta: { title: 'Button 按钮' }, |
| 31 | 31 | component: () => import('@/views/docs/component/button.md'), |
| 32 | 32 | }, |
| 33 | + { | |
| 34 | + path: 'cell', | |
| 35 | + name: 'cell', | |
| 36 | + meta: { title: 'Cell 单元格' }, | |
| 37 | + component: () => import('@/views/docs/component/cell.md'), | |
| 38 | + }, | |
| 33 | 39 | ] |
| 34 | 40 | }, |
| 35 | 41 | { | ... | ... |
examples/views/docs/component/button.md
| ... | ... | @@ -0,0 +1,46 @@ |
| 1 | +# Cell 单元格 | |
| 2 | + | |
| 3 | +单元格 | |
| 4 | + | |
| 5 | +## 基础用法 | |
| 6 | + | |
| 7 | +单元格说明 | |
| 8 | + | |
| 9 | +::: snippet 示例 | |
| 10 | + | |
| 11 | +```html | |
| 12 | +<template> | |
| 13 | + <div class="list"> | |
| 14 | + <zui-cell title="单元格" value="内容"></zui-cell> | |
| 15 | + <zui-cell title="可点击" value="内容" is-link></zui-cell> | |
| 16 | + <zui-cell> | |
| 17 | + <div slot="title" class="aui-list-item-title aui-font-size-16"> | |
| 18 | + 开启微信通知 | |
| 19 | + <div class="aui-list-item-text aui-font-size-12"> | |
| 20 | + 关注微信公众号，可获取运单到账信息 | |
| 21 | + </div> | |
| 22 | + </div> | |
| 23 | + <div slot="right"> | |
| 24 | + icon | |
| 25 | + </div> | |
| 26 | + </zui-cell> | |
| 27 | + </div> | |
| 28 | +</template> | |
| 29 | + | |
| 30 | +<script> | |
| 31 | +export default { | |
| 32 | + data() { | |
| 33 | + return { | |
| 34 | + } | |
| 35 | + }, | |
| 36 | +} | |
| 37 | +</script> | |
| 38 | + | |
| 39 | +<style> | |
| 40 | +.list { | |
| 41 | + width: 300px; | |
| 42 | +} | |
| 43 | +</style> | |
| 44 | +``` | |
| 45 | + | |
| 46 | +::: | |
| 0 | 47 | \ No newline at end of file | ... | ... |
packages/button/index.css
packages/button/index.vue
| 1 | 1 | <template> |
| 2 | - <div class="zui-button" :style="{ display: block ? 'block' : 'inline-block' }"> | |
| 2 | + <div class="zui-button" :style="style" @click="onClick"> | |
| 3 | 3 | <slot></slot> |
| 4 | 4 | </div> |
| 5 | 5 | </template> |
| ... | ... | @@ -11,6 +11,34 @@ export default { |
| 11 | 11 | block: { |
| 12 | 12 | type: Boolean, |
| 13 | 13 | default: false |
| 14 | + }, | |
| 15 | + round: Boolean, | |
| 16 | + rect: Boolean, | |
| 17 | + }, | |
| 18 | + data: function() { | |
| 19 | + return { | |
| 20 | + | |
| 21 | + }; | |
| 22 | + }, | |
| 23 | + computed: { | |
| 24 | + style: function() { | |
| 25 | + return { display: this.block ? 'block' : 'inline-block', borderRadius: this.borderRadius }; | |
| 26 | + }, | |
| 27 | + borderRadius: function() { | |
| 28 | + if (this.round) { | |
| 29 | + return '20px'; | |
| 30 | + } else if (this.rect) { | |
| 31 | + return '0'; | |
| 32 | + } else { | |
| 33 | + return '4px'; | |
| 34 | + } | |
| 35 | + } | |
| 36 | + }, | |
| 37 | + methods: { | |
| 38 | + onClick: function() { | |
| 39 | + if (this.$listeners['click']) { | |
| 40 | + this.$emit('click'); | |
| 41 | + } | |
| 14 | 42 | } |
| 15 | 43 | } |
| 16 | 44 | } | ... | ... |
| ... | ... | @@ -0,0 +1,58 @@ |
| 1 | +.zui-cell { | |
| 2 | + position: relative; | |
| 3 | + display: -webkit-box; | |
| 4 | + display: -webkit-flex; | |
| 5 | + display: flex; | |
| 6 | + box-sizing: border-box; | |
| 7 | + width: 100%; | |
| 8 | + padding: 10px 16px; | |
| 9 | + overflow: hidden; | |
| 10 | + color: #323233; | |
| 11 | + font-size: 14px; | |
| 12 | + line-height: 24px; | |
| 13 | + background-color: #fff; | |
| 14 | +} | |
| 15 | + | |
| 16 | +.zui-cell--clickable { | |
| 17 | + cursor: pointer; | |
| 18 | +} | |
| 19 | + | |
| 20 | +.zui-cell--clickable:active { | |
| 21 | + background-color: #f2f3f5; | |
| 22 | +} | |
| 23 | + | |
| 24 | +.zui-cell__left-icon { | |
| 25 | + margin-right: 5px; | |
| 26 | +} | |
| 27 | + | |
| 28 | +.zui-cell__right-icon { | |
| 29 | + margin-left: 5px; | |
| 30 | +} | |
| 31 | + | |
| 32 | +.zui-cell:not(:last-child)::after { | |
| 33 | + position: absolute; | |
| 34 | + box-sizing: border-box; | |
| 35 | + content: ' '; | |
| 36 | + pointer-events: none; | |
| 37 | + right: 0; | |
| 38 | + bottom: 0; | |
| 39 | + left: 16px; | |
| 40 | + border-bottom: 1px solid #ebedf0; | |
| 41 | + -webkit-transform: scaleY(0.5); | |
| 42 | + transform: scaleY(0.5); | |
| 43 | +} | |
| 44 | + | |
| 45 | +.zui-cell__title, .zui-cell__value { | |
| 46 | + -webkit-box-flex: 1; | |
| 47 | + -webkit-flex: 1; | |
| 48 | + flex: 1; | |
| 49 | +} | |
| 50 | + | |
| 51 | +.zui-cell__value { | |
| 52 | + position: relative; | |
| 53 | + overflow: hidden; | |
| 54 | + color: #969799; | |
| 55 | + text-align: right; | |
| 56 | + vertical-align: middle; | |
| 57 | + word-wrap: break-word; | |
| 58 | +} | |
| 0 | 59 | \ No newline at end of file | ... | ... |
| ... | ... | @@ -0,0 +1,44 @@ |
| 1 | +<template> | |
| 2 | + <div class="zui-cell" :class="classRender"> | |
| 3 | + <div v-if="$slots.icon" class="zui-cell__left-icon"> | |
| 4 | + <slot name="icon"></slot> | |
| 5 | + </div> | |
| 6 | + <div v-else-if="icon" class="zui-cell__left-icon"></div> | |
| 7 | + <div v-if="$slots.title" class="zui-cell__title"> | |
| 8 | + <slot name="title"></slot> | |
| 9 | + </div> | |
| 10 | + <div v-else-if="title" class="zui-cell__title">{{ title }}</div> | |
| 11 | + <div v-if="$slots.default" class="zui-cell__value"> | |
| 12 | + <slot></slot> | |
| 13 | + </div> | |
| 14 | + <div v-else-if="value" class="zui-cell__value">{{ value }}</div> | |
| 15 | + <div v-if="$slots.right" class="zui-cell__right-icon"> | |
| 16 | + <slot name="right"></slot> | |
| 17 | + </div> | |
| 18 | + <div v-else-if="rightIcon" class="zui-cell__right-icon"></div> | |
| 19 | + </div> | |
| 20 | +</template> | |
| 21 | + | |
| 22 | +<script> | |
| 23 | +export default { | |
| 24 | + name: 'Cell', | |
| 25 | + props: { | |
| 26 | + icon: String, | |
| 27 | + title: String, | |
| 28 | + value: String, | |
| 29 | + isLink: Boolean, | |
| 30 | + rightIcon: String, | |
| 31 | + }, | |
| 32 | + computed: { | |
| 33 | + classRender: function() { | |
| 34 | + return { | |
| 35 | + 'zui-cell--clickable': this.isLink | |
| 36 | + } | |
| 37 | + } | |
| 38 | + } | |
| 39 | +} | |
| 40 | +</script> | |
| 41 | + | |
| 42 | +<style> | |
| 43 | +@import "./index.css"; | |
| 44 | +</style> | |
| 0 | 45 | \ No newline at end of file | ... | ... |
packages/index.js
| 1 | -import Button from './button'; | |
| 1 | +let components = {}; | |
| 2 | 2 | |
| 3 | -const components = { | |
| 4 | - Button, | |
| 5 | -} | |
| 3 | +const componentsFiles = require.context('./', true, /\.vue/); | |
| 4 | +componentsFiles.keys().forEach(path => { | |
| 5 | + const component = componentsFiles(path); | |
| 6 | + components[component.default.name] = component.default; | |
| 7 | +}); | |
| 6 | 8 | |
| 7 | 9 | // 给组件库配置install方法 |
| 8 | 10 | const install = function (Vue, opts = {}) { | ... | ... |