mirror of
https://gitee.com/was666/as-editor.git
synced 2025-04-27 15:50: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==",
|
||||
"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": {
|
||||
"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",
|
||||
@ -1892,28 +1835,6 @@
|
||||
"requires": {
|
||||
"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": {
|
||||
"version": "4.0.12",
|
||||
"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"
|
||||
: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 />
|
||||
<p>{{ item.text }}</p>
|
||||
</div>
|
||||
@ -26,186 +26,175 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive } from 'vue'
|
||||
export default {
|
||||
name: 'sliderassembly',
|
||||
props: {
|
||||
pointer: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeNames: [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',
|
||||
},
|
||||
setup(props) {
|
||||
// 侧边栏组件显示
|
||||
const activeNames = reactive([1, 2, 3])
|
||||
|
||||
{
|
||||
text: '图片广告',
|
||||
type: '1-3',
|
||||
icon: 'icon-tupianguanggao',
|
||||
name: 'pictureads',
|
||||
},
|
||||
{
|
||||
text: '图文导航',
|
||||
type: '1-4',
|
||||
icon: 'icon-icon_tupiandaohang',
|
||||
name: 'graphicnavigation',
|
||||
},
|
||||
{
|
||||
text: '底部导航',
|
||||
type: '1-5',
|
||||
icon: 'icon-daohang',
|
||||
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',
|
||||
},
|
||||
// 组件信息配置
|
||||
const datas = reactive([
|
||||
{
|
||||
title: '基础组件',
|
||||
comList: [
|
||||
{
|
||||
text: '商品搜索',
|
||||
type: '1-1',
|
||||
icon: 'icon-shangpinsousuo',
|
||||
name: 'commoditysearch',
|
||||
},
|
||||
{
|
||||
text: '标题文本',
|
||||
type: '1-3',
|
||||
icon: 'icon-Component-biaotiwenzi',
|
||||
name: 'captiontext',
|
||||
},
|
||||
|
||||
{
|
||||
text: '店铺信息',
|
||||
type: '1-12',
|
||||
icon: 'icon-dianpuxinxi',
|
||||
name: 'storeinformation',
|
||||
},
|
||||
{
|
||||
text: '单元格',
|
||||
type: '1-13',
|
||||
icon: 'icon-jinrudianpu',
|
||||
name: 'entertheshop',
|
||||
},
|
||||
{
|
||||
text: '社群涨粉',
|
||||
type: '1-14',
|
||||
icon: 'icon-kuaisuzhangfen',
|
||||
name: 'communitypowder',
|
||||
},
|
||||
/* {
|
||||
text: 'xxx',
|
||||
type: '1-17',
|
||||
icon: 'icon-yunying',
|
||||
name: ''
|
||||
}, */
|
||||
/* {
|
||||
text: 'xxx',
|
||||
type: '1-19',
|
||||
icon: 'icon-weibiaoti-_huaban',
|
||||
name: ''
|
||||
}, */
|
||||
/* {
|
||||
text: 'xxxx',
|
||||
type: '1-18',
|
||||
icon: 'icon-gexinghuatuijian',
|
||||
name: ''
|
||||
}, */
|
||||
{
|
||||
text: '关注公众号',
|
||||
type: '1-15',
|
||||
icon: 'icon-gongzhonghao',
|
||||
name: 'follow',
|
||||
},
|
||||
{
|
||||
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',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '图片广告',
|
||||
type: '1-3',
|
||||
icon: 'icon-tupianguanggao',
|
||||
name: 'pictureads',
|
||||
},
|
||||
{
|
||||
text: '图文导航',
|
||||
type: '1-4',
|
||||
icon: 'icon-icon_tupiandaohang',
|
||||
name: 'graphicnavigation',
|
||||
},
|
||||
{
|
||||
text: '底部导航',
|
||||
type: '1-5',
|
||||
icon: 'icon-daohang',
|
||||
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: '店铺信息',
|
||||
type: '1-12',
|
||||
icon: 'icon-dianpuxinxi',
|
||||
name: 'storeinformation',
|
||||
},
|
||||
{
|
||||
text: '单元格',
|
||||
type: '1-13',
|
||||
icon: 'icon-jinrudianpu',
|
||||
name: 'entertheshop',
|
||||
},
|
||||
{
|
||||
text: '社群涨粉',
|
||||
type: '1-14',
|
||||
icon: 'icon-kuaisuzhangfen',
|
||||
name: 'communitypowder',
|
||||
},
|
||||
{
|
||||
text: '关注公众号',
|
||||
type: '1-15',
|
||||
icon: 'icon-gongzhonghao',
|
||||
name: 'follow',
|
||||
},
|
||||
{
|
||||
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对象
|
||||
*/
|
||||
drag(event) {
|
||||
const drag = (event) => {
|
||||
/* 开启穿透 */
|
||||
this.pointer.show = true
|
||||
props.pointer.show = true
|
||||
/* 传递参数 */
|
||||
event.dataTransfer.setData('componentName', event.target.dataset.name)
|
||||
},
|
||||
}
|
||||
|
||||
/**
|
||||
* 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件
|
||||
*
|
||||
* @param {Object} event event对象
|
||||
*/
|
||||
dragends() {
|
||||
const dragends = () => {
|
||||
/* 关闭穿透 */
|
||||
this.pointer.show = false
|
||||
},
|
||||
props.pointer.show = false
|
||||
}
|
||||
|
||||
return {
|
||||
activeNames,
|
||||
datas,
|
||||
drag,
|
||||
dragends,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -77,10 +77,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs, computed } from 'vue'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
|
||||
export default {
|
||||
name: 'uploadCommodity',
|
||||
data() {
|
||||
return {
|
||||
emits: ['uploadListInformation'],
|
||||
setup(props, ctx) {
|
||||
// 数据集合
|
||||
const datas = reactive({
|
||||
dialogVisible: false, //弹框默认隐藏
|
||||
dialogImageUrl: {}, // 选择的数据
|
||||
type: '2',
|
||||
@ -98,90 +103,94 @@ export default {
|
||||
options: [], //后端返回的列表提供下拉选择
|
||||
externalLink: null,
|
||||
emptyText: '',
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
selectType() {
|
||||
// 清空 options
|
||||
this.options = []
|
||||
},
|
||||
})
|
||||
|
||||
// 选择类型
|
||||
changeType(isVisible, linkType) {
|
||||
if (isVisible && linkType) {
|
||||
this.emptyText = '正在搜索中'
|
||||
/* 获取信息 */
|
||||
let res = {
|
||||
code: 0,
|
||||
success: true,
|
||||
error: false,
|
||||
data: [
|
||||
{
|
||||
coverUrl:
|
||||
'https://imgs.starfirelink.com/minicourse/非遗传承人@2x_1621504834414.png',
|
||||
introduce: '',
|
||||
price: 0,
|
||||
name: '测试1',
|
||||
videoId: '5285890818212341060',
|
||||
id: 403,
|
||||
type: 2,
|
||||
seriesId: '0',
|
||||
},
|
||||
{
|
||||
coverUrl:
|
||||
'https://imgs.starfirelink.com/minicourse/QQ截图20210409170420_1621416051505.png',
|
||||
introduce: '1',
|
||||
price: 1,
|
||||
name: '测试2',
|
||||
videoId: '',
|
||||
id: 396,
|
||||
type: 2,
|
||||
seriesId: '85',
|
||||
},
|
||||
],
|
||||
// 事件集合
|
||||
const methods = {
|
||||
selectType() {
|
||||
// 清空 options
|
||||
datas.options = []
|
||||
},
|
||||
// 选择类型
|
||||
changeType(isVisible, linkType) {
|
||||
if (isVisible && linkType) {
|
||||
datas.emptyText = '正在搜索中'
|
||||
/* 获取信息 */
|
||||
let res = {
|
||||
code: 0,
|
||||
success: true,
|
||||
error: false,
|
||||
data: [
|
||||
{
|
||||
coverUrl:
|
||||
'https://imgs.starfirelink.com/minicourse/非遗传承人@2x_1621504834414.png',
|
||||
introduce: '',
|
||||
price: 0,
|
||||
name: '测试1',
|
||||
videoId: '5285890818212341060',
|
||||
id: 403,
|
||||
type: 2,
|
||||
seriesId: '0',
|
||||
},
|
||||
{
|
||||
coverUrl:
|
||||
'https://imgs.starfirelink.com/minicourse/QQ截图20210409170420_1621416051505.png',
|
||||
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) {
|
||||
this.dialogImageUrl = res
|
||||
console.log(this.dialogImageUrl, '----------------changeId')
|
||||
},
|
||||
/* 显示上传文件组件 */
|
||||
showUpload() {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
/* 传递图片地址 */
|
||||
uploadInformation() {
|
||||
this.dialogImageUrl.httpType = this.type
|
||||
this.$emit('uploadListInformation', this.dialogImageUrl)
|
||||
},
|
||||
// 保存跳转的地方
|
||||
changeId(res) {
|
||||
datas.dialogImageUrl = res
|
||||
console.log(datas.dialogImageUrl, '----------------changeId')
|
||||
},
|
||||
/* 显示上传文件组件 */
|
||||
showUpload() {
|
||||
datas.dialogVisible = true
|
||||
},
|
||||
/* 传递图片地址 */
|
||||
uploadInformation() {
|
||||
datas.dialogImageUrl.httpType = datas.type
|
||||
ctx.emit('uploadListInformation', datas.dialogImageUrl)
|
||||
|
||||
// 隐藏上传弹框
|
||||
this.dialogVisible = false
|
||||
this.uploadShow = false
|
||||
this.dialogImageUrl = {}
|
||||
},
|
||||
// 关闭弹框
|
||||
handleClose() {
|
||||
this.$confirm('点击取消后您填写的信息将丢失，您确定取消？')
|
||||
.then(() => {
|
||||
// 隐藏上传文件
|
||||
this.dialogVisible = false
|
||||
this.dialogImageUrl = {}
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
// 提交按钮是否可以点击
|
||||
disabl() {
|
||||
if (!this.dialogImageUrl) return true
|
||||
// 隐藏上传弹框
|
||||
datas.dialogVisible = false
|
||||
datas.uploadShow = false
|
||||
datas.dialogImageUrl = {}
|
||||
},
|
||||
// 关闭弹框
|
||||
handleClose() {
|
||||
ElMessageBox.confirm('点击取消后您填写的信息将丢失，您确定取消？')
|
||||
.then(() => {
|
||||
// 隐藏上传文件
|
||||
datas.dialogVisible = false
|
||||
datas.dialogImageUrl = {}
|
||||
})
|
||||
.catch(() => {})
|
||||
},
|
||||
}
|
||||
|
||||
// 通过computed获得disabl
|
||||
const disabl = computed(() => {
|
||||
if (!datas.dialogImageUrl) return true
|
||||
return false
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
...toRefs(datas),
|
||||
...methods,
|
||||
disabl,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -30,13 +30,16 @@
|
||||
</el-upload>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose">取 消 上 传</el-button>
|
||||
<el-button type="primary" @click="uploadInformation" :disabled="disabl"
|
||||
>点 击 上 传</el-button
|
||||
>
|
||||
</span>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="handleClose">取 消 上 传</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="uploadInformation"
|
||||
:disabled="disabl"
|
||||
>点 击 上 传</el-button
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
@ -53,89 +56,101 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs, computed } from 'vue'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
|
||||
export default {
|
||||
name: 'uploadImg',
|
||||
data() {
|
||||
return {
|
||||
emits: ['uploadInformation', 'handleClose'],
|
||||
setup(props, ctx) {
|
||||
// 数据集合
|
||||
const datas = reactive({
|
||||
dialogVisible: false, //弹框默认隐藏
|
||||
dialogVisibles: false, // 放大的图片
|
||||
dialogImageUrl: '', // 上传的图片
|
||||
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
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 显示上传文件组件 */
|
||||
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() {
|
||||
// 通过computed获得baseupload
|
||||
const baseupload = computed(() => {
|
||||
return `${window.global_config.BASE_URL}upload/miniShop`
|
||||
},
|
||||
})
|
||||
|
||||
// 提交按钮是否可以点击
|
||||
disabl() {
|
||||
if (!this.dialogImageUrl) return true
|
||||
// 通过computed获得disabl
|
||||
const disabl = computed(() => {
|
||||
if (!datas.dialogImageUrl) return true
|
||||
return false
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
...toRefs(datas),
|
||||
...methods,
|
||||
baseupload,
|
||||
disabl,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -158,7 +173,7 @@ export default {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.el-icon-plus{
|
||||
.el-icon-plus {
|
||||
display: block;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user