Commit ee688964 by honghong

图片拖拽

parent 609adeda
...@@ -10,6 +10,11 @@ ...@@ -10,6 +10,11 @@
<view class="dynamic-content text-overflow-two" v-if="itemDetail && itemDetail.content"> <view class="dynamic-content text-overflow-two" v-if="itemDetail && itemDetail.content">
<u-parse :content="this.$utilsMethods.replaceSpecialCharFixed(itemDetail.content)"></u-parse> <u-parse :content="this.$utilsMethods.replaceSpecialCharFixed(itemDetail.content)"></u-parse>
</view> </view>
<view class="imgs">
<image :src="item" mode="aspectFit" class="" v-for="(item,index) in itemDetail.imgs" :key="index"></image>
</view>
<!-- <view class="dynamic-content text-overflow-two">{{itemDetail.content}}</view> <!-- <view class="dynamic-content text-overflow-two">{{itemDetail.content}}</view>
<view class="d-flex flex-wrap dynamic-picture"> <view class="d-flex flex-wrap dynamic-picture">
<image @click="previewImage(item.picUrl)" v-for="(info,ix) in 3" class="dynamic-picture-item" <image @click="previewImage(item.picUrl)" v-for="(info,ix) in 3" class="dynamic-picture-item"
...@@ -34,7 +39,7 @@ ...@@ -34,7 +39,7 @@
</view> </view>
<view class="d-flex"> <view class="d-flex">
<view v-if="isEdit" class="dynamic-delete mr-2" @click.stop="handleEdit(itemDetail.forumId)">编辑</view> <view v-if="isEdit" class="dynamic-delete mr-2" @click.stop="handleEdit(itemDetail.forumId)">编辑</view>
<view v-if="userInfot.userId == itemDetail.userId" class="dynamic-delete" @click.stop="handleDelete(itemDetail.forumId)">删除</view> <view v-if="userInfot.userId == itemDetail.userId " class="dynamic-delete" @click.stop="handleDelete(itemDetail.forumId)">删除</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -210,4 +215,15 @@ ...@@ -210,4 +215,15 @@
.picture:not(:nth-child(3n+3)) { .picture:not(:nth-child(3n+3)) {
margin-right: 16rpx; margin-right: 16rpx;
} }
.imgs{
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
>image{
width: 200rpx;
height: 200rpx;
margin-right: 10rpx;
}
}
</style> </style>
\ No newline at end of file
...@@ -117,7 +117,8 @@ ...@@ -117,7 +117,8 @@
}, },
methods: { methods: {
handleReply(row) { handleReply(row) {
this.$emit('reply', row.commentId, row.userId, row.nickName) let id = 1
this.$emit('reply', row.commentId, row.userId, row.nickName,id)
// this.$parent.isReply = true // this.$parent.isReply = true
// this.$parent.$refs.childPopup.show = true // this.$parent.$refs.childPopup.show = true
// this.$refs.childPopup.show = true; // this.$refs.childPopup.show = true;
...@@ -136,7 +137,9 @@ ...@@ -136,7 +137,9 @@
}, },
handleReplyChild(row) { handleReplyChild(row) {
this.$emit('reply', row.repliedId, row.userId, row.nickName) let commentIdData= this.itemDetail.commentId
let id = 2
this.$emit('reply', row.commentId, row.userId, row.nickName,id, commentIdData)
}, },
// 预览图片 // 预览图片
prviewImage(imageStr, index) { prviewImage(imageStr, index) {
......
...@@ -57,6 +57,7 @@ ...@@ -57,6 +57,7 @@
console.log(data, 'data====') console.log(data, 'data====')
uni.openDocument({ uni.openDocument({
showMenu: true, showMenu: true,
fileType:"pdf",
filePath: data.tempFilePath, filePath: data.tempFilePath,
success: function(res) { success: function(res) {
// console.log('打开文档成功'); // console.log('打开文档成功');
......
...@@ -133,7 +133,10 @@ ...@@ -133,7 +133,10 @@
this.$refs.childPopup.show = true; this.$refs.childPopup.show = true;
}, },
// 回复按钮点击事件 // 回复按钮点击事件
handleOpenRely(replyId,replyUserId,replyUserName){ handleOpenRely(replyId,replyUserId,replyUserName,id, commentIdData){
this.dataid = id
this.commentIdDatas = commentIdData
this.replyData = { this.replyData = {
commentId:replyId,//回复对话的id commentId:replyId,//回复对话的id
userId:replyUserId,//回复人的id userId:replyUserId,//回复人的id
...@@ -149,7 +152,7 @@ ...@@ -149,7 +152,7 @@
// 表示回复 // 表示回复
params = { params = {
forumId: this.detailData.forumId, forumId: this.detailData.forumId,
parentCommentId:this.replyData.commentId, parentCommentId: this.dataid=='1'?this.replyData.commentId:this.commentIdDatas,
repliedId:this.replyData.commentId, repliedId:this.replyData.commentId,
repliedUserId:this.replyData.userId, repliedUserId:this.replyData.userId,
commentType: this.forumType, commentType: this.forumType,
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</view> </view>
</u-navbar> </u-navbar>
<view class="" style="width: 720rpx; margin: 0 auto;"> <view class="" style="width: 720rpx; margin: 0 auto;">
<u-swiper height="750rpx" :list="imgs" circular imgMode='scaleToFill' duration="500"></u-swiper> <u-swiper height="750rpx" :list="imgs" circular imgMode='aspectFit' duration="500"></u-swiper>
</view> </view>
<view style="padding:36rpx 0 0;"> <view style="padding:36rpx 0 0;">
...@@ -35,7 +35,10 @@ ...@@ -35,7 +35,10 @@
</view> </view>
</view> </view>
<view class="u-content"> <view class="u-content">
<u-parse :content="detailData.content"></u-parse> <!-- <u-parse :content="detailData.content"></u-parse> -->
<view class="" style="white-space: pre-line; padding: 10rpx 0; font-size: 30rpx;">
{{ detailData.content }}
</view>
</view> </view>
</view> </view>
...@@ -180,7 +183,10 @@ ...@@ -180,7 +183,10 @@
this.$refs.childPopup.show = true; this.$refs.childPopup.show = true;
}, },
// 回复按钮点击事件 // 回复按钮点击事件
handleOpenRely(replyId, replyUserId, replyUserName) { handleOpenRely(replyId, replyUserId, replyUserName,id, commentIdData) {
this.dataid = id
this.commentIdDatas = commentIdData
this.replyData = { this.replyData = {
commentId: replyId, //回复对话的id commentId: replyId, //回复对话的id
userId: replyUserId, //回复人的id userId: replyUserId, //回复人的id
...@@ -196,7 +202,7 @@ ...@@ -196,7 +202,7 @@
// 表示回复 // 表示回复
params = { params = {
forumId: this.detailData.forumId, forumId: this.detailData.forumId,
parentCommentId: this.replyData.commentId, parentCommentId: this.dataid=='1'?this.replyData.commentId:this.commentIdDatas,
repliedId: this.replyData.commentId, repliedId: this.replyData.commentId,
repliedUserId: this.replyData.userId, repliedUserId: this.replyData.userId,
commentType: this.forumType, commentType: this.forumType,
......
...@@ -92,13 +92,14 @@ ...@@ -92,13 +92,14 @@
<template v-if="forumList.length"> <template v-if="forumList.length">
<view class="distence" v-for="(item,index) in forumList" :key="index" <view class="distence" v-for="(item,index) in forumList" :key="index"
@click="handleDetail(item.forumId)"> @click="handleDetail(item.forumId)">
<dynamicList :itemDetail="item" :isDelete='false' @refersh="handleRefersh"></dynamicList> <dynamicList :itemDetail="item" :isDelete='false' @delete='handledelete' @refersh="handleRefersh"></dynamicList>
</view> </view>
</template> </template>
<u-empty v-else marginTop="20" width="260" height="260" textSize="26" mode="data" <u-empty v-else marginTop="20" width="260" height="260" textSize="26" mode="data"
icon="http://cdn.uviewui.com/uview/empty/data.png"> icon="http://cdn.uviewui.com/uview/empty/data.png">
</u-empty> </u-empty>
</view> </view>
<!-- 评价模块 --> <!-- 评价模块 -->
<view v-else v-if="currentChecked == 2" class="px-one"> <view v-else v-if="currentChecked == 2" class="px-one">
<template v-if="evalList.length"> <template v-if="evalList.length">
...@@ -156,7 +157,8 @@ ...@@ -156,7 +157,8 @@
listForumGET, listForumGET,
collectOrUncollect, collectOrUncollect,
listCommentByDemandId, listCommentByDemandId,
addCommentPOST addCommentPOST,
deleteForumItem
} from '@/api/workbench/index.js'; } from '@/api/workbench/index.js';
import { import {
mapGetters mapGetters
...@@ -231,6 +233,12 @@ ...@@ -231,6 +233,12 @@
async getList() { async getList() {
this.$set(this.queryParams, 'userId', this.businessInfo.userId) this.$set(this.queryParams, 'userId', this.businessInfo.userId)
const res = await listForumGET(this.queryParams) const res = await listForumGET(this.queryParams)
res.rows.forEach((item, index) => {
if(item.imgs){
item.imgs = item.imgs.split(',')
}
})
this.forumList = res.rows this.forumList = res.rows
this.total = res.total this.total = res.total
}, },
...@@ -267,7 +275,9 @@ ...@@ -267,7 +275,9 @@
this.$refs.childPopup.show = true; this.$refs.childPopup.show = true;
}, },
// 回复按钮点击事件 // 回复按钮点击事件
handleOpenRely(replyId, replyUserId, replyUserName) { handleOpenRely(replyId, replyUserId, replyUserName,id, commentIdData) {
this.dataid = id
this.commentIdDatas = commentIdData
this.replyData = { this.replyData = {
commentId: replyId, //回复对话的id commentId: replyId, //回复对话的id
userId: replyUserId, //回复人的id userId: replyUserId, //回复人的id
...@@ -283,7 +293,7 @@ ...@@ -283,7 +293,7 @@
// 表示回复 // 表示回复
params = { params = {
forumId: this.businessInfo.userId, forumId: this.businessInfo.userId,
parentCommentId: this.replyData.commentId, parentCommentId: this.dataid=='1'?this.replyData.commentId:this.commentIdDatas,
repliedId: this.replyData.commentId, repliedId: this.replyData.commentId,
repliedUserId: this.replyData.userId, repliedUserId: this.replyData.userId,
commentType: 'merchant', commentType: 'merchant',
...@@ -331,9 +341,30 @@ ...@@ -331,9 +341,30 @@
// 动态详情 // 动态详情
handleDetail(forumId) { handleDetail(forumId) {
uni.navigateTo({ uni.navigateTo({
url: `./dynamicDetail?forumId=${forumId}&forumType=dynamic` // url: `./dynamicDetail?forumId=${forumId}&forumType=dynamic`
url: `/homePage/merchant/forumDetails?forumId=${forumId}&forumType=dynamic`
})
},
handledelete(id){
uni.showModal({
title: '提示',
content: '您确定要删除动态吗?',
success: async res => {
if (res.confirm) {
const res = await deleteForumItem(id)
console.log(res, '删除')
uni.showToast({
title: '删除成功!',
icon: 'none'
}) })
this.getList()
} else if (res.cancel) {
console.log('取消');
}
}
});
}, },
business(businessId) { business(businessId) {
businessIdGET(businessId).then((res) => { businessIdGET(businessId).then((res) => {
this.businessInfo = res.data this.businessInfo = res.data
......
...@@ -134,11 +134,16 @@ ...@@ -134,11 +134,16 @@
// }) // })
// } // }
if(row.forumType=="comment"){ if(row.forumType=="comment"){
uni.navigateTo({ uni.navigateTo({
url: `/homePage/merchant/index?businessId=${row.forumId}` url: `/homePage/merchant/index?businessId=${row.forumId}`
}) })
}else{ }else if(row.forumType=="demand"){
uni.navigateTo({
url: `/homePage/demand/detail?demandId=${row.forumId}`
})
}else if( row.forumType=="invitation"){
uni.navigateTo({ uni.navigateTo({
url: `/homePage/merchant/forumDetails?forumId=${row.forumId}&forumType=${row.forumType}` url: `/homePage/merchant/forumDetails?forumId=${row.forumId}&forumType=${row.forumType}`
}) })
......
...@@ -33,6 +33,7 @@ ...@@ -33,6 +33,7 @@
pageSize: 10, pageSize: 10,
userId: '', userId: '',
forumTitle: '', forumTitle: '',
userType:"merchant",
forumType: '' forumType: ''
}, },
forumList: [], forumList: [],
...@@ -63,6 +64,11 @@ ...@@ -63,6 +64,11 @@
}, },
async getList() { async getList() {
const res = await listForumGET(this.queryParams) const res = await listForumGET(this.queryParams)
res.rows.forEach((item, index) => {
if(item.imgs){
item.imgs = item.imgs.split(',')
}
})
this.forumList = [...this.forumList,...res.rows] this.forumList = [...this.forumList,...res.rows]
this.total = res.total this.total = res.total
}, },
......
...@@ -7,10 +7,10 @@ ...@@ -7,10 +7,10 @@
</view> </view>
</u-sticky> </u-sticky>
<view class="px-three pb-four"> <view class="px-three pb-four" :class="currentChecked == 0?'active' :''">
<template v-if="currentChecked == 0"> <template v-if="currentChecked == 0">
<template v-if="likedList.length"> <template v-if="likedList.length">
<view class="conntainer" v-for="(item,index) in likedList" :key="item.likeId" <view class="conntainer conntainer1" v-for="(item,index) in likedList" :key="item.likeId"
@click="handleDetail(item)"> @click="handleDetail(item)">
<dynamicList :itemDetail="item" :showAuthor="true" :showState="false"></dynamicList> <dynamicList :itemDetail="item" :showAuthor="true" :showState="false"></dynamicList>
</view> </view>
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
bePraisedListGet bePraisedListGet
} from '@/api/workbench/index.js' } from '@/api/workbench/index.js'
import tabsList from '@/components/custom/tabs.vue' import tabsList from '@/components/custom/tabs.vue'
import dynamicList from '@/components/custom/dynamic.vue' import dynamicList from '@/components/custom/dynamics.vue'
import articleList from './components/articleList.vue' import articleList from './components/articleList.vue'
export default { export default {
components: { components: {
...@@ -92,6 +92,11 @@ ...@@ -92,6 +92,11 @@
methods: { methods: {
async getLikeList() { async getLikeList() {
const res = await listLikedGet(this.queryParams) const res = await listLikedGet(this.queryParams)
res.rows.forEach((item, index) => {
if(item.imgs){
item.imgs = item.imgs.split(',')
}
})
this.likedList =[ ...this.likedList,...res.rows] this.likedList =[ ...this.likedList,...res.rows]
this.total = res.total this.total = res.total
console.log(res, '赞过') console.log(res, '赞过')
...@@ -123,22 +128,38 @@ ...@@ -123,22 +128,38 @@
// 动态详情 // 动态详情
handleDetail(row) { handleDetail(row) {
console.log(row, 'row=========') console.log(row, 'row=========')
if (row.forumType == 'comment') return
if(row.forumType=='dynamic'){
uni.navigateTo({
url: `/homePage/merchant/dynamicDetail?forumId=${row.forumId}&forumType=${row.forumType}`
})
}else if(row.forumType=='invitation'){
uni.navigateTo({ uni.navigateTo({
url: `/homePage/merchant/forumDetails?forumId=${row.forumId}&forumType=${row.forumType}` url: `/homePage/merchant/forumDetails?forumId=${row.forumId}&forumType=${row.forumType}`
}) })
}
// if(row.forumType=='dynamic'){
// uni.navigateTo({
// url: `/homePage/merchant/forumDetails?forumId=${row.forumId}&forumType=${row.forumType}`
// })
// }else if(row.forumType=='invitation'){
// uni.navigateTo({
// url: `/homePage/merchant/forumDetails?forumId=${row.forumId}&forumType=${row.forumType}`
// })
// }
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.active {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.conntainer1 {
width: 48%;
padding: 0;
}
/deep/.u-empty{
width: 100%;
}
}
.conntainer { .conntainer {
background: #fff; background: #fff;
padding: 26rpx 24rpx; padding: 26rpx 24rpx;
......
...@@ -8,8 +8,9 @@ ...@@ -8,8 +8,9 @@
}"> }">
<view class="container"> <view class="container">
<!-- 照片 --> <!-- 照片 -->
<u-form-item label="照片" labelWidth="180" prop="imgs" ref="item1" required="" v-if="type=='invitation'"> <u-form-item label="照片" labelWidth="180" prop="imgs" ref="item1" required="" >
<com-upload ref="upload" imgType="takePictures" @changeList="changeList"></com-upload> <!-- <com-upload ref="upload" imgType="takePictures" @changeList="changeList"></com-upload> -->
<shmily-drag-image v-model="list10" :addImage="addImage" :delImage="delImage"></shmily-drag-image>
</u-form-item> </u-form-item>
<u-form-item label="标题" prop="forumTitle" ref="item1" required="" labelWidth="180"> <u-form-item label="标题" prop="forumTitle" ref="item1" required="" labelWidth="180">
...@@ -19,7 +20,7 @@ ...@@ -19,7 +20,7 @@
padding:'28rpx 30rpx' padding:'28rpx 30rpx'
}"></u--input> }"></u--input>
</u-form-item> </u-form-item>
<u-form-item label="正文" labelWidth="180" ref="item1" required="" prop='content' v-if="type=='invitation'"> <u-form-item label="正文" labelWidth="180" ref="item1" required="" prop='content' >
<u--textarea maxlength='-1' v-model="model.content" height='100px' <u--textarea maxlength='-1' v-model="model.content" height='100px'
class="com-textarea" :focus="focus" placeholder="请输入内容" class="com-textarea" :focus="focus" placeholder="请输入内容"
:customStyle="{ :customStyle="{
...@@ -33,15 +34,15 @@ ...@@ -33,15 +34,15 @@
</u-form-item> </u-form-item>
</view> </view>
<u-form-item prop="content" ref="item1" v-if="type=='dynamic'"> <!-- <u-form-item prop="content" ref="item1" v-if="type=='dynamic'">
<jx-editor ref="editoRef" @input="input" v-model="model.content"></jx-editor> <jx-editor ref="editoRef" @input="input" v-model="model.content"></jx-editor>
</u-form-item> </u-form-item> -->
</u-form> </u-form>
</view> </view>
<view class="placeholder padding-secure"></view> <view class="placeholder padding-secure"></view>
<view class="fixed d-flex a-center padding-secure"> <view class="fixed d-flex a-center padding-secure">
<button class="full-button1" @click="handlePreview" v-if="type=='invitation'">预览</button> <button class="full-button1" @click="handlePreview">预览</button>
<button class="full-button" @click="handleSave"> <button class="full-button" @click="handleSave">
<image src="../../static/images/publish.png" mode="" class="icon"></image> <image src="../../static/images/publish.png" mode="" class="icon"></image>
发布</button> 发布</button>
...@@ -85,7 +86,8 @@ ...@@ -85,7 +86,8 @@
trigger: ['change', 'change'] trigger: ['change', 'change']
}] }]
}, },
type:'' type:'',
list10:[],
} }
}, },
computed: { computed: {
...@@ -99,20 +101,20 @@ ...@@ -99,20 +101,20 @@
}, },
onLoad(option) { onLoad(option) {
console.log(option.forumType, 'option.forumType') console.log(option.forumType, 'option.forumType')
this.type = option.forumType //this.type = option.forumType
this.$set(this.model, 'forumType', option.forumType) this.$set(this.model, 'forumType', option.forumType)
if (option.forumId) { if (option.forumId) {
this.getDetailData(option.forumId) this.getDetailData(option.forumId)
} }
}, },
methods: { methods: {
changeList(v){ // changeList(v){
let imageArr = [] // let imageArr = []
v.map(item=>{ // v.map(item=>{
imageArr.push(item.url||item) // imageArr.push(item.url||item)
}) // })
this.imgs = imageArr.join(',') // this.imgs = imageArr.join(',')
}, // },
async getDetailData(forumId) { async getDetailData(forumId) {
const res = await detailForumItemById(forumId) const res = await detailForumItemById(forumId)
...@@ -121,17 +123,14 @@ ...@@ -121,17 +123,14 @@
this.$set(this.model, 'content', res.data.content) this.$set(this.model, 'content', res.data.content)
this.$set(this.model, 'forumType', res.data.forumType) this.$set(this.model, 'forumType', res.data.forumType)
this.$set(this.model, 'userType', res.data.userType) this.$set(this.model, 'userType', res.data.userType)
this.$refs.editoRef.onEditorReady()
if(res.data.imgs){ if(res.data.imgs){
let uimgs = res.data.imgs.split(',') let uimgs = res.data.imgs.split(',')
let imglist = uimgs.map(item => ({ console.log(uimgs,"tupian1111")
url: item this.list10= uimgs
}));
console.log(imglist,"tupian000")
this.$refs.upload.fileList6 = imglist;
} }
// console.log(this.$refs.editoRef.onEditorReady(),'================') // console.log(this.$refs.editoRef.onEditorReady(),'================')
}, },
input(val) { input(val) {
...@@ -143,8 +142,10 @@ ...@@ -143,8 +142,10 @@
this.$set(this.model, 'content', cleanedHtmlContent) this.$set(this.model, 'content', cleanedHtmlContent)
}, },
handleSave() { handleSave() {
this.imgs = this.list10.join(',')
this.$set(this.model, 'imgs', this.imgs) this.$set(this.model, 'imgs', this.imgs)
console.log(this.model,"============================") console.log(this.model,"============================")
this.$refs.uForm.validate().then(res => { this.$refs.uForm.validate().then(res => {
if (this.model.forumId) { if (this.model.forumId) {
modifyForumItem(this.model).then(response => { modifyForumItem(this.model).then(response => {
...@@ -166,8 +167,8 @@ ...@@ -166,8 +167,8 @@
//预览 //预览
handlePreview(){ handlePreview(){
console.log(this.model,"================") console.log(this.model,"================")
this.imgs = this.list10.join(',')
this.$set(this.model, 'imgs', this.imgs) this.$set(this.model, 'imgs', this.imgs)
if(this.model.forumTitle==''||this.model.forumTitle==undefined ){ if(this.model.forumTitle==''||this.model.forumTitle==undefined ){
uni.$u.toast('请填写标题') uni.$u.toast('请填写标题')
return return
......
...@@ -170,7 +170,7 @@ ...@@ -170,7 +170,7 @@
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
cityId: '上海市' cityId: '青浦区'
}, },
demandList: [], //需求列表 demandList: [], //需求列表
total: 0, total: 0,
......
# 图片拖拽排序插件
<font color='red'>1. H5 和微信小程序已测试通过</font>
<font color='red'>2. App 和其他平台小程序未测试,大概率支持</font>
<font color='red'>3. 非uni_modules版本未更新</font>
## shmily-drag-image
> 点击预览、长按拖拽排序、自定义添加图片、删除确认、支持对象数组
## 预览
您可以通过微信扫码,查看最佳的演示效果。
![wp](https://web.shmily.ren/shmily-drag-image/static/wp.jpg)
## 基本使用:
```
<shmily-drag-image v-model="list"></shmily-drag-image>
export default {
data() {
return {
list: [
'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/1.jpg',
'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/2.jpg',
'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/3.jpg',
]
}
}
}
```
## 自定义添加、删除确认:
```
<shmily-drag-image v-model="list" :addImage="addImage" :delImage="delImage"></shmily-drag-image>
export default {
data() {
return {
list: [
'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/1.jpg',
'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/2.jpg',
'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/3.jpg',
]
}
},
methods:{
addImage() {
// 将图片地址添加到图片数组
this.list.push('http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/4.jpg')
},
delImage(done) {
uni.showModal({
content: '是否删除?',
success: (res) => {
if(res.confirm) {
// 执行 done() 删除
done()
}
}
})
}
}
}
```
## 支持对象数组:
```
<shmily-drag-image v-model="list" keyName="src"></shmily-drag-image>
export default {
data() {
return {
list: [
{
src: 'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/1.jpg',
},
{
src: 'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/2.jpg',
},
{
src: 'http://static-11ea0c21-6b8f-47f7-b77f-cb0c7ea3f355.bspapp.com/shmily-drag-image/static/3.jpg',
}
]
}
}
}
```
---
## 属性说明
属性名 | 类型 | 默认值 | 说明
:-:|:-:|:-:|---
v-model | Array | [ ] | 图片数组,元素为图片地址字符串或对象,默认为`Array<String>`
keyName | String | null | 从图片数组元素对象中读取的键名
number | Number | 6 | 图片数量限制
imageWidth | Number | 0 | 图片父容器宽度(实际显示的图片宽度为 imageWidth / 1.1 ),单位 rpx。imageWidth > 0 则 cols 无效
cols | Number | 3 | 图片列数(cols > 0 则 imageWidth 无效)
borderRadius | Number | 0 | 图片圆角,单位 rpx
padding | Number | 10 | 图片周围空白填充,单位 rpx
scale | Number | 1.1 | 拖动图片时放大倍数 [0, ∞)
opacity | Number | 0.7 | 拖动图片时不透明度
addImage | Function | null | 自定义添加,见上方示例
delImage | Function | null | 删除确认,见上方示例
## 2.0.2(2022-09-17)
- 修复图片删除
## 2.0.1(2022-09-16)
- 修改文档
## 2.0.0(2022-09-16)
- 支持 Vue 3
- 图片数组支持对象元素
- 新增删除确认
- 解决了一些已知问题
- 调整为 uni_modules 目录规范
{
"id": "shmily-drag-image",
"displayName": "图片拖拽排序",
"version": "2.0.2",
"description": "图片排序、图片拖动排序",
"keywords": [
"drag",
"图片",
"排序",
"拖拽",
"拖动"
],
"repository": "https://github.com/shmilyany/shmily-drag-image",
"engines": {
"HBuilderX": "^3.2.8"
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": "617942150"
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "",
"type": "component-vue"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "n",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment