console
vant.Toast.setDefaultOptions({ duration: 500 });
var vm = new Vue({
el: '#app',
data() {
return {
title: '测试',
value: '',
activeNames: ['1'],
list: [],
activeTabBar: 0,
dialogs: {
"标准型开场白": [
"男: 看你照片感觉你很善和喔，小朋友是不是都喜欢和你玩。",
"女: 这是夸我吗？",
"男: 哈哈，那你要公平的夸回我一下吗。",
],
"赞美型开场白": [
"男: 你眉毛很好看。",
"女: 谢谢",
"男: 跟我一样，帅帅的"
],
"幽默搞笑型开场白": [
"男: 我有个事要跟你说。是关于你的",
"女: 什么事情",
"男: 有没有人说你很可爱啊~",
"女: 其实我一点都不可爱",
"男: 所以在你可爱的外表下是有一颗抠脚大汉的心喽",
"女: 我打死你"
],
"打赌开场-引发她的好奇心": [
"男: 咱俩要不要打个赌？",
"女: 赌什么？",
"男: 我赌你现在肯定还没起床。",
"女: 那你还真赌对了。",
"男: 作为惩罚，今天让我给你带早餐吧！"
],
"语气暧昧的打招呼": [
"男: 小懒猪，太阳都晒屁股了，快快起床！",
"女: 要你管！",
"男: 你再不起床，我就去你家亲自喊你喽~",
"女: 别别别，你可真坏！"
],
"案例1": [
"男: 你是否知道你和仙女之间有怎样的区别？",
"女: 有什么区别",
"男: 仙女是可以在天上飞的，而你每天都在我的心里飞"
],
"俏皮开场": [
"男: 谁丑谁先说话",
"女: 哈哈，你这么谦虚，说自己丑",
"男: 我是抛砖引玉啊",
"女: 会说话",
]
},
loveWords: {
"晚安": [
"我要睡了 麻烦帮我关一下月亮",
"晚上不要梦到我，梦里陪聊是要收费的哦",
"快睡吧，养猪场这个钟点是催眠的时候",
"一块玻璃摔跤了，你猜它会说什么？晚安，我碎啦~",
"我才不要和你说晚安，我要和你一起睡",
"月亮不睡我不睡， 我是人间小美味",
"我可以陪你熬夜，也会劝你早睡，但最好的状态是一起睡",
"最近江湖不好混了，能不能进你怀里躲一躲.",
"希望这个世界很小，小到我一翻身便能看见你"
],
"加班,忙": [
"优秀人总要为世界多做一点奉献，更何况您还那么漂亮",
"最近我们公司有好几个项目要做，每天都忙成狗",
],
"早上": [
"晚起毁一上午，早起毁一天吖",
"早起的虫子有鸟吃/早起的鸟儿被虫吃",
"每天早上的第一个习惯，就是想起你那甜美的笑容",
"早上刚一起床，就有一股睡午觉的冲动"
],
"晚上": [
"活捉一只夜猫子/夜猫子在干嘛/这么晚不睡觉在干嘛",
"发美食图片(不超过3张)，然后发 馋一下你”或者“有没有诱惑到你",
"小夜猫子怎么还不睡",
],
"中午": [
"刚开完一个会议，到现在还没吃上饭，苦逼",
"读心术告诉我，你现在肯定吃完饭了，我是不是很厉害",
"才跟朋友吃完饭到家，吃的好饱"
],
"开场白": [
"哼哼，加了我也不说话",
"能不能和我拍个照，因为我要向同事证明，天使是存在的",
"我觉得你应该赔偿我，因为你的眼睛会放电，把我电蒙了",
"麻烦你把头像删掉，因为太美，我容易投入感情",
"看到你我有个问题！...你是今天这么可爱，还是天天都这么可爱？",
"恭喜你登上我们友谊的小船。(哈哈，会不会翻船？) 放心，有我在，我会人工呼吸[表情心形]",
"看你头像挺可爱的，交个朋友吧！(我又不认识你) 没有陌生的两个人，只有还没认识的朋友[表情心形]",
"恭喜你，多了一个欧巴好友，小可爱可以套路他了",
"我知道如果我给你发“你好，在吗美女”，你肯定不能回复我的",
"朋友圈那条狗和我家丢的狗很像啊",
"我现在浑身感觉充满了力量，刚刚在健身房锻炼了一个小时，现在回家洗澡",
"你们女人的第六感真准，我们男人在你们面前就好像没穿衣服",
"你打算要瘦成闪电让全天下所有的女人都嫉妒你吗",
"发现你一个特点，看你朋友圈发现你是个吃货哦",
],
"赞美式打招呼开场白": [
"你是我见过很特别的人，跟你在一起很开心",
"今天你朋友圈的照片真的好可爱，特别是你的碎花小裙子，可可爱爱没有脑袋",
"你朋友圈发的照片很不错，我很喜欢",
"你朋友圈更新的很快啊，我一直很关注你",
"看你发的朋友圈，觉得你是一个有内涵的人，我想跟这样的人交流",
"你的微信头像不错哟，很真实，我喜欢和真实的人交流",
"你头像做的很精致，发了不少时间把",
"朋友圈背景很有特色啊，怎么找到的啊",
"我们的第一个默契就是你的签名，我觉得感同身受",
"你的朋友圈充满正能量，你一定也是一个积极上身的人把",
"虽然你看起来很乖，但乖乖的外表下却隐藏着一颗不轻易认输的心",
"看你照片给我一种很文艺的感觉，而且文艺的女生一般都比较浪漫，你是这样的吗",
],
"有趣恶搞式打招呼": [
"凭我20多年算命的直觉，我感觉你的性格很像猫",
"你不出现，我这辈子就不爱了",
"和你擦肩而过，立马扫了下附近好友",
"愿你我的融合，会散发出浓浓的香味",
"感情的事如云聚云散，缘分是可遇不可求的风",
"我想找个人说说话，不是找个人，就想和你说",
"当我想起你，我感觉离你很近，离这个世界很远",
"在100码的速度中，我打开微信搜到的第一个人是你",
"你有脱俗不凡的气质在深深吸引者别人，难道你不知道吗",
"姐一直在模仿别人，一回头却发现，姐已超越了所有人",
"所以你这样的人才要活下去啊，因为只有活下去，才能报复这个忽略了你的世界",
],
"好奇开场": [
"我以前有很多爱好，现在就剩一个了",
"我刚才遇到了一个特别有意思的事",
"今天遇到一件特别好玩的事情",
"星座书上说我们今天适合聊天",
"好巧啊，你刚发的朋友圈照片我也在你附近。",
],
"亲密式打招呼": [
"咱们刚认识，我的心砰砰跳啊，你听到没",
"和你擦肩而过，立马扫了下附近好友",
"你不出现，我这辈子就不爱了",
"在100码的速度中，我打开微信搜到的较好个人是你",
"感情的事如云聚云散，缘分是可遇不可求的风",
"当我想起你，我感觉离你很近，离这个世界很远",
"姐一直在模仿别人，一回头却发现，姐已超越了所有人",
"我想找个人说说话，不是找个人，就想和你说",
"所以你这样的人才要活下去啊，因为只有活下去，才能报复这个忽略了你的世界",
"你有脱俗不凡的气质在深深吸引者别人，难道你不知道吗",
"愿你我的融合，会散发出浓浓的香味",
"你好，今天看见你就觉得缘分，结果上来就搜到了",
"妞，我又没有传染病你老躲着我干嘛啊，再聊会呗",
"我要让全世界的人知道，你这个磨人的小妖精被我承包了",
],
"最吸引人打招呼": [
"我莫名其妙地笑了，只正因想到了你",
"与你相见，是我最美的相遇",
"我要变成一只蚊子，每晚趁你熟睡叮你的大腿",
"最美不过下雨天，想和你一起躲在屋檐下",
"我无恶不作，希望你为民除害收了我",
"我们一起去外面吹吹风吧，我开飞机",
"我有上百种小辣条，现在考虑跟我做朋友还来得及",
"当你睡不着的时候告诉我，我过来给你唱催眠曲",
"我撑不了一片天，但是我能撑起你",
"你过得好不好，别人不知道，但你一胖，大家就都知道了",
"睡前不要关窗，我想爬进来看着你入睡",
"你，是我见过，最性感的背影",
"要不我吃点亏，晚上和你挤挤",
"为什么你打扮得这么漂亮，老在我面前晃，成心让我犯错呀？",
"你先回去做饭吧，我要等一会儿才回去",
"你人太好了，好得想让你来我这里住",
"自从和你相识以来，我平静的心湖再也无法平静了。你的芳姿，你的丽影",
"我想开了，没什么大不了，今晚你过来吧",
"我不知道该说什么，只是突然在这一刻很想吻你",
],
"情景开场": [
"我今天在面馆吃面的时候，进来一个衣衫褴褛的老奶奶，还拿着个碗问我要二十块钱坐车，要是换了你你给不给？",
"我这边电闪雷鸣风雨交加，你那边情况如何",
],
"圆场": []
}
}
},
computed: {
menus() {
return Object.keys(this.dialogs)
},
tabMenus() {
return Object.keys(this.loveWords)
}
},
mounted() {
console.log('this.tabMenus', this.tabMenus)
},
methods: {
onClickLeft() {
Toast('返回');
},
onClickRight() {
Toast('按钮');
},
formateDialog(dialogs) {
const reuslt = dialogs.map(d => {
return `<div>${d}</div>`
})
console.log(reuslt);
return [...reuslt]
},
copyWord(words) {
if (!words) return
if (words.indexOf(':') > -1) {
words = words.split(':')[1].trim()
}
this.textToClipboard(words)
},
textToClipboard(text) {
vant.Toast('复制成功!');
var dummy = document.createElement("textarea");
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand("copy");
document.body.removeChild(dummy);
},
onSearch(val) {
vant.Toast(val);
},
onCancel() {
vant.Toast('取消');
},
}
});
<div id="app">
<van-nav-bar title="Chat" left-text="" left-arrow>
<template #right>
<van-icon name="search" size="18" />
</template>
</van-nav-bar>
<div>
<van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
</div>
<van-tabs type="card" color="#1989fa">
<van-tab v-for="tab in tabMenus" :title="tab">
<div class="tab-content" v-for="(content, i) in loveWords[tab]">
<div @click="copyWord(`${content}`)">
{{ i + 1 }}: {{ content }}
</div>
</div>
</van-tab>
</van-tabs>
<van-collapse v-model="activeNames">
<van-collapse-item v-for="item in menus" :title="item">
<div v-for="(dialog, i) in dialogs[item]" class="tab-dialog">
<div @click="copyWord(`${dialog}`)">
{{ dialog }}
</div>
</div>
</van-collapse-item>
</van-collapse>
<van-pull-refresh>
<van-list finished-text="没有更多了">
<van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
</van-pull-refresh>
<van-tabbar v-model="activeTabBar">
<van-tabbar-item icon="home-o">标签</van-tabbar-item>
<van-tabbar-item icon="search">
搜索页
</van-tabbar-item>
<van-tabbar-item icon="friends-o">标签</van-tabbar-item>
<van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>
</div>
.van-tab__pane {
max-height: 200px;
overflow-y: auto;
}
.van-tabs__content,
.van-collapse-item__content {
background-color: #eee;
}
.van-cell__title {
font-weight: bold;
}
.tab-content {
padding: 8px 10px 8px 20px;
color: #333;
font-size: 14px;
line-height: 1.5;
word-break: break-word;
}
.tab-dialog {
color: #333;
}