文档章节

vue 仿写微信公众号自定义菜单

o
 osc_isezqdgg
发布于 2019/09/18 16:31
字数 1499
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

先看效果图

 

 

 

 

 

 

 

 

 

 

 代码参考

<template>
<div>
<!-- 公众号设置 -->
<el-col :span="24" style=" margin-top: 10px;">
<h2 style="font-weight: 300; margin-left: 20px; font-size: 22px;">公众号设置</h2>
<!-- 预览功能 -->

<div class="flex" v-if="openpreview"></div>
<div class="preview" v-if="openpreview">
<div class="previewcon">
<img class="previewimg" :src="previewimg" />
<div class="previewtextbot">
<div class="previewli"
:class="{'previewlione':list.length == 1,'previewlitwo':list.length == 2}"
v-for="(item,indx) in list" :key="indx" >
<div class="previewtianjia" v-if="previewtext == indx">
<a class="previewaddadd"
v-for="(item,index) in item.list"
:href="item.http" target="view_window"
:key="index">{{item.name}}</a>
<div class="previewarrow" v-if="item.list.length > 0"></div>
</div>
<div class="previewtext" v-if="item.list.length > 0" @click="preview(item,indx)">{{item.name}}</div>
<a class="previewtext" v-if="item.list.length == 0"
:href="item.http" target="view_window"
@click="preview(item,indx)">{{item.name}}</a>
</div>
</div>
</div>
<el-button type="primary" style="display: block;margin: 10px auto;" @click="out">退出预览</el-button>
</div>

<!-- <el-col :span="12" :offset="6">
<div class="grid-content bg-purple warning">
<p>
<i class="el-icon-warning tips"></i>温馨提示:
<span class="on">立即授权</span>
</p>
<p>微信公众号提现需要特约商户签约,材料交给我们代为提交。签约费用500元</p>
</div>
</el-col> -->
<el-col :span="24" style=" margin-top: 30px;">
<el-col :span="5" class="left">
<img class="top" :src="top" />
<img class="bottom" :src="bottom" />
<div style="background: #F4F5F9; min-height: 438px; position: absolute;
         top: 63px; width: 320px; ">
</div>
<div class="textbot">
<div class="li" v-for="(item,indx) in list" :key="indx" >
<div v-if="activeClass == indx">
<div class="add" @click="add(indx)">
<i class="el-icon-plus"></i>
<div class="arrow"></div>
</div>
<div class="tianjia">
<div class="addadd" v-for="(item,index) in item.list" :key="index"
:class="addindex == index ? 'active':''" @click="gettem(item,index)">{{item.name}}</div>
</div>
</div>
<div class="text" :class="activeClass == indx ? 'active':''" @click="getItem(item,indx)">{{item.name}}</div>
</div>
<div class="li" v-if="list.length < 3">
<div class="text" @click="addtext"><i class="el-icon-plus"></i></div>
</div>
</div>
</el-col>

