mirror of
https://gitee.com/was666/as-editor.git
synced 2025-04-28 00:00:11 +08:00
refactor: 使用setup重构除src/components/rightslider外的
This commit is contained in:
王奥斯
parent
f2d953dd96
commit
c1b27dca89
160
package-lock.json
generated
160
package-lock.json
generated
@ -1827,63 +1827,6 @@
|
|||||||
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
|
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"ansi-styles": {
|
|
||||||
"version": "4.3.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
|
||||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"color-convert": "^2.0.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"chalk": {
|
|
||||||
"version": "4.1.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
|
||||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"ansi-styles": "^4.1.0",
|
|
||||||
"supports-color": "^7.1.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"color-convert": {
|
|
||||||
"version": "2.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
|
||||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"color-name": "~1.1.4"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"color-name": {
|
|
||||||
"version": "1.1.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
|
||||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"has-flag": {
|
|
||||||
"version": "4.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
|
||||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true
|
|
||||||
},
|
|
||||||
"loader-utils": {
|
|
||||||
"version": "2.0.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
|
|
||||||
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"big.js": "^5.2.2",
|
|
||||||
"emojis-list": "^3.0.0",
|
|
||||||
"json5": "^2.1.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"ssri": {
|
"ssri": {
|
||||||
"version": "8.0.1",
|
"version": "8.0.1",
|
||||||
"resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364668574&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
|
"resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364668574&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
|
||||||
@ -1892,28 +1835,6 @@
|
|||||||
"requires": {
|
"requires": {
|
||||||
"minipass": "^3.1.1"
|
"minipass": "^3.1.1"
|
||||||
}
|
}
|
||||||
},
|
|
||||||
"supports-color": {
|
|
||||||
"version": "7.2.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
|
||||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"has-flag": "^4.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"vue-loader-v16": {
|
|
||||||
"version": "npm:vue-loader@16.8.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
|
|
||||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
|
||||||
"dev": true,
|
|
||||||
"optional": true,
|
|
||||||
"requires": {
|
|
||||||
"chalk": "^4.1.0",
|
|
||||||
"hash-sum": "^2.0.0",
|
|
||||||
"loader-utils": "^2.0.0"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -12323,6 +12244,87 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"vue-loader-v16": {
|
||||||
|
"version": "npm:vue-loader@16.8.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
|
||||||
|
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"chalk": "^4.1.0",
|
||||||
|
"hash-sum": "^2.0.0",
|
||||||
|
"loader-utils": "^2.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"ansi-styles": {
|
||||||
|
"version": "4.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||||
|
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"color-convert": "^2.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"chalk": {
|
||||||
|
"version": "4.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||||
|
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"ansi-styles": "^4.1.0",
|
||||||
|
"supports-color": "^7.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color-convert": {
|
||||||
|
"version": "2.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||||
|
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"color-name": "~1.1.4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color-name": {
|
||||||
|
"version": "1.1.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||||
|
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"has-flag": {
|
||||||
|
"version": "4.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||||
|
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"loader-utils": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"big.js": "^5.2.2",
|
||||||
|
"emojis-list": "^3.0.0",
|
||||||
|
"json5": "^2.1.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"supports-color": {
|
||||||
|
"version": "7.2.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||||
|
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||||
|
"dev": true,
|
||||||
|
"optional": true,
|
||||||
|
"requires": {
|
||||||
|
"has-flag": "^4.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"vue-router": {
|
"vue-router": {
|
||||||
"version": "4.0.12",
|
"version": "4.0.12",
|
||||||
"resolved": "https://registry.npmmirror.com/vue-router/download/vue-router-4.0.12.tgz",
|
"resolved": "https://registry.npmmirror.com/vue-router/download/vue-router-4.0.12.tgz",
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
v-for="(item, ind) in items.comList"
|
v-for="(item, ind) in items.comList"
|
||||||
:key="ind"
|
:key="ind"
|
||||||
>
|
>
|
||||||
<i class="iconfont" :class="item.icon" v-if="item.icon" />
|
<i class="iconfont" :class="item.icon" v-if="item.icon" />
|
||||||
<van-icon :name="item.vanIcon" v-else />
|
<van-icon :name="item.vanIcon" v-else />
|
||||||
<p>{{ item.text }}</p>
|
<p>{{ item.text }}</p>
|
||||||
</div>
|
</div>
|
||||||
@ -26,186 +26,175 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { reactive } from 'vue'
|
||||||
export default {
|
export default {
|
||||||
name: 'sliderassembly',
|
name: 'sliderassembly',
|
||||||
props: {
|
props: {
|
||||||
pointer: Object,
|
pointer: Object,
|
||||||
},
|
},
|
||||||
data() {
|
setup(props) {
|
||||||
return {
|
// 侧边栏组件显示
|
||||||
activeNames: [1, 2, 3] /* 侧边栏组件显示 */,
|
const activeNames = reactive([1, 2, 3])
|
||||||
datas: [
|
|
||||||
{
|
|
||||||
title: '基础组件',
|
|
||||||
comList: [
|
|
||||||
{
|
|
||||||
text: '商品搜索',
|
|
||||||
type: '1-1',
|
|
||||||
icon: 'icon-shangpinsousuo',
|
|
||||||
name: 'commoditysearch',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '标题文本',
|
|
||||||
type: '1-3',
|
|
||||||
icon: 'icon-Component-biaotiwenzi',
|
|
||||||
name: 'captiontext',
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
// 组件信息配置
|
||||||
text: '图片广告',
|
const datas = reactive([
|
||||||
type: '1-3',
|
{
|
||||||
icon: 'icon-tupianguanggao',
|
title: '基础组件',
|
||||||
name: 'pictureads',
|
comList: [
|
||||||
},
|
{
|
||||||
{
|
text: '商品搜索',
|
||||||
text: '图文导航',
|
type: '1-1',
|
||||||
type: '1-4',
|
icon: 'icon-shangpinsousuo',
|
||||||
icon: 'icon-icon_tupiandaohang',
|
name: 'commoditysearch',
|
||||||
name: 'graphicnavigation',
|
},
|
||||||
},
|
{
|
||||||
{
|
text: '标题文本',
|
||||||
text: '底部导航',
|
type: '1-3',
|
||||||
type: '1-5',
|
icon: 'icon-Component-biaotiwenzi',
|
||||||
icon: 'icon-daohang',
|
name: 'captiontext',
|
||||||
name: 'tabBar',
|
},
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '魔方',
|
|
||||||
type: '1-6',
|
|
||||||
icon: 'icon-mofang',
|
|
||||||
name: 'magiccube',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '公告',
|
|
||||||
type: '1-7',
|
|
||||||
icon: 'icon-gonggao',
|
|
||||||
name: 'notice',
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
text: '视频',
|
|
||||||
type: '1-8',
|
|
||||||
icon: 'icon-shipin',
|
|
||||||
name: 'videoss',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '富文本',
|
|
||||||
type: '1-10',
|
|
||||||
icon: 'icon-fuwenben',
|
|
||||||
name: 'richtext',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '辅助分割',
|
|
||||||
type: '1-11',
|
|
||||||
icon: 'icon-Component-fuzhufenge',
|
|
||||||
name: 'auxiliarysegmentation',
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
{
|
||||||
text: '店铺信息',
|
text: '图片广告',
|
||||||
type: '1-12',
|
type: '1-3',
|
||||||
icon: 'icon-dianpuxinxi',
|
icon: 'icon-tupianguanggao',
|
||||||
name: 'storeinformation',
|
name: 'pictureads',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '单元格',
|
text: '图文导航',
|
||||||
type: '1-13',
|
type: '1-4',
|
||||||
icon: 'icon-jinrudianpu',
|
icon: 'icon-icon_tupiandaohang',
|
||||||
name: 'entertheshop',
|
name: 'graphicnavigation',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '社群涨粉',
|
text: '底部导航',
|
||||||
type: '1-14',
|
type: '1-5',
|
||||||
icon: 'icon-kuaisuzhangfen',
|
icon: 'icon-daohang',
|
||||||
name: 'communitypowder',
|
name: 'tabBar',
|
||||||
},
|
},
|
||||||
/* {
|
{
|
||||||
text: 'xxx',
|
text: '魔方',
|
||||||
type: '1-17',
|
type: '1-6',
|
||||||
icon: 'icon-yunying',
|
icon: 'icon-mofang',
|
||||||
name: ''
|
name: 'magiccube',
|
||||||
}, */
|
},
|
||||||
/* {
|
{
|
||||||
text: 'xxx',
|
text: '公告',
|
||||||
type: '1-19',
|
type: '1-7',
|
||||||
icon: 'icon-weibiaoti-_huaban',
|
icon: 'icon-gonggao',
|
||||||
name: ''
|
name: 'notice',
|
||||||
}, */
|
},
|
||||||
/* {
|
|
||||||
text: 'xxxx',
|
{
|
||||||
type: '1-18',
|
text: '视频',
|
||||||
icon: 'icon-gexinghuatuijian',
|
type: '1-8',
|
||||||
name: ''
|
icon: 'icon-shipin',
|
||||||
}, */
|
name: 'videoss',
|
||||||
{
|
},
|
||||||
text: '关注公众号',
|
{
|
||||||
type: '1-15',
|
text: '富文本',
|
||||||
icon: 'icon-gongzhonghao',
|
type: '1-10',
|
||||||
name: 'follow',
|
icon: 'icon-fuwenben',
|
||||||
},
|
name: 'richtext',
|
||||||
{
|
},
|
||||||
text: '悬浮',
|
{
|
||||||
type: '1-16',
|
text: '辅助分割',
|
||||||
icon: 'icon-wangye',
|
type: '1-11',
|
||||||
name: 'suspension',
|
icon: 'icon-Component-fuzhufenge',
|
||||||
},
|
name: 'auxiliarysegmentation',
|
||||||
{
|
},
|
||||||
text: '自定义模块',
|
|
||||||
type: 'demo',
|
{
|
||||||
icon: 'icon-zidingyimokuai',
|
text: '店铺信息',
|
||||||
name: 'custommodule'
|
type: '1-12',
|
||||||
},
|
icon: 'icon-dianpuxinxi',
|
||||||
],
|
name: 'storeinformation',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '业务组件',
|
text: '单元格',
|
||||||
comList: [
|
type: '1-13',
|
||||||
{
|
icon: 'icon-jinrudianpu',
|
||||||
text: '商品',
|
name: 'entertheshop',
|
||||||
type: '2-1',
|
},
|
||||||
icon: 'icon-goods',
|
{
|
||||||
name: 'listswitching',
|
text: '社群涨粉',
|
||||||
},
|
type: '1-14',
|
||||||
{
|
icon: 'icon-kuaisuzhangfen',
|
||||||
text: '文章模块',
|
name: 'communitypowder',
|
||||||
type: '2-2',
|
},
|
||||||
icon: 'icon-dianpubijikapian',
|
{
|
||||||
name: 'storenotecard',
|
text: '关注公众号',
|
||||||
},
|
type: '1-15',
|
||||||
{
|
icon: 'icon-gongzhonghao',
|
||||||
text: '表单模块',
|
name: 'follow',
|
||||||
type: '2-3',
|
},
|
||||||
vanIcon: 'orders-o',
|
{
|
||||||
name: 'investigate',
|
text: '悬浮',
|
||||||
}
|
type: '1-16',
|
||||||
]
|
icon: 'icon-wangye',
|
||||||
},
|
name: 'suspension',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '自定义模块',
|
||||||
|
type: 'demo',
|
||||||
|
icon: 'icon-zidingyimokuai',
|
||||||
|
name: 'custommodule',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '业务组件',
|
||||||
|
comList: [
|
||||||
|
{
|
||||||
|
text: '商品',
|
||||||
|
type: '2-1',
|
||||||
|
icon: 'icon-goods',
|
||||||
|
name: 'listswitching',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '文章模块',
|
||||||
|
type: '2-2',
|
||||||
|
icon: 'icon-dianpubijikapian',
|
||||||
|
name: 'storenotecard',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '表单模块',
|
||||||
|
type: '2-3',
|
||||||
|
vanIcon: 'orders-o',
|
||||||
|
name: 'investigate',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
],
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
/**
|
/**
|
||||||
* 当用户开始拖动元素或选择文本时触发此事件
|
* 当用户开始拖动元素或选择文本时触发此事件
|
||||||
*
|
*
|
||||||
* @param {Object} event event对象
|
* @param {Object} event event对象
|
||||||
*/
|
*/
|
||||||
drag(event) {
|
const drag = (event) => {
|
||||||
/* 开启穿透 */
|
/* 开启穿透 */
|
||||||
this.pointer.show = true
|
props.pointer.show = true
|
||||||
/* 传递参数 */
|
/* 传递参数 */
|
||||||
event.dataTransfer.setData('componentName', event.target.dataset.name)
|
event.dataTransfer.setData('componentName', event.target.dataset.name)
|
||||||
},
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件
|
* 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件
|
||||||
*
|
*
|
||||||
* @param {Object} event event对象
|
* @param {Object} event event对象
|
||||||
*/
|
*/
|
||||||
dragends() {
|
const dragends = () => {
|
||||||
/* 关闭穿透 */
|
/* 关闭穿透 */
|
||||||
this.pointer.show = false
|
props.pointer.show = false
|
||||||
},
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
activeNames,
|
||||||
|
datas,
|
||||||
|
drag,
|
||||||
|
dragends,
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -77,10 +77,15 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { reactive, toRefs, computed } from 'vue'
|
||||||
|
import { ElMessageBox } from 'element-plus'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'uploadCommodity',
|
name: 'uploadCommodity',
|
||||||
data() {
|
emits: ['uploadListInformation'],
|
||||||
return {
|
setup(props, ctx) {
|
||||||
|
// 数据集合
|
||||||
|
const datas = reactive({
|
||||||
dialogVisible: false, //弹框默认隐藏
|
dialogVisible: false, //弹框默认隐藏
|
||||||
dialogImageUrl: {}, // 选择的数据
|
dialogImageUrl: {}, // 选择的数据
|
||||||
type: '2',
|
type: '2',
|
||||||
@ -98,90 +103,94 @@ export default {
|
|||||||
options: [], //后端返回的列表提供下拉选择
|
options: [], //后端返回的列表提供下拉选择
|
||||||
externalLink: null,
|
externalLink: null,
|
||||||
emptyText: '',
|
emptyText: '',
|
||||||
}
|
})
|
||||||
},
|
|
||||||
created() {},
|
|
||||||
methods: {
|
|
||||||
selectType() {
|
|
||||||
// 清空 options
|
|
||||||
this.options = []
|
|
||||||
},
|
|
||||||
|
|
||||||
// 选择类型
|
// 事件集合
|
||||||
changeType(isVisible, linkType) {
|
const methods = {
|
||||||
if (isVisible && linkType) {
|
selectType() {
|
||||||
this.emptyText = '正在搜索中'
|
// 清空 options
|
||||||
/* 获取信息 */
|
datas.options = []
|
||||||
let res = {
|
},
|
||||||
code: 0,
|
// 选择类型
|
||||||
success: true,
|
changeType(isVisible, linkType) {
|
||||||
error: false,
|
if (isVisible && linkType) {
|
||||||
data: [
|
datas.emptyText = '正在搜索中'
|
||||||
{
|
/* 获取信息 */
|
||||||
coverUrl:
|
let res = {
|
||||||
'https://imgs.starfirelink.com/minicourse/非遗传承人@2x_1621504834414.png',
|
code: 0,
|
||||||
introduce: '',
|
success: true,
|
||||||
price: 0,
|
error: false,
|
||||||
name: '测试1',
|
data: [
|
||||||
videoId: '5285890818212341060',
|
{
|
||||||
id: 403,
|
coverUrl:
|
||||||
type: 2,
|
'https://imgs.starfirelink.com/minicourse/非遗传承人@2x_1621504834414.png',
|
||||||
seriesId: '0',
|
introduce: '',
|
||||||
},
|
price: 0,
|
||||||
{
|
name: '测试1',
|
||||||
coverUrl:
|
videoId: '5285890818212341060',
|
||||||
'https://imgs.starfirelink.com/minicourse/QQ截图20210409170420_1621416051505.png',
|
id: 403,
|
||||||
introduce: '1',
|
type: 2,
|
||||||
price: 1,
|
seriesId: '0',
|
||||||
name: '测试2',
|
},
|
||||||
videoId: '',
|
{
|
||||||
id: 396,
|
coverUrl:
|
||||||
type: 2,
|
'https://imgs.starfirelink.com/minicourse/QQ截图20210409170420_1621416051505.png',
|
||||||
seriesId: '85',
|
introduce: '1',
|
||||||
},
|
price: 1,
|
||||||
],
|
name: '测试2',
|
||||||
|
videoId: '',
|
||||||
|
id: 396,
|
||||||
|
type: 2,
|
||||||
|
seriesId: '85',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
res.data.length === 0 ? (datas.emptyText = '暂无数据') : null
|
||||||
|
datas.options = res.data
|
||||||
}
|
}
|
||||||
this.activ = 0
|
},
|
||||||
res.data.length === 0 ? (this.emptyText = '暂无数据') : null
|
// 保存跳转的地方
|
||||||
this.options = res.data
|
changeId(res) {
|
||||||
}
|
datas.dialogImageUrl = res
|
||||||
},
|
console.log(datas.dialogImageUrl, '----------------changeId')
|
||||||
// 保存跳转的地方
|
},
|
||||||
changeId(res) {
|
/* 显示上传文件组件 */
|
||||||
this.dialogImageUrl = res
|
showUpload() {
|
||||||
console.log(this.dialogImageUrl, '----------------changeId')
|
datas.dialogVisible = true
|
||||||
},
|
},
|
||||||
/* 显示上传文件组件 */
|
/* 传递图片地址 */
|
||||||
showUpload() {
|
uploadInformation() {
|
||||||
this.dialogVisible = true
|
datas.dialogImageUrl.httpType = datas.type
|
||||||
},
|
ctx.emit('uploadListInformation', datas.dialogImageUrl)
|
||||||
/* 传递图片地址 */
|
|
||||||
uploadInformation() {
|
|
||||||
this.dialogImageUrl.httpType = this.type
|
|
||||||
this.$emit('uploadListInformation', this.dialogImageUrl)
|
|
||||||
|
|
||||||
// 隐藏上传弹框
|
// 隐藏上传弹框
|
||||||
this.dialogVisible = false
|
datas.dialogVisible = false
|
||||||
this.uploadShow = false
|
datas.uploadShow = false
|
||||||
this.dialogImageUrl = {}
|
datas.dialogImageUrl = {}
|
||||||
},
|
},
|
||||||
// 关闭弹框
|
// 关闭弹框
|
||||||
handleClose() {
|
handleClose() {
|
||||||
this.$confirm('点击取消后您填写的信息将丢失，您确定取消？')
|
ElMessageBox.confirm('点击取消后您填写的信息将丢失，您确定取消？')
|
||||||
.then(() => {
|
.then(() => {
|
||||||
// 隐藏上传文件
|
// 隐藏上传文件
|
||||||
this.dialogVisible = false
|
datas.dialogVisible = false
|
||||||
this.dialogImageUrl = {}
|
datas.dialogImageUrl = {}
|
||||||
})
|
})
|
||||||
.catch(() => {})
|
.catch(() => {})
|
||||||
},
|
},
|
||||||
},
|
}
|
||||||
computed: {
|
|
||||||
// 提交按钮是否可以点击
|
// 通过computed获得disabl
|
||||||
disabl() {
|
const disabl = computed(() => {
|
||||||
if (!this.dialogImageUrl) return true
|
if (!datas.dialogImageUrl) return true
|
||||||
return false
|
return false
|
||||||
},
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(datas),
|
||||||
|
...methods,
|
||||||
|
disabl,
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -30,13 +30,16 @@
|
|||||||
</el-upload>
|
</el-upload>
|
||||||
|
|
||||||
<!-- 按钮 -->
|
<!-- 按钮 -->
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
<el-button @click="handleClose">取 消 上 传</el-button>
|
<el-button @click="handleClose">取 消 上 传</el-button>
|
||||||
<el-button type="primary" @click="uploadInformation" :disabled="disabl"
|
<el-button
|
||||||
>点 击 上 传</el-button
|
type="primary"
|
||||||
>
|
@click="uploadInformation"
|
||||||
</span>
|
:disabled="disabl"
|
||||||
|
>点 击 上 传</el-button
|
||||||
|
>
|
||||||
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
@ -53,89 +56,101 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { reactive, toRefs, computed } from 'vue'
|
||||||
|
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'uploadImg',
|
name: 'uploadImg',
|
||||||
data() {
|
emits: ['uploadInformation', 'handleClose'],
|
||||||
return {
|
setup(props, ctx) {
|
||||||
|
// 数据集合
|
||||||
|
const datas = reactive({
|
||||||
dialogVisible: false, //弹框默认隐藏
|
dialogVisible: false, //弹框默认隐藏
|
||||||
dialogVisibles: false, // 放大的图片
|
dialogVisibles: false, // 放大的图片
|
||||||
dialogImageUrl: '', // 上传的图片
|
dialogImageUrl: '', // 上传的图片
|
||||||
uploadShow: false, //是否显示上传图片
|
uploadShow: false, //是否显示上传图片
|
||||||
|
})
|
||||||
|
|
||||||
|
// 事件集合
|
||||||
|
const methods = {
|
||||||
|
/* 显示上传文件组件 */
|
||||||
|
showUpload() {
|
||||||
|
datas.dialogVisible = true
|
||||||
|
},
|
||||||
|
/* 传递图片地址 */
|
||||||
|
uploadInformation() {
|
||||||
|
ctx.emit('uploadInformation', datas.dialogImageUrl)
|
||||||
|
// 隐藏上传弹框
|
||||||
|
datas.dialogVisible = false
|
||||||
|
datas.uploadShow = false
|
||||||
|
datas.dialogImageUrl = ''
|
||||||
|
},
|
||||||
|
// 关闭弹框
|
||||||
|
handleClose() {
|
||||||
|
ElMessageBox.confirm('点击取消后您填写的信息将丢失，您确定取消？')
|
||||||
|
.then(() => {
|
||||||
|
methods.handleRemove()
|
||||||
|
ctx.emit('handleClose')
|
||||||
|
// 隐藏上传文件
|
||||||
|
datas.dialogVisible = false
|
||||||
|
datas.dialogImageUrl = ''
|
||||||
|
})
|
||||||
|
.catch(() => {})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除图片
|
||||||
|
handleRemove() {
|
||||||
|
datas.uploadShow = false
|
||||||
|
datas.dialogImageUrl = ''
|
||||||
|
return true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 预览
|
||||||
|
preview() {
|
||||||
|
datas.dialogVisibles = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传成功
|
||||||
|
onSuccess(response) {
|
||||||
|
// 返回错误
|
||||||
|
if (response.success != true)
|
||||||
|
return ElMessage.error('上传图片失败，请删除后重新上传')
|
||||||
|
|
||||||
|
datas.dialogImageUrl = response.data.src
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传前
|
||||||
|
uploads(file) {
|
||||||
|
if (!file.type.includes('image')) {
|
||||||
|
ElMessage.error('请上传图片！')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
datas.uploadShow = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传失败
|
||||||
|
uploadError() {
|
||||||
|
ElMessage.error('请重新上传')
|
||||||
|
datas.uploadShow = false
|
||||||
|
},
|
||||||
}
|
}
|
||||||
},
|
// 通过computed获得baseupload
|
||||||
methods: {
|
const baseupload = computed(() => {
|
||||||
/* 显示上传文件组件 */
|
|
||||||
showUpload() {
|
|
||||||
this.dialogVisible = true
|
|
||||||
},
|
|
||||||
/* 传递图片地址 */
|
|
||||||
uploadInformation() {
|
|
||||||
this.$emit('uploadInformation', this.dialogImageUrl)
|
|
||||||
// 隐藏上传弹框
|
|
||||||
this.dialogVisible = false
|
|
||||||
this.uploadShow = false
|
|
||||||
this.dialogImageUrl = ''
|
|
||||||
},
|
|
||||||
// 关闭弹框
|
|
||||||
handleClose() {
|
|
||||||
this.$confirm('点击取消后您填写的信息将丢失，您确定取消？')
|
|
||||||
.then(() => {
|
|
||||||
this.handleRemove()
|
|
||||||
this.$emit('handleClose')
|
|
||||||
// 隐藏上传文件
|
|
||||||
this.dialogVisible = false
|
|
||||||
this.dialogImageUrl = ''
|
|
||||||
})
|
|
||||||
.catch(() => {})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 删除图片
|
|
||||||
handleRemove() {
|
|
||||||
this.uploadShow = false
|
|
||||||
this.dialogImageUrl = ''
|
|
||||||
return true
|
|
||||||
},
|
|
||||||
|
|
||||||
// 预览
|
|
||||||
preview() {
|
|
||||||
this.dialogVisibles = true
|
|
||||||
},
|
|
||||||
|
|
||||||
// 上传成功
|
|
||||||
onSuccess(response) {
|
|
||||||
// 返回错误
|
|
||||||
if (response.success != true)
|
|
||||||
return this.$message.error('上传图片失败，请删除后重新上传')
|
|
||||||
|
|
||||||
this.dialogImageUrl = response.data.src
|
|
||||||
},
|
|
||||||
|
|
||||||
// 上传前
|
|
||||||
uploads(file) {
|
|
||||||
if (!file.type.includes('image')) {
|
|
||||||
this.$message.error('请上传图片！')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
this.uploadShow = true
|
|
||||||
},
|
|
||||||
|
|
||||||
// 上传失败
|
|
||||||
uploadError() {
|
|
||||||
this.$message.error('请重新上传')
|
|
||||||
this.uploadShow = false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
// baseurl
|
|
||||||
baseupload() {
|
|
||||||
return `${window.global_config.BASE_URL}upload/miniShop`
|
return `${window.global_config.BASE_URL}upload/miniShop`
|
||||||
},
|
})
|
||||||
|
|
||||||
// 提交按钮是否可以点击
|
// 通过computed获得disabl
|
||||||
disabl() {
|
const disabl = computed(() => {
|
||||||
if (!this.dialogImageUrl) return true
|
if (!datas.dialogImageUrl) return true
|
||||||
return false
|
return false
|
||||||
},
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(datas),
|
||||||
|
...methods,
|
||||||
|
baseupload,
|
||||||
|
disabl,
|
||||||
|
}
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -158,7 +173,7 @@ export default {
|
|||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-icon-plus{
|
.el-icon-plus {
|
||||||
display: block;
|
display: block;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user