Peony Image Light
Summary
A Vue image light Component
中文文档请移步:Peony Image Light 图片灯箱组件
Install
You can install it via NPM:
npm install --save peony-image-light
or,just include peony-image-light.js
to your view like this.
Namely:
// 或者 const PeonyImageLight = require('peony-image-light').default// 或者 <script src="//unpkg.com/peony-circle@1.0.3/dist/peony-image-light.js"></script>Vue
Usage
<!-- 代码 -->{{ printSlotScope(props) }}图片更多信息{{key}}:暂无数据
{returnimageWidth: 280imageHeight: 172showBadge: truelist:name: '0.jpg' // 图片名称url: image0 // 图片url路径// describe: '这是一段描述', // 描述displayable: true // 是否可显示optional: true // 是否开启选中deletable: true // 是否可删除badge:type: 'info' // 标记的颜色类型:info hot danger warning successcontent: '原' // 标记的内容-有限制不能过多// 照片的标记name: '1.jpg' // 图片名称url: image1 // 图片url路径displayable: true // 是否可显示optional: true // 是否开启选中deletable: true // 是否可删除badge:type: 'warning' // 标记的颜色类型:info hot danger warning successcontent: '原' // 标记的内容-有限制不能过多// 照片的标记name: '2.jpg' // 图片名称url: image2 // 图片url路径displayable: true // 是否可显示optional: true // 是否开启选中deletable: true // 是否可删除name: '3.jpg' // 图片名称url: image3 // 图片url路径displayable: true // 是否可显示optional: false // 是否开启选中deletable: false // 是否可删除name: '4.jpg' // 图片名称url: image4 // 图片url路径optional: false // 是否开启选中deletable: false // 是否可删除name: '5.jpg' // 图片名称url: image5 // 图片url路径name: null // 图片名称url: image6 // 图片url路径url: image7 // 图片url路径url: '不存在的地址.jpg' // 图片url路径optional: falsedeletable: falseshowMore: trueselect_list:}methods:{return action + url}{consoleif eventtargetcheckedthisselect_listelselet currIndex = thisselect_listthisselect_list}{consolethislist}{console}
result
selecting
open light
Attributes
param | Explain | Type | Optional | Default |
---|---|---|---|---|
list | Required,Picture list | Array | - | - |
action | Picture Address Prefix | String | - | '' |
thumbsAction | thumbs Picture Address Prefix | String | - | '' |
optional | optional | Boolean | - | false |
deletable | deletable | Boolean | - | false |
handleUrlMethod | Image Address Handle Method | Function (action, url) {} | - | undefined |
handleUrlMethod | Thumbs Image Address Handle Method | Function (action, url) {} | - | undefined |
showMore | Whether to display more information bar after opening the picture | Boolean | - | true |
imageWidth | Width of picture box | [String, Number] | - | 280 |
imageHeight | Height of picture box | [String, Number] | - | 172 |
showBadge | Is Show Picture Markers | Boolean | - | true |
selectHandle | Handle function when selected | Function (index, item, event) {} | - | undefined |
removeHandle | Handle function when removed | Function (index, item, event) {} | - | undefined |
Events
none
Scoped Slot
name | Explain |
---|---|
props | props’s content: { list: [...], index: 0 } |
run
# git clone ...git clone https://github.com/nongshuqiner/peony-image-light.git# entercd peony-image-light# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build
Donation
If you find component useful, you can buy me a cup of coffee.
Contact me
Just Contact Me At:
- Email: ym1185509297@163.com
- 简书: 言墨儿
License
MIT Copyright (c) 2018 - forever Naufal Rabbani