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,6 +30,12 @@ const _components = [ | ||
| 30 | meta: { title: 'Button 按钮' }, | 30 | meta: { title: 'Button 按钮' }, |
| 31 | component: () => import('@/views/docs/component/button.md'), | 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
| @@ -10,7 +10,11 @@ | @@ -10,7 +10,11 @@ | ||
| 10 | 10 | ||
| 11 | ```html | 11 | ```html |
| 12 | <template> | 12 | <template> |
| 13 | - <zui-button>按钮</zui-button> | 13 | + <div> |
| 14 | + <zui-button>普通按钮</zui-button> | ||
| 15 | + <zui-button round>圆角按钮</zui-button> | ||
| 16 | + <zui-button rect>矩形按钮</zui-button> | ||
| 17 | + </div> | ||
| 14 | </template> | 18 | </template> |
| 15 | 19 | ||
| 16 | <script> | 20 | <script> |
| @@ -0,0 +1,46 @@ | @@ -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 | \ No newline at end of file | 47 | \ No newline at end of file |
packages/button/index.css
| 1 | .zui-button { | 1 | .zui-button { |
| 2 | background-color: #FCD404; | 2 | background-color: #FCD404; |
| 3 | color: #FFF; | 3 | color: #FFF; |
| 4 | - padding: 10px 20px; | 4 | + padding: 5px 15px; |
| 5 | font-size: 14px; | 5 | font-size: 14px; |
| 6 | - border-radius: 4px; | ||
| 7 | cursor: pointer; | 6 | cursor: pointer; |
| 8 | transition: background-color 300ms; | 7 | transition: background-color 300ms; |
| 9 | } | 8 | } |
packages/button/index.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="zui-button" :style="{ display: block ? 'block' : 'inline-block' }"> | 2 | + <div class="zui-button" :style="style" @click="onClick"> |
| 3 | <slot></slot> | 3 | <slot></slot> |
| 4 | </div> | 4 | </div> |
| 5 | </template> | 5 | </template> |
| @@ -11,6 +11,34 @@ export default { | @@ -11,6 +11,34 @@ export default { | ||
| 11 | block: { | 11 | block: { |
| 12 | type: Boolean, | 12 | type: Boolean, |
| 13 | default: false | 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 @@ | @@ -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 | \ No newline at end of file | 59 | \ No newline at end of file |
| @@ -0,0 +1,44 @@ | @@ -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 | \ No newline at end of file | 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 | // 给组件库配置install方法 | 9 | // 给组件库配置install方法 |
| 8 | const install = function (Vue, opts = {}) { | 10 | const install = function (Vue, opts = {}) { |