Skip to content

Commit

Permalink
refactor: use vant to refactor swiper plugin; zh: 使用 vant 重构轮播图
Browse files Browse the repository at this point in the history
  • Loading branch information
ly525 committed Nov 9, 2019
1 parent 0c8e16e commit e181c27
Show file tree
Hide file tree
Showing 6 changed files with 117 additions and 174 deletions.
9 changes: 1 addition & 8 deletions front-end/h5/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
"animate.css": "^3.7.2",
"ant-design-vue": "^1.3.14",
"core-js": "^2.6.5",
"cube-ui": "^1.12.31",
"element-ui": "^2.9.1",
"font-awesome": "4.7.0",
"html2canvas": "^1.0.0-rc.3",
Expand All @@ -31,6 +30,7 @@
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"v-click-outside": "^2.1.4",
"vant": "^2.2.12",
"vue": "^2.6.10",
"vue-i18n": "^8.14.1",
"vue-quill-editor": "^3.0.6",
Expand All @@ -56,13 +56,6 @@
"sass-loader": "^7.1.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-cube-ui": "^0.2.5",
"vue-template-compiler": "^2.6.10"
},
"transformModules": {
"cube-ui": {
"transform": "cube-ui/src/modules/${member}",
"kebabCase": true
}
}
}
5 changes: 4 additions & 1 deletion front-end/h5/src/components/core/editor/canvas/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,10 @@ export default {
// 添加 class 的原因:与 handleClickCanvasProp 配合,
// 当点击编辑画布上的其它区域(clickEvent.target.classList 不包含下面的 className)的时候,设置 editingElement=null
class: 'element-on-edit-canvas',
props: element.getProps(), // #6 #3
props: {
...element.getProps(), // #6 #3,
editorMode: 'edit'
},
// nativeOn: {
// contextmenu: e => {
// this.bindContextMenu(e)
Expand Down
40 changes: 20 additions & 20 deletions front-end/h5/src/components/core/editor/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,26 +21,26 @@ import ExternalLinksOfHeader from '@/components/common/header/links.js'
import LangSelect from '@/components/common/header/LangSelect.vue'
import Feedback from '@/components/common/feedback/index'

const sidebarMenus = [
{
i18nLabel: 'editor.sidebar.components',
label: '组件列表',
value: 'pluginList',
antIcon: 'bars'
},
{
i18nLabel: 'editor.sidebar.pages',
label: '页面管理',
value: 'pageManagement',
antIcon: 'snippets'
},
{
i18nLabel: 'editor.sidebar.templates',
label: '免费模板',
value: 'freeTemplate',
antIcon: 'appstore'
}
]
// const sidebarMenus = [
// {
// i18nLabel: 'editor.sidebar.components',
// label: '组件列表',
// value: 'pluginList',
// antIcon: 'bars'
// },
// {
// i18nLabel: 'editor.sidebar.pages',
// label: '页面管理',
// value: 'pageManagement',
// antIcon: 'snippets'
// },
// {
// i18nLabel: 'editor.sidebar.templates',
// label: '免费模板',
// value: 'freeTemplate',
// antIcon: 'appstore'
// }
// ]

const fixedTools = [
{
Expand Down
121 changes: 64 additions & 57 deletions front-end/h5/src/components/plugins/lbp-slide.js
Original file line number Diff line number Diff line change
@@ -1,36 +1,42 @@
import {
Slide
} from 'cube-ui'
import { Swipe, SwipeItem } from 'vant'
import 'vant/lib/swipe/style'
import 'vant/lib/swipe-item/style'
import ImageGallery from '@/components/core/support/image-gallery/gallery.js'

const defaultItems = [
{
// url: 'http://www.didichuxing.com/',
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
image: 'https://img.yzcdn.cn/vant/apple-1.jpg'
},
{
// url: 'http://www.didichuxing.com/',
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
},
{
// url: 'http://www.didichuxing.com/',
image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
image: 'https://img.yzcdn.cn/vant/apple-2.jpg'
}
]

function getDefaultDataSource () {
return {
activeIndex: 0,
items: defaultItems.slice(0)
}
}

export default {
name: 'lbp-slide',
components: {
Slide
},
props: {
interval: {
type: Number,
default: 4000
},
items: {
type: Array,
default: () => defaultItems
dataSource: {
type: Object,
default: () => getDefaultDataSource()
},
editorMode: {
type: String,
default: 'preview'
},
activeIndex: {
type: Number,
default: 0
}
},
editorConfig: {
Expand All @@ -41,26 +47,30 @@ export default {
require: true,
defaultPropValue: 4000
},
items: {
dataSource: {
type: 'lbs-slide-items-editor',
label: '图片列表',
require: true,
defaultPropValue: defaultItems
defaultPropValue: getDefaultDataSource()
}
},
components: {
'lbs-slide-items-editor': {
render () {
const currentItem = this.value_[this.current - 1]
const currentItem = this.innerItems[this.current - 1] || {}
return <div>
{
<a-pagination
current={this.current}
onChange={(page) => {
this.current = page
this.$emit('change', {
items: this.innerItems,
activeIndex: page - 1
})
}}
size="small"
total={this.value_.length}
total={this.innerItems.length}
defaultPageSize={1}
itemRender={this.itemRender}
/>
Expand All @@ -72,34 +82,17 @@ export default {
currentItem.image = url
}}
/>
{/* {
this.value_.map((item, index) => (
<div>
<label>图片 {index + 1}</label>
<a-textarea value={item.image} onChange={e => { item.image = e.target.value }} autosize={{ minRows: 2, maxRows: 6 }}></a-textarea>
<a-button-group size="small">
<a-button type="default" icon="plus" onClick={this.add}/>
<a-button type="default" icon="minus" onClick={this.minus}/>
</a-button-group>
</div>
))
} */}
</div>
},
props: {
value: {
type: Array,
default: () => defaultItems
type: Object,
default: () => getDefaultDataSource()
}
},
computed: {
value_: {
get () {
return this.value
},
set (val) {
this.$emit('input', val)
}
innerItems () {
return this.value.items
}
},
data: () => ({
Expand All @@ -108,27 +101,33 @@ export default {
methods: {
itemRender (current, type, originalElement) {
if (type === 'prev') {
return <a-button style={{ marginRight: '8px' }} size="small" icon="minus" onClick={this.minus}></a-button>
return <a-button style={{ marginRight: '8px' }} size="small" icon="minus" onClick={() => this.minus(current)} disabled={this.innerItems.length === 1}></a-button>
} else if (type === 'next') {
return <a-button style={{ marginLeft: '8px' }} size="small" icon="plus" onClick={this.add}></a-button>
}
return originalElement
},
add () {
console.log(this.value_.length)
this.$emit('change', [
...this.value_,
{
image: '',
value: `选项${this.value_.length + 1}-value`,
label: `选项${this.value_.length + 1}-label`
}
])
this.$emit('change', {
activeIndex: this.innerItems.length,
items: [
...this.innerItems,
{
image: '',
value: `选项${this.innerItems.length + 1}-value`,
label: `选项${this.innerItems.length + 1}-label`
}
]
})
},
minus (item, index) {
const items = this.value_.slice(0)
minus (index) {
if (this.innerItems.length === 1) return
const items = this.innerItems.slice(0)
items.splice(index, 1)
this.$emit('change', items)
this.$emit('change', {
items,
activeIndex: index > 0 ? index - 1 : 0
})
}
}
}
Expand All @@ -139,10 +138,18 @@ export default {
methods: {

},

render () {
const { items, activeIndex } = this.dataSource
return (
<slide data={this.items} interval={+this.interval} />
this.editorMode === 'edit'
? items.length && <img src={items[activeIndex].image} />
: <Swipe autoplay={+this.interval} indicator-color="red">
{
items.map(item => (
<SwipeItem><img src={item.image} width="100%" height="100%" /></SwipeItem>
))
}
</Swipe>
)
}
}
6 changes: 0 additions & 6 deletions front-end/h5/vue.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,5 @@ module.exports = {
}
},
extract: false
},
pluginOptions: {
'cube-ui': {
postCompile: true,
theme: true
}
}
}
Loading

0 comments on commit e181c27

Please sign in to comment.