<el-col :span="15" style=" padding-left: 20px;">
<el-card class="box-card right">
<div slot="header" class="clearfix">
<span>{{input}}</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="delet">删除子菜单</el-button>
</div>
<div style="display: flex;">
<label style="line-height: 34px; width:80px;">菜单名称</label>
<el-input v-model="input" placeholder="请输入内容" style="width:70%;" ></el-input>
</div>
<p style="color: #9A8D8D;margin-left: 80px;">仅支持中英文和数字,字数不超过4个汉字或8个字母</p>
<div style="display: flex;">
<label style="line-height: 34px; width:80px;">菜单内容</label>
<el-radio-group v-model="radio" style="line-height: 45px;">
<el-radio :label="1">平台模板</el-radio>
<el-radio :label="2">跳转的网页</el-radio>
</el-radio-group>
</div>
<div style="background: #fff;padding:10px 0;" v-if="radio == 1">
<el-radio-group v-model="radiobottom" style="padding:0 30px;">
<p style="margin: 8px 0;" v-for="(item,index) in listlist" :key="index">
<el-radio :label="index">{{item.name}}{{item.http}}</el-radio>
</p>
</el-radio-group>
</div>
<div style="background: #fff;padding:10px 0;" v-if="radio == 2">
<p style="color: #9A8D8D;margin-left: 30px;">订阅者点击该子菜单会跳到以下链接</p>
<div style="display: flex; padding:0 30px;">
<label style="line-height: 34px; width:65px;">页面地址</label>
<el-input v-model="inputhttp" placeholder="请输入内容" style="width:70%;"></el-input>
</div>
</div>
</el-card>
</el-col>
<el-col :span="24">
<el-button style="display: block;margin: 10px auto;" @click="open">打开预览</el-button>
<el-button type="primary" style="display: block;margin: 10px auto;">保存并发布</el-button>
</el-col>
</el-col>
</el-col>
</div>
</template>
<script>
export default {
data () {
return {
previewimg: '../static/img/previewimg.png',
previewtext: 0,
openpreview: false,
top: '../static/img/top.png',
bottom: '../static/img/bottom.png',
activeClass: 0,
addindex: -1,
input: '',
inputhttp: '',
radio: 1,
radiobottom: 0,
shu: 6,
id: 1,

list: [
{ name: '菜单一', http: 'https://www.baidu.com/', id: 1, list: [{ 'name': '我是1', http: 'https://www.baidu.com/', id: 4 }] },
{ name: '菜单二', http: 'https://www.baidu.com/', id: 2, list: [{ 'name': '我是2', http: 'https://www.baidu.com/', id: 5 }] },
{ name: '菜单三', http: 'https://www.baidu.com/', id: 3, list: [{ 'name': '我是3', http: 'https://www.baidu.com/', id: 6 }] }
],
listlist: []
}
},
mounted () {
this.rech()
this.input = this.list[0].name
this.inputhttp = this.list[0].http
},
watch: {
// 如果 `input` 发生改变,这个函数就会运行
input: function () {
for (var i = 0; i < this.list.length; i++) {
for (var j = 0; j < this.list[i].list.length; j++) {
if (this.list[i].list[j].id === this.id) {
this.list[i].list[j].name = this.input
}
}
if (this.list[i].id === this.id) {
this.list[i].name = this.input
}
}
this.rech()
// 限制名字个数
var temp = 0
for (var k = 0; k < this.input.length; k++) {
if (/[\u4e00-\u9fa5]/.test(this.input[k])) {
temp += 2
} else {
temp++
}
if (temp > 8) {
this.input = this.input.substr(0, k)
this.$message({
message: '仅支持中英文和数字,字数不超过4个汉字或8个字母',
type: 'warning'
})
}
}
},
inputhttp: function () {
for (var i = 0; i < this.list.length; i++) {
for (var j = 0; j < this.list[i].list.length; j++) {
if (this.list[i].list[j].id === this.id) {
this.list[i].list[j].http = this.inputhttp
}
}
if (this.list[i].id === this.id) {
this.list[i].http = this.inputhttp
}
}
this.rech()
}
},
methods: {
out () {
this.openpreview = false
},
open () {
this.openpreview = true
},
preview (item, index) {
this.previewtext = index
},
// 父元素
getItem (item, index) {
this.addindex = -1
this.activeClass = index // 把当前点击元素的index,赋值给activeClass
this.input = item.name
this.inputhttp = item.http
this.id = item.id
this.rech()
},
// 子元素
gettem (item, index) {
this.addindex = index
console.log(item)
this.input = item.name
this.inputhttp = item.http
this.id = item.id
this.rech()
},
// 增加
add (index) {
this.shu++
this.list[index].list.push({
'name': '子菜单' + this.shu, http: 'https://www.baidu.com/', id: this.shu
})
this.rech()
},
addtext () {
this.shu++
this.list.push({
'name': '菜单' + this.shu, http: 'https://www.baidu.com/', id: this.shu, list: []
})
this.rech()
},
// 删除
delet () {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
for (var i = 0; i < this.list.length; i++) {
for (var j = 0; j < this.list[i].list.length; j++) {
if (this.list[i].list[j].id === this.id) {
this.list[i].list.splice(j, 1)
this.addindex = -1
this.rech()
this.$message({
type: 'success',
message: '删除成功!'
})
}
}
if (this.list[i].id === this.id) {
this.list.splice(i, 1)
this.activeClass = -1
this.rech()
this.$message({
type: 'success',
message: '删除成功!'
})
}
}
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
rech () {
this.listlist = []
this.list.forEach(item => {
this.listlist.push({
name: item.name,
http: item.http
})
item.list.forEach(item => {
this.listlist.push({
name: item.name,
http: item.http
})
})
})
for (var i = 0; i < this.listlist.length; i++) {
if (this.listlist[i].name === this.input) {
this.radiobottom = i
}
}
}
}
}
</script>

<style lang="scss" scoped>
*{
// css页面点击文字出现蓝色底色去掉方法
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
.flex{
position: fixed;
background: #000000;
opacity: 0.5;
top: 0px;
left: 0px;
width: 100%;
  height: 100%;
z-index: 99;
}

.preview{
position: fixed;
top: 15%;
left: 45%;
z-index: 99;
}
.previewcon{
position: relative;
}
.previewtextbot {
position: absolute;
bottom: 93px;
left: 65px;
width: 100%;
}
.previewtext{
height: 36px;
display: block;
text-decoration:none; //去掉默认下滑线
color:#999; //设置默认颜色
}
.previewli {
float: left;
width: 78px;
line-height: 36px;
border: 1px solid #E7E7EB;
background: #FAFAFA;
text-align: center;
cursor: pointer;
color: #999;
position: relative;
}
.previewlione{
width: 233px !important;
}
.previewlitwo{
width: 117px !important;
}
.previewtianjia {
position: absolute;
bottom: 55px;
width: 100%;
line-height: 36px;
background: #FAFAFA;
}

.previewaddadd {
width: 100%;
line-height: 36px;
border: 1px solid #E7E7EB;
background: #fff;
height: 36px;
display: block;
text-decoration:none; //去掉默认下滑线
color:#999; //设置默认颜色
}
.previewarrow{
position: absolute;
bottom: -15px;
left: 44%;
/* 圆角的位置需要细心调试哦 */
width: 0;
height: 0;
font-size: 0;
border: solid 8px;
border-color:#fff #E6E6E6 #E6E6E6 #E6E6E6;
}
.warning {
border: 1px solid #91d5ff;
background-color: #e6f7ff;
padding: 5px 20px;
}

.on {
text-align: right;
float: right;
color: #1890ff;
}

.tips {
color: #1890ff;
font-size: 20px;
margin-right: 10px;
}

.left {
min-width: 390px;
min-height: 550px;
position: relative;
padding-left: 40px;
}

.top {
position: absolute;
top: 0px;
}

.bottom {
position: absolute;
bottom: 0px;
}

.textbot {
position: absolute;
bottom: 0px;
left: 82px;
width: 100%;
}

.active {
border: 1px solid #44B549 !important;
color: #44B549 !important;
}

.li {
float: left;
width: 93px;
line-height: 48px;
border: 1px solid #E7E7EB;
background: #FAFAFA;
text-align: center;
cursor: pointer;
color: #999;
position: relative;
}
.text{
height: 50px;
}
.text:hover {
color: #000;
}

.add {
position: absolute;
bottom: 65px;
width: 100%;
line-height: 48px;
border: 1px solid #E7E7EB;
background: #FAFAFA;
}
.arrow {
position: absolute;
bottom: -16px;
left: 36px;
/* 圆角的位置需要细心调试哦 */
width: 0;
height: 0;
font-size: 0;
border: solid 8px;
border-color:#fff #F4F5F9 #F4F5F9 #F4F5F9;
}
.tianjia {
position: absolute;
bottom: 115px;
width: 100%;
line-height: 48px;
background: #FAFAFA;
}

.addadd {
width: 100%;
line-height: 48px;
border: 1px solid #E7E7EB;
background: #FAFAFA;
height: 48px;
}

.right {
background: #F4F5F9;
min-height: 550px;
 
}
</style>


 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
vue+h5仿微信网页版聊天室vueWebChat项目

很早之前就有使用html5技术开发过一个web版仿微信、微博聊天,后来想着用vue技术开发一版,后面由于各种事情,一直没能落定。最近有些空闲就使用vue开发了一个vueWechat聊天室IM项目。 基于V...

xiaoyan2015
2019/05/01
0
0
vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

一、项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室——vueWebChat,实现了发送消息、表情(动图),图片、视频...

osc_fjbsh38p
2019/04/30
14
0
uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面

一、介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息、表情(gif图),图片预览、地图位置、长按菜单、红...

osc_pw143nru
2019/10/10
83
0
Vue之自建管理后台(一)准备工作

完成最基础的Vue环境及新建一个vue项目。 一般来说,我们拿到一个项目需求或者得到一个需求的时候,第一件应该做的事情不是立马坐在电脑前面去写代码,如果你这么做的,好吧。。。我只能暂时...

osc_lrhq0eax
2019/08/30
12
0
VUE前端框架

Vue 入门实战项目——知乎日报 这是一个基于 Vue 全家桶开发的知乎日报 WebApp,页面样式主要参考 iOS 版知乎日报 APP Vue 超大数据列表解决方案 vue-recyclerview 开源 Vue 超大数据列表解决...

掘金官方
2018/01/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用命名管道承载gRPC

最近GRPC很火,感觉整RPC不用GRPC都快跟不上时髦了。 gRPC设计 gRPC是一种与语言无关的高性能远程过程调用 (RPC) 框架。刚好需要使用一个的RPC应用系统,自然而然就盯上了它,但是它真能够解...

osc_nq69o22c
52分钟前
16
0
06-敏捷开发框架-apis 脚本库 引用位置无关性设计

动态引入技术的设计,对我们来说非常重要。 同时也说明动态语言的使用对我们来说也是非常重要。 没有动态语言的支撑,有些想法可能不容易实现,或者有替代方案,可能会花更大的代价。 前端开...

osc_5zg9z6t1
54分钟前
21
0
(三)学习了解OrchardCore笔记——灵魂中间件ModularTenantContainerMiddleware的第一行①的模块部分

  了解到了OrchardCore主要由两个中间件(ModularTenantContainerMiddleware和ModularTenantRouterMiddleware)构成,下面开始了解ModularTenantContainerMiddleware中间件第一行代码。   ...

osc_kdarxvx0
56分钟前
15
0
50Mn18Cr4V锻锻环件

电机无磁护环怎么锻性能才能《高高》?50Mn18Cr4V高锰无磁钢在变形温度为900~1 100℃、应变速率为0.1 ~10s-1条件下的热变形行为. 结果,VC第二相的应变诱导析出对50Mn18Cr4V的热变形行为产生...

无磁钢
56分钟前
16
0
【遇见offer】一汽-大众实习生专场来啦!成长+学习+福利,一个也不能少~

在上次一汽-大众的社招直播之后,实习生的专场招聘也终于来啦! 针对2020年暑期,我们提供了非常多的实习岗位给大家选择。 如果你想得到大厂实习的宝贵经验,如果你想得到更快速的成长,如果...

osc_b88oux8w
57分钟前
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部