|
|
|
|
@ -16,14 +16,10 @@ |
|
|
|
|
<el-footer> |
|
|
|
|
<el-button icon="el-icon-date"></el-button> |
|
|
|
|
<div class="ms-create-menu"> |
|
|
|
|
<el-dropdown placement='top' :hide-on-click='false'> |
|
|
|
|
<el-button type="primary">新建菜单</el-button> |
|
|
|
|
<el-dropdown-menu slot="dropdown"> |
|
|
|
|
<el-dropdown-item> |
|
|
|
|
<el-button type="text" icon='el-icon-plus'></el-button> |
|
|
|
|
</el-dropdown-item> |
|
|
|
|
</el-dropdown-menu> |
|
|
|
|
</el-dropdown> |
|
|
|
|
<div class="ms-create-sub-menu"> |
|
|
|
|
<el-button type="primary" @click='addSubMenuShow = !addSubMenuShow'>新建菜单</el-button> |
|
|
|
|
<el-button icon="el-icon-plus" v-show='addSubMenuShow'></el-button> |
|
|
|
|
</div> |
|
|
|
|
<el-button icon="el-icon-plus"></el-button> |
|
|
|
|
</div> |
|
|
|
|
</el-footer> |
|
|
|
|
@ -38,27 +34,14 @@ |
|
|
|
|
<el-input v-model="customMenuForm.name" size='mini'></el-input> |
|
|
|
|
<span>菜单名称字数不多于5个汉字或10个字母</span> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="菜单内容" prop='content'> |
|
|
|
|
<el-input v-model="customMenuForm.content"></el-input> |
|
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick"> |
|
|
|
|
<el-tab-pane label="图片" name="first"> |
|
|
|
|
<el-form-item label="菜单内容" class="ms-custom-menu-content"> |
|
|
|
|
<el-tabs v-model="activeName" @tab-click=""> |
|
|
|
|
<el-tab-pane label="图片" name="picture"> |
|
|
|
|
<span slot="label"><i class="el-icon-picture"></i>图片</span> |
|
|
|
|
<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" |
|
|
|
|
:on-preview="handlePictureCardPreview" :on-remove="handleRemove"> |
|
|
|
|
<i class="el-icon-plus"></i> |
|
|
|
|
</el-upload> |
|
|
|
|
<el-dialog :visible.sync="dialogVisible"> |
|
|
|
|
<img width="100%" :src="dialogImageUrl" alt=""> |
|
|
|
|
</el-dialog> |
|
|
|
|
<el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" |
|
|
|
|
:on-preview="handlePictureCardPreview" :on-remove="handleRemove"> |
|
|
|
|
<i class="el-icon-plus"></i> |
|
|
|
|
</el-upload> |
|
|
|
|
<el-dialog :visible.sync="dialogVisible"> |
|
|
|
|
<img width="100%" :src="dialogImageUrl" alt=""> |
|
|
|
|
</el-dialog> |
|
|
|
|
<div @click="open('store')"><i class="el-icon-picture-outline"></i><span>从素材库选择</span></div> |
|
|
|
|
<div @click="open('new')"><i class="el-icon-plus"></i><span>新建图片</span></div> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
<el-tab-pane label="图文管理" name="second"> |
|
|
|
|
<el-tab-pane label="图文管理" name="article"> |
|
|
|
|
<span slot="label"><i class="el-icon-picture"></i>图文管理</span> |
|
|
|
|
</el-tab-pane> |
|
|
|
|
</el-tabs> |
|
|
|
|
@ -77,38 +60,31 @@ |
|
|
|
|
data: { |
|
|
|
|
customMenuForm: { |
|
|
|
|
name: '', |
|
|
|
|
content: "", |
|
|
|
|
}, |
|
|
|
|
customMenuFormRules: { |
|
|
|
|
name: [{ |
|
|
|
|
required: true, |
|
|
|
|
message: '请输入菜单名称', |
|
|
|
|
trigger: 'blur' |
|
|
|
|
trigger: ['blur','change'] |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
min: 1, |
|
|
|
|
max: 5, |
|
|
|
|
message: '长度在 1 到 5 个字符', |
|
|
|
|
trigger: 'blur' |
|
|
|
|
trigger: ['blur','change'] |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
// content:[{ required: true, message: '请输入菜单名称', trigger: 'blur' }, |
|
|
|
|
// { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }] |
|
|
|
|
}, |
|
|
|
|
dialogImageUrl: '', |
|
|
|
|
dialogVisible: false, |
|
|
|
|
activeName: 'first' |
|
|
|
|
addSubMenuShow:false,//子菜单添加弹窗 |
|
|
|
|
activeName: 'picture' |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
handleRemove(file, fileList) { |
|
|
|
|
console.log(file, fileList); |
|
|
|
|
}, |
|
|
|
|
handlePictureCardPreview(file) { |
|
|
|
|
this.dialogImageUrl = file.url; |
|
|
|
|
this.dialogVisible = true; |
|
|
|
|
}, |
|
|
|
|
handleClick(tab, event) { |
|
|
|
|
console.log(tab, event); |
|
|
|
|
open:function(type){ |
|
|
|
|
if(type == 'store'){ |
|
|
|
|
// 素材库 |
|
|
|
|
}else{ |
|
|
|
|
// 新建图片 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
yinxr
7 years ago